From b0b2776d03501c25d6a38d5dd4ab933934113140 Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Fri, 9 Sep 2022 00:24:41 +0800
Subject: [PATCH] chore: update button entries (#206)

---
 web/src/components/MenuBtnsPopup.tsx | 41 +++++++++++-----------------
 web/src/components/Sidebar.tsx       | 23 ++++++----------
 web/src/less/explore.less            | 26 ++++++++----------
 web/src/locales/en.json              |  1 +
 web/src/locales/zh.json              |  1 +
 web/src/pages/Explore.tsx            | 23 ++++++++--------
 6 files changed, 49 insertions(+), 66 deletions(-)

diff --git a/web/src/components/MenuBtnsPopup.tsx b/web/src/components/MenuBtnsPopup.tsx
index 75176a83..50a76c22 100644
--- a/web/src/components/MenuBtnsPopup.tsx
+++ b/web/src/components/MenuBtnsPopup.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useRef } from "react";
-import * as api from "../helpers/api";
 import { locationService, userService } from "../services";
 import useI18n from "../hooks/useI18n";
-import toastHelper from "./Toast";
 import Only from "./common/OnlyWhen";
 import showAboutSiteDialog from "./AboutSiteDialog";
+import showArchivedMemoDialog from "./ArchivedMemoDialog";
+import showResourcesDialog from "./ResourcesDialog";
 import "../less/menu-btns-popup.less";
 
 interface Props {
@@ -32,29 +32,18 @@ const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
     }
   }, [shownStatus]);
 
