Merge pull request #8 from jkarenzi/ft-manage-profile-#6

Feat: Profile Management
jkarenzi · Aug 30, 2024 · 7af7326 · 7af7326
2 parents 9db6873 + 5fde111
commit 7af7326
Show file tree

Hide file tree

Showing 14 changed files with 615 additions and 49 deletions.
diff --git a/src/__tests__/drawer.test.tsx b/src/__tests__/drawer.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { screen, render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
-import userReducer from '../redux/slices/userSlice'
+import userReducer, { InitUserState } from '../redux/slices/userSlice'
 import { Store, configureStore } from '@reduxjs/toolkit';
 import { Provider } from 'react-redux';
 import Drawer from '../components/Drawer';
@@ -57,8 +57,13 @@ describe('Drawer tests', () => {
                             publicId:'default',
                             url:'http://example.png'
                         }
-                    }
-                }
+                    },
+                    imageStatus: "idle",
+                    isLoadingImage: false,
+                    isLoadingName: false,
+                    isLoadingPassword: false,
+                    status: "idle",
+                } as InitUserState
             }})
         render(
             <Provider store={store}>

diff --git a/src/__tests__/login.test.tsx b/src/__tests__/login.test.tsx
@@ -80,7 +80,12 @@ describe('Login Component Tests', () => {
         const { user } = store.getState();
         expect(user).toEqual({
             token: null,
-            userInfo: null
+            userInfo: null,
+            imageStatus: "idle",
+            isLoadingImage: false,
+            isLoadingName: false,
+            isLoadingPassword: false,
+            status: "idle",
         })
     })
 
@@ -106,7 +111,12 @@ describe('Login Component Tests', () => {
                 createdAt: 'fakedate',
                 updatedAt: 'fakedate',
                 __v: 0
-            }
+            },
+            imageStatus: "idle",
+            isLoadingImage: false,
+            isLoadingName: false,
+            isLoadingPassword: false,
+            status: "idle",
         })
     })
 
@@ -132,12 +142,22 @@ describe('Login Component Tests', () => {
                 createdAt: 'fakedate',
                 updatedAt: 'fakedate',
                 __v: 0
-            }
+            },
+            imageStatus: "idle",
+            isLoadingImage: false,
+            isLoadingName: false,
+            isLoadingPassword: false,
+            status: "idle",
         })
         const loggedOutState = userReducer(undefined, {type:logout.type})
         expect(loggedOutState).toEqual({
             token: null,
-            userInfo: null
+            userInfo: null,
+            imageStatus: "idle",
+            isLoadingImage: false,
+            isLoadingName: false,
+            isLoadingPassword: false,
+            status: "idle",
         })
 
     })

diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts
@@ -1,5 +1,4 @@
 import axios from 'axios';
