Merge pull request #54 from evmiguel/active-state

Setting active state for chosen view
evmiguel · Apr 9, 2024 · 705114f · 705114f
2 parents 6092864 + a15ef1c
commit 705114f
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import Link from "next/link";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { FilterContext } from "@/app/filter-provider";
 import { Purchase } from "@prisma/client";
 import Analysis from "../Analysis";
@@ -12,15 +12,16 @@ type SidebarProps = {
 
 export default function Sidebar(props: SidebarProps) {
     const { className, purchases } = props;
+    const [active, setActive] = useState('week');
 
     const context = useContext(FilterContext);
 
     return (
         <ul className={className}>
-            <li className="inline-block md:block uppercase underline mb-2"><Link href="#" onClick={() => context.setPurchaseFilter('week')}>This week</Link></li>
-            <li className="inline-block md:block uppercase underline mb-2"><Link href="#" onClick={() => context.setPurchaseFilter('month')}>This month</Link></li>
-            <li className="inline-block md:block uppercase underline mb-2"><Link href="#" onClick={() => context.setPurchaseFilter('year')}>This year</Link></li>
-            <li className="inline-block md:block uppercase underline mb-2"><Link href="#" onClick={() => context.setPurchaseFilter('all')}>All</Link></li>
+            <li className={`inline-block md:block uppercase mb-2 ${active == 'week' && 'underline'}`}><Link href="#" onClick={() => { context.setPurchaseFilter('week'); setActive("week")}}>This week</Link></li>
+            <li className={`inline-block md:block uppercase mb-2 ${active == 'month' && 'underline'}`}><Link href="#" onClick={() => { context.setPurchaseFilter('month'); setActive("month")}}>This month</Link></li>
+            <li className={`inline-block md:block uppercase mb-2 ${active == 'year' && 'underline'}`}><Link href="#" onClick={() => { context.setPurchaseFilter('year'); setActive("year")}}>This year</Link></li>
+            <li className={`inline-block md:block uppercase mb-2 ${active == 'all' && 'underline'}`}><Link href="#" onClick={() => { context.setPurchaseFilter('all'); setActive("all")}}>All</Link></li>
             <Analysis purchases={purchases} />
         </ul>
     )