switched from localstorage to chrome api

src/components/interfaces.ts

@@ -10,4 +10,5 @@ export interface ColorProps {
  sketchPickerColor: RGBColor;
  i: number;
  c: RGBColor;
+ colors: RGBColor[];
 }

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">

src/components/palette/color/useColor.ts

@@ -6,36 +6,34 @@ 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) => {
  setColor(clr);
  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);
  };
 

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}>

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);
 

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 };