From a225c15ccaaccecaa94b5ed361193efefe8c3f39 Mon Sep 17 00:00:00 2001
From: Mathys <mathys.deshaies@icloud.com>
Date: Sun, 5 May 2024 13:20:41 -0400
Subject: [PATCH 1/4] feat: add functions to handle templates with localstorage

---
 frontend/app/select-template/page.tsx | 64 +++++++++++++++++++++++----
 1 file changed, 55 insertions(+), 9 deletions(-)

diff --git a/frontend/app/select-template/page.tsx b/frontend/app/select-template/page.tsx
index d16e455..83d4d66 100644
--- a/frontend/app/select-template/page.tsx
+++ b/frontend/app/select-template/page.tsx
@@ -1,18 +1,56 @@
 "use client"
 
 import { useState } from "react"
+import Link from "next/link"
 import { IPageType, ITemplate } from "@/api/generated"
+import { FilePlus2 } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
 import Card from "@/components/SelectTemplate/Card"
 import SelectTemplateSideBar from "@/components/SelectTemplate/Sidebar/Sidebar"
-import { FilePlus2 } from "lucide-react"
-import Link from "next/link"
 
 export default function IndexPage() {
   const [template, setTemplates] = useState<ITemplate[]>([])
   const [pageType, setPageType] = useState<IPageType>(IPageType.NONE)
 
+  function getTemplateId(template: ITemplate): string {
+    return template.title + template.dateCreated
+  }
+
+  function getFavoriteTemplates(): string[] {
+    const favoriteTemplatesJson = localStorage.getItem("favoriteTemplates")
+    if (favoriteTemplatesJson) {
+      return JSON.parse(favoriteTemplatesJson) as string[]
+    } else {
+      return []
+    }
+  }
+
+  function isFavoriteTemplate(templateId: string): boolean {
+    const favoriteTemplates = getFavoriteTemplates()
+    return favoriteTemplates.includes(templateId)
+  }
+
+  function toggleFavoriteTemplate(templateId: string): void {
+    const favoriteTemplates = getFavoriteTemplates()
+    if (!favoriteTemplates.includes(templateId)) {
+      console.log(template)
+      favoriteTemplates.push(templateId)
+      localStorage.setItem(
+        "favoriteTemplates",
+        JSON.stringify(favoriteTemplates)
+      )
+    } else {
+      const newFavoriteTemplates = favoriteTemplates.filter(
+        (id) => id !== templateId
+      )
+      localStorage.setItem(
+        "favoriteTemplates",
+        JSON.stringify(newFavoriteTemplates)
+      )
+    }
+  }
+
   return (
     <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
       <SelectTemplateSideBar
@@ -32,15 +70,17 @@ export default function IndexPage() {
               </Link>
             </div>
 
-
             <div className="xl:flex xl:items-center xl:justify-center gap-6">
               <h4 className="text-lg font-semibold mb-2 xl:mb-0">Page Type</h4>
 
               <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                 {Object.keys(IPageType).map((page: string, index: number) => (
                   <Button
-                    variant={`${pageType === (IPageType as any)[page] ? "default" : "outline"
-                      }`}
+                    variant={`${
+                      pageType === (IPageType as any)[page]
+                        ? "default"
+                        : "outline"
+                    }`}
                     key={index}
                     onClick={() => setPageType((IPageType as any)[page])}
                   >
@@ -51,7 +91,6 @@ export default function IndexPage() {
             </div>
           </div>
 
-
           {template.length === 0 && (
             <div className="flex items-center justify-center size-full">
               <div className="py-3 text-center">
@@ -63,12 +102,19 @@ export default function IndexPage() {
           {template.length !== 0 && (
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-6 sm:gap-6 lg:grid-cols-3">
               {template.map((template: ITemplate, index: number) => (
-                <Card {...template} key={index} />
+                <Card
+                  {...template}
+                  key={index}
+                  isFavoriteTemplate={isFavoriteTemplate(
+                    getTemplateId(template)
+                  )}
+                  toggleFavoriteTemplate={toggleFavoriteTemplate}
+                />
               ))}
             </div>
           )}
         </main>
-      </div >
-    </div >
+      </div>
+    </div>
   )
 }

From d479e7ce80dd81ab2389e7945c419242dcb36570 Mon Sep 17 00:00:00 2001
From: Mathys <mathys.deshaies@icloud.com>
Date: Sun, 5 May 2024 13:21:10 -0400
Subject: [PATCH 2/4] feat: add handle favorite to the card

---
 .../components/SelectTemplate/Card/Card.tsx   | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/components/SelectTemplate/Card/Card.tsx b/frontend/components/SelectTemplate/Card/Card.tsx
index ee982e6..a749ed7 100644
--- a/frontend/components/SelectTemplate/Card/Card.tsx
+++ b/frontend/components/SelectTemplate/Card/Card.tsx
@@ -13,7 +13,12 @@ import CardDescriptions from "./CardDescriptions"
 import CardHeader from "./CardHeader"
 import CardTags from "./CardTags"
 
-export const Card: React.FC<Omit<ITemplate, "functions" | "image">> = ({
+export const Card: React.FC<
+  Omit<ITemplate, "functions" | "image"> & {
+    isFavoriteTemplate: boolean
+    toggleFavoriteTemplate: (template: string) => void
+  }
+> = ({
   title,
   author,
   contributors,
@@ -23,10 +28,22 @@ export const Card: React.FC<Omit<ITemplate, "functions" | "image">> = ({
   folder,
   lastUpdated,
   tags,
+  isFavoriteTemplate,
+  toggleFavoriteTemplate,
 }) => {
+  function handleFavoriteTemplate() {
+    toggleFavoriteTemplate(title + dateCreated)
+  }
+
   return (
     <UICard className="bg-card/35">
-      <CardHeader title={title} author={author} featured={featured} />
+      <CardHeader
+        title={title}
+        author={author}
+        featured={featured}
+        isFavoriteTemplate={isFavoriteTemplate}
+        handleFavoriteTemplate={handleFavoriteTemplate}
+      />
       <CardContent>
         <CardDescriptions description={description} />
         <CardTags tags={tags} />

From bda50ccb25738b7532929608e3a5e7a9c7bb812b Mon Sep 17 00:00:00 2001
From: Mathys <mathys.deshaies@icloud.com>
Date: Sun, 5 May 2024 13:21:44 -0400
Subject: [PATCH 3/4] feat: add favorite icon to toggle in card header

---
 .../SelectTemplate/Card/CardHeader.tsx        | 36 +++++++++++++++----
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/frontend/components/SelectTemplate/Card/CardHeader.tsx b/frontend/components/SelectTemplate/Card/CardHeader.tsx
index b04d4d2..57ef283 100644
--- a/frontend/components/SelectTemplate/Card/CardHeader.tsx
+++ b/frontend/components/SelectTemplate/Card/CardHeader.tsx
@@ -1,5 +1,6 @@
+import { useState } from "react"
 import { ITemplate } from "@/api/generated"
-import { StarIcon } from "lucide-react"
+import { Heart, StarIcon } from "lucide-react"
 
 import { Badge } from "@/components/ui/badge"
 import {
@@ -10,14 +11,35 @@ import {
 import SocialButton from "@/components/common/SocialButton"
 
 const CardHeader: React.FC<
-  Pick<ITemplate, "featured" | "title" | "author">
-> = ({ featured, title, author }) => {
+  Pick<ITemplate, "featured" | "title" | "author"> & {
+    isFavoriteTemplate: boolean
+    handleFavoriteTemplate: () => void
+  }
+> = ({
+  featured,
+  title,
+  author,
+  isFavoriteTemplate,
+  handleFavoriteTemplate,
+}) => {
+  const [isFavorite, setIsFavorite] = useState(isFavoriteTemplate)
   return (
     <UICardHeader>
-      <div className="xl:flex xl:items-start xl:justify-between">
-        <CardTitle className={`${featured && "pb-2 xl:pb-0"}`}>
-          {title}
-        </CardTitle>
+      <div>
+        <div className="flex justify-between">
+          <CardTitle className={`flex-1 ${featured && "pb-2"}`}>
+            {title}
+          </CardTitle>
+          <Heart
+            className={`size-5 hover:cursor-pointer ${
+              isFavorite ? "fill-red-500" : "hover:animate-pulse"
+            }`}
+            onClick={() => {
+              handleFavoriteTemplate()
+              setIsFavorite(!isFavorite)
+            }}
+          />
+        </div>
         {featured && (
           <Badge>
             <div className="flex items-center justify-center">

From 9b4577b962ce0243ae614ed7eacea8b0125e3a33 Mon Sep 17 00:00:00 2001
From: Mathys <mathys.deshaies@icloud.com>
Date: Sun, 5 May 2024 13:30:18 -0400
Subject: [PATCH 4/4] feat: sort templates by favorite

---
 frontend/app/select-template/page.tsx | 33 +++++++++++++++++++--------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/app/select-template/page.tsx b/frontend/app/select-template/page.tsx
index 83d4d66..a92aadf 100644
--- a/frontend/app/select-template/page.tsx
+++ b/frontend/app/select-template/page.tsx
@@ -51,6 +51,17 @@ export default function IndexPage() {
     }
   }
 
+  function getSortedTemplatesByFavorite() {
+    return template.sort((a, b) =>
+      isFavoriteTemplate(getTemplateId(a)) ===
+      isFavoriteTemplate(getTemplateId(b))
+        ? 0
+        : isFavoriteTemplate(getTemplateId(a))
+        ? -1
+        : 1
+    )
+  }
+
   return (
     <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
       <SelectTemplateSideBar
@@ -101,16 +112,18 @@ export default function IndexPage() {
 
           {template.length !== 0 && (
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-6 sm:gap-6 lg:grid-cols-3">
-              {template.map((template: ITemplate, index: number) => (
-                <Card
-                  {...template}
-                  key={index}
-                  isFavoriteTemplate={isFavoriteTemplate(
-                    getTemplateId(template)
-                  )}
-                  toggleFavoriteTemplate={toggleFavoriteTemplate}
-                />
-              ))}
+              {getSortedTemplatesByFavorite().map(
+                (template: ITemplate, index: number) => (
+                  <Card
+                    {...template}
+                    key={index}
+                    isFavoriteTemplate={isFavoriteTemplate(
+                      getTemplateId(template)
+                    )}
+                    toggleFavoriteTemplate={toggleFavoriteTemplate}
+                  />
+                )
+              )}
             </div>
           )}
         </main>