From b713f3f3d85a3d04e9d5106cd170c6f4d0395f1e Mon Sep 17 00:00:00 2001
From: GeorgeNonis <Georgenonis@gmail.com>
Date: Tue, 20 Jun 2023 20:08:12 +0200
Subject: [PATCH] switched from localstorage to chrome api

---
 src/components/interfaces.ts             |  1 +
 src/components/palette/color/color.tsx   |  4 ++--
 src/components/palette/color/useColor.ts | 12 +++++------
 src/components/palette/palette.tsx       |  4 +++-
 src/components/palette/usePalette.ts     | 27 ++++++++++++------------
 src/config.ts                            |  2 +-
 6 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/interfaces.ts b/src/components/interfaces.ts
index bbd5f18..755f9cb 100644
--- a/src/components/interfaces.ts
+++ b/src/components/interfaces.ts
@@ -10,4 +10,5 @@ export interface ColorProps {
   sketchPickerColor: RGBColor;
   i: number;
   c: RGBColor;
+  colors: RGBColor[];
 }
diff --git a/src/components/palette/color/color.tsx b/src/components/palette/color/color.tsx
index 8c84c75..77f16f4 100644
--- a/src/components/palette/color/color.tsx
+++ b/src/components/palette/color/color.tsx
@@ -2,8 +2,8 @@ import { useColor } from "./useColor";
 import { ColorProps } from "../../interfaces";
 
 const Color = ({ ...rest }: ColorProps) => {
-  const { palette, sketchPickerColor, i, c } = rest;
-  const { values, handlers } = useColor({ palette, i, c });
+  const { palette, sketchPickerColor, i, c, colors } = rest;
+  const { values, handlers } = useColor({ palette, i, c, colors });
   const { b, g, r, a } = values.color;
   return (
     <div className="colordiv">
diff --git a/src/components/palette/color/useColor.ts b/src/components/palette/color/useColor.ts
index d6ff292..c04b7d7 100644
--- a/src/components/palette/color/useColor.ts
+++ b/src/components/palette/color/useColor.ts
@@ -6,21 +6,19 @@ interface useColorProps {
   palette: boolean;
   i: number;
   c: RGBColor;
+  colors: RGBColor[];
 }
 
-export const useColor = ({ palette, i, c }: useColorProps) => {
+export const useColor = ({ palette, i, c, colors }: useColorProps) => {
   const DEFAULT_WHITE_STRG = JSON.stringify(DEFAULT_WHITE);
   const C_STRG = JSON.stringify(c);
   const [visibility, setVisibility] = useState(false);
   const [copyColor, setCopyColor] = useState(false);
   const [btnState, setBtnState] = useState(C_STRG !== DEFAULT_WHITE_STRG);
-  // console.log(C_STRG === DEFAULT_WHITE_STRG);
 
   const { b, g, r, a } = c;
-  const obj = localStorage.getItem("colors");
-  const colors = JSON.parse(obj!);
   const [color, setColor] = useState<RGBColor>({
-    ...colors[i],
+    ...c,
   });
 
   const setColorHandler = (clr: RGBColor) => {
@@ -28,14 +26,14 @@ export const useColor = ({ palette, i, c }: useColorProps) => {
     setBtnState(true);
     colors[i] = clr;
 
-    localStorage.setItem("colors", JSON.stringify(colors));
+    chrome.storage.sync.set({ colors }, () => {});
   };
 
   const clearColorhandler = () => {
     const clr = { r: 255, g: 255, b: 255, a: 100 };
     setColor(clr);
     colors[i] = clr;
-    localStorage.setItem("colors", JSON.stringify(colors));
+    chrome.storage.sync.set({ colors }, () => {});
     setBtnState(false);
   };
 
diff --git a/src/components/palette/palette.tsx b/src/components/palette/palette.tsx
index 9bb2aaf..9dec6db 100644
--- a/src/components/palette/palette.tsx
+++ b/src/components/palette/palette.tsx
@@ -8,7 +8,9 @@ const Palette = ({ sketchPickerColor }: { sketchPickerColor: RGBColor }) => {
     <div className="palettediv">
       <div className="palettewithcolors">
         {colors.map((c: any, i: number) => {
-          return <Color key={i} {...{ palette, sketchPickerColor, i, c }} />;
+          return (
+            <Color key={i} {...{ palette, sketchPickerColor, i, c, colors }} />
+          );
         })}
       </div>
       <button className="clearpalette" onClick={clearPaletteHandler}>
diff --git a/src/components/palette/usePalette.ts b/src/components/palette/usePalette.ts
index 203caac..95e6586 100644
--- a/src/components/palette/usePalette.ts
+++ b/src/components/palette/usePalette.ts
@@ -1,26 +1,27 @@
 import { useEffect, useState } from "react";
 import { DEFAULT_COLORS } from "../../config";
+import { RGBColor } from "../interfaces";
 
 export const usePalette = () => {
   const [palette, setPalette] = useState(false);
+  const [colors, setcolors] = useState<RGBColor[]>([]);
   /**
    * Chrome API
    */
 
-  // useEffect(() => {
-  //   chrome.storage.sync.get(["colors"], (result: any) => {
-  //     const { colors } = result;
-  //     if (colors === undefined) {
-  //       chrome.storage.sync.set({ colors: DEFAULT_COLORS }, () => {});
-  //     }
-  //   });
-  // }, []);
+  useEffect(() => {
+    chrome.storage.sync.get(["colors"], (result: any) => {
+      const { colors } = result;
+      if (colors === undefined) {
+        chrome.storage.sync.set({ colors: DEFAULT_COLORS }, () => {
+          setcolors(DEFAULT_COLORS);
+        });
+      } else {
+        setcolors(colors);
+      }
+    });
+  }, []);
 
-  if (localStorage.getItem("colors") === null) {
-    localStorage.setItem("colors", JSON.stringify(DEFAULT_COLORS));
-  }
-  const obj = localStorage.getItem("colors")!;
-  const colors = JSON.parse(obj);
   const clearPaletteHandler = () => {
     setPalette(true);
 
diff --git a/src/config.ts b/src/config.ts
index a137be4..152702d 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -61,4 +61,4 @@ export const DEFAULT_COLORS = [
   },
 ];
 
-export const DEFAULT_WHITE = { r: 255, g: 255, b: 255, a: 100 };
+export const DEFAULT_WHITE = { a: 100, b: 255, g: 255, r: 255 };