Skip to content

Commit b52d74b

Browse files
adamEfratyadamEfraty
committed
feat: rating
1 parent 4e9721e commit b52d74b

File tree

8 files changed

+103
-40
lines changed

8 files changed

+103
-40
lines changed

‎src/cmps/BoardCard.jsx

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,33 @@
1-
import { useNavigate } from "react-router"
2-
import { useState } from "react"
1+
import { useNavigate } from "react-router";
2+
import { useState, useEffect } from "react";
3+
import { SvgCmp } from "../services/svg.service";
4+
import { useSelector } from "react-redux";
35

4-
export function BoardCard({ board, onUpdateBoardName }) {
5-
6-
7-
const [boardName, setBoardName] = useState(board.title)
8-
const navigate = useNavigate()
9-
return (
10-
<div
11-
className="board-card"
12-
key={board.id}
13-
14-
>
15-
<img
16-
onClick={() => navigate(`./boards/${board.id}`)}
17-
src="https://cdn.monday.com/images/quick_search_recent_board2.svg"
18-
alt="Board Thumbnail"
19-
/>
20-
<input onBlur={() => onUpdateBoardName(board.id, boardName)} type="text" className="board-input" value={boardName} onChange={(e) => setBoardName(e.target.value)} />
21-
</div>
22-
)
23-
}
6+
export function BoardCard({ board, onUpdateBoardName, handleFavorite }) {
7+
const favorites = useSelector((state) => state.boardModule.favorites);
8+
const [boardName, setBoardName] = useState(board.title);
9+
const navigate = useNavigate();
10+
return (
11+
<div className="board-card" key={board.id}>
12+
<img
13+
onClick={() => navigate(`./boards/${board.id}`)}
14+
src="https://cdn.monday.com/images/quick_search_recent_board2.svg"
15+
alt="Board Thumbnail"
16+
/>
17+
<input
18+
onBlur={() => onUpdateBoardName(board.id, boardName)}
19+
type="text"
20+
className="board-input"
21+
value={boardName}
22+
onChange={(e) => setBoardName(e.target.value)}
23+
/>
24+
<div onClick={() => handleFavorite(board.id)}>
25+
<SvgCmp
26+
type={`${
27+
favorites.includes(board.id) ? "full" : "empty"
28+
}-rating-icon`}
29+
/>
30+
</div>
31+
</div>
32+
);
33+
}

‎src/cmps/MainInnerIndex.jsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect } from "react";
22
import BoardDetails from "./BoardDetails";
33
import { useNavigate } from "react-router";
4-
import { loadBoards } from "../store/actions/boards.actions.js";
4+
import { loadBoards, setFavories } from "../store/actions/boards.actions.js";
55
import { addBoard, updateBoardName } from "../store/actions/boards.actions.js";
66
import { loadUsers, logout } from "../store/actions/user.actions.js";
77
import { BoardCard } from "./BoardCard.jsx";
@@ -10,9 +10,6 @@ import { useSelector } from "react-redux";
1010

