chore: remove unused visibility selector (#457)

web/src/components/MemoCardDialog.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { editorStateService, memoService, userService } from "../services";
 import { useAppSelector } from "../store";
-import { UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "../helpers/consts";
+import { UNKNOWN_ID } from "../helpers/consts";
 import * as utils from "../helpers/utils";
 import { parseHTMLToRawText } from "../helpers/utils";
 import { marked } from "../labs/marked";
@@ -11,7 +11,6 @@ import { MARK_REG } from "../labs/marked/parser";
 import toastHelper from "./Toast";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
-import Selector from "./common/Selector";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
 import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
@@ -35,12 +34,6 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
   const [linkMemos, setLinkMemos] = useState<LinkedMemo[]>([]);
   const [linkedMemos, setLinkedMemos] = useState<LinkedMemo[]>([]);
   const isVisitorMode = userService.isVisitorMode();
-  const visibilitySelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
-    return {
-      value: item.value,
-      text: t(`memo.visibility.${item.text.toLowerCase()}`),
-    };
-  });
 
   useEffect(() => {
     const fetchLinkedMemos = async () => {
@@ -138,36 +131,8 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
     toastHelper.success(t("message.succeed-copy-content"));
   };
 
-  const handleVisibilitySelectorChange = async (visibility: Visibility) => {
-    if (memo.visibility === visibility) {
-      return;
-    }
-
-    await memoService.patchMemo({
-      id: memo.id,
-      visibility: visibility,
-    });
-    setMemo({
-      ...memo,
-      visibility: visibility,
-    });
-  };
-
   return (
     <>
-      {!isVisitorMode && (
-        <div className="card-header-container">
-          <div className="visibility-selector-container">
-            <Icon.Eye className="icon-img" />
-            <Selector
-              className="visibility-selector"
-              dataSource={visibilitySelectorItems}
-              value={memo.visibility}
-              handleValueChanged={(value) => handleVisibilitySelectorChange(value as Visibility)}
-            />
-          </div>
-        </div>
-      )}
       <div className="memo-card-container">
         <div className="header-container">
           <p className="time-text" onClick={handleMemoCreatedAtClick}>

web/src/components/MemoEditor.tsx

@@ -482,7 +482,7 @@ const MemoEditor = () => {
       )}
       <div className="editor-footer-container">
         <Selector
-          className={`visibility-selector`}
+          className="visibility-selector"
           value={editorState.memoVisibility}
           dataSource={memoVisibilityOptionSelectorItems}
           handleValueChanged={handleMemoVisibilityOptionChanged}

web/src/less/explore.less

@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .page-wrapper.explore {
   @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden;
   background-color: #f6f5f4;
@@ -40,14 +38,10 @@
         @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
 
         > .memo-header {
-          @apply mb-2 w-full flex flex-row justify-start items-center text-sm font-mono text-gray-400;
+          @apply mb-2 w-full flex flex-row justify-start items-center text-sm text-gray-400;
-
-          > .split-text {
-            @apply mx-2;
-          }
 
           > .name-text {
-            @apply hover:text-green-600 hover:underline;
+            @apply ml-2 hover:text-green-600 hover:underline;
           }
         }
 

web/src/less/memo-card-dialog.less

@@ -6,26 +6,6 @@
   > .dialog-container {
     @apply w-full p-0 bg-transparent flex flex-col justify-start items-center;
 
-    > .card-header-container {
-      @apply z-10 w-128 max-w-full flex flex-row justify-start items-center mb-2;
-
-      > .visibility-selector-container {
-        @apply bg-white px-2 pl-3 py-1 rounded-lg flex flex-row justify-start items-center;
-
-        > .icon-img {
-          @apply mr-1 w-4 h-auto;
-        }
-
-        > .visibility-selector {
-          @apply w-32;
-
-          > .current-value-container {
-            @apply border-none;
-          }
-        }
-      }
-    }
-
     > .memo-card-container {
       @apply flex flex-col justify-start items-start relative w-128 max-w-full py-3 px-6 mb-3 rounded-lg bg-yellow-200;
 

web/src/less/memo-detail.less

@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .page-wrapper.memo-detail {
   @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden;
   background-color: #f6f5f4;
@@ -44,34 +42,10 @@
           @apply mb-2 w-full flex flex-row justify-between items-center;
 
           > .status-container {
-            @apply flex flex-row justify-start items-center text-sm font-mono text-gray-400;
+            @apply flex flex-row justify-start items-center text-sm text-gray-400;
-
-            > .split-text {
-              @apply mx-2;
-            }
 
             > .name-text {
-              @apply hover:text-green-600 hover:underline;
+              @apply ml-2 hover:text-green-600 hover:underline;
-            }
-
-            > .visibility-selector {
-              @apply ml-2;
-
-              > .status-text {
-                @apply flex flex-row justify-start items-center leading-5 text-xs cursor-pointer ml-2 rounded border px-1;
-
-                &.public {
-                  @apply border-green-600 text-green-600;
-                }
-
-                &.protected {
-                  @apply border-gray-400 text-gray-400;
-                }
-              }
-
-              .action-button {
-                @apply px-2 leading-7 w-full rounded text-gray-600 hover:bg-gray-100;
-              }
             }
           }
         }

web/src/less/memo-editor.less

@@ -51,7 +51,7 @@
   }
 
   > .common-tools-wrapper {
-    @apply relative w-full flex flex-row justify-between items-center pt-2;
+    @apply relative w-full flex flex-row justify-between items-center pt-2 z-1;
 
     > .common-tools-container {
       @apply flex flex-row justify-start items-center;

web/src/pages/Explore.tsx

@@ -82,9 +82,8 @@ const Explore = () => {
                 <div className="memo-container" key={memo.id}>
                   <div className="memo-header">
                     <span className="time-text">{createdAtStr}</span>
-                    <span className="split-text">by</span>
                     <a className="name-text" href={`/u/${memo.creator.id}`}>
-                      {memo.creator.name}
+                      @{memo.creator.name}
                     </a>
                   </div>
                   <MemoContent className="memo-content" content={memo.content} onMemoContentClick={() => undefined} />

web/src/pages/MemoDetail.tsx

@@ -48,24 +48,6 @@ const MemoDetail = () => {
     }
   }, [location]);
 
-  const handleVisibilitySelectorChange = async (visibility: Visibility) => {
-    if (state.memo.visibility === visibility) {
-      return;
-    }
-
-    await memoService.patchMemo({
-      id: state.memo.id,
-      visibility: visibility,
-    });
-    setState({
-      ...state,
-      memo: {
-        ...state.memo,
-        visibility: visibility,
-      },
-    });
-  };
-
   const handleCopyContent = () => {
     copy(state.memo.content);
     toastHelper.success(t("message.succeed-copy-content"));
@@ -100,37 +82,9 @@ const MemoDetail = () => {
               <div className="memo-header">
                 <div className="status-container">
                   <span className="time-text">{dayjs(state.memo.displayTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss")}</span>
-                  {user?.id === state.memo.creatorId ? (
-                    <Dropdown
-                      className="visibility-selector"
-                      trigger={
-                        <span className={`status-text ${state.memo.visibility.toLowerCase()}`}>
-                          {state.memo.visibility} <Icon.ChevronDown className="w-4 h-auto ml-px" />
-                        </span>
-                      }
-                      actions={
-                        <>
-                          <span className="action-button" onClick={() => handleVisibilitySelectorChange("PRIVATE")}>
-                            Private
-                          </span>
-                          <span className="action-button" onClick={() => handleVisibilitySelectorChange("PROTECTED")}>
-                            Protected
-                          </span>
-                          <span className="action-button" onClick={() => handleVisibilitySelectorChange("PUBLIC")}>
-                            Public
-                          </span>
-                        </>
-                      }
-                      actionsClassName="!w-28 !left-0 !p-1"
-                    />
-                  ) : (
-                    <>
-                      <span className="split-text">by</span>
                   <a className="name-text" href={`/u/${state.memo.creator.id}`}>
-                        {state.memo.creator.name}
+                    @{state.memo.creator.name}
                   </a>
-                    </>
-                  )}
                 </div>
                 <Dropdown
                   trigger={<Icon.MoreHorizontal className="ml-2 w-4 h-auto cursor-pointer text-gray-500" />}
@@ -141,7 +95,7 @@ const MemoDetail = () => {
                         className="w-full flex flex-row justify-start items-center px-3 whitespace-nowrap text-sm text-left leading-8 cursor-pointer rounded hover:bg-gray-100"
                         onClick={handleCopyContent}
                       >
-                        <Icon.Clipboard className="w-4 h-auto mr-2" /> {t("memo.copy")}
+                        {t("memo.copy")}
                       </button>
                     </>
                   }