Merge pull request #4379 from weseek/imprv/gw7502-show-notification-info-on-popup

Imprv/gw7502 show notification info on popup

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

@@ -1,5 +1,7 @@
 import React, { useState, useEffect, FC } from 'react';
-import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
+import {
+  Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
+} from 'reactstrap';
 import PropTypes from 'prop-types';
 import { withUnstatedContainers } from '../UnstatedUtils';
 // import DropdownMenu from './InAppNotificationDropdown/DropdownMenu';
@@ -9,7 +11,6 @@ import SocketIoContainer from '~/client/services/SocketIoContainer';
 
 
 const InAppNotificationDropdown: FC = (props) => {
-  console.log('propsHoge', props);
 
   const [count, setCount] = useState(0);
   const [isLoaded, setIsLoaded] = useState(false);
@@ -22,9 +23,6 @@ const InAppNotificationDropdown: FC = (props) => {
     // fetchNotificationStatus();
   }, []);
 
-  /**
-    * TODO: Listen to socket on the client side by GW-7402
-    */
   const initializeSocket = (props) => {
     console.log(props);
 
@@ -111,16 +109,54 @@ const InAppNotificationDropdown: FC = (props) => {
 
   const badge = count > 0 ? <span className="badge badge-pill badge-danger notification-badge">{count}</span> : '';
 
+
+  const RenderUnLoadedInAppNotification = (): JSX.Element => {
+    return (
+      <i className="fa fa-spinner"></i>
+    );
+  };
+
+  const RenderEmptyInAppNotification = (): JSX.Element => {
+    return (
+      // TODO: apply i18n by GW-7536
+      <>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 = (): JSX.Element => {
+    // notifications.map((notification) =>
+    return (
+      // <Notification key={notification._id} notification={notification} onClick={notificationClickHandler} />)
+      <>fuga</>
+    );
+  };
+
+  function renderInAppNotificationContents(): JSX.Element {
+    if (isLoaded === false) {
+      return <RenderUnLoadedInAppNotification />;
+    }
+    if (notifications.length === 0) {
+      return <RenderEmptyInAppNotification />;
+    }
+    return <RenderInAppNotificationList />;
+  }
+
   return (
     <Dropdown className="notification-wrapper" isOpen={isOpen} toggle={toggleDropdownHandler}>
       <DropdownToggle tag="a" className="nav-link">
         <i className="icon-bell mr-2"></i>
         {badge}
       </DropdownToggle>
-      <DropdownMenu>hoge</DropdownMenu>
+      <DropdownMenu right>
+        {renderInAppNotificationContents}
+        <DropdownItem divider />
+        {/* TODO: Able to show all notifications by GW-7534 */}
+        <a>See All</a>
+      </DropdownMenu>
     </Dropdown>
   );
-
 };
 
 /**