Merge branch 'feat/notification' into imprv/79767-serialize-user-securely

packages/app/src/components/FormattedDistanceDate.jsx

@@ -23,7 +23,7 @@ const FormattedDistanceDate = (props) => {
   return (
     <>
       <span id={elemId}>{formatDistanceStrict(date, baseDate)}</span>
-      <UncontrolledTooltip placement="bottom" fade={false} target={elemId}>{dateFormatted}</UncontrolledTooltip>
+      {props.isShowTooltip && <UncontrolledTooltip placement="bottom" fade={false} target={elemId}>{dateFormatted}</UncontrolledTooltip>}
     </>
   );
 };
@@ -34,9 +34,11 @@ FormattedDistanceDate.propTypes = {
   baseDate: PropTypes.instanceOf(Date),
   // the number(sec) from 'baseDate' to avoid format
   differenceForAvoidingFormat: PropTypes.number,
+  isShowTooltip: PropTypes.bool,
 };
 FormattedDistanceDate.defaultProps = {
   differenceForAvoidingFormat: 86400 * 3,
+  isShowTooltip: true,
 };
 
 export default FormattedDistanceDate;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 
 import { UserPicture } from '@growi/ui';
-import { PageCommentNotification } from './PageCommentNotification';
+import { PageCommentInAppNotification } from './PageCommentInAppNotification';
+import { PageUpdateInAppNotification } from './PageUpdateInAppNotification';
 import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
+import FormattedDistanceDate from '../FormattedDistanceDate';
 
 interface Props {
   notification: IInAppNotification
@@ -35,12 +37,11 @@ export const InAppNotification = (props: Props): JSX.Element => {
     return actionedUsers;
   };
 
-  const renderUserImage = () => {
+  const renderUserImage = (): JSX.Element => {
     const actionUsers = notification.actionUsers;
 
     if (actionUsers.length < 1) {
-    // what is this case?
-      return '';
+      return <></>;
     }
 
     return <UserPicture user={actionUsers[0]} size="md" noTooltip />;
@@ -52,16 +53,32 @@ export const InAppNotification = (props: Props): JSX.Element => {
     ...props,
   };
 
-  switch (componentName) {
-    case 'Page:COMMENT':
-      return (
-        <>
+  const renderInAppNotificationContent = (): JSX.Element => {
+    switch (componentName) {
+      case 'Page:COMMENT':
+        return <PageCommentInAppNotification {...propsNew} onClick={props.onClick(props.notification)} />;
+      case 'Page:UPDATE':
+        return <PageUpdateInAppNotification {...propsNew} onClick={props.onClick(props.notification)} />;
+      default:
+        return <></>;
+    }
+  };
+
+  return (
+    <>
+      <div className="dropdown-item d-flex flex-row mb-3">
+        <div className="p-2 d-flex align-items-center">
           {renderUserImage()}
-          <PageCommentNotification {...propsNew} onClick={props.onClick(props.notification)} />
-        </>
+        </div>
+        <div className="p-2">
+          {renderInAppNotificationContent()}
+          <div>
+            <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+
 
-      );
-    default:
-      return <></>;
-  }
 };

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

@@ -130,7 +130,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
     }
     const notificationList = notifications.map((notification: IInAppNotification) => {
       return (
-        <div className="my-2" key={notification._id}>
+        <div className="d-flex flex-row" key={notification._id}>
           <InAppNotification notification={notification} onClick={notificationClickHandler} />
         </div>
       );
@@ -149,14 +149,16 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
 
   return (
     <Dropdown className="notification-wrapper" isOpen={isOpen} toggle={toggleDropdownHandler}>
-      <DropdownToggle tag="a" className="nav-link">
-        <i className="icon-bell mr-2" /> {badge}
+      <DropdownToggle tag="a">
+        <button type="button" className="nav-link border-0 bg-transparent waves-effect waves-light">
+          <i className="icon-bell mr-2" /> {badge}
+        </button>
       </DropdownToggle>
-      <DropdownMenu right>
+      <DropdownMenu className="px-2" right>
         <InAppNotificationContents />
         <DropdownItem divider />
-        {/* TODO: Able to show all notifications by GW-7534 */}
-        <a>See All</a>
+        {/* TODO: Able to show all notifications by #79317 */}
+        <a className="dropdown-item d-flex justify-content-center">See All</a>
       </DropdownMenu>
     </Dropdown>
   );

packages/app/src/components/InAppNotification/PageCommentNotification.tsx → packages/app/src/components/InAppNotification/PageCommentInAppNotification.tsx

@@ -6,7 +6,7 @@ interface Props {
   notification: IInAppNotification
   onClick: () => void
 }
-export const PageCommentNotification = (props: Props) => {
+export const PageCommentInAppNotification = (props: Props): JSX.Element => {
 
   return (
     <>

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
+
+interface Props {
+  actionUsers: string
+  notification: IInAppNotification
+  onClick: () => void
+}
+export const PageUpdateInAppNotification = (props: Props): JSX.Element => {
+
+  return (
+    <>
+      <b>{props.actionUsers}</b> updated {props.notification.target.path}
+    </>
+  );
+
+};

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

@@ -28,7 +28,7 @@ class GrowiNavbar extends React.Component {
 
     return (
       <>
-        <li>
+        <li className="nav-item">
           <InAppNotificationDropdown />
         </li>
 

packages/app/src/styles/_subnav.scss

@@ -85,7 +85,8 @@
     }
 
     .btn-like,
-    .btn-bookmark {
+    .btn-bookmark,
+    .btn-subscribe {
       @extend .btn-sm;
 
       height: 30px;