[promote production] April 30 2024 10:123 PM (#20)

* [Client]: Refactoring Register UI & Adding more UI components (#17)

* [client]: refactoring register ui

* Add Zustand state management library

* [Client]: Adding more UI components (#19)

* Update README.md

* fixing build issues

Author: drbarzaga

README.md

@@ -20,13 +20,15 @@
 - Company representatives can view a list of job applicants and can contact them, initiative an interview, or perform some other action related to their post.
 - Registered users should be able to search for jobs and filter the results based on location, required skills, salary, experience level, etc
 
-## What will we developing?
+## Screenshots
 
-<img width="1512" alt="image" src="https://github.com/drbarzaga/JobPortal/assets/12173976/99bbf7cb-383a-4f4d-b0f6-9985bcc60dfb">
+<img width="1512" alt="image" src="https://github.com/drbarzaga/JobPortal/assets/12173976/6d92db8e-d423-4667-adff-206aa6837c87">
 
-<img width="1512" alt="image" src="https://github.com/drbarzaga/JobPortal/assets/12173976/27b31105-8a50-492c-a930-75476e4d8735">
+<img width="1512" alt="image" src="https://github.com/drbarzaga/JobPortal/assets/12173976/94ed6f7d-953b-41ae-99ec-b65f83dab8bd">
 
-<img width="1512" alt="image" src="https://github.com/drbarzaga/job-portal/assets/12173976/f83f4a80-fd5f-49f5-b519-f6bb4f9260e5">
+<img width="1512" alt="image" src="https://github.com/drbarzaga/JobPortal/assets/12173976/91ada9b1-cde7-46f7-a072-b0bb8321a64f">
+
+<img width="1512" alt="image" src="https://github.com/drbarzaga/JobPortal/assets/12173976/11e3338b-692a-4914-a8ee-d1af804f7b75">
 
 ## Tech Stack
 

client/public/assets/images/layouts/public_layout_cover.jpg

@@ -1,8 +1,8 @@
-import { Suspense, lazy } from "react";
+import { lazy } from "react";
 import { PrivateRoute } from "@/components/routers";
 import HomePage from "@/pages/HomePage";
-import { AuthProvider } from "@/providers";
-import { Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import AppWrapper from "./AppWrapper";
 
 const LoginPage = lazy(() => import("@/pages/AuthPages/LoginPage"));
 const RegisterPage = lazy(() => import("@/pages/AuthPages/RegisterPage"));
@@ -12,9 +12,9 @@ const ForgotPasswordPage = lazy(
 
 function App() {
   return (
-    <AuthProvider>
-      <Suspense fallback={<div>Loading...</div>}>
-        <Routes>
+    <BrowserRouter>
+      <Routes>
+        <Route element={<AppWrapper />}>
           {/* Public routes */}
           <Route path="/login" element={<LoginPage />} />
           <Route path="/register" element={<RegisterPage />} />
@@ -27,9 +27,9 @@ function App() {
 
           {/* 404 route */}
           <Route path="*" element={<div>Not found page!</div>} />
-        </Routes>
-      </Suspense>
-    </AuthProvider>
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 }
 

client/src/App.tsx

@@ -0,0 +1,13 @@
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import SuspenseLoader from "@/components/loaders/SuspenseLoader";
+
+const AppWrapper = () => {
+  return (
+    <Suspense fallback={<SuspenseLoader />}>
+      <Outlet />
+    </Suspense>
+  );
+};
+
+export default AppWrapper;

client/src/AppWrapper.tsx

@@ -3,7 +3,7 @@ import {
   ExclamationTriangleIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-import { FC, useEffect, useState } from "react";
+import { FC, useState } from "react";
 
 type Props = {
   message: string;
@@ -13,16 +13,6 @@ type Props = {
 const Alert: FC<Props> = ({ message, type }) => {
   const [show, setShow] = useState(true);
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setShow(false);
-    }, 2000);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
-
   const getAlertColor = () => {
     switch (type) {
       case "success":

client/src/components/core-ui/Alert/Alert.tsx

@@ -10,6 +10,8 @@ const TopBarProgress = () => {
     loadingBarRef.current.continuousStart();
 
     return () => {
+      if (!loadingBarRef.current) return;
+
       loadingBarRef.current.complete();
     };
   }, []);

client/src/components/core-ui/TopBarProgress/TopBarProgress.tsx

@@ -18,7 +18,7 @@ const PublicLayout: FC<Props> = ({ title, children }) => {
         <div className="relative hidden w-0 flex-1 lg:block">
           <img
             className="absolute inset-0 h-full w-full object-cover"
-            src="https://images.unsplash.com/photo-1496917756835-20cb06e75b4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1908&q=80"
+            src="/assets/images/layouts/public_layout_cover.jpg"
             alt=""
           />
         </div>

client/src/components/layouts/public/PublicLayout.tsx

@@ -0,0 +1,11 @@
+const SuspenseLoader = () => {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="w-8 h-8 border-2 border-t-4 border-gray-200 rounded-full animate-spin"></div>
+
+      <div className="ml-2 text-sm text-gray-700">Loading...</div>
+    </div>
+  );
+};
+
+export default SuspenseLoader;

client/src/components/loaders/SuspenseLoader/SuspenseLoader.tsx

@@ -0,0 +1 @@
+export { default } from "./SuspenseLoader";

client/src/components/loaders/SuspenseLoader/index.ts

@@ -46,6 +46,7 @@ const useRegisterForm = () => {
   const form = useFormik({
     initialValues: FORM_INITIAL_VALUES,
     validationSchema: validationSchema,
+    validateOnChange: false,
     onSubmit: async (values, { setSubmitting }) => {
       try {
         setSubmitting(true);

client/src/forms/auth/RegisterForm/useRegisterForm.ts

@@ -2,12 +2,12 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
-import { BrowserRouter } from "react-router-dom";
+import { AuthProvider } from "./providers/index.ts";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <BrowserRouter>
+    <AuthProvider>
       <App />
-    </BrowserRouter>
+    </AuthProvider>
   </React.StrictMode>
 );