Merge pull request #8373 from weseek/feat/138055-implementation-of-the-only-unread-switch

feat: Unread filtering for In-app notification

apps/app/src/components/Sidebar/InAppNotification/InAppNotification.tsx

@@ -1,14 +1,19 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useState } from 'react';
 
 import dynamic from 'next/dynamic';
 import { useTranslation } from 'react-i18next';
 
 import ItemsTreeContentSkeleton from '../../ItemsTree/ItemsTreeContentSkeleton';
 
-const InAppNotificationSubstance = dynamic(() => import('./InAppNotificationSubstance').then(mod => mod.InAppNotificationSubstance), { ssr: false });
+import { InAppNotificationForms } from './InAppNotificationSubstance';
+
+const InAppNotificationContent = dynamic(() => import('./InAppNotificationSubstance').then(mod => mod.InAppNotificationContent), { ssr: false });
 
 export const InAppNotification = (): JSX.Element => {
   const { t } = useTranslation();
+
+  const [isUnreadNotificationsVisible, setUnreadNotificationsVisible] = useState(false);
+
   return (
     <div className="px-3">
       <div className="grw-sidebar-content-header py-3 d-flex">
@@ -17,8 +22,12 @@ export const InAppNotification = (): JSX.Element => {
         </h3>
       </div>
 
+      <InAppNotificationForms
+        onChangeUnreadNotificationsVisible={() => { setUnreadNotificationsVisible(!isUnreadNotificationsVisible) }}
+      />
+
       <Suspense fallback={<ItemsTreeContentSkeleton />}>
-        <InAppNotificationSubstance />
+        <InAppNotificationContent isUnreadNotificationsVisible={isUnreadNotificationsVisible} />
       </Suspense>
     </div>
   );

apps/app/src/components/Sidebar/InAppNotification/InAppNotificationSubstance.tsx

@@ -3,13 +3,47 @@ import React from 'react';
 import { useTranslation } from 'next-i18next';
 
 import InAppNotificationList from '~/components/InAppNotification/InAppNotificationList';
+import { InAppNotificationStatuses } from '~/interfaces/in-app-notification';
 import { useSWRxInAppNotifications } from '~/stores/in-app-notification';
 
-export const InAppNotificationSubstance = (): JSX.Element => {
+
+type InAppNotificationFormsProps = {
+  onChangeUnreadNotificationsVisible: () => void
+}
+export const InAppNotificationForms = (props: InAppNotificationFormsProps): JSX.Element => {
+  const { onChangeUnreadNotificationsVisible } = props;
+
+  return (
+    <div className="my-2">
+      <div className="form-check form-switch">
+        <label className="form-check-label" htmlFor="flexSwitchCheckDefault">Only unread</label>
+        <input
+          id="flexSwitchCheckDefault"
+          className="form-check-input"
+          type="checkbox"
+          role="switch"
+          onChange={onChangeUnreadNotificationsVisible}
+        />
+      </div>
+    </div>
+  );
+};
+
+
+type InAppNotificationContentProps = {
+  isUnreadNotificationsVisible: boolean
+}
+export const InAppNotificationContent = (props: InAppNotificationContentProps): JSX.Element => {
+  const { isUnreadNotificationsVisible } = props;
   const { t } = useTranslation('commons');
 
   // TODO: Infinite scroll implemented (https://redmine.weseek.co.jp/issues/138057)
-  const { data: inAppNotificationData } = useSWRxInAppNotifications(6, undefined, undefined, { revalidateOnFocus: true });
+  const { data: inAppNotificationData } = useSWRxInAppNotifications(
+    6,
+    undefined,
+    isUnreadNotificationsVisible ? InAppNotificationStatuses.STATUS_UNREAD : undefined,
+    { revalidateOnFocus: true },
+  );
 
   return (
     <>