login signup setup typesight

amitjimiwal · amitjimiwal · commit f7d178c3c801 · 2024-03-29T17:46:50.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,11 +16,11 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@reduxjs/toolkit": "^2.2.2",
-    "@types/jest": "^29.5.12",
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "jest-environment-jsdom": "^29.6.2",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.350.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -33,6 +33,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.11.25",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,17 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "./App.css";
 import Navbar from "./components/Navbar";
 import { Outlet } from "react-router-dom";
 import ContentWrapper from "./components/ContentWrapper";
 import Footer from "./components/Footer";
+import { useDispatch } from "react-redux";
+import { getUserInfo } from "./redux-store/slices/authSlice";
+import { AppDispatch } from "./redux-store/store";
 function App() {
+  const dispatch:AppDispatch=useDispatch();
+  useEffect(()=>{
+    dispatch(getUserInfo())
+  },[dispatch])
   return (
     <div className="min-h-screen w-full ">
       <Navbar />
diff --git a/src/api/axiosclient.ts b/src/api/axiosclient.ts
@@ -1,37 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { LoginData, ResultData, SingupData } from '@/types';
 import axios from 'axios';
+import Cookies from 'js-cookie';
 class AxiosClient {
-     client;
+     private client;
      constructor() {
           this.client = axios.create({
-               baseURL: String(process.env.VITE_APP_BACKEND_BASE_URL),
+               baseURL: String(import.meta.env.VITE_APP_BACKEND_BASE_URL),
                withCredentials: true,
                headers: {
-                    'Content-Type': ['application/json', 'application/x-www-form-urlencoded'],
+                    'Content-Type': 'application/json',
+                    'Access-Control-Allow-Origin': String(import.meta.env.VITE_APP_FRONTEND_BASE_URL),
+                    "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS",
+                    'cache-control': 'private',
+                    'E-Tag': Cookies.get('auth_token'),
                },
           });
      }
-     async post(url: string, content: SingupData | LoginData | ResultData) {
-         try{
-          const {data}=await this.client.post(url, content);
-          return data;
-         }catch(e){
-              return e;
-         }
+     async post(url: string, content: LoginData | SingupData | ResultData) {
+          try {
+               const { data } = await this.client.post(url, content);
+               return data;
+          } catch (e: any) {
+               if (import.meta.env.VITE_APP_ENV === "development") console.log(e.response.data);
+               return e;
+          }
      }
      async get(url: string) {
-          try{
-               const {data}=await this.client.get(url);
+          try {
+               const { data } = await this.client.get(url);
                return data;
-          }catch(e){
+          } catch (e: any) {
+               if (import.meta.env.VITE_APP_ENV === "development") console.log(e.response.data);
                return e;
           }
      }
-     async patch(url:string){
-          try{
-               const {data}=await this.client.patch(url);
+     async patch(url: string) {
+          try {
+               const { data } = await this.client.patch(url);
                return data;
-          }catch(e){
+          } catch (e: any) {
+               if (import.meta.env.VITE_APP_ENV === "development") console.log(e.response.data);
                return e;
           }
      }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -8,13 +8,17 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Menu } from "lucide-react";
+import { useAuthStatus } from "@/hooks/useAuthStatus";
+import { useNavigate } from "react-router-dom";
 
 const routes = [
   { name: "Services", path: "#about", id: 1 },
   { name: "About", path: "#about", id: 2 },
   { name: "Contact", path: "#contact", id: 3 },
 ];
-const Navbar:React.FC = () => {
+const Navbar: React.FC = () => {
+  const { status, user } = useAuthStatus();
+  const navigate = useNavigate();
   return (
     <nav className="flex justify-between items-center py-4 px-8 border-b">
       <div className="flex items-center space-x-4">
@@ -58,7 +62,14 @@ const Navbar:React.FC = () => {
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-        <Button className="bg-blue-600 text-white">Sign Up</Button>
+        <Button
+          className="bg-blue-600 text-white"
+          onClick={() => {
+            status ? navigate(`/dashboard/${user?.id}`) : navigate("/signup");
+          }}
+        >
+          {status ? "DashBoard" : "Join"}
+        </Button>
       </div>
     </nav>
   );
diff --git a/src/components/Protected.tsx b/src/components/Protected.tsx
@@ -1,32 +1,27 @@
 import React, { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import { AuthState } from "@/redux-store/store";
 import { useNavigate } from "react-router-dom";
+import { useAuthStatus } from "@/hooks/useAuthStatus";
 interface Props {
   children: React.ReactNode;
   authentication: boolean;
 }
 const Protected = ({ children, authentication }: Props) => {
-  const authStatus = useSelector((state: AuthState) => state.auth.status);
-  const isEmailVerified=true; //dummy value for test;
+  const { status, user } = useAuthStatus();
   const navigate = useNavigate();
   const [loading, setloading] = useState<boolean>(true);
   useEffect(() => {
-    if (authentication && authStatus != true) {
+    if (authentication && status != true) {
       navigate("/login");
     }
-    if(authStatus && authentication && !isEmailVerified){
-      navigate("/verify");
+    if (status && authentication) {
+      if (!user?.isEmailVerified) navigate("/verify");
     }
-    if(authStatus && authentication && isEmailVerified){
-      navigate("/test");
-    }
-    if (!authentication && authStatus === true) {
+    if (!authentication && status === true) {
       navigate("/test");
     }
     setloading(false);
-  }, [authStatus, authentication, navigate,isEmailVerified]);
+  }, [status, authentication, navigate, user?.isEmailVerified]);
   return loading ? null : <>{children}</>;
 };
 
-export default Protected;
+export default Protected;
diff --git a/src/hooks/useAppDispatch.ts b/src/hooks/useAppDispatch.ts
@@ -0,0 +1,8 @@
+import { AppDispatch } from "@/redux-store/store"
+import { useDispatch } from "react-redux"
+
+const useAppDispatch = () => {
+     const dispatch = useDispatch<AppDispatch>();
+     return dispatch;
+}
+export default useAppDispatch;
diff --git a/src/hooks/useAuthStatus.ts b/src/hooks/useAuthStatus.ts
@@ -2,7 +2,7 @@ import { AuthState } from "@/redux-store/store"
 import { useSelector } from "react-redux"
 
 const useAuthStatus = () => {
-     const authStatus=useSelector((state: AuthState) => state.auth.status);
-     return [authStatus];
+     const { status, user } = useSelector((state: AuthState) => state.auth);
+     return { status, user };
 }
-export {  useAuthStatus};
+export { useAuthStatus };
diff --git a/src/pages/EmailVerification/EmailVerification.tsx b/src/pages/EmailVerification/EmailVerification.tsx
@@ -1,6 +1,6 @@
-import { Label } from "@/components/ui/label"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 export default function Component() {
   return (
@@ -27,6 +27,5 @@ export default function Component() {
         </Button>
       </div>
     </div>
-  )
+  );
 }
-
diff --git a/src/pages/Homepage/HomeScreen.tsx b/src/pages/Homepage/HomeScreen.tsx
@@ -5,7 +5,10 @@ import about from "../../assets/images/about.png";
 import CheckCircleIcon from "@/icons/Checkicon";
 import ContactUS from "@/components/ContactUS";
 import Pricing from "@/components/Pricing";
+import { ArrowRightIcon } from "lucide-react";
+import { useNavigate } from "react-router-dom";
 const HomeScreen = () => {
+  const navigate = useNavigate();
   return (
     <>
       {/* Banner */}
@@ -19,7 +22,12 @@ const HomeScreen = () => {
             accuracy tests. Whether you’re a professional typist or just looking
             to improve your skills, we’ve got you covered.
           </p>
-          <Button className="bg-blue-600 text-white">View All Services</Button>
+          <Button
+            className="bg-blue-600 text-white"
+            onClick={() => navigate("/login")}
+          >
+            Explore now <ArrowRightIcon />
+          </Button>
         </div>
         <img
           alt="Typing illustration"
diff --git a/src/pages/LoginScreen/LoginScreen.tsx b/src/pages/LoginScreen/LoginScreen.tsx
@@ -6,17 +6,21 @@ import { Link } from "react-router-dom";
 import { useForm } from "react-hook-form";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { LoginData } from "@/types";
+import { loginUser } from "@/redux-store/slices/authSlice";
+import useAppDispatch from "@/hooks/useAppDispatch";
 
 const LoginScreen: React.FC = () => {
+  const dispatch = useAppDispatch();
   const [showPassword, setshowPassword] = useState<boolean>(false);
   const {
     register,
     formState: { errors },
-    handleSubmit
+    handleSubmit,
   } = useForm<LoginData>();
-  const submitHandler= async function (data:LoginData){
-    console.log(data);
-  }
+  const submitHandler = function (data: LoginData) {
+    console.table([data, typeof data.email, typeof data.password]);
+    dispatch(loginUser(data)).then(() => {});
+  };
   return (
     <div className="flex flex-col min-h-screen items-stretch">
       <header className="p-4 flex items-center">
diff --git a/src/pages/SignupScreen/SignupScreen.tsx b/src/pages/SignupScreen/SignupScreen.tsx
@@ -6,16 +6,19 @@ import { Link } from "react-router-dom";
 import { useForm } from "react-hook-form";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { SingupData } from "@/types";
+import useAppDispatch from "@/hooks/useAppDispatch";
+import { signupuser } from "@/redux-store/slices/authSlice";
 
 const SignupScreen: React.FC = () => {
+  const dispatch = useAppDispatch();
   const [showPassword, setshowPassword] = useState<boolean>(false);
   const {
     register,
     formState: { errors },
     handleSubmit,
   } = useForm<SingupData>();
-  const submitHandler = async function (data: SingupData) {
-    console.log(data);
+  const submitHandler = function (data: SingupData) {
+    dispatch(signupuser(data));
   };
   return (
     <div className="flex flex-col min-h-screen items-stretch">
diff --git a/src/pages/Typingtest/TypingTest.tsx b/src/pages/Typingtest/TypingTest.tsx
@@ -1,11 +1,20 @@
-import React from 'react'
+import React from "react";
+import { useNavigate } from "react-router";
 
 const TypingTest = () => {
+  const navigate = useNavigate();
   return (
     <div>
-      TypingTest Page
+      TypingTest Page{" "}
+      <button
+        onClick={() => {
+          navigate("/");
+        }}
+      >
+        Go Home
+      </button>
     </div>
-  )
-}
+  );
+};
 
-export default TypingTest
+export default TypingTest;
diff --git a/src/redux-store/slices/authSlice.ts b/src/redux-store/slices/authSlice.ts
diff --git a/src/redux-store/store.ts b/src/redux-store/store.ts
