From 3d0aa1a4a13a18e7ca7dbc98986d4c5aaa2c7df2 Mon Sep 17 00:00:00 2001
From: LimIvan336 <71662324+LimIvan336@users.noreply.github.com>
Date: Wed, 31 Jan 2024 22:40:34 +0800
Subject: [PATCH] fix linting issues

---
 apps/cms/src/admin/views/MerchOverview.tsx | 55 +++++++++++++++-------
 apps/cms/src/apis/store.api.ts             | 29 ++++++++----
 apps/web/pages/merch/index.tsx             | 19 ++++++--
 3 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/apps/cms/src/admin/views/MerchOverview.tsx b/apps/cms/src/admin/views/MerchOverview.tsx
index e1f6d36c..f29b952e 100644
--- a/apps/cms/src/admin/views/MerchOverview.tsx
+++ b/apps/cms/src/admin/views/MerchOverview.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, ChangeEvent } from "react";
 import { Button } from "payload/components/elements";
 import { AdminView } from "payload/config";
 import ViewTemplate from "./ViewTemplate";
@@ -11,24 +11,38 @@ const MerchOverview: AdminView = ({ user, canAccessAdmin }) => {
   const [isStoreDisabled, setIsStoreDisabled] = useState<boolean>(true);
   const [loading, setLoading] = useState<boolean>(true);
 
+  const SHOW_DISPLAY_TEXT_INPUT = false;
+
   useEffect(() => {
     const fetchStoreStatus = async () => {
-      const { disabled } = await StoreApi.getStoreStatus();
-      setIsStoreDisabled(disabled);
-      setLoading(false);
+      try {
+        const { disabled } = await StoreApi.getStoreStatus();
+        setIsStoreDisabled(disabled);
+        setLoading(false);
+      } catch (error) {
+        console.error(error);
+        setLoading(false);
+      }
     };
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     fetchStoreStatus();
   }, []);
 
   const disableStore = async () => {
     // TODO: Calls api to disable merch store
-    setLoading(true);
-    await StoreApi.setStoreStatus({
-      displayText,
-      disabled: !isStoreDisabled,
-    });
-    setIsStoreDisabled(!isStoreDisabled);
-    setLoading(false);
+    try {
+      setLoading(true);
+      await StoreApi.setStoreStatus({
+        displayText,
+        disabled: !isStoreDisabled,
+      });
+      setIsStoreDisabled(!isStoreDisabled);
+      setLoading(false);
+    } catch (error) {
+      console.error(error);
+      setLoading(false);
+    }
   };
   return (
     <ViewTemplate
@@ -48,14 +62,19 @@ const MerchOverview: AdminView = ({ user, canAccessAdmin }) => {
       <p style={{ paddingTop: 20 }}>{`Current state of merch store: ${
         loading ? "..." : isStoreDisabled ? "Disabled" : "Live"
       }`}</p>
-      {/* <textarea
-        value={displayText}
-        onChange={(e) => setDisplayText(e.target.value)}
-        placeholder="Enter display text"
-        rows={4}
-        cols={50}
-      /> */}
+      {SHOW_DISPLAY_TEXT_INPUT && (
+        <textarea
+          value={displayText}
+          onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
+            setDisplayText(e.target.value)
+          }
+          placeholder="Enter display text"
+          rows={4}
+          cols={50}
+        />
+      )}
       <Button
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
         onClick={disableStore}
         disabled={loading}
         buttonStyle="primary"
diff --git a/apps/cms/src/apis/store.api.ts b/apps/cms/src/apis/store.api.ts
index 707469e1..81320709 100644
--- a/apps/cms/src/apis/store.api.ts
+++ b/apps/cms/src/apis/store.api.ts
@@ -7,23 +7,32 @@ class MerchStoreApi {
     displayText,
   }: MerchSaleStatus): Promise<void> {
     // TODO: set store status in the backend
+    console.log(disabled, displayText);
     return new Promise((res, rej) => {
-      setTimeout(() => {
-        res();
-      }, 1000);
+      try {
+        setTimeout(() => {
+          res();
+        }, 1000);
+      } catch (error) {
+        rej(error);
+      }
     });
   }
 
   async getStoreStatus(): Promise<MerchSaleStatus> {
     //   TODO: get store status from the backend
     return new Promise((res, rej) => {
-      setTimeout(() => {
-        res({
-          disabled: true,
-          displayText:
-            "We are currently preparing for the next merch sale. Please look forward to our email!",
-        });
-      }, 1000);
+      try {
+        setTimeout(() => {
+          res({
+            disabled: true,
+            displayText:
+              "We are currently preparing for the next merch sale. Please look forward to our email!",
+          });
+        }, 1000);
+      } catch (error) {
+        rej(error);
+      }
     });
   }
 }
diff --git a/apps/web/pages/merch/index.tsx b/apps/web/pages/merch/index.tsx
index 62ee9fba..3c2eb7c1 100644
--- a/apps/web/pages/merch/index.tsx
+++ b/apps/web/pages/merch/index.tsx
@@ -11,14 +11,23 @@ const MerchandiseList = () => {
   const [selectedCategory, setSelectedCategory] = useState<string>("");
   const [isMerchDisabled, setIsMerchDisabled] = useState<boolean | null>(false);
   const [disabledText, setDisabledText] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const fetchMerchSaleStatus = async () => {
-      const { disabled, displayText } = await api.getMerchSaleStatus();
-      console.log(disabledText);
-      setDisabledText(displayText ?? "");
-      setIsMerchDisabled(disabled);
+      try {
+        // TODO: change to use query?
+        const { disabled, displayText } = await api.getMerchSaleStatus();
+        setDisabledText(displayText ?? "");
+        setIsMerchDisabled(disabled);
+        setLoading(false);
+      } catch (error) {
+        // TODO: display error
+        setLoading(false);
+      }
     };
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     fetchMerchSaleStatus();
   }, []);
 
@@ -39,7 +48,7 @@ const MerchandiseList = () => {
     setSelectedCategory(event.target.value);
   };
 
-  if (isMerchDisabled === null) {
+  if (loading) {
     return (
       <>
         <MerchListSkeleton />