fixing error display in reset password (#71)

Author: Jadowacu1

Diff for: src/components/layout/Header.tsx

@@ -98,9 +98,9 @@ const Header: React.FC = () => {
     : 0;
 
   function formatName(name: string) {
-    const trimmedName = name.trim();
-    const formattedName = trimmedName.replace(/\s+/g, '.');
-    return formattedName.length > 5 ? formattedName.substring(0, 5) + '...' : formattedName;
+    const trimmedName = name?.trim();
+    const formattedName = trimmedName?.replace(/\s+/g, '.');
+    return formattedName?.length > 5 ? formattedName?.substring(0, 5) + '...' : formattedName;
   }
 
   const switch2FA = async () => {

Diff for: src/pages/ResetPassword.tsx

@@ -23,7 +23,7 @@ const ResetPassword: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const dispatch = useAppDispatch();
-  const { user, isError, isSuccess, isLoading, message } = useAppSelector(
+  const { user, fail, isSuccess, isLoading, message } = useAppSelector(
     (state) => state?.auth
   );
   const [isFormVisible, setIsFormVisible] = useState(true);
@@ -46,14 +46,14 @@ const ResetPassword: React.FC = () => {
     },
   });
   useEffect(() => {
-    if (isError) {
+    if (fail) {
       formik.setStatus(message);
     }
     if (isSuccess) {
       toast.success(message);
       setIsFormVisible(false);
     }
-  }, [user, isError, isSuccess, isLoading, message]);
+  }, [user, fail, isSuccess, isLoading, message]);
 
   useEffect(() => {
     dispatch(resetAuth());
@@ -115,7 +115,7 @@ const ResetPassword: React.FC = () => {
                 </button>
               </div>
               <div>
-                {showError || isError ? (
+                {showError || fail ? (
                   <p className="error">{formik.status}</p>
                 ) : null}
               </div>

Diff for: src/pages/SendResetPasswordLink.tsx

@@ -16,33 +16,29 @@ const ResetPasswordSchema = Yup.object().shape({
 const SendResetPasswordLink: React.FC = () => {
   const [hideParagraph, setHideParagraph] = useState(true);
   const dispatch = useAppDispatch();
-  const { user, isError, isSuccess, isLoading, message } = useAppSelector(
+  const { user, fail, isSuccess, isLoading, message } = useAppSelector(
     (state) => state?.auth
   );
   const formik = useFormik({
     initialValues: {
       email: "",
     },
     validationSchema: ResetPasswordSchema,
-    onSubmit: (values, { setStatus }) => {
-      dispatch(sendResetLink(values.email)).then(() => {
-        if (isError) {
-          setStatus(message);
-        }
-      });
-    },
+    onSubmit: (values) => {
+      dispatch(sendResetLink(values.email))
+    }
   });
 
   useEffect(() => {
-    if (isError) {
+    if (fail) {
       formik.setStatus(message);
     }
     if (isSuccess) {
       toast.success(message);
       formik.resetForm();
       setHideParagraph(false);
     }
-  }, [isError, isSuccess, message]);
+  }, [fail, isSuccess, message]);
   useEffect(() => {
     dispatch(resetAuth());
   }, [dispatch]);
@@ -73,7 +69,7 @@ const SendResetPasswordLink: React.FC = () => {
                 Email Address
               </label>
             </div>
-            {isError && <p className="error">{formik.status}</p>}
+            {fail? (<p className="error">{formik.status}</p>):null}
             <br />
             <button
               className={`reset-Button${isLoading ? " loading" : ""}`}

Diff for: src/store/features/auth/authSlice.tsx

@@ -17,6 +17,7 @@ const initialState: AuthService = {
   isAuthenticated: false,
   error: "",
   userId: "",
+  fail: false
 };
 
 type IUserEmailAndPassword = Pick<IUser, 'email' | 'password'>;
@@ -185,6 +186,7 @@ const userSlice = createSlice({
       state.token = "";
       state.isAuthenticated = false;
       state.error = "";
+      state.fail= false;
     },
     changingProfile: (state, action: any)=>{
       (state.user as any).profilePicture = action.payload
@@ -279,7 +281,7 @@ const userSlice = createSlice({
       )
       .addCase(sendResetLink.pending, (state) => {
         state.isLoading = true;
-        state.isError = false;
+        state.fail = false;
         state.isSuccess = false;
       })
       .addCase(sendResetLink.fulfilled, (state, action: PayloadAction<any>) => {
@@ -290,24 +292,23 @@ const userSlice = createSlice({
       .addCase(sendResetLink.rejected, (state, action: PayloadAction<any>) => {
         state.isLoading = false;
         state.isSuccess = false;
-        state.isError = true;
+        state.fail = true;
         state.message = action.payload;
       })
       .addCase(resetPassword.pending, (state) => {
         state.isLoading = true;
-        state.isError = false;
+        state.fail = false;
         state.isSuccess = false;
       })
       .addCase(resetPassword.fulfilled, (state, action: PayloadAction<any>) => {
         state.isLoading = false;
         state.isSuccess = true;
-        state.user = action.payload;
         state.message = action.payload.message;
       })
       .addCase(resetPassword.rejected, (state, action: PayloadAction<any>) => {
         state.isLoading = false;
         state.isSuccess = false;
-        state.isError = true;
+        state.fail = true;
         state.message = action.payload;
       })
       .addCase(loginUser.pending, (state) => {

Diff for: src/utils/types/store.d.ts

@@ -77,6 +77,7 @@ export interface AuthService {
   error: string;
   token: string;
   userId?: any;
+  fail:boolean;
 }
 
 export interface IEmail {