Merge pull request #70 from Sicnecher/sicnecher-branch

feat: rating
Sicnecher · Jan 31, 2025 · 0c46c50 · 0c46c50
2 parents 6fc41dc + b52d74b
commit 0c46c50
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 40 deletions.
diff --git a/src/cmps/BoardCard.jsx b/src/cmps/BoardCard.jsx
@@ -1,23 +1,33 @@
-import { useNavigate } from "react-router"
-import { useState } from "react"
+import { useNavigate } from "react-router";
+import { useState, useEffect } from "react";
+import { SvgCmp } from "../services/svg.service";
+import { useSelector } from "react-redux";
 
-export function BoardCard({ board, onUpdateBoardName }) {
-
-
-    const [boardName, setBoardName] = useState(board.title)
-    const navigate = useNavigate()
-    return (
-        <div
-            className="board-card"
-            key={board.id}
-
-        >
-            <img
-                onClick={() => navigate(`./boards/${board.id}`)}
-                src="https://cdn.monday.com/images/quick_search_recent_board2.svg"
-                alt="Board Thumbnail"
-            />
-            <input onBlur={() => onUpdateBoardName(board.id, boardName)} type="text" className="board-input" value={boardName} onChange={(e) => setBoardName(e.target.value)} />
-        </div>
-    )
-}
+export function BoardCard({ board, onUpdateBoardName, handleFavorite }) {
+  const favorites = useSelector((state) => state.boardModule.favorites);
+  const [boardName, setBoardName] = useState(board.title);
+  const navigate = useNavigate();
+  return (
+    <div className="board-card" key={board.id}>
+      <img
+        onClick={() => navigate(`./boards/${board.id}`)}
+        src="https://cdn.monday.com/images/quick_search_recent_board2.svg"
+        alt="Board Thumbnail"
+      />
+      <input
+        onBlur={() => onUpdateBoardName(board.id, boardName)}
+        type="text"
+        className="board-input"
+        value={boardName}
+        onChange={(e) => setBoardName(e.target.value)}
+      />
+      <div onClick={() => handleFavorite(board.id)}>
+        <SvgCmp
+          type={`${
+            favorites.includes(board.id) ? "full" : "empty"
+          }-rating-icon`}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/cmps/MainInnerIndex.jsx b/src/cmps/MainInnerIndex.jsx
@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import BoardDetails from "./BoardDetails";
 import { useNavigate } from "react-router";
-import { loadBoards } from "../store/actions/boards.actions.js";
+import { loadBoards, setFavories } from "../store/actions/boards.actions.js";
 import { addBoard, updateBoardName } from "../store/actions/boards.actions.js";
 import { loadUsers, logout } from "../store/actions/user.actions.js";
 import { BoardCard } from "./BoardCard.jsx";
@@ -10,9 +10,6 @@ import { useSelector } from "react-redux";
 
 export function MainInnerIndex({ user, isBoard, boards }) {
   const filteredColumns = useSelector((state) => state.boardModule.filteredColumns);
-  setTimeout(() => {
-    console.log(filteredColumns)
-  }, 1000)
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -31,6 +28,11 @@ export function MainInnerIndex({ user, isBoard, boards }) {
     updateBoardName(id, title);
   }
 
+  async function handleFavorite(boardId){
+    await setFavories(boardId);
+    console.log(boardId)
+  }
+
   return !isBoard ? (
     <div className="main-inner-index">
       <section className="welcome-section">
@@ -51,6 +53,7 @@ export function MainInnerIndex({ user, isBoard, boards }) {
                 key={board.id}
                 board={board}
                 onUpdateBoardName={onUpdateBoardName}
+                handleFavorite={handleFavorite}
               />
             ))}
           </div>

diff --git a/src/cmps/SideBar.jsx b/src/cmps/SideBar.jsx
@@ -12,10 +12,13 @@ import BoardIcon from "@mui/icons-material/SpaceDashboardOutlined";
 import HorizDotsIcon from "@mui/icons-material/MoreHorizOutlined";
 import { MenuModal } from "./dynamicCmps/modals/menu/MenuModal";
 import { useState } from "react";
+import { useSelector } from "react-redux";
+import { getSvg, SvgCmp } from "../services/svg.service";
 
 export function SideBar({ boards, user, onRemoveBoard }) {
   const [menuDisplay, setMenuDisplay] = useState(false);
   const [favoritesOpen, setFavoritesOpen] = useState(false);
+  const favorites = useSelector((state) => state.boardModule.favorites);
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -61,9 +64,10 @@ export function SideBar({ boards, user, onRemoveBoard }) {
       {/* Favorites Section */}
       <section className="favorites">
         <div>
-          <FavoritesIcon
+          <SvgCmp
+            type={!favoritesOpen ? `empty-rating-icon` : `full-rating-icon`}
             className="side-bar-icon favorites"
-            style={iconStyle}
+            style={favoritesOpen ? iconStyle : {...iconStyle, backgroundColor: ""}}
           />
           <p>Favorites</p>
         </div>
@@ -76,10 +80,37 @@ export function SideBar({ boards, user, onRemoveBoard }) {
 
       {/* Workspaces Section */}
       {favoritesOpen ? (
-        ""
+                  <ul className="sidebar-boardlist">
+                  {boards.map((board) => favorites.includes(board.id) && (
+                    <li key={board.id}>
+                      <div
+                        className="sidebar-board"
+                        onClick={() => {
+                          console.log(board.id);
+                          onChangeAdressOnce(
+                            `/${utilService.getNameFromEmail(
+                              user.email
+                            )}s-team.sunday.com/boards/${board.id}`
+                          );
+                        }}
+                      >
+                        <section>
+                          <BoardIcon style={iconStyle} />
+                          {/* Board Title Navigation */}
+                          <h3>{board.title}</h3>
+                        </section>
+                        <HorizDotsIcon
+                          onClick={(event) => handleDotsClick(event, board.id)}
+                          className="horizontal-dots-icon"
+                          style={iconStyle}
+                        />
+                      </div>
+                    </li>
+                  ))}
+                </ul>
       ) : (
         <>
-        <hr />
+          <hr />
           <div className="workspaces">
             <section>
               <WorkspacesIcon

diff --git a/src/cmps/dynamicCmps/modals/filterModal.jsx b/src/cmps/dynamicCmps/modals/filterModal.jsx
@@ -12,8 +12,6 @@ export function FilterModal({ boardId, boardColumnsFilter, handleFilteredLabel }
   const [boardLabels, setBoardLabels] = useState(boards.find((board) => board.id === boardId).labels);
   const [filterBy, setFilterBy] = useState("");  
 
-
-
   useEffect(() => {
     console.log(`boardColumnsFilter: `, boardColumnsFilter)
   })

diff --git a/src/services/board.service.js b/src/services/board.service.js
@@ -47,18 +47,21 @@ export const boardService = {
   setFavorites,
 };
 
-function setFavorites(favoriteId) {
+async function setFavorites(favoriteId) {
   const localFavorites = JSON.parse(localStorage.getItem(FAVORITES_KEY)) || [];
   if (localFavorites && localFavorites[0]) {
-    const index = localFavorites.findIndex((id) => id === favoriteId);
+    const index = await localFavorites.findIndex((id) => id === favoriteId);
     if (index !== -1) {
       localFavorites.splice(index, 1);
-    } else {
+    } else if(typeof favoriteId === "string") {
       localFavorites.push(favoriteId);
     }
     localStorage.setItem(FAVORITES_KEY, JSON.stringify(localFavorites));
+    return await localFavorites;
   } else {
-    localStorage.setItem(FAVORITES_KEY, JSON.stringify([favoriteId]));
+    const inputFavorite = Array.isArray(favoriteId) ? favoriteId : [favoriteId]
+    localStorage.setItem(FAVORITES_KEY, JSON.stringify(inputFavorite));
+    return inputFavorite;
   }
 }
 

diff --git a/src/services/svg.service.jsx b/src/services/svg.service.jsx
@@ -31,10 +31,17 @@ export function getSvg(svgName) {
 
         case 'taskTitle-icon':
           return(<svg viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><rect width="20" height="20" rx="3.636" fill="var(--color-lavender)"></rect><g filter="url(#filter0_d_59610_12628)"><path d="M3 5.25C2.58579 5.25 2.25 5.58579 2.25 6V7.60714C2.25 8.02135 2.58579 8.35714 3 8.35714C3.41421 8.35714 3.75 8.02135 3.75 7.60714V6.75H5.19727V12.75H4.60742C4.19321 12.75 3.85742 13.0858 3.85742 13.5C3.85742 13.9142 4.19321 14.25 4.60742 14.25H7.28598C7.7002 14.25 8.03598 13.9142 8.03598 13.5C8.03598 13.0858 7.7002 12.75 7.28598 12.75H6.69727V6.75H8.14284V7.60714C8.14284 8.02135 8.47862 8.35714 8.89284 8.35714C9.30705 8.35714 9.64284 8.02135 9.64284 7.60714V6C9.64284 5.58579 9.30705 5.25 8.89284 5.25H5.94727H3ZM11.0352 7.3929C10.6209 7.3929 10.2852 7.72868 10.2852 8.1429V9.75004C10.2852 10.1642 10.6209 10.5 11.0352 10.5C11.4494 10.5 11.7852 10.1642 11.7852 9.75004V8.8929H13.2324V12.75H12.6426C12.2284 12.75 11.8926 13.0858 11.8926 13.5C11.8926 13.9142 12.2284 14.25 12.6426 14.25H13.9749C13.9774 14.25 13.9799 14.25 13.9824 14.25C13.9849 14.25 13.9875 14.25 13.99 14.25H15.3211C15.7354 14.25 16.0711 13.9142 16.0711 13.5C16.0711 13.0858 15.7354 12.75 15.3211 12.75H14.7324V8.8929H16.178V9.75004C16.178 10.1642 16.5138 10.5 16.928 10.5C17.3422 10.5 17.678 10.1642 17.678 9.75004V8.1429C17.678 7.72868 17.3422 7.3929 16.928 7.3929H13.9824H11.0352Z" fill="#fff" fill-rule="evenodd" clip-rule="evenodd"></path></g><defs><filter id="filter0_d_59610_12628" x=".43" y="4.34" width="19.068" height="12.64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix><feOffset dy=".91"></feOffset><feGaussianBlur stdDeviation=".91"></feGaussianBlur><feComposite in2="hardAlpha" operator="out"></feComposite><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_59610_12628"></feBlend><feBlend in="SourceGraphic" in2="effect1_dropShadow_59610_12628" result="shape"></feBlend></filter></defs></svg>)
-
+
+        case 'full-rating-icon':
+          return (<svg viewBox="0 0 20 20" fill="currentColor" width="20" height="20" aria-hidden="true" class="icon_9666403f60 star-component-button-icon star-component-button-icon-on noFocusStyle_ff05a1eb1d" data-testid="icon"><path d="M11.2336 3.01626L10.5614 3.34904L11.234 3.01724L13.0145 6.62645L17.0025 7.20743C17.256 7.24569 17.4938 7.354 17.6891 7.52016C17.8843 7.68632 18.0293 7.90371 18.1076 8.14784C18.1859 8.39196 18.1945 8.65312 18.1324 8.90186C18.0703 9.15018 17.9403 9.37628 17.7569 9.55475L17.7559 9.55566L14.8738 12.3658L15.5539 16.3359L15.5542 16.3378C15.5984 16.5918 15.5704 16.8532 15.4733 17.0922C15.3759 17.3317 15.2131 17.5389 15.0034 17.6901C14.7937 17.8414 14.5457 17.9305 14.2877 17.9473C14.0313 17.964 13.7754 17.9085 13.5489 17.7874L9.99916 15.9209L6.4403 17.793C6.21381 17.9142 5.95789 17.9697 5.70148 17.953C5.44349 17.9362 5.19545 17.8471 4.98577 17.6958C4.77609 17.5446 4.61324 17.3374 4.51589 17.0979C4.41876 16.8589 4.39073 16.5975 4.43499 16.3434L4.4353 16.3417L5.11535 12.3715L2.23779 9.55909L2.23676 9.55808C2.05337 9.37963 1.92336 9.15357 1.86134 8.90529C1.79921 8.65655 1.80779 8.39539 1.88612 8.15127C1.96445 7.90714 2.10941 7.68974 2.30467 7.52359C2.49993 7.35743 2.73772 7.24912 2.99123 7.21086L2.99453 7.21037L6.9838 6.6265L8.76473 3.01626C8.87864 2.78619 9.05458 2.59254 9.27269 2.45714C9.49081 2.32175 9.74242 2.25 9.99915 2.25C10.2559 2.25 10.5075 2.32175 10.7256 2.45714C10.9437 2.59254 11.1197 2.78619 11.2336 3.01626Z"></path></svg>)
+
+          case 'empty-rating-icon':
+            return (<svg viewBox="0 0 20 20" fill="currentColor" width="20" height="20" aria-hidden="true" class="icon_9666403f60 star-component-button-icon noFocusStyle_ff05a1eb1d" data-testid="icon"><path d="M11.234 3.016a1.379 1.379 0 0 0-2.47 0l-1.78 3.61-3.99.584h-.003a1.376 1.376 0 0 0-.754 2.348v.001l2.878 2.813-.68 3.97v.001a1.376 1.376 0 0 0 2.005 1.45L10 15.921l3.549 1.866a1.377 1.377 0 0 0 2.005-1.45v-.001l-.68-3.97 2.882-2.81v-.001a1.377 1.377 0 0 0-.753-2.348l-3.989-.58-1.78-3.61Zm-1.235.888L8.3 7.35a1.378 1.378 0 0 1-1.034.752l-3.803.557 2.747 2.685a1.376 1.376 0 0 1 .395 1.22l-.649 3.79 3.404-1.79a1.377 1.377 0 0 1 1.28 0l3.395 1.785-.65-3.79v-.002a1.374 1.374 0 0 1 .396-1.218l2.751-2.683-3.796-.554a1.382 1.382 0 0 1-1.037-.752L10 3.904Z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>)
       default:
         console.log('Svg Not Found')
         return <div/>
     }
   }
 
+  export const SvgCmp = ({type}) => getSvg(type)
+
diff --git a/src/store/actions/boards.actions.js b/src/store/actions/boards.actions.js
@@ -10,6 +10,7 @@ import {
   OPEN_MODALS,
   SET_FILTER_BY,
   SET_FILTERED_COLUMNS,
+  SET_FAVORITES
 } from "../reducer/boards.reducer";
 
 export async function addBoard() {
@@ -40,6 +41,8 @@ export async function loadBoards() {
     boardService.setFilteredColumnsSession(
       boards.map((board) => ({ id: board.id, labels: board.labels }))
     );
+    const favorites = await setFavories();
+    console.log(favorites);
   await store.dispatch({ type: SET_BOARDS, boards });
   await store.dispatch({
     type: SET_FILTERED_COLUMNS,
@@ -371,7 +374,8 @@ export async function setFilteredColumns(filteredColumns) {
   store.dispatch({ type: SET_FILTERED_COLUMNS, newFilteredColumns });
 }
 
-export function setFavories(favorites) {
-  const serviceFavorites = boardService.setFavorites(favorites);
-  store.dispatch({ type: SET_FAVORITES, serviceFavorites });
+export async function setFavories(favorite = []) {
+  const serviceFavorites = await boardService.setFavorites(favorite);
+  store.dispatch({ type: SET_FAVORITES, favorites: serviceFavorites });
+  return await serviceFavorites;
 }
diff --git a/src/store/reducer/boards.reducer.js b/src/store/reducer/boards.reducer.js
@@ -7,6 +7,7 @@ export const ADD_BOARD = 'ADD_BOARD'
 export const OPEN_MODALS = 'OPEN_MODALS'
 export const SET_FILTER_BY = 'SET_FILTER'
 export const SET_FILTERED_COLUMNS = 'SET_FILTERED_COLUMNS'
+export const SET_FAVORITES = 'SET_FAVORITES'
 
 const initialState = {
   boards: [],
@@ -64,6 +65,12 @@ export const boardReducer = (state = initialState, action) => {
         filteredColumns: action.newFilteredColumns,
       }
 
+      case SET_FAVORITES:
+      return {
+        ...state,
+        favorites: action.favorites,
+      }
+
     default:
       return state
   }