Merge pull request #4570 from weseek/imprv/80105-add-new-route-for-notification-list

Imprv/80105 add a new route for notification list

packages/app/src/client/app.jsx

@@ -5,6 +5,7 @@ import { I18nextProvider } from 'react-i18next';
 
 import loggerFactory from '~/utils/logger';
 
+import AllInAppNotifications from '../components/InAppNotification/AllInAppNotifications';
 import ErrorBoundary from '../components/ErrorBoudary';
 import Sidebar from '../components/Sidebar';
 import SearchPage from '../components/SearchPage';
@@ -83,6 +84,7 @@ Object.assign(componentMappings, {
   'grw-sidebar-wrapper': <Sidebar />,
 
   'search-page': <SearchPage crowi={appContainer} />,
+  'all-in-app-notifications': <AllInAppNotifications />,
 
   // 'revision-history': <PageHistory pageId={pageId} />,
   'tags-page': <TagsList crowi={appContainer} />,

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

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+type Props = {
+
+};
+
+const AllInAppNotifications: FC<Props> = (props: Props) => {
+
+  return (
+    <>All In App Notifications</>
+  );
+};
+
+
+export default AllInAppNotifications;

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

@@ -157,7 +157,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
         <InAppNotificationContents />
         <DropdownItem divider />
         {/* TODO: Able to show all notifications by #79317 */}
-        <a className="dropdown-item d-flex justify-content-center">See All</a>
+        <a className="dropdown-item d-flex justify-content-center" href="/me/all-in-app-notifications">See All</a>
       </DropdownMenu>
     </Dropdown>
   );

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

@@ -0,0 +1,9 @@
+import {
+  Request, Response,
+} 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/routes/index.js

@@ -3,6 +3,7 @@ import express from 'express';
 import injectResetOrderByTokenMiddleware from '../middlewares/inject-reset-order-by-token-middleware';
 
 import * as forgotPassword from './forgot-password';
+import * as allInAppNotifications from './all-in-app-notifications';
 
 const multer = require('multer');
 const autoReap = require('multer-autoreap');
@@ -135,6 +136,8 @@ module.exports = function(crowi, app) {
 
   app.get('/me'                       , loginRequiredStrictly , me.index);
   // external-accounts
+  // my in-app-notifications
+  app.get('/me/all-in-app-notifications'   , loginRequiredStrictly, allInAppNotifications.list);
   app.get('/me/external-accounts'                         , loginRequiredStrictly , me.externalAccounts.list);
   // my drafts
   app.get('/me/drafts'                , loginRequiredStrictly, me.drafts.list);

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

@@ -0,0 +1,22 @@
+{% extends '../layout/layout.html' %}
+
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('My Drafts')) }}{% endblock %}
+
+{% block layout_main %}
+
+{% block content_header_wrapper %}
+<header class="py-3">
+  <div class="container-fluid">
+    <!-- TODO: apply i18n by #80104 -->
+    <h1 class="title">All In-App Notifications</h1>
+  </div>
+</header>
+<div id="grw-fav-sticky-trigger" class="sticky-top"></div>
+{% endblock %}
+
+<div id="main" class="main">
+  <div id="content-main" class="content-main grw-container-convertible">
+    <div id="all-in-app-notifications"></div>
+  </div>
+</div>
+{% endblock %}