Merge pull request #4707 from weseek/imprv/81702-add-category-tabs

Imprv/81702 add category tabs

packages/app/resource/locales/en_US/translation.json

@@ -259,7 +259,10 @@
   "in_app_notification": {
     "notification_list": "In-App Notification List",
     "see_all": "See All",
-    "no_notification": "You don't have any notificatios."
+    "no_notification": "You don't have any notificatios.",
+    "all": "All",
+    "unopend": "Unread",
+    "mark_all_as_read": "Mark all as read"
   },
   "in_app_notification_settings": {
     "in_app_notification_settings": "In-App Notification Settings",

packages/app/resource/locales/ja_JP/translation.json

@@ -261,7 +261,10 @@
   "in_app_notification": {
     "notification_list": "アプリ内通知一覧",
     "see_all": "通知一覧を見る",
-    "no_notification": "通知は一つもありません。"
+    "no_notification": "通知はありません",
+    "all": "全て",
+    "unopend": "未読",
+    "mark_all_as_read": "全て既読にする"
   },
   "in_app_notification_settings": {
     "in_app_notification_settings": "アプリ内通知設定",

packages/app/resource/locales/zh_CN/translation.json

@@ -240,7 +240,10 @@
   "in_app_notification": {
     "notification_list": "应用内通知列表",
     "see_all": "查看通知列表",
-    "no_notification": "您没有任何通知"
+    "no_notification": "您没有任何通知",
+    "all": "全部",
+    "unopend": "未读",
+    "mark_all_as_read" : "标记为已读"
   },
   "in_app_notification_settings": {
     "in_app_notification_settings": "在应用程序通知设置",

packages/app/src/client/app.jsx

@@ -8,7 +8,7 @@ import { SWRConfig } from 'swr';
 import loggerFactory from '~/utils/logger';
 import { swrGlobalConfiguration } from '~/utils/swr-utils';
 
-import AllInAppNotifications from '../components/InAppNotification/AllInAppNotifications';
+import InAppNotificationPage from '../components/InAppNotification/InAppNotificationPage';
 import ErrorBoundary from '../components/ErrorBoudary';
 import Sidebar from '../components/Sidebar';
 import SearchPage from '../components/SearchPage';
@@ -87,7 +87,7 @@ Object.assign(componentMappings, {
   'grw-sidebar-wrapper': <Sidebar />,
 
   'search-page': <SearchPage crowi={appContainer} />,
-  'all-in-app-notifications': <AllInAppNotifications />,
+  'all-in-app-notifications': <InAppNotificationPage />,
 
   // 'revision-history': <PageHistory pageId={pageId} />,
   'tags-page': <TagsList crowi={appContainer} />,

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

@@ -1,45 +0,0 @@
-import React, { FC, useState } from 'react';
-
-import InAppNotificationList from './InAppNotificationList';
-import { useSWRxInAppNotifications } from '../../stores/in-app-notification';
-import PaginationWrapper from '../PaginationWrapper';
-
-
-const AllInAppNotifications: FC = () => {
-  const [activePage, setActivePage] = useState(1);
-  const [offset, setOffset] = useState(0);
-  const limit = 10;
-  const { data: inAppNotificationData } = useSWRxInAppNotifications(limit, offset);
-
-  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 setPageNumber = (selectedPageNumber): void => {
-    setActivePage(selectedPageNumber);
-    const offset = (selectedPageNumber - 1) * limit;
-    setOffset(offset);
-  };
-
-  return (
-    <>
-      <InAppNotificationList inAppNotificationData={inAppNotificationData} />
-      <PaginationWrapper
-        activePage={activePage}
-        changePage={setPageNumber}
-        totalItemsCount={inAppNotificationData.totalDocs}
-        pagingLimit={inAppNotificationData.limit}
-        align="center"
-        size="sm"
-      />
-    </>
-  );
-};
-
-export default AllInAppNotifications;

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

@@ -0,0 +1,111 @@
+import React, { FC, useState } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import AppContainer from '~/client/services/AppContainer';
+import { withUnstatedContainers } from '../UnstatedUtils';
+import InAppNotificationList from './InAppNotificationList';
+import { useSWRxInAppNotifications } from '../../stores/in-app-notification';
+import PaginationWrapper from '../PaginationWrapper';
+import CustomNavAndContents from '../CustomNavigation/CustomNavAndContents';
+
+
+type Props = {
+  appContainer: AppContainer
+}
+
+const InAppNotificationPageBody: FC<Props> = (props) => {
+  const { appContainer } = props;
+  const limit = appContainer.config.pageLimitationXL;
+  const [activePage, setActivePage] = useState(1);
+  const offset = (activePage - 1) * limit;
+  const { data: inAppNotificationData } = useSWRxInAppNotifications(limit, offset);
+  const { t } = useTranslation();
+
+  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 setPageNumber = (selectedPageNumber): void => {
+    setActivePage(selectedPageNumber);
+  };
+
+  // commonize notification lists by 81953
+  const AllInAppNotificationList = () => {
+    return (
+      <>
+        <InAppNotificationList inAppNotificationData={inAppNotificationData} />
+        <PaginationWrapper
+          activePage={activePage}
+          changePage={setPageNumber}
+          totalItemsCount={inAppNotificationData.totalDocs}
+          pagingLimit={inAppNotificationData.limit}
+          align="center"
+          size="sm"
+        />
+      </>
+    );
+  };
+
+  // commonize notification lists by 81953
+  const UnopenedInAppNotificationList = () => {
+    return (
+      <>
+        <div className="mb-2 d-flex justify-content-end">
+          <button
+            type="button"
+            className="btn btn-outline-primary"
+            // TODO: set "UNOPENED" notification status "OPEND" by 81951
+            // onClick={}
+          >
+            {t('in_app_notification.mark_all_as_read')}
+          </button>
+        </div>
+        {/*  TODO: show only unopened notifications by 81945 */}
+        <InAppNotificationList inAppNotificationData={inAppNotificationData} />
+        <PaginationWrapper
+          activePage={activePage}
+          changePage={setPageNumber}
+          totalItemsCount={inAppNotificationData.totalDocs}
+          pagingLimit={inAppNotificationData.limit}
+          align="center"
+          size="sm"
+        />
+      </>
+    );
+  };
+
+  const navTabMapping = {
+    user_infomation: {
+      Icon: () => <></>,
+      Content: AllInAppNotificationList,
+      i18n: t('in_app_notification.all'),
+      index: 0,
+    },
+    // TODO: show unopend notification list by 81945
+    external_accounts: {
+      Icon: () => <></>,
+      Content: UnopenedInAppNotificationList,
+      i18n: t('in_app_notification.unopend'),
+      index: 1,
+    },
+  };
+
+  return (
+    <CustomNavAndContents navTabMapping={navTabMapping} />
+  );
+};
+
+const InAppNotificationPage = withUnstatedContainers(InAppNotificationPageBody, [AppContainer]);
+export default InAppNotificationPage;
+
+InAppNotificationPageBody.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};

packages/app/src/server/models/config.ts

@@ -235,6 +235,7 @@ schema.statics.getLocalconfig = function(crowi) {
     isSearchServiceReachable: crowi.searchService.isReachable,
     isMailerSetup: crowi.mailService.isMailerSetup,
     globalLang: crowi.configManager.getConfig('crowi', 'app:globalLang'),
+    pageLimitationXL: crowi.configManager.getConfig('crowi', 'customize:showPageLimitationXL'),
   };
 
   return localConfig;