fix: display list of responses

Author: spaceless

package.json

@@ -13,6 +13,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.6",
+    "@reduxjs/toolkit": "^2.2.1",
     "axios": "^1.6.5",
     "formik": "^2.4.5",
     "p-limit": "^5.0.0",

src/App.tsx

@@ -1,14 +1,25 @@
 import { Button, Card } from "@mui/material";
 import { useFormik } from "formik";
 import { FC, useState } from "react";
+import { useDispatch } from "react-redux";
 
+import { ResponseCard } from "./components/ResponseCard";
 import { Input } from "./components/UI";
+import { useAppSelector } from "./hooks/use-app-selector";
 import { inputSchema } from "./schemas";
+import { responseActions } from "./store/response/slice";
+import { Response } from "./store/response/types";
 import { FormValues } from "./types";
 import { doWorkWithLimit } from "./utils";
 
 const App: FC = () => {
   const [isStarted, setIsStarted] = useState(false);
+  const { responseData } = useAppSelector((state) => state.responses);
+  const dispatch = useDispatch();
+
+  const handleResponse = (response: Response) => {
+    dispatch(responseActions.pushResponse(response));
+  };
 
   const formik = useFormik<FormValues>({
     initialValues: { limit: 0 },
@@ -17,7 +28,7 @@ const App: FC = () => {
       console.log("submit");
       setIsStarted(true);
 
-      await doWorkWithLimit(limit);
+      await doWorkWithLimit(limit, handleResponse);
 
       setIsStarted(false);
     },
@@ -28,7 +39,7 @@ const App: FC = () => {
   };
 
   return (
-    <div className="flex h-screen w-full flex-col items-center p-4">
+    <div className="flex w-full flex-col items-center p-4">
       <Card className="flex w-full flex-col gap-2 p-2 sm:w-1/2 sm:max-w-[600px]">
         <Input
           id="limit"
@@ -51,6 +62,12 @@ const App: FC = () => {
           </Button>
         </div>
       </Card>
+
+      <div className="mt-4 flex flex-col gap-4 overflow-auto p-2">
+        {responseData.map((response) => {
+          return <ResponseCard key={response.index} response={response} />;
+        })}
+      </div>
     </div>
   );
 };

yarn.lock

@@ -531,6 +531,16 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@reduxjs/toolkit@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.2.1.tgz#3dce4906fb33da9e0122468ef21438dd7f2277a9"
+  integrity sha512-8CREoqJovQW/5I4yvvijm/emUiCCmcs4Ev4XPWd4mizSO+dD3g5G6w34QK5AGeNrSH7qM8Fl66j4vuV7dpOdkw==
+  dependencies:
+    immer "^10.0.3"
+    redux "^5.0.1"
+    redux-thunk "^3.1.0"
+    reselect "^5.0.1"
+
 "@remix-run/router@1.15.0":
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.0.tgz#461a952c2872dd82c8b2e9b74c4dfaff569123e2"
@@ -1981,6 +1991,11 @@ ignore@^5.2.0, ignore@^5.2.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
+immer@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.0.3.tgz#a8de42065e964aa3edf6afc282dfc7f7f34ae3c9"
+  integrity sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -2812,6 +2827,16 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+redux-thunk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-3.1.0.tgz#94aa6e04977c30e14e892eae84978c1af6058ff3"
+  integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
+
+redux@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-5.0.1.tgz#97fa26881ce5746500125585d5642c77b6e9447b"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
+
 reflect.getprototypeof@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.5.tgz#e0bd28b597518f16edaf9c0e292c631eb13e0674"
@@ -2840,6 +2865,11 @@ regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.2:
     es-errors "^1.3.0"
     set-function-name "^2.0.1"
 
+reselect@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.0.tgz#c479139ab9dd91be4d9c764a7f3868210ef8cd21"
+  integrity sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"