From a9d0c58008d488387b40609ba184d00f17f3dac5 Mon Sep 17 00:00:00 2001
From: Carlos S Aldazosa <carlos.aldazosa@outlook.com>
Date: Tue, 21 May 2024 09:40:56 -0400
Subject: [PATCH] [UPDATE: frontend] unsave items from collections and logout

---
 packages/frontend/.gitignore                  |  1 +
 .../frontend/app/(core)/me/colors/page.tsx    | 20 ++++++++++++++++
 .../frontend/app/(core)/me/gradients/page.tsx | 23 +++++++++++++++++++
 .../frontend/app/(core)/me/palettes/page.tsx  | 20 ++++++++++++++++
 .../app/components/header/UserArea.tsx        |  8 +++++--
 5 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 packages/frontend/.gitignore

diff --git a/packages/frontend/.gitignore b/packages/frontend/.gitignore
new file mode 100644
index 0000000..e985853
--- /dev/null
+++ b/packages/frontend/.gitignore
@@ -0,0 +1 @@
+.vercel
diff --git a/packages/frontend/app/(core)/me/colors/page.tsx b/packages/frontend/app/(core)/me/colors/page.tsx
index dd561c7..bdcbc3f 100644
--- a/packages/frontend/app/(core)/me/colors/page.tsx
+++ b/packages/frontend/app/(core)/me/colors/page.tsx
@@ -5,6 +5,9 @@ import { getMainContrastColor } from "@/app/utils/createBaseColorObject";
 import { useUserStore } from "@/store";
 import { hexToRgb } from "colors-kit";
 import Link from "next/link";