-import { errorToast } from '../utils/toast';
 import store from '../redux/store';
 
 const axiosInstance = axios.create({
@@ -26,10 +25,10 @@ axiosInstance.interceptors.response.use(
   },
   (error) => {
     if(!error.response){
-      errorToast('An unexpected error occured')
+      return Promise.reject('Network Error')
     }
 
-    return Promise.reject(error)
+    return Promise.reject(error.response.data.message)
   }
 )
 

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -6,16 +6,18 @@ interface buttonProps {
     radius?: string,
     color?: string,
     textColor?: string,
-    activeColor?:string
+    textSize?: string,
+    activeColor?:string,
+    borderColor?:string,
     text: string,
     onClick?: () => void,
     disabled?: boolean,
     loader?: JSX.Element
 }
 
-const Button = ({width, height, radius, color, textColor, activeColor, text, onClick, disabled, loader}: buttonProps) => {
+const Button = ({width, height, radius, color, textColor, textSize, activeColor, borderColor, text, onClick, disabled, loader}: buttonProps) => {
     return (
-        <button className={`flex items-center justify-center border-none outline-none ${width ? width :'w-full'} ${height ? height :'h-9'} ${radius ? radius :'rounded-md'} ${(disabled?(activeColor?activeColor:'bg-custom-activeBlue'):(color?color:'bg-custom-blue'))} ${textColor ? textColor :'text-white'}`} onClick={onClick} disabled={disabled}>
+        <button className={`flex items-center justify-center ${textSize?textSize:null} ${borderColor?`border border-${borderColor}`:'border-none'} outline-none ${width ? width :'w-full'} ${height ? height :'h-9'} ${radius ? radius :'rounded-md'} ${(disabled?(activeColor?activeColor:'bg-custom-activeBlue'):(color?color:'bg-custom-blue'))} ${textColor ? textColor :'text-white'}`} onClick={onClick} disabled={disabled}>
             {disabled?(loader?loader:<ClipLoader size='15' color="#ffffff"/>):text}
         </button>
     );

diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
@@ -16,18 +16,18 @@ const Drawer = () => {
         <div className="flex min-w-16 h-screen bg-custom-drawerBlack">
             <div className="w-16 flex flex-col items-center justify-between border-r border-custom-drawerBorder py-12">
                 <div className="flex flex-col items-center w-full gap-8">
-                    <div className={`flex items-center justify-center w-9 h-9 rounded-lg ${location.pathname === '/tasks'?'bg-custom-blue':'bg-custom-drawerIconInactive'} cursor-pointer`}>
+                    <div className={`flex items-center justify-center w-9 h-9 rounded-lg ${location.pathname === '/tasks'?'bg-custom-blue':'bg-custom-drawerIconInactive'} cursor-pointer`} onClick={() => navigate('/')}>
                         <IoHome size='17' color="#ffffff" title="home"/>
                     </div>
-                    <div className={`flex items-center justify-center w-9 h-9 rounded-lg ${location.pathname === '/tasks'?'bg-custom-blue':'bg-custom-drawerIconInactive'} cursor-pointer`}>
+                    <div className={`flex items-center justify-center w-9 h-9 rounded-lg ${location.pathname === '/tasks'?'bg-custom-blue':'bg-custom-drawerIconInactive'} cursor-pointer`} onClick={() => navigate('/tasks')}>
                         <HiClipboardList size='20' color="#ffffff" title="tasks"/>
                     </div> 
-                    <div className={`flex items-center justify-center w-9 h-9 rounded-lg ${location.pathname === '/notes'?'bg-custom-blue':'bg-custom-drawerIconInactive'} cursor-pointer`}>
+                    <div className={`flex items-center justify-center w-9 h-9 rounded-lg ${location.pathname === '/notes'?'bg-custom-blue':'bg-custom-drawerIconInactive'} cursor-pointer`} onClick={() => navigate('/notes')}>
                         <IoGrid size='17' color="#ffffff" title="notes"/>
                     </div>
                 </div>
                 <div className="flex flex-col items-center w-full gap-8">
-                    <div className={`flex items-center justify-center w-9 h-9 rounded-lg ${location.pathname === '/settings'?'bg-custom-blue':'bg-custom-drawerIconInactive'} cursor-pointer`}>
+                    <div className={`flex items-center justify-center w-9 h-9 rounded-lg ${location.pathname === '/settings'?'bg-custom-blue':'bg-custom-drawerIconInactive'} cursor-pointer`} onClick={() => navigate('/settings')}>
                         <IoMdSettings size='20' color="#ffffff" title="settings"/>
                     </div> 
                     <div className="flex items-center justify-center w-10 h-10 rounded-lg overflow-hidden cursor-pointer" onClick={() => {dispatch(logout()); navigate('/')}}>

diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
@@ -2,20 +2,22 @@ interface inputProps {
     id:string,
     type: string,
     placeholder: string,
+    defaultValue?:string|number|undefined
     width?:string,
     height?:string,
     textColor?:string,
     outlineColor?:string,
     error?:boolean,
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void,
-    value?: string | number
+    value?: string | number,
+    editMode?:boolean
 }
 
-const InputField = ({id, type, placeholder, width, height, textColor, outlineColor, error, onChange, onBlur, value}: inputProps) => {
+const InputField = ({id, type, placeholder, defaultValue, width, height, textColor, outlineColor, error, onChange, onBlur, value, editMode=true}: inputProps) => {
     return (
-        <input id={id} type={type} placeholder={placeholder} className={`pl-2 outline-none ${width?width:'w-full'} ${height?height:'h-9'} border ${error?'border-red-500':'border-custom-borderGrey'} rounded-md bg-transparent ${textColor? textColor: 'text-white'} ${outlineColor? `focus:${outlineColor}`: 'focus:border-custom-blue'}`} onChange={onChange} onBlur={onBlur} value={value}/>
+        <input id={id} type={type} placeholder={placeholder} defaultValue={defaultValue} readOnly={!editMode} className={`pl-2 outline-none ${width?width:'w-full'} ${height?height:'h-9'} border ${error && editMode?'border-red-500':'border-custom-borderGrey'} rounded-md bg-transparent ${textColor? textColor: !editMode?'text-custom-borderGrey':'text-white'} ${outlineColor? `focus:${outlineColor}`: 'focus:border-custom-blue'}`} onChange={onChange} onBlur={onBlur} value={value}/>
     );
 }
- 
+
 export default InputField;