Merge pull request #45 from AnWhiteM/new-auth

commit
AnWhiteM · Jun 12, 2024 · 59a2ba6 · 59a2ba6
2 parents 5f57e14 + ca183a6
commit 59a2ba6
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 39 deletions.
diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
@@ -1,16 +1,12 @@
 import { lazy, Suspense, useEffect } from "react";
-
-// import { HomePage } from "../HomePage/HomePage";
-// import { LoginPage } from "../LoginPage/LoginPage";
-// import Login from "../Login/Login";
-// import Register from "../Register/Register";
-
 import { Route, Routes } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
-
 import { useDispatch, useSelector } from "react-redux";
-import { refreshUser } from "../../redux/auth/operations";
-import { selectIsRefreshing } from "../../redux/auth/selectror";
+import { refreshUser, getUserInfo } from "../../redux/auth/operations";
+import {
+  selectIsRefreshing,
+  selectIsLoggedIn,
+} from "../../redux/auth/selectror";
 
 import RestrictedRoute from "../RestrictedRoute/RestrictedRoute";
 import PrivateRoute from "../PrivateRoute/PrivateRoute";
@@ -23,11 +19,18 @@ const NotFoundPage = lazy(() => import("../../pages/NotFoundPage"));
 
 export const App = () => {
   const isRefreshing = useSelector(selectIsRefreshing);
+  const isLoggedIn = useSelector(selectIsLoggedIn);
   const dispatch = useDispatch();
 
   useEffect(() => {
     dispatch(refreshUser());
   }, [dispatch]);
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      dispatch(getUserInfo());
+    }
+  }, [dispatch, isLoggedIn]);
   return (
     <>
       {isRefreshing ? (

diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx
@@ -12,7 +12,7 @@ export default function LoginForm() {
   const [submittedWithError, setSubmittedWithError] = useState(false);
 
   const handleSubmit = async (values, actions) => {
-    setSubmittedWithError(false); // Скидаємо стан при новому сабміті
+    setSubmittedWithError(false);
     try {
       await dispatch(logIn(values)).unwrap();
       toast.success("Logged in successfully");

diff --git a/src/redux/auth/operations.js b/src/redux/auth/operations.js
@@ -84,17 +84,17 @@ export const refreshUser = createAsyncThunk(
  * 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,
   refreshUser,
 } from "./operations";
 
@@ -66,23 +66,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;