Merge pull request #5 from saracrz/feature/add-starred-state

Add favourite state to Dashboard cards
saracrz · Nov 9, 2023 · d757498 · d757498
2 parents 0c33273 + 03d4d17
commit d757498
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/src/assets/icons.tsx b/src/assets/icons.tsx
@@ -55,3 +55,25 @@ export const SmallVisualIcon: FC = (): JSX.Element => {
 		</svg>
 	);
 };
+
+export const Star: FC = (): JSX.Element => {
+	return (
+		<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="m8.397 7.041-6.05136348.87922304-.11377631.02293026c-.73554697.19127832-1.00569137 1.13177635-.44043706 1.68276312l4.37857685 4.26808358-1.03346085 6.0271249-.01302815.1101176c-.0493896.7613373.76369692 1.3122182 1.4639776.9440589l5.4125114-2.8453014 5.4125114 2.8453014.1007022.0464187c.7088125.2822385 1.483989-.3208212 1.3502472-1.1005952l-1.0344608-6.0271249 4.3795769-4.26808358.0785689-.08542701c.4826394-.58709107.1483799-1.50675685-.6327823-1.62026637l-6.0523635-.87922304-2.7052639-5.48356571c-.3668137-.74324572-1.4266585-.74324572-1.7934722 0zm3.603-2.783 2.0421902 4.13948074.0608145.10630293c.1559287.237526.4071269.39932597.6921232.44073837l4.5658721.66347796-3.3037291 3.2209986-.0823074.0906875c-.177716.2216965-.2539724.5105991-.2052892.7944439l.7793257 4.54787-4.0836589-2.1471314-.1116832-.050255c-.2657633-.10051-.5640905-.0837584-.818999.050255l-4.0846589 2.1471314.78032574-4.54787.01328332-.1217467c.01346535-.2838152-.09465463-.5623647-.30087995-.7633847l-3.30472911-3.2209986 4.56687206-.66347796c.32571016-.04732845.60727574-.25189783.75293776-.5470413z"
+				fill="#010101"
+			/>
+		</svg>
+	);
+};
+
+export const StarFilled: FC = (): JSX.Element => {
+	return (
+		<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="m8.397 7.041-6.05136348.87922304-.11377631.02293026c-.73554697.19127832-1.00569137 1.13177635-.44043706 1.68276312l4.37857685 4.26808358-1.03346085 6.0271249-.01302815.1101176c-.0493896.7613373.76369692 1.3122182 1.4639776.9440589l5.4125114-2.8453014 5.4125114 2.8453014.1007022.0464187c.7088125.2822385 1.483989-.3208212 1.3502472-1.1005952l-1.0344608-6.0271249 4.3795769-4.26808358.0785689-.08542701c.4826394-.58709107.1483799-1.50675685-.6327823-1.62026637l-6.0523635-.87922304-2.7052639-5.48356571c-.3668137-.74324572-1.4266585-.74324572-1.7934722 0z"
+				fill="#010101"
+			/>
+		</svg>
+	);
+};
diff --git a/src/containers/CollapsibleCard.tsx b/src/containers/CollapsibleCard.tsx
@@ -1,6 +1,6 @@
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 
-import { ChevronDown, ChevronUp } from "../assets/icons";
+import { ChevronDown, ChevronUp, Star, StarFilled } from "../assets/icons";
 import { Card } from "../components";
 import { useGetDashboard } from "../hooks/useGetDashboard";
 import { IDashboardItem } from "../types";
@@ -14,19 +14,37 @@ export const CollapsibleCard: FC<ICollapsibleCard> = ({
 	setOpenCardId,
 	openCardId,
 }) => {
+	const [isFavorite, setFavorite] = useState<boolean>(false);
 	const { dashboardData } = useGetDashboard(id);
 	const isCollapsed = openCardId !== id;
 
+	useEffect(() => {
+		const storedFavorite = localStorage.getItem(dashboardTitle);
+		if (storedFavorite === "favorite") {
+			setFavorite(true);
+		}
+	}, [dashboardTitle]);
+
 	const toggleCollapse = (): void => {
 		setOpenCardId(isCollapsed ? id : null);
 	};
 
+	const toggleFavorite = () => {
+		setFavorite(!isFavorite);
+		localStorage.setItem(dashboardTitle, !isFavorite ? "favorite" : "");
+	};
+
 	return (
 		<CollapsibleCardWrapper>
 			<Card>
-				<CollapsibleTitleWrapper onClick={toggleCollapse}>
+				<CollapsibleTitleWrapper>
 					<h6>{dashboardTitle}</h6>
-					<button onClick={toggleCollapse}>{isCollapsed ? <ChevronDown /> : <ChevronUp />}</button>
+					<div>
+						<button onClick={toggleFavorite}>{isFavorite ? <StarFilled /> : <Star />}</button>
+						<button onClick={toggleCollapse}>
+							{isCollapsed ? <ChevronDown /> : <ChevronUp />}
+						</button>
+					</div>
 				</CollapsibleTitleWrapper>
 				{!isCollapsed && <Content items={dashboardData?.dashboardItems as IDashboardItem[]} />}
 			</Card>