imprv

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

@@ -1,24 +1,33 @@
-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';
 
+import { InAppNotificationForms } from './InAppNotificationSubstance';
+
 const InAppNotificationSubstance = dynamic(() => import('./InAppNotificationSubstance').then(mod => mod.InAppNotificationSubstance), { ssr: false });
 
 export const InAppNotification = (): JSX.Element => {
   const { t } = useTranslation();
+
+  const [isUnreadNotificationsVisible, setUnreadNotificationsVisible] = useState(false);
+
   return (
-    <div className="px-3">
+    <div className="px-3 ">
       <div className="grw-sidebar-content-header py-3 d-flex">
         <h3 className="mb-0">
           {t('In-App Notification')}
         </h3>
       </div>
 
+      <InAppNotificationForms
+        onChangeUnreadNotificationVisible={() => { setUnreadNotificationsVisible(!isUnreadNotificationsVisible) }}
+      />
+
       <Suspense fallback={<ItemsTreeContentSkeleton />}>
-        <InAppNotificationSubstance />
+        <InAppNotificationSubstance isUnreadNotificationsVisible={isUnreadNotificationsVisible} />
       </Suspense>
     </div>
   );

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

@@ -1,12 +1,46 @@
 import React from 'react';
 
 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 = {
+  onChangeUnreadNotificationVisible: () => void
+}
+export const InAppNotificationForms = (props: InAppNotificationFormsProps): JSX.Element => {
+  const { onChangeUnreadNotificationVisible } = props;
+
+  return (
+    <div className="px-4 mt-2 mb-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={onChangeUnreadNotificationVisible}
+        />
+      </div>
+    </div>
+  );
+};
+
+
+type InAppNotificationSubstanceProps = {
+  isUnreadNotificationsVisible: boolean
+}
+export const InAppNotificationSubstance = (props: InAppNotificationSubstanceProps): JSX.Element => {
+  const { isUnreadNotificationsVisible } = props;
 
   // 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 (
     <>