feat: visibility click filter (#463)

* feat: visibility click filter

* update

Co-authored-by: boojack <stevenlgtm@gmail.com>

web/src/components/Memo.tsx

@@ -195,6 +195,15 @@ const Memo: React.FC<Props> = (props: Props) => {
     editorStateService.setEditMemoWithId(memo.id);
   };
 
+  const handleMemoVisibilityClick = (visibility: Visibility) => {
+    const currVisibilityQuery = locationService.getState().query?.visibility;
+    if (currVisibilityQuery === visibility) {
+      locationService.setMemoVisibilityQuery(undefined);
+    } else {
+      locationService.setMemoVisibilityQuery(visibility);
+    }
+  };
+
   return (
     <div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned ? "pinned" : ""}`} ref={memoContainerRef}>
       {memo.pinned && <div className="corner-container"></div>}
@@ -204,7 +213,12 @@ const Memo: React.FC<Props> = (props: Props) => {
             {displayTimeStr}
           </span>
           {memo.visibility !== "PRIVATE" && !isVisitorMode && (
-            <span className={`status-text ${memo.visibility.toLocaleLowerCase()}`}>{memo.visibility}</span>
+            <span
+              className={`status-text ${memo.visibility.toLocaleLowerCase()}`}
+              onClick={() => handleMemoVisibilityClick(memo.visibility)}
+            >
+              {memo.visibility}
+            </span>
           )}
         </div>
         {!isVisitorMode && (

web/src/components/MemoFilter.tsx

@@ -9,9 +9,9 @@ import "../less/memo-filter.less";
 const MemoFilter = () => {
   const { t } = useTranslation();
   const query = useAppSelector((state) => state.location.query);
-  const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId } = query;
+  const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId, visibility } = query;
   const shortcut = shortcutId ? shortcutService.getShortcutById(shortcutId) : null;
-  const showFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || shortcut);
+  const showFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || shortcut || visibility);
 
   return (
     <div className={`filter-query-container ${showFilter ? "" : "!hidden"}`}>
@@ -40,6 +40,14 @@ const MemoFilter = () => {
       >
         <Icon.Box className="icon-text" /> {t(getTextWithMemoType(memoType as MemoSpecType))}
       </div>
+      <div
+        className={"filter-item-container " + (visibility ? "" : "!hidden")}
+        onClick={() => {
+          locationService.setMemoVisibilityQuery(undefined);
+        }}
+      >
+        <Icon.Eye className="icon-text" /> {visibility}
+      </div>
       {duration && duration.from < duration.to ? (
         <div
           className="filter-item-container"

web/src/components/MemoList.tsx

@@ -17,9 +17,9 @@ const MemoList = () => {
   const { memos, isFetching } = useAppSelector((state) => state.memo);
   const [isComplete, setIsComplete] = useState<boolean>(false);
 
-  const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId } = query ?? {};
+  const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId, visibility } = query ?? {};
   const shortcut = shortcutId ? shortcutService.getShortcutById(shortcutId) : null;
-  const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || shortcut);
+  const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || shortcut || visibility);
 
   const shownMemos =
     showMemoFilter || shortcut
@@ -65,6 +65,9 @@ const MemoList = () => {
           if (textQuery && !memo.content.toLowerCase().includes(textQuery.toLowerCase())) {
             shouldShow = false;
           }
+          if (visibility) {
+            shouldShow = memo.visibility === visibility;
+          }
 
           return shouldShow;
         })

web/src/services/locationService.ts

@@ -59,6 +59,7 @@ const locationService = {
         duration: undefined,
         text: undefined,
         shortcutId: undefined,
+        visibility: undefined,
       })
     );
     updateLocationUrl();
@@ -116,6 +117,15 @@ const locationService = {
     );
     updateLocationUrl();
   },
+
+  setMemoVisibilityQuery: (visibility?: Visibility) => {
+    store.dispatch(
+      setQuery({
+        visibility: visibility,
+      })
+    );
+    updateLocationUrl();
+  },
 };
 
 export default locationService;

web/src/store/modules/location.ts

@@ -11,6 +11,7 @@ export interface Query {
   type?: MemoSpecType;
   text?: string;
   shortcutId?: ShortcutId;
+  visibility?: Visibility;
 }
 
 interface State {
@@ -52,6 +53,7 @@ const getStateFromLocation = () => {
         to,
       };
     }
+    state.query.visibility = (urlParams.get("visibility") as Visibility) ?? undefined;
   }
 
   return state;