Merge branch 'feat/notification' into imprv/gw7221-getIo-method

packages/app/src/components/Navbar/GrowiNavbar.jsx

@@ -7,7 +7,7 @@ import { UncontrolledTooltip } from 'reactstrap';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import NavigationContainer from '~/client/services/NavigationContainer';
 import AppContainer from '~/client/services/AppContainer';
-import InAppNotificationDropdown from '~/components/PageEditor/InAppNotificationDropdown';
+import { InAppNotificationDropdown } from '~/components/PageEditor/InAppNotificationDropdown';
 
 
 import GrowiLogo from '../Icons/GrowiLogo';

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

@@ -1,51 +1,43 @@
-import React from 'react';
+import React, { useState, FC } from 'react';
 import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
 // import DropdownMenu from './InAppNotificationDropdown/DropdownMenu';
-// import Icon from './Common/Icon'
 // import Crowi from 'client/util/Crowi'
 // import { Notification } from 'client/types/crowi'
 
-interface Props {
+export interface Props {
   // crowi: Crowi
   me: string
 }
 
-interface State {
-  count: number
-  loaded: boolean
-  notifications: Notification[]
-  open: boolean
-}
-
-export default class InAppNotificationDropdown extends React.Component<Props, State> {
+export const InAppNotificationDropdown: FC<Props> = (props: Props) => {
 
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      count: 0,
-      loaded: false,
-      notifications: [],
-      open: false,
-    };
-  }
+  const [count, setCount] = useState(0);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [notifications, setNotifications] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
 
   // componentDidMount() {
   //   this.initializeSocket();
-  //   this.fetchList();
-  //   this.fetchStatus();
+  //   this.fetchNotificationList();
+  //   this.fetchNotificationStatus();
   // }
 
+  /**
+    * TODO: Listen to socket on the client side by GW-7402
+    */
   // initializeSocket() {
   //   this.props.crowi.getWebSocket().on('notification updated', (data: { user: string }) => {
   //     if (this.props.me === data.user) {
-  //       this.fetchList();
-  //       this.fetchStatus();
+  //       this.fetchNotificationList();
+  //       this.fetchNotificationStatus();
   //     }
   //   });
   // }
 
-  // async fetchStatus() {
+  /**
+    * TODO: Fetch notification status by GW-7473
+    */
+  // async fetchNotificationStatus() {
   //   try {
   //     const { count = null } = await this.props.crowi.apiGet('/notification.status');
   //     if (count !== null && count !== this.state.count) {
@@ -57,62 +49,66 @@ export default class InAppNotificationDropdown extends React.Component<Props, St
   //   }
   // }
 
-  async updateStatus() {
+  const updateNotificationStatus = () => {
     try {
       // await this.props.crowi.apiPost('/notification.read');
-      this.setState({ count: 0 });
+      setCount(0);
     }
     catch (err) {
       // TODO: error handling
     }
-  }
+  };
 
-  // async fetchList() {
-  //   const limit = 6;
-  //   try {
-  //     const { notifications } = await this.props.crowi.apiGet('/notification.list', { limit });
-  //     this.setState({ loaded: true, notifications });
-  //   }
-  //   catch (err) {
-  //     // TODO: error handling
-  //   }
-  // }
 
-  toggle() {
-    const { open, count } = this.state;
-    if (!open && count > 0) {
-      this.updateStatus();
+  /**
+    * TODO: Fetch notification list by GW-7473
+    */
+
+  const fetchNotificationList = async() => {
+    const limit = 6;
+    try {
+      // const { notifications } = await this.props.crowi.apiGet('/notification.list', { limit });
+      setIsLoaded(true);
+      // setNotifications(notifications);
+      // this.setState({ loaded: true, notifications });
+    }
+    catch (err) {
+      // TODO: error handling
+    }
+  };
+
+  const toggleDropdownHandler = () => {
+    if (isOpen === false && count > 0) {
+      updateNotificationStatus();
     }
-    this.setState({ open: !open });
-  }
+    setIsOpen(!isOpen);
+  };
 
-  // async handleNotificationOnClick(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) {
-  //     // TODO: error handling
-  //   }
-  // }
+  /**
+    * TODO: Jump to the page by Click the notification by GW-7472
+    */
 
-  render() {
-    const {
-      count, open, loaded, notifications,
-    } = this.state;
+  const handleNotificationOnClick = 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) {
+      // TODO: error handling
+    }
+  };
 
-    const badge = count > 0 ? <span className="badge badge-pill badge-danger notification-badge">{count}</span> : '';
+  const badge = count > 0 ? <span className="badge badge-pill badge-danger notification-badge">{count}</span> : '';
 
-    return (
-      <Dropdown className="notification-wrapper" isOpen={open} toggle={this.toggle}>
-        <DropdownToggle tag="a" className="nav-link">
-          <i className="icon-bell mr-2"></i>
-          {/* {badge} */}
-        </DropdownToggle>
-        <DropdownMenu>hoge</DropdownMenu>
-      </Dropdown>
-    );
-  }
+  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>
+    </Dropdown>
+  );
 
-}
+};