ES-401 (mosip#18)

* chore: change query hook from verb to noun * chore: adapt naming convention * chore: use tanstack query and dev tool * fix: fix registration type imports * fix: resolve validate dom nesting * feat: check account status * fix: remove duplicates * feat: redirect user to next step * chore: rename type --------- Co-authored-by: Bunsy <[email protected]> Signed-off-by: Sreang Rathanak <[email protected]>
rathanak-0080 · Jan 15, 2024 · eb95e08 · eb95e08
1 parent 71d544a
commit eb95e08
Show file tree

Hide file tree

Showing 17 changed files with 434 additions and 268 deletions.
diff --git a/signup-ui/package-lock.json b/signup-ui/package-lock.json
diff --git a/signup-ui/package.json b/signup-ui/package.json
@@ -14,6 +14,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@tailwindcss/line-clamp": "^0.4.4",
+    "@tanstack/react-query": "^5.8.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -79,6 +80,7 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
+    "@tanstack/react-query-devtools": "^5.8.4",
     "@types/lodash": "^4.14.200",
     "@types/react-google-recaptcha": "^2.1.7",
     "autoprefixer": "^10.4.16",

diff --git a/signup-ui/src/App.tsx b/signup-ui/src/App.tsx
@@ -1,8 +1,9 @@
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Inspector, InspectParams } from "react-dev-inspector";
-import { QueryClient, QueryClientProvider } from "react-query";
 
 import "./App.css";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter } from "react-router-dom";
 
 import Footer from "~components/ui/footer";
@@ -17,9 +18,9 @@ import Footer from "~components/ui/footer";
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 60 * 1000, // 60 seconds,
+      staleTime: Infinity,
       retry: (failureCount, error) => {
-        // Do not retry on 4xx error codes.
+        // Do not retry on 4xx error codes
         if (error instanceof HttpError && String(error.code).startsWith("4")) {
           return false;
         }
@@ -56,6 +57,10 @@ function App() {
           <AppRouter />
         </BrowserRouter>
         <Footer />
+        <ReactQueryDevtools
+          initialIsOpen={false}
+          buttonPosition="bottom-left"
+        />
       </QueryClientProvider>
     </div>
   );

diff --git a/signup-ui/src/components/ui/step.tsx b/signup-ui/src/components/ui/step.tsx
@@ -48,7 +48,7 @@ const StepDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={cn("text-sm text-center text-gray-500", className)}
     {...props}

diff --git a/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/AccountRegistrationStatus.tsx b/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/AccountRegistrationStatus.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useState } from "react";
+import { UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { Icons } from "~components/ui/icons";
+import { Step, StepContent, StepHeader, StepTitle } from "~components/ui/step";
+import { RegistrationWithFailedStatus, SettingsDto } from "~typings/types";
+
+import { useRegistrationStatus } from "../queries";
+import { useSignUpContext } from "../SignUpContext";
+import { SignUpForm } from "../SignUpPage";
+
+interface StatusProps {
+  settings: SettingsDto;
+  methods: UseFormReturn<SignUpForm, any, undefined>;
+}
+
+export const AccountRegistrationStatus = ({
+  methods,
+  settings,
+}: StatusProps) => {
+  const { t } = useTranslation();
+
+  const { setActiveStep } = useSignUpContext();
+  const { trigger } = methods;
+
+  const { data: registrationStatus, isError } = useRegistrationStatus(
+    settings.response.configs["status.request.limit"],
+    settings.response.configs["status.request.delay"]
+  );
+
+  useEffect(() => {
+    if (isError) {
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    }
+
+    if (
+      registrationStatus?.response.status ===
+      RegistrationWithFailedStatus.FAILED
+    ) {
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    }
+    if (
+      registrationStatus?.response.status ===
+      RegistrationWithFailedStatus.COMPLETED
+    ) {
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    }
+  }, [registrationStatus, settings.response.configs, isError, setActiveStep]);
+
+  return (
+    <Step>
+      <div className="p-16">
+        <StepHeader>
+          <StepTitle>
+            <Icons.loader className="h-20 w-20 animate-spin text-orange-500" />
+          </StepTitle>
+        </StepHeader>
+        <StepContent>
+          <div className="flex flex-col items-center gap-4 px-4">
+            <h1 className="text-center text-2xl font-semibold">
+              {t("setup_progress")}
+            </h1>
+            <p className="text-center text-sm text-gray-500">
+              {t("setup_progress_wait")}
+            </p>
+          </div>
+        </StepContent>
+      </div>
+    </Step>
+  );
+};
diff --git a/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/index.ts b/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/index.ts
@@ -0,0 +1 @@
+export { AccountRegistrationStatus as default } from "./AccountRegistrationStatus";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { AccountRegistrationStatus as default } from "./AccountRegistrationStatus";