Merge pull request #2266 from daostack/CW-2256-unread-filtretation-inbox

Add see unread only filteration in the Inbox #2256

src/pages/inbox/BaseInbox.tsx

@@ -9,6 +9,7 @@ import React, {
 } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
+import { useUpdateEffect } from "react-use";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { FeedItemBaseContentProps } from "@/pages/common";
 import {
@@ -67,6 +68,8 @@ const InboxPage: FC<InboxPageProps> = (props) => {
   const [feedLayoutRef, setFeedLayoutRef] = useState<FeedLayoutRef | null>(
     null,
   );
+  const isActiveUnreadInboxItemsQueryParam =
+    queryParams[QueryParamKey.Unread] === "true";
   const sharedFeedItemIdQueryParam = queryParams[QueryParamKey.Item];
   const sharedFeedItemId =
     (typeof sharedFeedItemIdQueryParam === "string" &&
@@ -88,9 +91,10 @@ const InboxPage: FC<InboxPageProps> = (props) => {
     loading: areInboxItemsLoading,
     hasMore: hasMoreInboxItems,
     fetch: fetchInboxItems,
+    refetch: refetchInboxItems,
     batchNumber,
   } = useInboxItems(feedItemIdsForNotListening, {
-    unread: queryParams.unread === "true",
+    unread: isActiveUnreadInboxItemsQueryParam,
   });
   const sharedInboxItem = useSelector(selectSharedInboxItem);
   const chatChannelItems = useSelector(selectChatChannelItems);
@@ -108,6 +112,10 @@ const InboxPage: FC<InboxPageProps> = (props) => {
     return items;
   }, [chatChannelItems, sharedInboxItem]);
 
+  useUpdateEffect(() => {
+    refetchInboxItems();
+  }, [isActiveUnreadInboxItemsQueryParam]);
+
   const fetchData = () => {
     fetchInboxData({
       sharedFeedItemId,
@@ -264,7 +272,11 @@ const InboxPage: FC<InboxPageProps> = (props) => {
         renderChatChannelItem={renderChatChannelItem}
         onFeedItemUpdate={handleFeedItemUpdate}
         getLastMessage={getLastMessage}
-        emptyText="Your inbox is empty"
+        emptyText={
+          isActiveUnreadInboxItemsQueryParam
+            ? "Hurry! No unread items in your inbox :-)"
+            : "Your inbox is empty"
+        }
         getNonAllowedItems={getNonAllowedItems}
         onActiveItemChange={handleActiveItemChange}
         onActiveItemDataChange={onActiveItemDataChange}

src/pages/inbox/components/HeaderContent/HeaderContent.tsx

@@ -4,6 +4,7 @@ import { useIsTabletView } from "@/shared/hooks/viewport";
 import { InboxIcon } from "@/shared/icons";
 import { DirectMessageButton } from "../DirectMessageButton";
 import { HeaderContent_v04 } from "../HeaderContent_v04";
+import { InboxFilterButton } from "../InboxFilterButton";
 import { PlusButton } from "./components";
 import styles from "./HeaderContent.module.scss";
 
@@ -32,6 +33,7 @@ const HeaderContent: FC<HeaderContentProps> = (props) => {
         <h1 className={styles.title}>Inbox</h1>
       </div>
       <div className={styles.actionButtonsWrapper}>
+        <InboxFilterButton />
         <DirectMessageButton
           isMobileVersion={isMobileVersion}
           ButtonComponent={PlusButton}

src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.module.scss

@@ -78,3 +78,16 @@
 .directMessageButton {
   align-self: center;
 }
+
+.actionButtonsWrapper {
+  display: flex;
+  align-items: center;
+
+  & > * {
+    margin-right: 1rem;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx

@@ -4,6 +4,7 @@ import { useIsTabletView } from "@/shared/hooks/viewport";
 import { InboxIcon } from "@/shared/icons";
 import { getPluralEnding } from "@/shared/utils";
 import { DirectMessageButton } from "../DirectMessageButton";
+import { InboxFilterButton } from "../InboxFilterButton";
 import styles from "./HeaderContent_v04.module.scss";
 
 interface HeaderContentProps {
@@ -29,10 +30,13 @@ const HeaderContent_v04: FC<HeaderContentProps> = (props) => {
           </div>
         </div>
       </div>
-      <DirectMessageButton
-        className={styles.directMessageButton}
-        isMobileVersion={isMobileVersion}
-      />
+      <div className={styles.actionButtonsWrapper}>
+        <InboxFilterButton />
+        <DirectMessageButton
+          className={styles.directMessageButton}
+          isMobileVersion={isMobileVersion}
+        />
+      </div>
     </div>
   );
 };

src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss

@@ -0,0 +1,29 @@
+@import "../../../../constants";
+@import "../../../../styles/sizes";
+
+.buttonIcon {
+  background-color: transparent;
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      background-color: $light-gray-1;
+    }
+  }
+}
+
+.unreadFilterActive {
+  background-color: $c-pink-next-dark;
+  color: $white;
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      background-color: $c-pink-mention-2;
+    }
+  }
+}
+
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: inherit;
+}

src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from "react";
+import { useHistory, useLocation } from "react-router";
+import classnames from "classnames";
+import { QueryParamKey } from "@/shared/constants";
+import { useQueryParams, useRemoveQueryParams } from "@/shared/hooks";
+import { InboxFilterIcon } from "@/shared/icons";
+import { ButtonIcon } from "@/shared/ui-kit";
+import styles from "./InboxFilterButton.module.scss";
+
+interface InboxFilterButtonProps {
+  className?: string;
+}
+
+const InboxFilterButton: FC<InboxFilterButtonProps> = (props) => {
+  const { className } = props;
+  const history = useHistory();
+  const location = useLocation();
+  const queryParams = useQueryParams();
+  const { removeQueryParams } = useRemoveQueryParams();
+  const isActiveUnreadInboxItemsQueryParam =
+    queryParams[QueryParamKey.Unread] === "true";
+
+  const handleFilterIconClick = (): void => {
+    if (isActiveUnreadInboxItemsQueryParam) {
+      removeQueryParams(QueryParamKey.Unread);
+    } else {
+      history.push(`${location.pathname}?${QueryParamKey.Unread}=true`);
+    }
+  };
+
+  return (
+    <ButtonIcon
+      className={classnames(styles.buttonIcon, className, {
+        [styles.unreadFilterActive]: isActiveUnreadInboxItemsQueryParam,
+      })}
+      onClick={handleFilterIconClick}
+    >
+      <InboxFilterIcon
+        className={classnames(styles.icon, {
+          [styles.iconActive]: isActiveUnreadInboxItemsQueryParam,
+        })}
+      />
+    </ButtonIcon>
+  );
+};
+
+export default InboxFilterButton;

src/pages/inbox/components/InboxFilterButton/index.ts

@@ -0,0 +1 @@
+export { default as InboxFilterButton } from "./InboxFilterButton";

src/shared/hooks/useCases/useInboxItems.ts

@@ -16,6 +16,7 @@ import { inboxActions, InboxItems, selectInboxItems } from "@/store/states";
 interface Return
   extends Pick<InboxItems, "data" | "loading" | "hasMore" | "batchNumber"> {
   fetch: () => void;
+  refetch: () => void;
 }
 
 interface ItemBatch<T = FeedItemFollow> {
@@ -129,6 +130,11 @@ export const useInboxItems = (
     );
   };
 
+  const refetch = () => {
+    dispatch(inboxActions.resetInboxItems());
+    fetch();
+  }
+
   useEffect(() => {
     if (!inboxItems.firstDocTimestamp || !userId) {
       return;
@@ -220,5 +226,6 @@ export const useInboxItems = (
   return {
     ...inboxItems,
     fetch,
+    refetch,
   };
 };

src/shared/icons/inboxFilter.icon.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from "react";
+
+interface InboxFilterIconProps {
+  className?: string;
+}
+
+const InboxFilterIcon: FC<InboxFilterIconProps> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 9H16"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 13H14"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 21L11 20L9 18H6C5.20435 18 4.44129 17.6839 3.87868 17.1213C3.31607 16.5587 3 15.7956 3 15V7C3 6.20435 3.31607 5.44129 3.87868 4.87868C4.44129 4.31607 5.20435 4 6 4H18C18.7956 4 19.5587 4.31607 20.1213 4.87868C20.6839 5.44129 21 6.20435 21 7V13"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <circle
+        cx="18"
+        cy="18"
+        r="3"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default InboxFilterIcon;

src/shared/icons/index.ts

@@ -67,3 +67,4 @@ export { default as EmojiIcon } from "./emoji.icon";
 export { default as ReplyIcon } from "./reply.icon";
 export { default as CopyIcon } from "./copy.icon";
 export { default as HideIcon } from "./hide.icon";
+export { default as InboxFilterIcon } from "./inboxFilter.icon";