chore: update visitor view buttons

server/basic_auth.go

@@ -55,7 +55,7 @@ func removeUserSession(c echo.Context) error {
 func BasicAuthMiddleware(s *Server, next echo.HandlerFunc) echo.HandlerFunc {
 	return func(c echo.Context) error {
 		// Skip auth for some paths.
-		if common.HasPrefixes(c.Path(), "/api/auth", "/api/ping", "/api/status", "/api/user/:id/") {
+		if common.HasPrefixes(c.Path(), "/api/auth", "/api/ping", "/api/status", "/api/user/:userId") {
 			return next(c)
 		}
 

server/memo.go

@@ -70,7 +70,7 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
 		} else {
 			userID, ok := c.Get(getUserIDContextKey()).(int)
 			if !ok {
-				return echo.NewHTTPError(http.StatusBadRequest, "Missing creatorId to find memo")
+				return echo.NewHTTPError(http.StatusBadRequest, "Missing user id to find memo")
 			}
 
 			memoFind.CreatorID = &userID

server/shortcut.go

@@ -66,7 +66,7 @@ func (s *Server) registerShortcutRoutes(g *echo.Group) {
 		} else {
 			userID, ok := c.Get(getUserIDContextKey()).(int)
 			if !ok {
-				return echo.NewHTTPError(http.StatusBadRequest, "Missing creatorId to find shortcut")
+				return echo.NewHTTPError(http.StatusBadRequest, "Missing user id to find shortcut")
 			}
 
 			shortcutFind.CreatorID = &userID

server/tag.go

@@ -26,12 +26,19 @@ func (s *Server) registerTagRoutes(g *echo.Group) {
 		} else {
 			userID, ok := c.Get(getUserIDContextKey()).(int)
 			if !ok {
-				return echo.NewHTTPError(http.StatusBadRequest, "Missing creatorId to find shortcut")
+				return echo.NewHTTPError(http.StatusBadRequest, "Missing user id to find tag")
 			}
 
 			memoFind.CreatorID = &userID
 		}
 
+		// Only can get PUBLIC memos in visitor mode
+		_, ok := c.Get(getUserIDContextKey()).(int)
+		if !ok {
+			publicVisibility := api.Public
+			memoFind.Visibility = &publicVisibility
+		}
+
 		memoList, err := s.Store.FindMemoList(&memoFind)
 		if err != nil {
 			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to find memo list").SetInternal(err)

store/db/seed/10002__memo.sql

@@ -7,8 +7,7 @@ INSERT INTO
 VALUES
   (
     101,
-    '#Hello 👋 Welcome to memos
-![](https://api.star-history.com/svg?repos=usememos/memos&type=Date&size=mobile)', 
+    '#Hello 👋 Welcome to memos', 
     101
   );
 
@@ -25,8 +24,7 @@ VALUES
 - [ ] Take more photos about **🌄 sunset**;
 - [x] Clean the room;
 - [x] Read *📖 The Little Prince*;
-(👆 click to toggle status)
-', 
+(👆 click to toggle status)', 
     101
   );
 

web/src/components/MemoList.tsx

@@ -101,13 +101,7 @@ const MemoList: React.FC<Props> = () => {
       ))}
       <div className="status-text-container">
         <p className="status-text">
-          {isFetching
-            ? "Fetching data..."
-            : sortedMemos.length === 0
-            ? "Oops, there is nothing"
-            : showMemoFilter
-            ? ""
-            : "Fetching completed 🎉"}
+          {isFetching ? "Fetching data..." : sortedMemos.length === 0 ? "No memos 🌃" : showMemoFilter ? "" : "All memos are ready 🎉"}
         </p>
       </div>
     </div>

web/src/components/MenuBtnsPopup.tsx

 import { useEffect, useRef } from "react";
 import * as api from "../helpers/api";
 import { locationService, userService } from "../services";
-import { useAppSelector } from "../store";
 import toastHelper from "./Toast";
+import Only from "./common/OnlyWhen";
 import showAboutSiteDialog from "./AboutSiteDialog";
 import "../less/menu-btns-popup.less";
 
@@ -13,7 +13,6 @@ interface Props {
 
 const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
   const { shownStatus, setShownStatus } = props;
-  const user = useAppSelector((state) => state.user.user);
   const popupElRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -65,19 +64,11 @@ const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
       <button className="btn action-btn" onClick={handlePingBtnClick}>
         <span className="icon">🎯</span> Ping
       </button>
-      {!userService.isVisitorMode() ? (
+      <Only when={!userService.isVisitorMode()}>
         <button className="btn action-btn" onClick={handleSignOutBtnClick}>
           <span className="icon">👋</span> Sign out
         </button>
-      ) : user ? (
-        <button className="btn action-btn" onClick={() => (window.location.href = "/")}>
-          <span className="icon">🏠</span> Go Back
-        </button>
-      ) : (
-        <button className="btn action-btn" onClick={() => (window.location.href = "/signin")}>
-          <span className="icon">👉</span> Sign in
-        </button>
-      )}
+      </Only>
     </div>
   );
 };

web/src/components/Sidebar.tsx

 import { userService } from "../services";
+import { useAppSelector } from "../store";
 import Only from "./common/OnlyWhen";
 import showDailyReviewDialog from "./DailyReviewDialog";
 import showSettingDialog from "./SettingDialog";
@@ -12,6 +13,8 @@ import "../less/siderbar.less";
 interface Props {}
 
 const Sidebar: React.FC<Props> = () => {
+  const user = useAppSelector((state) => state.user.user);
+
   const handleMyAccountBtnClick = () => {
     showSettingDialog();
   };
@@ -29,18 +32,31 @@ const Sidebar: React.FC<Props> = () => {
       </div>
       <UserBanner />
       <UsageHeatMap />
-      <Only when={!userService.isVisitorMode()}>
-        <div className="action-btns-container">
-          <button className="btn action-btn" onClick={() => showDailyReviewDialog()}>
-            <span className="icon">📅</span> Daily Review
-          </button>
+      <div className="action-btns-container">
+        <button className="btn action-btn" onClick={() => showDailyReviewDialog()}>
+          <span className="icon">📅</span> Daily Review
+        </button>
+        <Only when={!userService.isVisitorMode()}>
           <button className="btn action-btn" onClick={handleMyAccountBtnClick}>
             <span className="icon">⚙️</span> Setting
           </button>
-          <button className="btn action-btn" onClick={handleArchivedBtnClick}>
-            <span className="icon">🗂</span> Archived
-          </button>
-        </div>
+        </Only>
+        <button className="btn action-btn" onClick={handleArchivedBtnClick}>
+          <span className="icon">🗂</span> Archived
+        </button>
+        <Only when={userService.isVisitorMode()}>
+          {user ? (
+            <button className="btn action-btn" onClick={() => (window.location.href = "/")}>
+              <span className="icon">🏠</span> Back to Home
+            </button>
+          ) : (
+            <button className="btn action-btn" onClick={() => (window.location.href = "/signin")}>
+              <span className="icon">👉</span> Sign in
+            </button>
+          )}
+        </Only>
+      </div>
+      <Only when={!userService.isVisitorMode()}>
         <ShortcutList />
       </Only>
       <TagList />

web/src/less/memo-list.less

 @import "./mixin.less";
 
 .memo-list-container {
-  .flex(column, flex-start, flex-start);
-  width: 100%;
-  max-width: 100%;
-  overflow-y: scroll;
+  @apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll;
   .hide-scroll-bar();
 
   > .status-text-container {
-    .flex(column, flex-start, center);
-    width: 100%;
-    margin-top: 16px;
-    margin-bottom: 16px;
+    @apply flex flex-col justify-start items-center w-full my-6;
 
     &.completed {
-      margin-bottom: 64px;
-    }
-
-    &.invisible {
-      visibility: hidden;
+      @apply mb-16;
     }
 
     > .status-text {
-      font-size: 13px;
-      color: gray;
+      @apply text-sm text-gray-400 italic;
     }
   }
 
   &.completed {
-    @apply pb-40;
+    @apply pb-16;
   }
 }

web/src/pages/Home.tsx

 import { useEffect } from "react";
 import { locationService, userService } from "../services";
-import * as api from "../helpers/api";
 import useLoading from "../hooks/useLoading";
 import Only from "../components/common/OnlyWhen";
 import Sidebar from "../components/Sidebar";