From c991a48df64e79702374de7713ad83f4b002c265 Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Sun, 7 Aug 2022 01:56:10 +0800
Subject: [PATCH] chore: add upload resource button

---
 web/src/components/ArchivedMemoDialog.tsx |  2 +-
 web/src/components/ResourcesDialog.tsx    | 89 ++++++++++++++++++-----
 web/src/less/resources-dialog.less        | 16 ++++
 3 files changed, 89 insertions(+), 18 deletions(-)

diff --git a/web/src/components/ArchivedMemoDialog.tsx b/web/src/components/ArchivedMemoDialog.tsx
index c82ea081..84341ac0 100644
--- a/web/src/components/ArchivedMemoDialog.tsx
+++ b/web/src/components/ArchivedMemoDialog.tsx
@@ -48,7 +48,7 @@ const ArchivedMemoDialog: React.FC<Props> = (props: Props) => {
           </div>
         ) : archivedMemos.length === 0 ? (
           <div className="tip-text-container">
-            <p className="tip-text">Here is No Zettels.</p>
+            <p className="tip-text">No archived memos.</p>
           </div>
         ) : (
           <div className="archived-memos-container">
diff --git a/web/src/components/ResourcesDialog.tsx b/web/src/components/ResourcesDialog.tsx
index 38fd2c0b..600e89dc 100644
--- a/web/src/components/ResourcesDialog.tsx
+++ b/web/src/components/ResourcesDialog.tsx
@@ -11,10 +11,18 @@ import "../less/resources-dialog.less";
 
 interface Props extends DialogProps {}
 
+interface State {
+  resources: Resource[];
+  isUploadingResource: boolean;
+}
+
 const ResourcesDialog: React.FC<Props> = (props: Props) => {
   const { destroy } = props;
   const loadingState = useLoading();
-  const [resources, setResources] = useState<Resource[]>([]);
+  const [state, setState] = useState<State>({
+    resources: [],
+    isUploadingResource: false,
+  });
 
   useEffect(() => {
     fetchResources()
@@ -28,7 +36,45 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
 
   const fetchResources = async () => {
     const data = await resourceService.getResourceList();
-    setResources(data);
+    setState({
+      ...state,
+      resources: data,
+    });
+  };
+
+  const handleUploadFileBtnClick = async () => {
+    if (state.isUploadingResource) {
+      return;
+    }
+
+    const inputEl = document.createElement("input");
+    inputEl.type = "file";
+    inputEl.multiple = false;
+    inputEl.accept = "image/png, image/gif, image/jpeg";
+    inputEl.onchange = async () => {
+      if (!inputEl.files || inputEl.files.length === 0) {
+        return;
+      }
+
+      setState({
+        ...state,
+        isUploadingResource: true,
+      });
+
+      const file = inputEl.files[0];
+      try {
+        await resourceService.upload(file);
+      } catch (error: any) {
+        toastHelper.error("Failed to upload resource\n" + JSON.stringify(error, null, 4));
+      } finally {
+        setState({
+          ...state,
+          isUploadingResource: false,
+        });
+        await fetchResources();
+      }
+    };
+    inputEl.click();
   };
 
   const handleCopyResourceLinkBtnClick = (resource: Resource) => {
@@ -61,7 +107,12 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
       </div>
       <div className="dialog-content-container">
         <div className="tip-text-container">(👨‍💻WIP) View your static resources in memos. e.g. images</div>
-        <div className="actions-container"></div>
+        <div className="upload-resource-container" onClick={() => handleUploadFileBtnClick()}>
+          <div className="upload-resource-btn">
+            <Icon.File className="icon-img" />
+            <span>Upload</span>
+          </div>
+        </div>
         {loadingState.isLoading ? (
           <div className="loading-text-container">
             <p className="tip-text">fetching data...</p>
@@ -74,21 +125,25 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
               <span className="field-text">TYPE</span>
               <span></span>
             </div>
-            {resources.map((resource) => (
-              <div key={resource.id} className="resource-container">
-                <span className="field-text">{resource.id}</span>
-                <span className="field-text name-text">{resource.filename}</span>
-                <span className="field-text">{resource.type}</span>
-                <div className="buttons-container">
-                  <Dropdown className="actions-dropdown">
-                    <button onClick={() => handleCopyResourceLinkBtnClick(resource)}>Copy Link</button>
-                    <button className="delete-btn" onClick={() => handleDeleteResourceBtnClick(resource)}>
-                      Delete
-                    </button>
-                  </Dropdown>
+            {state.resources.length === 0 ? (
+              <p className="tip-text">No resource.</p>
+            ) : (
+              state.resources.map((resource) => (
+                <div key={resource.id} className="resource-container">
+                  <span className="field-text">{resource.id}</span>
+                  <span className="field-text name-text">{resource.filename}</span>
+                  <span className="field-text">{resource.type}</span>
+                  <div className="buttons-container">
+                    <Dropdown className="actions-dropdown">
+                      <button onClick={() => handleCopyResourceLinkBtnClick(resource)}>Copy Link</button>
+                      <button className="delete-btn" onClick={() => handleDeleteResourceBtnClick(resource)}>
+                        Delete
+                      </button>
+                    </Dropdown>
+                  </div>
                 </div>
-              </div>
-            ))}
+              ))
+            )}
           </div>
         )}
       </div>
diff --git a/web/src/less/resources-dialog.less b/web/src/less/resources-dialog.less
index 9d488886..af86c3ed 100644
--- a/web/src/less/resources-dialog.less
+++ b/web/src/less/resources-dialog.less
@@ -13,6 +13,18 @@
         @apply w-full flex flex-row justify-start items-start border border-yellow-600 rounded px-2 py-1 mb-2 text-yellow-600 bg-yellow-50 text-sm;
       }
 
+      > .upload-resource-container {
+        @apply mt-2 mb-4 w-full rounded flex flex-row justify-start items-center;
+
+        > .upload-resource-btn {
+          @apply px-3 py-1 rounded cursor-pointer flex flex-row justify-center items-center border border-dashed border-blue-600 text-blue-600 bg-blue-50 hover:opacity-80;
+
+          > .icon-img {
+            @apply w-4 h-auto mr-1;
+          }
+        }
+      }
+
       > .loading-text-container {
         @apply flex flex-col justify-center items-center w-full h-32;
       }
@@ -28,6 +40,10 @@
           }
         }
 
+        > .tip-text {
+          @apply w-full text-center text-base my-6 mt-8;
+        }
+
         > .resource-container {
           @apply px-2 py-2 w-full grid grid-cols-5;