Added admin announcement nav item #343

Signed-off-by: RaenonX <[email protected]>
RaenonX-DL · Jan 23, 2022 · e5466ef · e5466ef
1 parent 1ab0009
commit e5466ef
Show file tree

Hide file tree

Showing 13 changed files with 112 additions and 8 deletions.
diff --git a/src/api-def b/src/api-def
diff --git a/src/components/nav/const.tsx b/src/components/nav/const.tsx
@@ -75,6 +75,12 @@ export const navItems: NavItems = [
   {type: 'header', text: (t) => t.nav.header.others},
   {type: 'path', path: GeneralPath.SPECIAL_THANKS, text: (t) => t.meta.inUse.thanks.title},
   {type: 'path', path: GeneralPath.ABOUT, text: (t) => t.meta.inUse.about.title},
+  {
+    type: 'path',
+    path: GeneralPath.ADMIN_ANNOUNCEMENT,
+    text: (t) => t.meta.inUse.admin.announcement.title,
+    adminOnly: true,
+  },
   {type: 'divider'},
   {type: 'path', path: GeneralPath.USER_SETTINGS, text: (t) => t.meta.inUse.user.settings.title},
   {type: 'component', renderComponent: () => <NavLanguageSwitch/>},

diff --git a/src/components/nav/elements/path.tsx b/src/components/nav/elements/path.tsx
@@ -13,7 +13,15 @@ import {NavItemPath} from '../type';
 type Props = NavItemPath;
 
 export const NavPath = ({
-  path, pathActiveBasis, href: hrefProps, text, disabled, onClick, pathnameNoLang, activeOverride,
+  path,
+  pathActiveBasis,
+  href: hrefProps,
+  text,
+  disabled,
+  onClick,
+  pathnameNoLang,
+  activeOverride,
+  adminOnly = false,
 }: Props) => {
   const {t, lang} = useI18n();
   const href = !!path ? makeGeneralUrl(path, {lang}) : hrefProps;
@@ -26,7 +34,7 @@ export const NavPath = ({
     );
 
   const props = {
-    className: `${isActive ? styles.active : ''} ${styles['nav-item']}`,
+    className: `${isActive ? styles.active : ''} ${adminOnly ? styles['nav-item-admin'] : styles['nav-item']}`,
     href,
     disabled,
     onClick,

diff --git a/src/components/nav/main.module.css b/src/components/nav/main.module.css
diff --git a/src/components/nav/main.module.css.map b/src/components/nav/main.module.css.map
diff --git a/src/components/nav/main.module.scss b/src/components/nav/main.module.scss
@@ -62,6 +62,7 @@ div {
     @mixin nav-item() {
       border: 1px solid colors.$color-bw-101;
       border-radius: 0.3rem;
+      background-image: var(--bs-gradient);
 
       // !important to override the default style from BS `.navbar-nav .nav-link`
       padding: 0.5rem 1rem !important;
@@ -86,8 +87,6 @@ div {
     a.nav-item {
       @include nav-item;
 
-      background-image: var(--bs-gradient);
-
       &:not([class*="disabled"]) {
         color: colors.$color-bw-240;
       }
@@ -111,6 +110,32 @@ div {
       }
     }
 
+    a.nav-item-admin {
+      @include nav-item;
+
+      &:not([class*="disabled"]) {
+        color: colors.$color-danger;
+      }
+
+      &.active {
+        $bg-active: colors.$color-danger;
+
+        color: colors.$color-bw-255;
+        border: 1px solid $bg-active;
+        background-color: $bg-active;
+      }
+
+      &:hover,
+      &:focus,
+      &.nav-dropdown-hover {
+        $bg-hovered: color.change(colors.$color-danger, $lightness: 35%);
+
+        color: colors.$color-bw-240;
+        border: 1px solid $bg-hovered;
+        background-color: $bg-hovered;
+      }
+    }
+
     button {
       // For all button component to fill the vertical space
       width: 100%;

diff --git a/src/components/nav/main.test.tsx b/src/components/nav/main.test.tsx
@@ -34,6 +34,24 @@ describe('Navigation bar', () => {
     expect(aboutButton).toHaveAttribute('data-test-is-active', 'true');
   });
 
+  it('does not show admin only path for non-admin', async () => {
+    renderReact(
+      () => <NavigationBody/>,
+      {hasSession: true, user: {isAdmin: false}},
+    );
+
+    expect(screen.queryByText(translationEN.meta.inUse.admin.announcement.title)).not.toBeInTheDocument();
+  });
+
+  it('shows admin only path', async () => {
+    renderReact(
+      () => <NavigationBody/>,
+      {hasSession: true, user: {isAdmin: true}},
+    );
+
+    expect(screen.getByText(translationEN.meta.inUse.admin.announcement.title)).toBeInTheDocument();
+  });
+
   it('hides the navbar', async () => {
     const fnSetCollapse = jest.spyOn(layoutDispatchers, LayoutDispatcherName.CHANGE_COLLAPSE);
 

diff --git a/src/components/nav/type.ts b/src/components/nav/type.ts
@@ -19,6 +19,7 @@ export type NavItemPath = NavItemCommon & {
   disabled?: boolean,
   onClick?: () => void,
   activeOverride?: boolean,
+  adminOnly?: boolean,
 } & ({
   path?: GeneralPath,
   pathActiveBasis?: PagePath[],
@@ -38,7 +39,11 @@ export type NavItemDivider = NavItemCommon & {
   type: 'divider',
 };
 
-export type NavItemDropdownContainable = NavItemHeader | NavItemPath | NavItemText | NavItemDivider;
+export type NavItemDropdownContainable =
+  NavItemHeader |
+  NavItemPath |
+  NavItemText |
+  NavItemDivider;
 
 export type NavItemDropdownTitleProps = {
   open: boolean,

diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
@@ -774,6 +774,12 @@ export const translation: TranslationStruct = {
           description: '{{unitName}} 的角色故事全集。',
         },
       },
+      admin: {
+        announcement: {
+          title: '發送網站公告',
+          description: '發送網站公告的頁面。',
+        },
+      },
       user: {
         settings: {
           title: '使用者設定',

diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
@@ -634,6 +634,9 @@ export type TranslationStruct = {
       user: {
         settings: PageMetaTranslations,
       },
+      admin: {
+        announcement: PageMetaTranslations,
+      },
     },
     error: {
       401: PageMetaTranslations,

diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
@@ -816,6 +816,12 @@ export const translation: TranslationStruct = {
           description: 'All unit stories of {{unitName}}.',
         },
       },
+      admin: {
+        announcement: {
+          title: 'Website announcement',
+          description: 'Page to send the website announcement',
+        },
+      },
       user: {
         settings: {
           title: 'User settings',

diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
@@ -780,6 +780,12 @@ export const translation: TranslationStruct = {
           description: '全部の{{unitName}}のストーリー。',
         },
       },
+      admin: {
+        announcement: {
+          title: 'TBA',
+          description: 'TBA',
+        },
+      },
       user: {
         settings: {
           title: 'TBA',

diff --git a/src/utils/meta/translations.ts b/src/utils/meta/translations.ts
@@ -36,6 +36,7 @@ export const metaTransFunctions: {[path in PagePath]: GetTranslationFunction<Pag
   [GeneralPath.ENMITY_CALC]: (t) => t.meta.inUse.calc.enmity,
   [GeneralPath.GAME_DATAMINE_INDEX]: (t) => t.meta.inUse.gameData.datamine.index,
   [GeneralPath.USER_SETTINGS]: (t) => t.meta.inUse.user.settings,
+  [GeneralPath.ADMIN_ANNOUNCEMENT]: (t) => t.meta.inUse.admin.announcement,
   [AuthPath.SIGN_IN]: (t) => t.meta.inUse.auth.signIn,
   // Constructing paths
   [GeneralPath.SKILL_SUP]: (t) => t.meta.temp.constructing,
+3 −0		api.ts
+7 −0		api/admin/announcement/payload.ts
+7 −0		api/admin/announcement/response.ts
+2 −0		api/endpoints.ts
+2 −0		paths/const/definitions.ts