From 5419eeef9b75816d4540ceaf006802ad5e329c69 Mon Sep 17 00:00:00 2001 From: Nazar-Kotiv Date: Thu, 13 Jun 2024 17:32:06 +0200 Subject: [PATCH] commit --- src/components/App/App.jsx | 3 +- src/components/Board/Board.jsx | 86 +++++++++++-------- src/components/BoardList/BoardList.jsx | 41 ++------- .../CreateBoardModal/CreateBoardModal.jsx | 38 +++----- .../EditBoardModal/EditBoardModal.jsx | 45 +++++----- src/components/Header/Header.jsx | 2 +- src/components/LoginForm/LoginForm.jsx | 13 +-- src/components/PrivateRoute/PrivateRoute.jsx | 2 +- .../RestrictedRoute/RestrictedRoute.jsx | 2 +- .../UserEditModal/UserEditModal.jsx | 2 +- src/redux/auth/operations.js | 2 +- src/redux/auth/{selectror.js => selectors.js} | 0 src/redux/boards/operations.js | 16 ++-- src/redux/boards/selectors.js | 6 +- src/redux/boards/slice.js | 2 +- 15 files changed, 121 insertions(+), 139 deletions(-) rename src/redux/auth/{selectror.js => selectors.js} (100%) diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx index 7da5545..b6eaece 100644 --- a/src/components/App/App.jsx +++ b/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 = () => { )} ); - }; diff --git a/src/components/Board/Board.jsx b/src/components/Board/Board.jsx index 37c5bf8..d4e1f85 100644 --- a/src/components/Board/Board.jsx +++ b/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 ( -
  • -
    - - - -

    {title}

    -
    - - - - - {isModalOpen && ( - - )} -
    • +
    + +
    ); } diff --git a/src/components/BoardList/BoardList.jsx b/src/components/BoardList/BoardList.jsx index e5b6b5b..6c119d4 100644 --- a/src/components/BoardList/BoardList.jsx +++ b/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 ( <>

    My boards

    - - - +
    + {boards.map((board) => ( + + ))} +
    ); } diff --git a/src/components/CreateBoardModal/CreateBoardModal.jsx b/src/components/CreateBoardModal/CreateBoardModal.jsx index 0e0889d..f49a968 100644 --- a/src/components/CreateBoardModal/CreateBoardModal.jsx +++ b/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 ( {({ setFieldValue }) => (
    diff --git a/src/components/EditBoardModal/EditBoardModal.jsx b/src/components/EditBoardModal/EditBoardModal.jsx index 4fa6b43..cd8a644 100644 --- a/src/components/EditBoardModal/EditBoardModal.jsx +++ b/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(); }; diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index be40cf1..d08d478 100644 --- a/src/components/Header/Header.jsx +++ b/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); diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx index 638d8be..ba8f742 100644 --- a/src/components/LoginForm/LoginForm.jsx +++ b/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} > -