+import { BasicCollection } from "../action";
+import { dispatch } from "../../hooks/useStateHandler";
+import { handleUnsaveColor } from "../../handlers";
 
 const variants = {
   hidden: { opacity: 0 },
@@ -13,6 +16,22 @@ const variants = {
 
 export default function Page() {
   const colors = useUserStore((state) => state.collections?.colors);
+  const token = useUserStore((state) => state.token);
+  const updateColors = useUserStore((state) => state.updateColors);
+
+  const unsaveColor = async (color: BasicCollection) => {
+    await handleUnsaveColor(
+      token!,
+      color,
+      updateColors,
+      () => {
+        dispatch("custom:unsaveColor", { name: color.name });
+      },
+      () => {
+        dispatch("custom:saveColor", { name: color.name });
+      }
+    );
+  };
   return (
     <div className="w-full min-h-[calc(100vh-80px)] bg-main text-secondary">
       <main className="w-full max-w-5xl p-9 mx-auto flex flex-col gap-20">
@@ -47,6 +66,7 @@ export default function Page() {
 
                     <div className="w-fit h-fit px-5 py-2 mx-auto border border-primary-border rounded-full flex items-center gap-7 text-2xl">
                       <button
+                        onClick={() => unsaveColor(clr)}
                         className="secondary-hover flex"
                         tooltip="true"
                         tooltip-content="Unsave"
diff --git a/packages/frontend/app/(core)/me/gradients/page.tsx b/packages/frontend/app/(core)/me/gradients/page.tsx
index 080c2a3..6a4cf89 100644
--- a/packages/frontend/app/(core)/me/gradients/page.tsx
+++ b/packages/frontend/app/(core)/me/gradients/page.tsx
@@ -3,6 +3,8 @@
 import { MotionDiv } from "@/app/components/FramerMotion";
 import { useUserStore } from "@/store";
 import Link from "next/link";
+import { handleUnsaveGradient } from "../../handlers";
+import { GradientCollection } from "../action";
 
 const variants = {
   hidden: { opacity: 0 },
@@ -11,6 +13,23 @@ const variants = {
 
 export default function Page() {
   const gradients = useUserStore((state) => state.collections?.gradients);
+  const token = useUserStore((state) => state.token);
+  const updateGradients = useUserStore((state) => state.updateGradients);
+
+  const unsaveGradient = async (gradient: GradientCollection) => {
+    await handleUnsaveGradient(
+      token!,
+      gradient,
+      updateGradients,
+      () => {
+        dispatch("custom:unsaveGradient", { name: gradient.name });
+      },
+      () => {
+        dispatch("custom:saveGradient", { name: gradient.name });
+      }
+    );
+  };
+
   return (
     <div className="w-full min-h-[calc(100vh-80px)] bg-main text-secondary">
       <main className="w-full max-w-5xl p-9 mx-auto flex flex-col gap-20">
@@ -39,6 +58,7 @@ export default function Page() {
 
                     <div className="w-fit h-fit px-5 py-2 mx-auto border border-primary-border rounded-full flex items-center gap-7 text-2xl">
                       <button
+                        onClick={() => unsaveGradient(grad)}
                         className="secondary-hover flex"
                         tooltip="true"
                         tooltip-content="Unsave"
@@ -125,3 +145,6 @@ export default function Page() {
     </div>
   );
 }
+function dispatch(arg0: string, arg1: { name: any }) {
+  throw new Error("Function not implemented.");
+}
diff --git a/packages/frontend/app/(core)/me/palettes/page.tsx b/packages/frontend/app/(core)/me/palettes/page.tsx
index f8369a6..2f2d655 100644
--- a/packages/frontend/app/(core)/me/palettes/page.tsx
+++ b/packages/frontend/app/(core)/me/palettes/page.tsx
@@ -5,6 +5,9 @@ import { getMainContrastColor } from "@/app/utils/createBaseColorObject";
 import { useUserStore } from "@/store";
 import { hexToRgb } from "colors-kit";
 import Link from "next/link";
+import { handleUnsavePalette } from "../../handlers";
+import { PaletteCollection } from "../action";
+import { dispatch } from "../../hooks/useStateHandler";
 
 const variants = {
   hidden: { opacity: 0 },
@@ -13,6 +16,22 @@ const variants = {
 
 export default function Page() {
   const palettes = useUserStore((state) => state.collections?.palettes);
+  const token = useUserStore((state) => state.token);
+  const updatePalettes = useUserStore((state) => state.updatePalettes);
+
+  const unsavePalette = async (palette: PaletteCollection) => {
+    await handleUnsavePalette(
+      token!,
+      palette,
+      updatePalettes,
+      () => {
+        dispatch("custom:unsavePalette", { colors: palette.name });
+      },
+      () => {
+        dispatch("custom:savePalette", { colors: palette.name });
+      }
+    );
+  };
   return (
     <div className="w-full min-h-[calc(100vh-80px)] bg-main text-secondary">
       <main className="w-full max-w-5xl p-9 mx-auto flex flex-col gap-20">
@@ -62,6 +81,7 @@ export default function Page() {
 
                     <div className="w-fit h-fit px-5 py-2 mx-auto border border-primary-border rounded-full flex items-center gap-7 text-2xl">
                       <button
+                        onClick={() => unsavePalette(palette)}
                         className="secondary-hover flex"
                         tooltip="true"
                         tooltip-content="Unsave"
diff --git a/packages/frontend/app/components/header/UserArea.tsx b/packages/frontend/app/components/header/UserArea.tsx
index 9bff51c..a705b89 100644
--- a/packages/frontend/app/components/header/UserArea.tsx
+++ b/packages/frontend/app/components/header/UserArea.tsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useLayoutEffect } from "react";
+import { usePathname } from "next/navigation";
 
 type Props = {
   handleToggleLogIn: () => void;
@@ -12,6 +13,7 @@ export default function UserArea({ handleToggleLogIn }: Props) {
   const router = useRouter();
   const user = useUserStore((state) => state.user);
   const updateUser = useUserStore((state) => state.updateUser);
+  const pathname = usePathname();
 
   useLayoutEffect(() => {
     updateUser(
@@ -25,7 +27,9 @@ export default function UserArea({ handleToggleLogIn }: Props) {
     localStorage.removeItem("user");
     localStorage.removeItem("token");
 
-    router.push("/login");
+    if (pathname.includes("/me")) {
+      router.push("/");
+    }
   };
 
   return (
@@ -75,7 +79,7 @@ export default function UserArea({ handleToggleLogIn }: Props) {
               <Link href="/me/font-icons">My Font Icons</Link>
             </li>
             <li className="primary-hover">
-              <button onClick={handleLogOut}>Sign out</button>
+              <button onClick={handleLogOut}>Log out</button>
             </li>
           </ul>
         </div>