-  const handlePingBtnClick = () => {
-    api
-      .getSystemStatus()
-      .then(({ data }) => {
-        const {
-          data: { profile },
-        } = data;
-        toastHelper.info(JSON.stringify(profile, null, 4));
-      })
-      .catch((error) => {
-        console.error(error);
-        toastHelper.error(error.response.data.message);
-      });
+  const handleResourcesBtnClick = () => {
+    showResourcesDialog();
+  };
+
+  const handleArchivedBtnClick = () => {
+    showArchivedMemoDialog();
   };
 
   const handleAboutBtnClick = () => {
     showAboutSiteDialog();
   };
 
-  const handleExploreBtnClick = () => {
-    locationService.pushHistory("/explore");
-  };
-
   const handleSignOutBtnClick = async () => {
     userService
       .doSignOut()
@@ -69,12 +58,14 @@ const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
 
   return (
     <div className={`menu-btns-popup ${shownStatus ? "" : "hidden"}`} ref={popupElRef}>
-      <button className="btn action-btn" onClick={handleExploreBtnClick}>
-        <span className="icon">👾</span> Explore
-      </button>
-      <button className="btn action-btn" onClick={handlePingBtnClick}>
-        <span className="icon">🎯</span> Ping
-      </button>
+      <Only when={!userService.isVisitorMode()}>
+        <button className="btn action-btn" onClick={handleResourcesBtnClick}>
+          <span className="icon">🌄</span> {t("sidebar.resources")}
+        </button>
+        <button className="btn action-btn" onClick={handleArchivedBtnClick}>
+          <span className="icon">🗂</span> {t("sidebar.archived")}
+        </button>
+      </Only>
       <button className="btn action-btn" onClick={handleAboutBtnClick}>
         <span className="icon">🤠</span> {t("common.about")}
       </button>
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index 6d563891..38c02b29 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -1,11 +1,9 @@
-import { userService } from "../services";
+import { locationService, userService } from "../services";
 import useI18n from "../hooks/useI18n";
 import Icon from "./Icon";
 import Only from "./common/OnlyWhen";
 import showDailyReviewDialog from "./DailyReviewDialog";
 import showSettingDialog from "./SettingDialog";
-import showArchivedMemoDialog from "./ArchivedMemoDialog";
-import showResourcesDialog from "./ResourcesDialog";
 import UserBanner from "./UserBanner";
 import UsageHeatMap from "./UsageHeatMap";
 import ShortcutList from "./ShortcutList";
@@ -15,14 +13,12 @@ import "../less/siderbar.less";
 const Sidebar = () => {
   const { t } = useI18n();
 
-  const handleMyAccountBtnClick = () => {
+  const handleSettingBtnClick = () => {
     showSettingDialog();
   };
-  const handleResourcesBtnClick = () => {
-    showResourcesDialog();
-  };
-  const handleArchivedBtnClick = () => {
-    showArchivedMemoDialog();
+
+  const handleExploreBtnClick = () => {
+    locationService.pushHistory("/explore");
   };
 
   return (
@@ -39,14 +35,11 @@ const Sidebar = () => {
           <span className="icon">📅</span> {t("sidebar.daily-review")}
         </button>
         <Only when={!userService.isVisitorMode()}>
-          <button className="btn action-btn" onClick={handleResourcesBtnClick}>
-            <span className="icon">🌄</span> {t("sidebar.resources")}
-          </button>
-          <button className="btn action-btn" onClick={handleMyAccountBtnClick}>
+          <button className="btn action-btn" onClick={handleSettingBtnClick}>
             <span className="icon">⚙️</span> {t("sidebar.setting")}
           </button>
-          <button className="btn action-btn" onClick={handleArchivedBtnClick}>
-            <span className="icon">🗂</span> {t("sidebar.archived")}
+          <button className="btn action-btn" onClick={() => handleExploreBtnClick()}>
+            <span className="icon">🏂</span> {t("common.explore")}
           </button>
         </Only>
       </div>
diff --git a/web/src/less/explore.less b/web/src/less/explore.less
index 27c09d85..2e911a14 100644
--- a/web/src/less/explore.less
+++ b/web/src/less/explore.less
@@ -8,10 +8,20 @@
     @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center;
 
     > .page-header {
-      @apply relative max-w-2xl w-full min-h-full flex flex-row justify-start items-center px-4 sm:pr-6;
+      @apply relative max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 sm:pr-6 mt-6 mb-2;
 
       > .logo-img {
-        @apply h-14 w-auto mt-6 mb-2;
+        @apply h-14 w-auto;
+      }
+
+      > .action-button-container {
+        > .btn {
+          @apply text-blue-600 py-1 hover:opacity-80;
+
+          > .icon {
+            @apply text-lg mr-1;
+          }
+        }
       }
     }
 
@@ -42,17 +52,5 @@
         }
       }
     }
-
-    > .addtion-btn-container {
-      @apply fixed bottom-12 left-1/2 -translate-x-1/2;
-
-      > .btn {
-        @apply bg-blue-600 text-white px-4 py-2 rounded-3xl shadow-2xl hover:opacity-80;
-
-        > .icon {
-          @apply text-lg mr-1;
-        }
-      }
-    }
   }
 }
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 31690adb..262d3310 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -22,6 +22,7 @@
     "archive": "Archive",
     "basic": "Basic",
     "admin": "Admin",
+    "explore": "Explore",
     "sign-in": "Sign in",
     "sign-out": "Sign out",
     "back-to-home": "Back to Home"
diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json
index 019d9734..660b584c 100644
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@@ -22,6 +22,7 @@
     "archive": "归档",
     "basic": "基础",
     "admin": "管理员",
+    "explore": "探索",
     "sign-in": "登录",
     "sign-out": "退出登录",
     "back-to-home": "回到主页"
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 76b81c7d..6c25b124 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -47,6 +47,17 @@ const Explore = () => {
         <div className="page-container">
           <div className="page-header">
             <img className="logo-img" src="/logo-full.webp" alt="" />
+            <div className="action-button-container">
+              {user ? (
+                <button className="btn" onClick={() => (window.location.href = "/")}>
+                  <span className="icon">🏠</span> {t("common.back-to-home")}
+                </button>
+              ) : (
+                <button className="btn" onClick={() => (window.location.href = "/auth")}>
+                  <span className="icon">👉</span> {t("common.sign-in")}
+                </button>
+              )}
+            </div>
           </div>
           <main className="memos-wrapper">
             {state.memos.map((memo) => {
@@ -65,18 +76,6 @@ const Explore = () => {
               );
             })}
           </main>
-
-          <div className="addtion-btn-container">
-            {user ? (
-              <button className="btn" onClick={() => (window.location.href = "/")}>
-                <span className="icon">🏠</span> {t("common.back-to-home")}
-              </button>
-            ) : (
-              <button className="btn" onClick={() => (window.location.href = "/auth")}>
-                <span className="icon">👉</span> {t("common.sign-in")}
-              </button>
-            )}
-          </div>
         </div>
       )}
     </section>