Merge pull request #4581 from weseek/imprv/80106-show-notifications-to-all-inAppNotifiactions-page

Imprv/80106 show notifications to all in app notifiactions page

packages/app/src/components/InAppNotification/AllInAppNotifications.tsx

@@ -1,15 +1,16 @@
 import React, { FC } from 'react';
 
-type Props = {
+import InAppNotificationList from './InAppNotificationList';
+import { useSWRxInAppNotifications } from '../../stores/in-app-notification';
 
-};
 
-const AllInAppNotifications: FC<Props> = (props: Props) => {
+const AllInAppNotifications: FC = () => {
+  const limit = 6;
+  const { data: inAppNotificationData } = useSWRxInAppNotifications(limit);
 
   return (
-    <>All In App Notifications</>
+    <InAppNotificationList inAppNotificationData={inAppNotificationData} />
   );
 };
 
-
 export default AllInAppNotifications;

packages/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -6,9 +6,9 @@ import loggerFactory from '~/utils/logger';
 
 import AppContainer from '../../client/services/AppContainer';
 import { withUnstatedContainers } from '../UnstatedUtils';
-import { IInAppNotification } from '../../interfaces/in-app-notification';
-import { InAppNotification } from './InAppNotification';
+import InAppNotificationList from './InAppNotificationList';
 import SocketIoContainer from '../../client/services/SocketIoContainer';
+import { useSWRxInAppNotifications } from '../../stores/in-app-notification';
 
 const logger = loggerFactory('growi:InAppNotificationDropdown');
 
@@ -21,9 +21,9 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
   const { appContainer } = props;
 
   const [count, setCount] = useState(0);
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [notifications, setNotifications] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
+  const limit = 6;
+  const { data: inAppNotificationData } = useSWRxInAppNotifications(limit);
 
   useEffect(() => {
     initializeSocket(props);
@@ -60,23 +60,6 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
     }
   };
 
-  /**
-    * TODO: Fetch notification list by GW-7473
-    */
-  const fetchNotificationList = async() => {
-    const limit = 6;
-    try {
-      const paginationResult = await appContainer.apiv3Get('/in-app-notification/list', { limit });
-
-      setNotifications(paginationResult.data.docs);
-      setIsLoaded(true);
-    }
-    catch (err) {
-      logger.error(err);
-    }
-  };
-
-
   const toggleDropdownHandler = () => {
     if (isOpen === false && count > 0) {
       updateNotificationStatus();
@@ -84,67 +67,17 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
 
     const newIsOpenState = !isOpen;
     setIsOpen(newIsOpenState);
-
-    if (newIsOpenState === true) {
-      fetchNotificationList();
-    }
   };
 
   /**
     * TODO: Jump to the page by clicking on the notification by GW-7472
     */
 
-  const notificationClickHandler = async(notification: Notification) => {
-    try {
-      // await this.props.crowi.apiPost('/notification.open', { id: notification._id });
-      // jump to target page
-      // window.location.href = notification.target.path;
-    }
-    catch (err) {
-      logger.error(err);
-    }
-  };
-
-  const RenderUnLoadedInAppNotification = (): JSX.Element => {
-    return (
-      <i className="fa fa-spinner"></i>
-    );
-  };
-
-  const RenderEmptyInAppNotification = (): JSX.Element => {
-    return (
-      // TODO: apply i18n by #78569
-      <>You had no notifications, yet.</>
-    );
-  };
-
-  // TODO: improve renderInAppNotificationList by GW-7535
-  // refer to https://github.com/crowi/crowi/blob/eecf2bc821098d2516b58104fe88fae81497d3ea/client/components/Notification/Notification.tsx
-  const RenderInAppNotificationList = () => {
-    console.log('notificationsHoge', notifications);
 
+  const badge = count > 0 ? <span className="badge badge-pill badge-danger grw-notification-badge">{count}</span> : '';
 
-    if (notifications.length === 0) {
-      return <RenderEmptyInAppNotification />;
-    }
-    const notificationList = notifications.map((notification: IInAppNotification) => {
-      return (
-        <div className="d-flex flex-row" key={notification._id}>
-          <InAppNotification notification={notification} onClick={notificationClickHandler} />
-        </div>
-      );
-    });
-    return <>{notificationList}</>;
-  };
-
-  const InAppNotificationContents = (): JSX.Element => {
-    if (!isLoaded) {
-      return <RenderUnLoadedInAppNotification />;
-    }
-    return <RenderInAppNotificationList />;
-  };
 
-  const badge = count > 0 ? <span className="badge badge-pill badge-danger grw-notification-badge">{count}</span> : '';
+  // const notifications = inAppNotificationData.docs;
 
   return (
     <Dropdown className="notification-wrapper" isOpen={isOpen} toggle={toggleDropdownHandler}>
@@ -154,7 +87,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
         </button>
       </DropdownToggle>
       <DropdownMenu className="px-2" right>
-        <InAppNotificationContents />
+        <InAppNotificationList inAppNotificationData={inAppNotificationData} />
         <DropdownItem divider />
         {/* TODO: Able to show all notifications by #79317 */}
         <a className="dropdown-item d-flex justify-content-center" href="/me/all-in-app-notifications">See All</a>

packages/app/src/components/InAppNotification/InAppNotificationList.tsx

@@ -0,0 +1,62 @@
+import React, { FC } from 'react';
+
+import { PaginateResult } from 'mongoose';
+import { IInAppNotification } from '../../interfaces/in-app-notification';
+import { InAppNotification } from './InAppNotification';
+
+type Props = {
+  inAppNotificationData: PaginateResult<IInAppNotification> | undefined;
+};
+
+const InAppNotificationList: FC<Props> = (props: Props) => {
+  const { inAppNotificationData } = props;
+
+  if (inAppNotificationData == null) {
+    return (
+      <div className="wiki">
+        <div className="text-muted text-center">
+          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+        </div>
+      </div>
+    );
+  }
+
+  const notifications = inAppNotificationData.docs;
+
+  const notificationClickHandler = async(notification: Notification) => {
+    try {
+      // await this.props.crowi.apiPost('/notification.open', { id: notification._id });
+      // jump to target page
+      // window.location.href = notification.target.path;
+    }
+    catch (err) {
+      // logger.error(err);
+    }
+  };
+
+  const RenderEmptyInAppNotification = (): JSX.Element => {
+    return (
+      // TODO: apply i18n by #78569
+      <>You had no notifications, yet.</>
+    );
+  };
+
+  const RenderInAppNotificationList = () => {
+    if (notifications.length === 0) {
+      return <RenderEmptyInAppNotification />;
+    }
+    const notificationList = notifications.map((notification: IInAppNotification) => {
+      return (
+        <div className="d-flex flex-row" key={notification._id}>
+          <InAppNotification notification={notification} onClick={notificationClickHandler} />
+        </div>
+      );
+    });
+    return <>{notificationList}</>;
+  };
+
+  return <RenderInAppNotificationList />;
+};
+
+
+export default InAppNotificationList;

packages/app/src/server/routes/all-in-app-notifications.ts

@@ -3,7 +3,6 @@ import {
 } from 'express';
 
 export const list = (req: Request, res: Response): void => {
-  console.log('hogehoge');
 
   return res.render('me/all-in-app-notifications');
 };

packages/app/src/server/views/me/all-in-app-notifications.html

@@ -1,6 +1,7 @@
 {% extends '../layout/layout.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('My Drafts')) }}{% endblock %}
+<!-- TODO: apply i18n by #80104 -->
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('All In-App Notifications')) }}{% endblock %}
 
 {% block layout_main %}
 

packages/app/src/stores/in-app-notification.ts

@@ -0,0 +1,17 @@
+import useSWR, { SWRResponse } from 'swr';
+
+import { PaginateResult } from 'mongoose';
+import { apiv3Get } from '../client/util/apiv3-client';
+import { IInAppNotification } from '../interfaces/in-app-notification';
+
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useSWRxInAppNotifications = <Data, Error>(
+  // TODO: apply pagination by 80107
+  limit: number,
+): SWRResponse<PaginateResult<IInAppNotification>, Error> => {
+  return useSWR(
+    '/in-app-notification/list',
+    endpoint => apiv3Get(endpoint, { limit }).then(response => response.data),
+  );
+};