From 123f2be776c2aa9f84f4df0bdb2aa219ea0e92f7 Mon Sep 17 00:00:00 2001
From: Ayaka <92409239+TheOriginalAyaka@users.noreply.github.com>
Date: Wed, 26 Oct 2022 18:05:17 +0100
Subject: [PATCH] added total counter

---
 src/App.css |  9 +++++++++
 src/App.jsx | 23 ++++++++++++++++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/App.css b/src/App.css
index acd0439..1b8d67b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -111,3 +111,12 @@
   border-radius: 1rem;
   min-height: 2rem;
 }
+
+.counter {
+  left: 0;
+  top: 0;
+  text-align: left;
+  color: white;
+  font-weight: bold;
+  font-family: YurukaStd;
+}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 5a32fbd..d091be9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,13 +14,21 @@ import log from "./utils/log";
 const { ClipboardItem } = window;
 
 function App() {
+  const [config, setConfig] = useState(null);
+
+  // using this to trigger the useEffect because lazy to think of a better way
+  const [rand, setRand] = useState(0);
   useEffect(() => {
     try {
-      getConfiguration();
+      const data = async () => {
+        const res = await getConfiguration();
+        setConfig(res);
+      };
+      data();
     } catch (error) {
       console.log(error);
     }
-  }, []);
+  }, [rand]);
 
   const [infoOpen, setInfoOpen] = useState(false);
 
@@ -118,13 +126,14 @@ function App() {
     }
   };
 
-  const download = () => {
+  const download = async () => {
     const canvas = document.getElementsByTagName("canvas")[0];
     const link = document.createElement("a");
     link.download = `${characters[character].name}_st.ayaka.one.png`;
     link.href = canvas.toDataURL();
     link.click();
-    log(characters[character].id, characters[character].name, "download");
+    await log(characters[character].id, characters[character].name, "download");
+    setRand(rand + 1);
   };
 
   function b64toBlob(b64Data, contentType = null, sliceSize = null) {
@@ -151,12 +160,16 @@ function App() {
         "image/png": b64toBlob(canvas.toDataURL().split(",")[1]),
       }),
     ]);
-    log(characters[character].id, characters[character].name, "copy");
+    await log(characters[character].id, characters[character].name, "copy");
+    setRand(rand + 1);
   };
 
   return (
     <div className="App">
       <Info open={infoOpen} handleClose={handleClose} />
+      <div className="counter">
+        Total Stickers you made: {config?.total || "Not available"}
+      </div>
       <div className="container">
         <div className="vertical">
           <div className="canvas">