[promote-production] May 4, 2:12 PM (#30)

drbarzaga · Alabao · web-flow · commit 1731a1b9e92e · 2024-05-04T14:12:41.000-03:00
* [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 * Update README.md * [Client]: UI Adjustments (#21) * [client]: integrating sign-in with api (#22) * Update README.md * Readme install changes and .gitignore config for IDEs. (#25) * Add .gitignore ides config folders * Add to readme yarn install version and one npm command. * [client-server]: general adjustments (#28) * Update README.md (#29) --------- Co-authored-by: Rubier Sorio <44210088+Alabao@users.noreply.github.com>
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,38 +1,47 @@
 import { lazy } from "react";
-import { PrivateRoute } from "@/components/routers";
 import HomePage from "@/pages/HomePage";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import AppWrapper from "./AppWrapper";
+import { useAuth } from "./providers";
 
 const LoginPage = lazy(() => import("@/pages/AuthPages/LoginPage"));
 const RegisterPage = lazy(() => import("@/pages/AuthPages/RegisterPage"));
 const ForgotPasswordPage = lazy(
   () => import("@/pages/AuthPages/ForgotPasswordPage")
 );
+const MyJobsPage = lazy(() => import("@/pages/MyJobsPage"));
+const SavedJobsPage = lazy(() => import("@/pages/SavedJobsPage"));
+const MessagesPage = lazy(() => import("@/pages/MessagesPage"));
+const ProfilePage = lazy(() => import("@/pages/ProfilePage"));
 
 function App() {
+  const { isAuthenticated } = useAuth();
   return (
     <BrowserRouter>
-      <Routes>
-        <Route element={<AppWrapper />}>
-          {/* Public routes */}
-          <Route path="/" element={<HomePage />} />
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/register" element={<RegisterPage />} />
-          <Route path="/forgot-password" element={<ForgotPasswordPage />} />
-
-          {/* Private route using PrivateRoute component */}
-          <Route path="/" element={<PrivateRoute />}>
-            {/* <Route path="/" element={<HomePage />} /> */}
-            <Route path="/my-jobs" element={<div>My Jobs</div>} />
-            <Route path="/saved-jobs" element={<div>Saved Jobs</div>} />
-            <Route path="/messages" element={<div>Messages</div>} />
+      {isAuthenticated ? (
+        <Routes>
+          <Route path="/" element={<AppWrapper />}>
+            <Route index element={<HomePage />} />
+            <Route path="/my-jobs" element={<MyJobsPage />} />
+            <Route path="/saved-jobs" element={<SavedJobsPage />} />
+            <Route path="/messages" element={<MessagesPage />} />
+            <Route path="/profile" element={<ProfilePage />} />
+            <Route path="/login" element={<Navigate to="/" />} />
+            <Route path="/register" element={<Navigate to="/" />} />
+            <Route path="/forgot-password" element={<Navigate to="/" />} />
           </Route>
-
-          {/* 404 route */}
-          <Route path="*" element={<div>Not found page!</div>} />
-        </Route>
-      </Routes>
+        </Routes>
+      ) : (
+        <Routes>
+          <Route path="/" element={<AppWrapper />}>
+            <Route index element={<HomePage />} />
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/register" element={<RegisterPage />} />
+            <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+            <Route path="*" element={<Navigate to="/login" />} />
+          </Route>
+        </Routes>
+      )}
     </BrowserRouter>
   );
 }
diff --git a/client/src/components/layouts/portal/PortalLayout.tsx b/client/src/components/layouts/portal/PortalLayout.tsx
@@ -15,7 +15,7 @@ const PortalLayout: FC<Props> = ({ title, children }) => {
     <div className="flex flex-col bg-gray-50">
       <Header />
 
-      <div className="mx-auto flex w-full items-start gap-x-8 px-4 py-10 sm:px-6 lg:px-8">
+      <div className="mx-auto flex w-full items-start gap-x-8 px-4 py-10 sm:px-6 lg:px-8 h-full">
         {children}
       </div>
 
diff --git a/client/src/components/layouts/portal/components/Footer/Footer.tsx b/client/src/components/layouts/portal/components/Footer/Footer.tsx
@@ -80,7 +80,15 @@ const Footer = () => {
         </div>
         <div className="mt-8 md:order-1 md:mt-0">
           <p className="text-center text-xs leading-5 text-gray-500">
-            &copy; {new Date().getFullYear()} Job Portal. All rights reserved.
+            &copy; {new Date().getFullYear()} Job Portal. Made with ❤️ by all
+            the{" "}
+            <a
+              href="https://github.com/drbarzaga/JobPortal?tab=readme-ov-file#our-contributors-"
+              className="font-semibold text-indigo-600 hover:text-gray-900"
+              target="_blank"
+            >
+              Contributors
+            </a>
           </p>
         </div>
       </div>
diff --git a/client/src/components/layouts/portal/components/Header/Header.tsx b/client/src/components/layouts/portal/components/Header/Header.tsx
@@ -5,12 +5,11 @@ import {
   XMarkIcon,
   HomeIcon,
   BriefcaseIcon,
-  DocumentTextIcon,
-  BookmarkIcon,
   ChatBubbleLeftRightIcon,
   UserIcon,
   Cog8ToothIcon,
   ArrowLeftStartOnRectangleIcon,
+  BookmarkIcon,
 } from "@heroicons/react/24/outline";
 import { Dialog, Menu, Transition } from "@headlessui/react";
 import { useAuth } from "@/providers";
@@ -24,11 +23,10 @@ const Header = () => {
   const navigation = useMemo(() => {
     if (isAuthenticated) {
       return [
-        { name: "Home", href: "#", icon: HomeIcon },
-        { name: "Find Jobs", href: "#", icon: BriefcaseIcon },
-        { name: "My Jobs", href: "#", icon: DocumentTextIcon },
-        { name: "Saved Jobs", href: "#", icon: BookmarkIcon },
-        { name: "Messages", href: "#", icon: ChatBubbleLeftRightIcon },
+        { name: "Home", href: "/", icon: HomeIcon },
+        { name: "My Jobs", href: "/my-jobs", icon: BriefcaseIcon },
+        { name: "Saved Jobs", href: "/saved-jobs", icon: BookmarkIcon },
+        { name: "Messages", href: "/messages", icon: ChatBubbleLeftRightIcon },
       ];
     }
 
@@ -56,14 +54,18 @@ const Header = () => {
         </div>
         <div className="hidden lg:flex lg:gap-x-12">
           {navigation.map((item) => (
-            <a
+            <Link
               key={item.name}
-              href={item.href}
-              className="text-sm font-semibold leading-6 text-gray-900 flex items-center gap-x-2"
+              to={item.href}
+              className={`text-sm font-semibold leading-6 text-gray-900 flex items-center gap-x-2 ${
+                window.location.pathname === item.href
+                  ? "text-indigo-600"
+                  : "hover:text-indigo-600"
+              }`}
             >
               {item.icon && <item.icon className="h-6 w-6" />}
               {item.name}
-            </a>
+            </Link>
           ))}
         </div>
         {isAuthenticated ? (
@@ -191,14 +193,10 @@ const Header = () => {
         <div className="fixed inset-0 z-10" />
         <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
           <div className="flex items-center justify-between">
-            <a href="#" className="-m-1.5 p-1.5">
-              <span className="sr-only">Your Company</span>
-              <img
-                className="h-8 w-auto"
-                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
-                alt=""
-              />
-            </a>
+            <div className="-m-1.5 p-1.5">
+              <span className="sr-only">JobPortal</span>
+              <Logo />
+            </div>
             <button
               type="button"
               className="-m-2.5 rounded-md p-2.5 text-gray-700"
@@ -210,24 +208,60 @@ const Header = () => {
           </div>
           <div className="mt-6 flow-root">
             <div className="-my-6 divide-y divide-gray-500/10">
-              <div className="space-y-2 py-6">
+              <div className="">
                 {navigation.map((item) => (
-                  <a
+                  <Link
                     key={item.name}
-                    href={item.href}
-                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                    to={item.href}
+                    className={`-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 ${
+                      window.location.pathname === item.href
+                        ? "text-indigo-600"
+                        : ""
+                    }`}
                   >
                     {item.name}
-                  </a>
+                  </Link>
                 ))}
               </div>
               <div className="py-6">
-                <a
-                  href="#"
-                  className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-                >
-                  Log in
-                </a>
+                {!isAuthenticated ? (
+                  <>
+                    <Link
+                      to="/login"
+                      className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                    >
+                      Log in
+                    </Link>
+                    <Link
+                      to="/register"
+                      className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                    >
+                      Sign up
+                    </Link>
+                  </>
+                ) : (
+                  <>
+                    <Link
+                      to="/profile"
+                      className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                    >
+                      Profile
+                    </Link>
+                    <Link
+                      to="/register"
+                      className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                    >
+                      Settings
+                    </Link>
+                    <Link
+                      to="/"
+                      className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                      onClick={logout}
+                    >
+                      Sign out
+                    </Link>
+                  </>
+                )}
               </div>
             </div>
           </div>
diff --git a/client/src/components/routers/PrivateRoute.tsx b/client/src/components/routers/PrivateRoute.tsx
diff --git a/client/src/components/routers/index.ts b/client/src/components/routers/index.ts
diff --git a/client/src/core/http.service.ts b/client/src/core/http.service.ts
@@ -3,6 +3,7 @@ import axios, { AxiosInstance, AxiosResponse, AxiosRequestConfig } from "axios";
 
 import { HttpMethod } from "@/enums";
 import { IService } from "@/interfaces";
+import StorageService from "./storage.service";
 
 export default class HttpService {
   private http: AxiosInstance;
@@ -18,7 +19,7 @@ export default class HttpService {
 
   // Get authorization token from cookies
   private get getAuthorization() {
-    const accessToken = Cookies.get("AccessToken") || "";
+    const accessToken = StorageService.getItem("access_token") || "";
     return accessToken ? { Authorization: `Bearer ${accessToken}` } : {};
   }
 
diff --git a/client/src/forms/auth/LoginForm/LoginForm.tsx b/client/src/forms/auth/LoginForm/LoginForm.tsx
@@ -1,5 +1,6 @@
 import { Link } from "react-router-dom";
 import useLoginForm from "./useLoginForm";
+import FieldError from "@/components/core-ui/FieldError";
 
 const LoginForm = () => {
   const { form } = useLoginForm();
@@ -26,6 +27,7 @@ const LoginForm = () => {
             value={form.values.email}
             onChange={form.handleChange}
           />
+          {form.errors.email && <FieldError error={form.errors.email} />}
         </div>
       </div>
 
@@ -49,6 +51,7 @@ const LoginForm = () => {
             value={form.values.password}
             onChange={form.handleChange}
           />
+          {form.errors.password && <FieldError error={form.errors.password} />}
         </div>
       </div>
 
diff --git a/client/src/forms/auth/LoginForm/useLoginForm.ts b/client/src/forms/auth/LoginForm/useLoginForm.ts
@@ -38,8 +38,8 @@ const useLoginForm = () => {
           email: values.email,
           password: values.password,
         };
-        const { token } = await login(payload);
-        setLogin(token);
+        const { token, user } = await login(payload);
+        setLogin(token, user);
         form.resetForm();
         navigate("/");
       } catch (error) {
diff --git a/client/src/interfaces/index.ts b/client/src/interfaces/index.ts
@@ -1,3 +1,3 @@
 export * as IService from "./http-client";
-export * as IModels from "./models/auth";
+export * as IModels from "./models";
 export * as IStores from "./stores";
diff --git a/client/src/interfaces/models/auth/IUserAccountReponse.ts b/client/src/interfaces/models/auth/IUserAccountReponse.ts
@@ -0,0 +1,5 @@
+import { IUserAccount } from "../user-account";
+
+export interface IUserAccountResponse {
+  user: IUserAccount;
+}
diff --git a/client/src/interfaces/models/index.ts b/client/src/interfaces/models/index.ts
@@ -1 +1,2 @@
 export * from "./auth";
+export * from "./user-account";
diff --git a/client/src/interfaces/models/user-account/IUserAccount.ts b/client/src/interfaces/models/user-account/IUserAccount.ts
@@ -0,0 +1,11 @@
+export interface IUserAccount {
+  _id: string;
+  user_type_id: string;
+  email: string;
+  password: string;
+  sms_notification_active: boolean;
+  email_notification_active: boolean;
+  registration_date: Date;
+  createdAt: Date;
+  updatedAt: Date;
+}
diff --git a/client/src/interfaces/models/user-account/index.ts b/client/src/interfaces/models/user-account/index.ts
@@ -0,0 +1 @@
+export * from "./IUserAccount";
diff --git a/client/src/pages/HomePage/HomePage.tsx b/client/src/pages/HomePage/HomePage.tsx
@@ -98,9 +98,7 @@ const HomePage = () => {
       <aside className="sticky top-24 hidden w-80 shrink-0 xl:block">
         <div className="overflow-hidden rounded-lg bg-white shadow">
           <div className="px-4 py-5 sm:p-6">
-            <h4 className="text-lg font-semibold text-gray-900 mb-2">
-              Filters
-            </h4>
+            <h4 className="text-lg font-semibold text-gray-900">Filters</h4>
 
             <div className="py-5">
               <Divider />
@@ -313,7 +311,7 @@ const HomePage = () => {
         </div>
 
         {/* Jobs List Grid extra-large - 5 columns , large - 4 columns, medium - 3 columns, small - 2 columns */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-6">
           {jobs.map((job, index) => (
             <div
               key={job.id}
diff --git a/client/src/pages/MessagesPage/MessagesPage.tsx b/client/src/pages/MessagesPage/MessagesPage.tsx
@@ -0,0 +1,7 @@
+import PortalLayout from "@/components/layouts/portal/PortalLayout";
+
+const MessagesPage = () => {
+  return <PortalLayout title="Messages">MessagesPage</PortalLayout>;
+};
+
+export default MessagesPage;
diff --git a/client/src/pages/MessagesPage/index.ts b/client/src/pages/MessagesPage/index.ts
@@ -0,0 +1 @@
+export { default } from "./MessagesPage";
diff --git a/client/src/pages/MyJobsPage/MyJobsPage.tsx b/client/src/pages/MyJobsPage/MyJobsPage.tsx
@@ -0,0 +1,7 @@
+import PortalLayout from "@/components/layouts/portal/PortalLayout";
+
+const MyJobsPage = () => {
+  return <PortalLayout title="My Jobs">"My Jobs Page</PortalLayout>;
+};
+
+export default MyJobsPage;
diff --git a/client/src/pages/MyJobsPage/index.ts b/client/src/pages/MyJobsPage/index.ts
@@ -0,0 +1 @@
+export { default } from "./MyJobsPage";
diff --git a/client/src/pages/ProfilePage/ProfilePage.tsx b/client/src/pages/ProfilePage/ProfilePage.tsx
@@ -0,0 +1,7 @@
+import PortalLayout from "@/components/layouts/portal/PortalLayout";
+
+const ProfilePage = () => {
+  return <PortalLayout title="My Profile">ProfilePage</PortalLayout>;
+};
+
+export default ProfilePage;
diff --git a/client/src/pages/ProfilePage/index.ts b/client/src/pages/ProfilePage/index.ts
@@ -0,0 +1 @@
+export { default } from "./ProfilePage";
diff --git a/client/src/pages/SavedJobsPage/SavedJobsPage.tsx b/client/src/pages/SavedJobsPage/SavedJobsPage.tsx
@@ -0,0 +1,7 @@
+import PortalLayout from "@/components/layouts/portal/PortalLayout";
+
+const SavedJobsPage = () => {
+  return <PortalLayout title="Saved Jobs">SavedJobsPage</PortalLayout>;
+};
+
+export default SavedJobsPage;
diff --git a/client/src/pages/SavedJobsPage/index.ts b/client/src/pages/SavedJobsPage/index.ts
@@ -0,0 +1 @@
+export { default } from "./SavedJobsPage";
diff --git a/client/src/providers/AuthProvider/AuthProvider.tsx b/client/src/providers/AuthProvider/AuthProvider.tsx
diff --git a/client/src/services/auth.service.ts b/client/src/services/auth.service.ts
diff --git a/server/src/controllers/auth.controller.ts b/server/src/controllers/auth.controller.ts
diff --git a/server/src/routes/auth.routes.ts b/server/src/routes/auth.routes.ts

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from "./auth";`
	`2`	`+export * from "./user-account";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default } from "./MessagesPage";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default } from "./MyJobsPage";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default } from "./ProfilePage";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default } from "./SavedJobsPage";`