Merge branch 'main' into column-modals

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 ? (

src/components/CreateBoardBtn/CreateBoardBtn.module.css

@@ -27,6 +27,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 .button:hover,

src/components/CreateBoardModal/CreateBoardModal.module.css

@@ -11,6 +11,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
 }
 .modal {
   position: fixed;
@@ -23,6 +24,7 @@
   width: 335px;
   height: 355px;
   border: 1px solid rgba(255, 255, 255, 1);
+  z-index: 15;
 }
 .input {
   padding: 12px 8px;

src/components/EditBoardModal/EditBoardModal.module.css

@@ -17,6 +17,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 13;
 }
 .modal {
   position: fixed;

src/components/Header/Header.module.css

@@ -97,7 +97,7 @@
 
 @media screen and (min-width: 1440px) {
   .container {
-    max-width: 1440px;
+    min-width: 1440px;
     margin-right: 0;
   }
   .headerLayout {

src/components/LoginForm/LoginForm.jsx

@@ -1,18 +1,28 @@
-import { Formik, Form, Field } from "formik";
+import { Formik, Form, Field, ErrorMessage } from "formik";
 import { logIn } from "../../redux/auth/operations";
 import { useDispatch, useSelector } from "react-redux";
 import css from "./LoginForm.module.css";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { selectError } from "../../redux/auth/selectror";
+import * as Yup from "yup";
+
+
+const ValidationSchema = Yup.object().shape({
+  email: Yup.string().email("Must be a valid email!").required("Required"),
+  password: Yup.string()
+    .min(8, "Too short")
+    .max(64, "Too long")
+    .required("Required"),
+});
 
 export default function LoginForm() {
   const dispatch = useDispatch();
   const error = useSelector(selectError);
   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");
@@ -45,17 +55,19 @@ export default function LoginForm() {
           password: "",
         }}
         onSubmit={handleSubmit}
+        validationSchema={ValidationSchema}
       >
         <Form className={css.form}>
-          <label htmlFor="email">Email</label>
+          <label htmlFor="email"/>
           <Field
             type="email"
             name="email"
             placeholder="Enter your email"
             className={css.input}
             required
           />
-          <label htmlFor="password">Password</label>
+          <ErrorMessage name="email" component="span" className={css.error} />
+          <label htmlFor="password"/>
           <div>
             <Field
               type={showPassword ? "text" : "password"}
@@ -64,6 +76,7 @@ export default function LoginForm() {
               placeholder="Enter your password"
               required
             />
+            <ErrorMessage name="password" component="span" className={css.error} />
             <button
               type="button"
               className={css.eye}

src/components/Logout/Logout.module.css

@@ -1,6 +1,7 @@
 .icon {
   fill: none;
   stroke: rgba(190, 219, 176, 1);
+  cursor: pointer;
 }
 
 .container {

src/components/RegistrationForm/RegistrationForm.jsx

@@ -4,6 +4,7 @@ import { useDispatch } from "react-redux";
 import css from "./RegistrationForm.module.css";
 // import svg from "../../img/icons.svg";
 import { useState } from "react";
+import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import * as Yup from "yup";
 
@@ -26,7 +27,8 @@ export const RegistrationForm = () => {
   const handleSubmit = (values, actions) => {
     console.log(values);
     dispatch(register(values));
-    navigate("/auth/login");
+    toast.success("Ти зареєструвався");
+    navigate("/home");
     actions.resetForm();
   };
   const [showPassword, setShowPassword] = useState(false);

src/components/TaskCard/TaskCard.jsx

@@ -15,7 +15,7 @@ export const Card = () => {
   }
 
     return (
-      <div className={css.card}>
+<div className={css.card}>
         <div className={css.border}></div>
         <h4 className={css.title}>The Watch Spot Design</h4>
         <p className={css.desc}>

src/components/TaskCard/TaskCard.module.css

@@ -111,9 +111,20 @@
     filter: drop-shadow(0 0 5px #bedbb0);
 }
 
+
 .editModalBtn {
     position: fixed;
     background: #121212;
     border: none;
     padding: 0;
+
+.icon {
+    cursor: pointer;
+}
+
+.icon:hover,
+.icon:focus {
+  filter: drop-shadow(0 0 5.5px #bedbb0);
+  stroke: #bedbb0;
+
 }

src/pages/HomePage/HomePage.module.css

@@ -16,6 +16,7 @@
   left: 0;
   height: 100%;
   width: 225px;
+  z-index: 12;
 }
 
 .mainCont {
@@ -34,6 +35,7 @@
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
+  z-index: 11;
 }
 
 @media screen and (min-width: 1440px) {

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 @ /

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;