Somewhat better version

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -14,7 +14,6 @@
     "browser-image-compression": "^1.0.13",
     "react": "^17.0.1",
     "react-colorful": "^4.4.3",
-    "react-cookie": "^4.0.3",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
     "typescript": "^4.1.2",

src/css/App.css

@@ -1,21 +1,18 @@
-.App {
-  text-align: center;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.App-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-top: 10px;
-}
-
 .SettingsBtn {
   position: absolute;
   right: 0;
   bottom: 0;
+  margin-bottom: 20px;
+}
+
+.SettingsBtn button {
+  width: 25px;
+  padding: 3px;
+  border-radius: 5px;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  color: var(--background-color);
+  fill: currentColor;
+  filter: invert(1) grayscale(1);
 }

src/hooks/useAmountRendered.ts

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+
+/**
+ * Outputs the amount of times rendered inside console
+ * @param scope Define component scope
+ */
+const useAmountRendered = (scope: string) => {
+  const renders = useRef(0);
+  console.log(`${scope} renders: ${renders.current++}`)
+}
+
+export default useAmountRendered;

src/hooks/useBackground.ts

@@ -0,0 +1,36 @@
+import useStickyState from "./useStickyState";
+
+export interface Background {
+  values: {
+    opacity: number;
+    color: string;
+    data: string;
+  };
+
+  set: {
+    opacity: React.Dispatch<any>;
+    color: React.Dispatch<any>;
+    data: React.Dispatch<any>;
+  }
+}
+
+const useBackground = (): Background => {
+  const [bgOpacity, setBgOpacity] = useStickyState(40, 'bgOpacity');
+  const [bgColor, setBgColor] = useStickyState("#ffffff", 'bgColor');
+  const [bgData, setBgData] = useStickyState("img/default.jpg", 'bgData');
+
+  return {
+      values: {
+        opacity: bgOpacity,
+        color: bgColor,
+        data: bgData
+      },
+      set: {
+        opacity: setBgOpacity,
+        color: setBgColor,
+        data: setBgData
+      }
+    };
+}
+
+export default useBackground;

src/hooks/useStickyState.ts

@@ -0,0 +1,26 @@
+import { SetStateAction, useEffect, useState } from "react";
+
+/* Original JS code: 
+https://www.joshwcomeau.com/react/persisting-react-state-in-localstorage/ */
+
+/**
+ * Returns a stateful value, based on localStorage, and a function to update it.
+ * @param defaultValue Default value for the value
+ * @param key Key used to get/set inside localStorage
+ */
+const useStickyState = <T extends unknown>(defaultValue: T, key: string): [T, React.Dispatch<SetStateAction<T>>] => {
+  const [value, setValue] = useState(() => {
+    const stickyValue = localStorage.getItem(key);
+    return stickyValue !== null
+      ? JSON.parse(stickyValue)
+      : defaultValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue];
+}
+
+export default useStickyState;

src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './css/index.css';
 import App from './ui/App';
 
 ReactDOM.render(

src/lib/blobToBase64.ts

@@ -0,0 +1,9 @@
+const blobToBase64 = async (compressedFile: Blob): Promise<string> => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(compressedFile);
+    reader.onloadend = () => resolve(reader.result as string)
+  });
+}
+
+export default blobToBase64;

src/lib/compressImage.ts

@@ -0,0 +1,22 @@
+import imageCompression from "browser-image-compression";
+import blobToBase64 from "./blobToBase64";
+
+const compressImage = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const imageFile = event.target.files![0];
+
+  const options = {
+    maxSizeMB: 1,
+    maxWidthOrHeight: 1920,
+    useWebWorker: true
+  }
+
+  try {
+    const compressedFile = await imageCompression(imageFile, options);
+    const compressedFileB64 = await blobToBase64(compressedFile);
+    return compressedFileB64;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+export default compressImage;