Merge pull request #52 from AnWhiteM/new-boards

commit

src/components/App/App.jsx

@@ -6,7 +6,7 @@ import { refreshUser, getUserInfo } from "../../redux/auth/operations";
 import {
   selectIsRefreshing,
   selectIsLoggedIn,
-} from "../../redux/auth/selectror";
+} from "../../redux/auth/selectors";
 
 import RestrictedRoute from "../RestrictedRoute/RestrictedRoute";
 import PrivateRoute from "../PrivateRoute/PrivateRoute";
@@ -68,5 +68,4 @@ export const App = () => {
       )}
     </>
   );
-
 };

src/components/Board/Board.jsx

@@ -1,11 +1,24 @@
 import { useState } from "react";
 import EditBoardModal from "../EditBoardModal/EditBoardModal";
+import { useDispatch } from "react-redux";
+import { deleteBoard, getBoards } from "../../redux/boards/operations";
+import toast from "react-hot-toast";
 
 import svg from "../../img/icons.svg";
 import css from "./Board.module.css";
 
-export default function Board({ title, icon, background }) {
+export default function Board({ board }) {
+  const { _id, title, icon, background } = board;
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const dispatch = useDispatch();
+
+  const boardDeleteNotify = () =>
+    toast.error(`You deleted the board ${board.title}`);
+  const handleDelete = () => {
+    dispatch(deleteBoard(_id));
+    dispatch(getBoards());
+    boardDeleteNotify();
+  };
 
   const openModal = () => {
     setIsModalOpen(true);
@@ -15,43 +28,40 @@ export default function Board({ title, icon, background }) {
     setIsModalOpen(false);
   };
 
-  // local storage - start - тут буде dispatch
-  const deleteHandler = () => {
-    const storedData = JSON.parse(localStorage.getItem("boardData"));
-    const updatedData = storedData.filter((board) => board.title !== title);
-    localStorage.setItem("boardData", JSON.stringify(updatedData));
-  };
-  // / local storage - start
-
   return (
-    <li className={css.liItem}>
-      <div className={css.titleWrapper}>
-        <svg className={css.titleIcon} width="18px" height="18px">
-          <use href={`${svg}#${icon}`} />
-        </svg>
-        <h3 className={css.title}>{title}</h3>
-      </div>
-      <span className={css.btns}>
-        <button className={css.btn} type="button" onClick={openModal}>
-          <svg className={css.icon} width="16px" height="16px">
-            <use href={svg + "#icon-pencil"}></use>
-          </svg>
-        </button>
-        <button className={css.btn} type="button" onClick={deleteHandler}>
-          <svg className={css.icon} width="16px" height="16px">
-            <use href={svg + "#icon-trash"}></use>
-          </svg>
-        </button>
-      </span>
-      {isModalOpen && (
-        <EditBoardModal
-          isOpen={isModalOpen}
-          onClose={closeModal}
-          title={title}
-          icon={icon}
-          background={background}
-        />
-      )}
-    </li>
+    <div>
+      <ul>
+        <li className={css.liItem}>
+          <div className={css.titleWrapper}>
+            <svg className={css.titleIcon} width="18px" height="18px">
+              <use href={`${svg}#${icon}`} />
+            </svg>
+            <h3 className={css.title}>{title}</h3>
+          </div>
+          <span className={css.btns}>
+            <button className={css.btn} type="button" onClick={openModal}>
+              <svg className={css.icon} width="16px" height="16px">
+                <use href={svg + "#icon-pencil"}></use>
+              </svg>
+            </button>
+            <button className={css.btn} type="button" onClick={handleDelete}>
+              <svg className={css.icon} width="16px" height="16px">
+                <use href={svg + "#icon-trash"}></use>
+              </svg>
+            </button>
+          </span>
+          {isModalOpen && (
+            <EditBoardModal
+              isOpen={isModalOpen}
+              onClose={closeModal}
+              title={title}
+              icon={icon}
+              boardId={_id}
+              background={background}
+            />
+          )}
+        </li>
+      </ul>
+    </div>
   );
 }

src/components/BoardList/BoardList.jsx

@@ -1,47 +1,22 @@
-import { useState, useEffect } from "react";
 import CreateBoardBtn from "../CreateBoardBtn/CreateBoardBtn";
 import Board from "../Board/Board";
 
 import css from "./BoardList.module.css";
-import bgData from "../../assets/bg.json";
+import { useSelector } from "react-redux";
+import { selectBoards } from "../../redux/boards/selectors.js";
 
 export default function BoardList() {
-  const [boards, setBoards] = useState([]);
-
-  useEffect(() => {
-    const storedBoards = JSON.parse(localStorage.getItem("boardData")) || [];
-    setBoards(storedBoards);
-  }, []);
-
-  const getBgById = (id) => {
-    const {
-      id: _,
-      mini,
-      mini2x,
-      ...bgs
-    } = bgData.find((item) => item.id === id) || {};
-    return bgs;
-  };
+  const boards = useSelector(selectBoards);
 
   return (
     <>
       <h3 className={css.title}>My boards</h3>
-
       <CreateBoardBtn />
-
-      <ul className={css.list}>
-        {boards.map((board, index) => {
-          const bg = getBgById(board.background);
-          return (
-            <Board
-              key={index}
-              title={board.title}
-              icon={board.icon}
-              background={bg}
-            />
-          );
-        })}
-      </ul>
+      <div className={css.list}>
+        {boards.map((board) => (
+          <Board key={board._id} board={board} />
+        ))}
+      </div>
     </>
   );
 }

src/components/CreateBoardModal/CreateBoardModal.jsx

@@ -37,44 +37,32 @@ export default function CreateBoardModal({
 }) {
   const [selectedIcon, setSelectedIcon] = useState(icons[0]);
   const [selectedBg, setSelectedBg] = useState(bgData[0].id);
-
   const dispatch = useDispatch();
 
   const handleSubmit = (values, actions) => {
     const newBoard = {
-      // Значення які будемо передавати на редакс
+      title: values.title,
+      icon: values.icon,
+      background: values.background,
     };
     actions.resetForm();
     dispatch(addBoard(newBoard));
+    onClose();
   };
-
   const handleIconSelect = (icon, setFieldValue) => {
     setSelectedIcon(icon);
     setFieldValue("icon", icon);
   };
 
-  const handleBgSelect = (bg, setFieldValue) => {
-    setSelectedBg(bg);
-    setFieldValue("background", bg);
-  };
-
-  const submitHandler = (values, actions) => {
-    console.log(values);
-
-    // Local storage - start
-    const storedData = JSON.parse(localStorage.getItem("boardData"));
-
-    const updatedData = Array.isArray(storedData)
-      ? [...storedData, values]
-      : [values];
-
-    localStorage.setItem("boardData", JSON.stringify(updatedData));
-    // Local storage - end
-
-    actions.resetForm();
-    onClose();
+  const handleBgSelect = (bgId, setFieldValue) => {
+    const selectedBackground = bgData.find((bg) => bg.id === bgId);
+    if (selectedBackground) {
+      const { id, mini, mini2x, ...bgs } = selectedBackground;
+      setSelectedBg(bgId);
+      setFieldValue("background", bgs);
+      console.log(bgs);
+    }
   };
-
   return (
     <Modal
       overlayClassName={css.overlay}
@@ -97,7 +85,7 @@ export default function CreateBoardModal({
           background: selectedBg,
         }}
         validationSchema={titleValidationSchema}
-        onSubmit={submitHandler}
+        onSubmit={handleSubmit}
       >
         {({ setFieldValue }) => (
           <Form>

src/components/EditBoardModal/EditBoardModal.jsx

@@ -7,6 +7,9 @@ import svg from "../../img/icons.svg";
 import bgData from "../../assets/bg.json";
 import css from "./EditBoardModal.module.css";
 import clsx from "clsx";
+import toast from "react-hot-toast";
+import { useDispatch } from "react-redux";
+import { updateBoard } from "../../redux/boards/operations";
 
 const icons = [
   "icon-i-1-project",
@@ -34,7 +37,9 @@ export default function EditBoardModal({
   title,
   icon,
   background,
+  boardId,
 }) {
+  const dispatch = useDispatch();
   const [selectedIcon, setSelectedIcon] = useState(icon || icons[0]);
   const [selectedBg, setSelectedBg] = useState(background || bgData[0].id);
 
@@ -43,31 +48,29 @@ export default function EditBoardModal({
     setFieldValue("icon", icon);
   };
 
-  const handleBgSelect = (bg, setFieldValue) => {
-    setSelectedBg(bg);
-    setFieldValue("background", bg);
+  const handleBgSelect = (bgId, setFieldValue) => {
+    const selectedBackground = bgData.find((bg) => bg.id === bgId);
+    if (selectedBackground) {
+      const { id, mini, mini2x, ...bgs } = selectedBackground;
+      setSelectedBg(bgId);
+      setFieldValue("background", bgs);
+      console.log(bgs);
+    }
   };
 
-  const submitHandler = (values, actions) => {
-    // Local storage - start
-    const storedData = JSON.parse(localStorage.getItem("boardData"));
+  const contactEditNotify = () => toast.success("You edit board");
 
-    const updatedData = storedData.map((board) => {
-      if (board.title === title) {
-        return {
-          ...board,
-          title: values.title,
-          icon: selectedIcon,
-          background: selectedBg,
-        };
-      }
-      return board;
-    });
+  const submitHandler = (values) => {
+    dispatch(
+      updateBoard({
+        title: values.title,
+        icon: selectedIcon,
+        background: values.background,
+        id: boardId,
+      })
+    );
 
-    localStorage.setItem("boardData", JSON.stringify(updatedData));
-    // Local storage - end
-
-    actions.resetForm();
+    contactEditNotify();
     onClose();
   };
 

src/components/Header/Header.jsx

@@ -4,7 +4,7 @@ import ThemeModal from "../ThemeModal/ThemeModal";
 import svg from "../../img/icons.svg";
 import css from "../Header/Header.module.css";
 import { useSelector } from "react-redux";
-import { selectUser } from "../../redux/auth/selectror";
+import { selectUser } from "../../redux/auth/selectors";
 
 export default function Header({ openSideBar, sideBarOpen }) {
   const user = useSelector(selectUser);

src/components/LoginForm/LoginForm.jsx

@@ -4,10 +4,9 @@ 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 { selectError } from "../../redux/auth/selectors";
 import * as Yup from "yup";
 
-
 const ValidationSchema = Yup.object().shape({
   email: Yup.string().email("Must be a valid email!").required("Required"),
   password: Yup.string()
@@ -58,7 +57,7 @@ export default function LoginForm() {
         validationSchema={ValidationSchema}
       >
         <Form className={css.form}>
-          <label htmlFor="email"/>
+          <label htmlFor="email" />
           <Field
             type="email"
             name="email"
@@ -67,7 +66,7 @@ export default function LoginForm() {
             required
           />
           <ErrorMessage name="email" component="span" className={css.error} />
-          <label htmlFor="password"/>
+          <label htmlFor="password" />
           <div>
             <Field
               type={showPassword ? "text" : "password"}
@@ -76,7 +75,11 @@ export default function LoginForm() {
               placeholder="Enter your password"
               required
             />
-            <ErrorMessage name="password" component="span" className={css.error} />
+            <ErrorMessage
+              name="password"
+              component="span"
+              className={css.error}
+            />
             <button
               type="button"
               className={css.eye}

src/components/PrivateRoute/PrivateRoute.jsx

@@ -1,5 +1,5 @@
 import { useSelector } from "react-redux";
-import { selectIsLoggedIn } from "../../redux/auth/selectror";
+import { selectIsLoggedIn } from "../../redux/auth/selectors";
 import { Navigate } from "react-router-dom";
 
 export default function PrivateRoute({

src/components/RestrictedRoute/RestrictedRoute.jsx

@@ -1,6 +1,6 @@
 import { Navigate } from "react-router-dom";
 // import { useAuth } from "../hooks/useAuth";
-import { selectIsLoggedIn } from "../../redux/auth/selectror";
+import { selectIsLoggedIn } from "../../redux/auth/selectors";
 import { useSelector } from "react-redux";
 
 export default function RestrictedRoute({

src/components/UserEditModal/UserEditModal.jsx

@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import { useDispatch } from "react-redux";
 import { useSelector } from "react-redux";
-import { selectUser } from "../../redux/auth/selectror";
+import { selectUser } from "../../redux/auth/selectors";
 import { Field, Form, Formik } from "formik";
 import { ErrorMessage } from "formik";
 import PasswordField from "../PasswordField/PasswordField";