signin signup api action handle

tusheer · Feb 28, 2022 · 8f1d9d2 · 8f1d9d2
1 parent 8762aac
commit 8f1d9d2
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 45 deletions.
diff --git a/client/.env.examples b/client/.env.examples
@@ -1,2 +1,3 @@
 PORT=3002
-NEXT_PUBLIC_API_URL=http://localhost:3001/api/v2
+NEXT_PUBLIC_API_URL=http://localhost:4000/api
+NEXT_NODE_ENV=development
diff --git a/client/next.config.js b/client/next.config.js
@@ -4,6 +4,7 @@ const nextConfig = {
   env: {
     PORT: process.env.PORT,
     API_URL: process.env.NEXT_PUBLIC_API_URL,
+    NODE_ENV : process.env.NEXT_NODE_ENV
   },
 }
 

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -21,6 +21,7 @@
         "next": "12.1.0",
         "react": "17.0.2",
         "react-dom": "17.0.2",
+        "react-hot-toast": "^2.2.0",
         "react-redux": "^7.2.5",
         "react-spinners": "^0.11.0",
         "sass": "^1.42.1"

diff --git a/client/src/api/auth/signin.ts b/client/src/api/auth/signin.ts
@@ -1,13 +1,19 @@
+import { AxiosResponse } from 'axios';
 import { http } from '../../../config';
 
 interface ISinginBody {
     email: string;
     password: string;
 }
