Merge pull request #40 from AnWhiteM/redux-registr-login

commit
AnWhiteM · Jun 11, 2024 · fd590ac · fd590ac
2 parents 435971e + 74f18ac
commit fd590ac
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 57 deletions.
diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx
@@ -1,24 +1,48 @@
-import { Formik, Form, Field} from 'formik';
-import { logIn } from '../../redux/auth/operations';
-import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
-import css from "./LoginForm.module.css"
-import svg from "../../img/icons.svg";
-import { useState } from 'react';
+
+import { Formik, Form, Field } from "formik";
+import { logIn } from "../../redux/auth/operations";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import css from "./LoginForm.module.css";
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { selectError } from "../../redux/auth/selectror";
+
+
 
 export default function LoginForm() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const handleSubmit = async (values, actions) => {
-    try {
-      await dispatch(logIn(values));
-      navigate("/home")
-    } catch (error) {
-      console.error("Login failed:", error);
-    }
+
+  const error = useSelector(selectError);
+  const [submittedWithError, setSubmittedWithError] = useState(false);
+
+  // const handleSubmit = async (values, actions) => {
+  //   try {
+  //     await dispatch(logIn(values));
+  //     navigate("/home")
+  //   } catch (error) {
+  //     console.error("Login failed:", error);
+  //   }
+  //   actions.resetForm();
+  // };
+
+  const handleSubmit = (values, actions) => {
+    dispatch(logIn(values));
+    navigate("/home");
     actions.resetForm();
   };
 
+  useEffect(() => {
+    if (error && submittedWithError) {
+      toast.error(`Ops, somthing wrong, Try Again!`);
+    }
+  }, [error, submittedWithError]);
+
+  const handleFormSubmit = (values, actions) => {
+    setSubmittedWithError(true);
+    handleSubmit(values, actions);
+  };
 
   const [showPassword, setShowPassword] = useState(false);
 
@@ -27,14 +51,15 @@ export default function LoginForm() {
     setShowPassword(!showPassword);
   };
 
+
   return (
     <div>
       <Formik
-         initialValues={{ 
-          email: '',
-          password: '',
+        initialValues={{
+          email: "",
+          password: "",
         }}
-        onSubmit={handleSubmit}
+        onSubmit={handleFormSubmit}
       >
             <Form className={css.form}>
               <label htmlFor="email"/>

diff --git a/src/components/Logout/Logout.jsx b/src/components/Logout/Logout.jsx
@@ -1,21 +1,30 @@
 import svg from "../../img/icons.svg";
 import css from "./Logout.module.css";
 import toast from "react-hot-toast";
-// import { useDispatch } from "react-redux";
-
-// import { logOut } from "../../redux/auth/operations";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { logOut } from "../../redux/auth/operations";
 
 export default function Logout() {
-  // const dispatch = useDispatch();
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    try {
+      await dispatch(logOut()).unwrap();
+      toast.success("Ти вийшов)");
+      navigate("/auth/login");
+    } catch (error) {
+      toast.error("Помилка при виході");
+    }
+  };
 
-  const Notify = () => toast.success("Ти вийшов)");
   return (
-    <div className={css.container}>
-      <svg onClick={Notify} className={css.icon} width="32px" height="32px">
-        <use className={css.icon} href={svg + "#icon-login"}></use>
+    <div onClick={handleLogout} className={css.container}>
+      <svg className={css.icon} width="32px" height="32px">
+        <use className={css.icon} href={`${svg}#icon-login`}></use>
       </svg>
       <p> Log out </p>
     </div>
   );
 }
-// onClick={() => dispatch(logOut())}
diff --git a/src/redux/auth/operations.js b/src/redux/auth/operations.js
@@ -24,19 +24,33 @@ export const register = createAsyncThunk(
   }
 );
 
+// export const logIn = createAsyncThunk(
+//   "auth/login",
+//   async (userInfo, thunkAPI) => {
+//     try {
+//       const response = await axios.post("/auth/login", userInfo);
+//       setAuthHeader(response.data.token);
+//       await thunkAPI.dispatch(getUserInfo());
+//       return response.data;
+//     } catch (error) {
+//       return thunkAPI.rejectWithValue(error.message);
+//     }
+//   }
+// );
+
 export const logIn = createAsyncThunk(
   "auth/login",
   async (userInfo, thunkAPI) => {
     try {
       const response = await axios.post("/auth/login", userInfo);
       setAuthHeader(response.data.token);
-      await thunkAPI.dispatch(getUserInfo());
       return response.data;
     } catch (error) {
       return thunkAPI.rejectWithValue(error.message);
     }
   }
 );
+
 export const logOut = createAsyncThunk("/auth/logout", async (_, thunkAPI) => {
   try {
     await axios.post("/auth/logout");
@@ -51,17 +65,17 @@ export const logOut = createAsyncThunk("/auth/logout", async (_, thunkAPI) => {
  * headers: Authorization: Bearer token
  */
 
-export const getUserInfo = createAsyncThunk(
-  "user/getUserInfo",
-  async (_, thunkAPI) => {
-    try {
-      const response = await axios.get("/");
-      return response.data;
-    } catch (error) {
-      return thunkAPI.rejectWithValue(error.message);
-    }
-  }
-);
+// export const getUserInfo = createAsyncThunk(
+//   "user/getUserInfo",
+//   async (_, thunkAPI) => {
+//     try {
+//       const response = await axios.get("/");
+//       return response.data;
+//     } catch (error) {
+//       return thunkAPI.rejectWithValue(error.message);
+//     }
+//   }
+// );
 
 /*
  * Put @ /

diff --git a/src/redux/auth/slice.js b/src/redux/auth/slice.js
@@ -4,7 +4,7 @@ import {
   logOut,
   register,
   updateUserInfo,
-  getUserInfo,
+  // getUserInfo,
 } from "./operations";
 
 const authSlice = createSlice({
@@ -65,23 +65,23 @@ const authSlice = createSlice({
         state.loading = false;
         state.error = true;
       })
-      .addCase(getUserInfo.pending, (state) => {
-        state.loading = true;
-        state.error = false;
-      })
-      .addCase(getUserInfo.fulfilled, (state, action) => {
-        state.loading = false;
-        // state.user = action.payload;
-        state.user.name = action.payload.name;
-        state.user.email = action.payload.email;
-        state.user.theme = action.payload.theme;
-        state.user.avatarURL = action.payload.avatarURL;
-        state.isLoggedIn = true;
-      })
-      .addCase(getUserInfo.rejected, (state, action) => {
-        state.loading = false;
-        state.error = action.payload;
-      })
+      // .addCase(getUserInfo.pending, (state) => {
+      //   state.loading = true;
+      //   state.error = false;
+      // })
+      // .addCase(getUserInfo.fulfilled, (state, action) => {
+      //   state.loading = false;
+      //   // state.user = action.payload;
+      //   state.user.name = action.payload.name;
+      //   state.user.email = action.payload.email;
+      //   state.user.theme = action.payload.theme;
+      //   state.user.avatarURL = action.payload.avatarURL;
+      //   state.isLoggedIn = true;
+      // })
+      // .addCase(getUserInfo.rejected, (state, action) => {
+      //   state.loading = false;
+      //   state.error = action.payload;
+      // })
       .addCase(updateUserInfo.pending, (state) => {
         state.loading = true;
         state.error = false;