1111
export function MainInnerIndex({ user, isBoard, boards }) {
1212
const filteredColumns = useSelector((state) => state.boardModule.filteredColumns);
13-
setTimeout(() => {
14-
console.log(filteredColumns)
15-
}, 1000)
1613
const navigate = useNavigate();
1714

1815
useEffect(() => {
@@ -31,6 +28,11 @@ export function MainInnerIndex({ user, isBoard, boards }) {
3128
updateBoardName(id, title);
3229
}
3330

31+
async function handleFavorite(boardId){
32+
await setFavories(boardId);
33+
console.log(boardId)
34+
}
35+
3436
return !isBoard ? (
3537
<div className="main-inner-index">
3638
<section className="welcome-section">
@@ -51,6 +53,7 @@ export function MainInnerIndex({ user, isBoard, boards }) {
5153
key={board.id}
5254
board={board}
5355
onUpdateBoardName={onUpdateBoardName}
56+
handleFavorite={handleFavorite}
5457
/>
5558
))}
5659
</div>

‎src/cmps/SideBar.jsx

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,13 @@ import BoardIcon from "@mui/icons-material/SpaceDashboardOutlined";
1212
import HorizDotsIcon from "@mui/icons-material/MoreHorizOutlined";
1313
import { MenuModal } from "./dynamicCmps/modals/menu/MenuModal";
1414
import { useState } from "react";
15+
import { useSelector } from "react-redux";
16+
import { getSvg, SvgCmp } from "../services/svg.service";
1517

1618
export function SideBar({ boards, user, onRemoveBoard }) {
1719
const [menuDisplay, setMenuDisplay] = useState(false);
1820
const [favoritesOpen, setFavoritesOpen] = useState(false);
21+
const favorites = useSelector((state) => state.boardModule.favorites);
1922
const location = useLocation();
2023
const navigate = useNavigate();
2124

@@ -61,9 +64,10 @@ export function SideBar({ boards, user, onRemoveBoard }) {
6164
{/* Favorites Section */}
6265
<section className="favorites">
6366
<div>
64-
<FavoritesIcon
67+
<SvgCmp
68+
type={!favoritesOpen ? `empty-rating-icon` : `full-rating-icon`}
6569
className="side-bar-icon favorites"
66-
style={iconStyle}
70+
style={favoritesOpen ? iconStyle : {...iconStyle, backgroundColor: ""}}
6771
/>
6872
<p>Favorites</p>
6973
</div>
@@ -76,10 +80,37 @@ export function SideBar({ boards, user, onRemoveBoard }) {
7680

7781
{/* Workspaces Section */}
7882
{favoritesOpen ? (
79-
""
83+
<ul className="sidebar-boardlist">
84+
{boards.map((board) => favorites.includes(board.id) && (
85+
<li key={board.id}>
86+
<div
87+
className="sidebar-board"
88+
onClick={() => {
89+
console.log(board.id);
90+
onChangeAdressOnce(
91+
`/${utilService.getNameFromEmail(
92+
user.email
93+
)}s-team.sunday.com/boards/${board.id}`
94+
);
95+
}}
96+
>
97+
<section>
98+
<BoardIcon style={iconStyle} />
99+
{/* Board Title Navigation */}
100+
<h3>{board.title}</h3>
101+
</section>
102+
<HorizDotsIcon
103+
onClick={(event) => handleDotsClick(event, board.id)}
104+
className="horizontal-dots-icon"
105+
style={iconStyle}
106+
/>
107+
</div>
108+
</li>
109+
))}
110+
</ul>
80111
) : (
81112
<>
82-
<hr />
113+
<hr />
83114
<div className="workspaces">
84115
<section>
85116
<WorkspacesIcon

‎src/cmps/dynamicCmps/modals/filterModal.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ export function FilterModal({ boardId, boardColumnsFilter, handleFilteredLabel }
1212
const [boardLabels, setBoardLabels] = useState(boards.find((board) => board.id === boardId).labels);
1313
const [filterBy, setFilterBy] = useState("");
1414

15-
16-
1715
useEffect(() => {
1816
console.log(`boardColumnsFilter: `, boardColumnsFilter)
1917
})

‎src/services/board.service.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,21 @@ export const boardService = {
4747
setFavorites,
4848
};
4949

50-
function setFavorites(favoriteId) {
50+
async function setFavorites(favoriteId) {
5151
const localFavorites = JSON.parse(localStorage.getItem(FAVORITES_KEY)) || [];
5252
if (localFavorites && localFavorites[0]) {
53-
const index = localFavorites.findIndex((id) => id === favoriteId);
53+
const index = await localFavorites.findIndex((id) => id === favoriteId);
5454
if (index !== -1) {
5555
localFavorites.splice(index, 1);
56-
} else {
56+
} else if(typeof favoriteId === "string") {
5757
localFavorites.push(favoriteId);
5858
}
5959
localStorage.setItem(FAVORITES_KEY, JSON.stringify(localFavorites));
60+
return await localFavorites;
6061
} else {
61-
localStorage.setItem(FAVORITES_KEY, JSON.stringify([favoriteId]));
62+
const inputFavorite = Array.isArray(favoriteId) ? favoriteId : [favoriteId]
63+
localStorage.setItem(FAVORITES_KEY, JSON.stringify(inputFavorite));
64+
return inputFavorite;
6265
}
6366
}
6467

‎src/services/svg.service.jsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,17 @@ export function getSvg(svgName) {
3131

3232
case 'taskTitle-icon':
3333
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>)
34-
34+
35+
case 'full-rating-icon':
36+
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>)
37+
38+
case 'empty-rating-icon':
39+
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>)
3540
default:
3641
console.log('Svg Not Found')
3742
return <div/>
3843
}
3944
}
4045

46+
export const SvgCmp = ({type}) => getSvg(type)
47+

‎src/store/actions/boards.actions.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
OPEN_MODALS,
1111
SET_FILTER_BY,
1212
SET_FILTERED_COLUMNS,
13+
SET_FAVORITES
1314
} from "../reducer/boards.reducer";
1415

1516
export async function addBoard() {
@@ -40,6 +41,8 @@ export async function loadBoards() {
4041
boardService.setFilteredColumnsSession(
4142
boards.map((board) => ({ id: board.id, labels: board.labels }))
4243
);
44+
const favorites = await setFavories();
45+
console.log(favorites);
4346
await store.dispatch({ type: SET_BOARDS, boards });
4447
await store.dispatch({
4548
type: SET_FILTERED_COLUMNS,
@@ -371,7 +374,8 @@ export async function setFilteredColumns(filteredColumns) {
371374
store.dispatch({ type: SET_FILTERED_COLUMNS, newFilteredColumns });
372375
}
373376

374-
export function setFavories(favorites) {
375-
const serviceFavorites = boardService.setFavorites(favorites);
376-
store.dispatch({ type: SET_FAVORITES, serviceFavorites });
377+
export async function setFavories(favorite = []) {
378+
const serviceFavorites = await boardService.setFavorites(favorite);
379+
store.dispatch({ type: SET_FAVORITES, favorites: serviceFavorites });
380+
return await serviceFavorites;
377381
}

‎src/store/reducer/boards.reducer.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export const ADD_BOARD = 'ADD_BOARD'
77
export const OPEN_MODALS = 'OPEN_MODALS'
88
export const SET_FILTER_BY = 'SET_FILTER'
99
export const SET_FILTERED_COLUMNS = 'SET_FILTERED_COLUMNS'
10+
export const SET_FAVORITES = 'SET_FAVORITES'
1011

1112
const initialState = {
1213
boards: [],
@@ -64,6 +65,12 @@ export const boardReducer = (state = initialState, action) => {
6465
filteredColumns: action.newFilteredColumns,
6566
}
6667

68+
case SET_FAVORITES:
69+
return {
70+
...state,
71+
favorites: action.favorites,
72+
}
73+
6774
default:
6875
return state
6976
}

0 commit comments

Comments
 (0)