+interface SigninResponse {
+    authToken: string;
+    message: string;
+    result: ISinginBody;
+}
 
 const signinAction = async (body: ISinginBody) => {
     try {
-        const response = await http.post('/auth/login', body);
+        const response = await http.post<ISinginBody, AxiosResponse<SigninResponse>>('/auth/login', body);
         return response.data;
     } catch (error) {
         throw new Error();

diff --git a/client/src/api/auth/signup.ts b/client/src/api/auth/signup.ts
@@ -1,3 +1,4 @@
+import { AxiosResponse } from 'axios';
 import { http } from '../../../config';
 
 interface ISingupBody {
@@ -7,9 +8,15 @@ interface ISingupBody {
     lastName: string;
 }
 
+interface SignupResponse {
+    authToken: string;
+    message: string;
+    result: ISingupBody;
+}
+
 const signupAction = async (body: ISingupBody) => {
     try {
-        const response = await http.post('/auth/register', body);
+        const response = await http.post<ISingupBody, AxiosResponse<SignupResponse>>('/auth/register', body);
         if (response.status === 201) {
             return response.data;
         }

diff --git a/client/src/modules/loginSignup/components/Login/Form.tsx b/client/src/modules/loginSignup/components/Login/Form.tsx
@@ -3,26 +3,53 @@ import Button from '../../../common/components/Button';
 import TextInput from '../../../common/components/TextInput';
 import useForm, { validator } from '../../../../libs/useForm';
 import signinAction from '../../../../api/auth/signin';
+import toast, { Toaster } from 'react-hot-toast';
+import sleep from '../../../../utils/sleep';
+import Cookies from 'js-cookie';
+import { useRouter } from 'next/router';
+
 export interface IFormState {
     email: string;
     password: string;
 }
 
 const Form = () => {
+    const router = useRouter();
+    //useForm is a reusable hooks that can easily form handle and error handle.
+    //https://github.com/tusheer/useForm
+    //I have a plan to publish  it as a package
+
     const { handleSubmit, errors, state, getInputProps } = useForm<IFormState>({
         formState: {
             email: '',
             password: '',
         },
-        onSubmit: async () => {
-            try {
-                const response = await signinAction(state);
-                if (response) {
-                    console.log(response);
-                }
-            } catch (error) {}
+        onSubmit: () => {
+            toast.promise(onSubmit(state), {
+                loading: <b>Submitting...</b>,
+                success: <b>Successfully login </b>,
+                error: <b>Email or password invalid, Try again.</b>,
+            });
         },
     });
+
+    const onSubmit = async (state: IFormState) => {
+        try {
+            //I know this is something weird, but since we have a local server we cannot experience the loading time and interaction. And I never doing that in real work.
+            process.env.NODE_ENV !== 'production' && (await sleep(1000));
+
+            const response = await signinAction(state);
+            if (response) {
+                if (response) {
+                    Cookies.set('token', response.authToken);
+                    router.push('/dashboard');
+                }
+            }
+        } catch (error) {
+            throw new Error('Invalid login');
+        }
+    };
+
     return (
         <form onSubmit={handleSubmit}>
             <TextInput
@@ -54,6 +81,7 @@ const Form = () => {
                 })}
             />
             <Button className='mt-12'>Signin</Button>
+            <Toaster position='bottom-left' />
         </form>
     );
 };

diff --git a/client/src/modules/loginSignup/components/Signup/Form.tsx b/client/src/modules/loginSignup/components/Signup/Form.tsx
@@ -3,6 +3,11 @@ import Button from '../../../common/components/Button';
 import TextInput from '../../../common/components/TextInput';
 import useForm, { validator } from '../../../../libs/useForm';
 import signupAction from '../../../../api/auth/signup';
+import toast, { Toaster } from 'react-hot-toast';
+import sleep from '../../../../utils/sleep';
+import Cookies from 'js-cookie';
+import { useRouter } from 'next/router';
+
 export interface IFormState {
     firstName: string;
     lastName: string;
@@ -12,6 +17,10 @@ export interface IFormState {
 }
 
 const Form = () => {
+    const router = useRouter();
+    //useForm is a reusable hooks that can easily form handle and error handle.
+    //https://github.com/tusheer/useForm
+    //I have a plan to publish  it as a package
     const { handleSubmit, errors, state, getInputProps } = useForm<IFormState>({
         formState: {
             firstName: '',
@@ -20,21 +29,35 @@ const Form = () => {
             password: '',
             confirmPassword: '',
         },
-        onSubmit: async () => {
-            try {
-                const response = await signupAction({
-                    firstName: state.firstName,
-                    lastName: state.firstName,
-                    email: state.email,
-                    password: state.password,
-                });
-                if (response) {
-                    console.log(response);
-                }
-            } catch (error) {}
+        onSubmit: () => {
+            toast.promise(onSubmit(state), {
+                loading: <b>Submitting...</b>,
+                success: <b>Successfully login </b>,
+                error: <b>Email or password invalid, Try again.</b>,
+            });
         },
     });
 
+    const onSubmit = async (state: IFormState) => {
+        try {
+            //I know this is something weird, but since we have a local server we cannot experience the loading time and interaction. And I never doing that in real work.
+            process.env.NODE_ENV !== 'production' && (await sleep(1000));
+
+            const response = await signupAction({
+                firstName: state.firstName,
+                lastName: state.firstName,
+                email: state.email,
+                password: state.password,
+            });
+            if (response) {
+                Cookies.set('token', response.authToken);
+                router.push('/dashboard');
+            }
+        } catch (error) {
+            throw new Error('Invalid login');
+        }
+    };
+
     return (
         <form onSubmit={handleSubmit}>
             <TextInput
@@ -95,6 +118,7 @@ const Form = () => {
                 })}
             />
             <Button className='mt-12'>Signup</Button>
+            <Toaster position='bottom-left' />
         </form>
     );
 };

diff --git a/client/src/utils/sleep.ts b/client/src/utils/sleep.ts
@@ -0,0 +1,7 @@
+const sleep = (time: number) => {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => resolve(null), time);
+    });
+};
+
+export default sleep;
diff --git a/client/styles/build.css b/client/styles/build.css
@@ -718,15 +718,15 @@ video {
 .h-5 {
 	height: 1.25rem;
 }
+.h-10 {
+	height: 2.5rem;
+}
 .h-6 {
 	height: 1.5rem;
 }
 .h-4 {
 	height: 1rem;
 }
-.h-10 {
-	height: 2.5rem;
-}
 .h-full {
 	height: 100%;
 }
@@ -742,15 +742,15 @@ video {
 .w-5 {
 	width: 1.25rem;
 }
+.w-10 {
+	width: 2.5rem;
+}
 .w-6 {
 	width: 1.5rem;
 }
 .w-4 {
 	width: 1rem;
 }
-.w-10 {
-	width: 2.5rem;
-}
 .w-0 {
 	width: 0px;
 }
@@ -843,30 +843,20 @@ video {
 .border-none {
 	border-style: none;
 }
+.bg-cm-purple-700 {
+	--tw-bg-opacity: 1;
+	background-color: rgba(156, 81, 224, var(--tw-bg-opacity));
+}
 .bg-white {
 	--tw-bg-opacity: 1;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 .bg-transparent {
 	background-color: transparent;
 }
-.bg-cm-purple-700 {
-	--tw-bg-opacity: 1;
-	background-color: rgba(156, 81, 224, var(--tw-bg-opacity));
-}
-.bg-cm-gray-200 {
-	--tw-bg-opacity: 1;
-	background-color: rgba(242, 242, 242, var(--tw-bg-opacity));
-}
 .bg-opacity-0 {
 	--tw-bg-opacity: 0;
 }
-.bg-opacity-40 {
-	--tw-bg-opacity: 0.4;
-}
-.bg-opacity-20 {
-	--tw-bg-opacity: 0.2;
-}
 .fill-current {
 	fill: currentColor;
 }
@@ -908,12 +898,12 @@ video {
 .pr-2 {
 	padding-right: 0.5rem;
 }
-.pt-28 {
-	padding-top: 7rem;
-}
 .pb-5 {
 	padding-bottom: 1.25rem;
 }
+.pt-28 {
+	padding-top: 7rem;
+}
 .text-center {
 	text-align: center;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ const nextConfig = { @@
       env: {
         PORT: process.env.PORT,
         API_URL: process.env.NEXT_PUBLIC_API_URL,
+        NODE_ENV : process.env.NEXT_NODE_ENV
       },
     }
@@ Expand Down @@