v2.12.0 Release

.azure/pipeline.yml

@@ -107,7 +107,7 @@ stages:
       displayName: 'Copy Failure Results'
       condition: failed()
       inputs:
-        SourceFolder: '.cypress'
+        SourceFolder: '$(Pipeline.Workspace)/s/.cypress'
         Contents: |
           ./screenshots/**
           ./videos/**

package.json

@@ -2,7 +2,7 @@
   "name": "dragalia-site-front",
   "description": "Frontend of DL info website by OM.",
   "repository": "https://github.com/RaenonX-DL/dragalia-site-front",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "engines": {
     "node": "14.x",
     "npm": "^7.12.0"

pages/[lang]/analysis/[pid].tsx

@@ -10,8 +10,8 @@ import {
   DragonAnalysisGetResponse,
   UnitType,
 } from '../../../src/api-def/api';
-import {AnalysisOutputChara} from '../../../src/components/elements/posts/analysis/output/chara';
-import {AnalysisOutputDragon} from '../../../src/components/elements/posts/analysis/output/dragon';
+import {AnalysisOutputChara} from '../../../src/components/pages/posts/analysis/output/chara';
+import {AnalysisOutputDragon} from '../../../src/components/pages/posts/analysis/output/dragon';
 import {useI18n} from '../../../src/i18n/hook';
 import {ApiRequestSender} from '../../../src/utils/services/api/requestSender';
 import {getServerSidePropsPost} from '../../../src/utils/ssr';

pages/[lang]/analysis/[pid]/edit.tsx

@@ -10,8 +10,8 @@ import {
   DragonAnalysisBody,
   UnitType,
 } from '../../../../src/api-def/api';
-import {AnalysisFormCharaEdit} from '../../../../src/components/elements/posts/analysis/form/chara/edit';
-import {AnalysisFormDragonEdit} from '../../../../src/components/elements/posts/analysis/form/dragon/edit';
+import {AnalysisFormCharaEdit} from '../../../../src/components/pages/posts/analysis/form/chara/edit';
+import {AnalysisFormDragonEdit} from '../../../../src/components/pages/posts/analysis/form/dragon/edit';
 import {useI18n} from '../../../../src/i18n/hook';
 import {ApiRequestSender} from '../../../../src/utils/services/api/requestSender';
 import {getServerSidePropsPost} from '../../../../src/utils/ssr';

pages/[lang]/analysis/new/chara.ts

@@ -1,4 +1,4 @@
-import {AnalysisFormCharaNew} from '../../../../src/components/elements/posts/analysis/form/chara/new';
+import {AnalysisFormCharaNew} from '../../../../src/components/pages/posts/analysis/form/chara/new';
 
 
 export default AnalysisFormCharaNew;

pages/[lang]/analysis/new/dragon.ts

@@ -1,4 +1,4 @@
-import {AnalysisFormDragonNew} from '../../../../src/components/elements/posts/analysis/form/dragon/new';
+import {AnalysisFormDragonNew} from '../../../../src/components/pages/posts/analysis/form/dragon/new';
 
 
 export default AnalysisFormDragonNew;

pages/[lang]/ex.tsx

@@ -5,9 +5,9 @@ import Row from 'react-bootstrap/Row';
 
 import {CharaExAbilityDataEntry, ConditionEnumMap} from '../../src/api-def/resources';
 import {useFetchState} from '../../src/components/elements/common/fetch';
-import {ExAbilityInput} from '../../src/components/elements/gameData/ex/in/main';
-import {InputData} from '../../src/components/elements/gameData/ex/in/types';
-import {ExAbilityOutput} from '../../src/components/elements/gameData/ex/out/main';
+import {ExAbilityInput} from '../../src/components/pages/gameData/ex/in/main';
+import {InputData} from '../../src/components/pages/gameData/ex/in/types';
+import {ExAbilityOutput} from '../../src/components/pages/gameData/ex/out/main';
 import {scrollRefToTop} from '../../src/utils/scroll';
 import {GoogleAnalytics} from '../../src/utils/services/ga';
 import {ResourceLoader} from '../../src/utils/services/resources/loader';

pages/[lang]/info/[id].tsx

@@ -1,4 +1,4 @@
-import {UnitInfo} from '../../../src/components/elements/gameData/unitInfo/output/main';
+import {UnitInfo} from '../../../src/components/pages/gameData/unitInfo/output/main';
 
 
 export default UnitInfo;

pages/[lang]/info/index.tsx

@@ -1,4 +1,4 @@
-import {UnitInfoLookup} from '../../../src/components/elements/gameData/unitInfo/lookup/main';
+import {UnitInfoLookup} from '../../../src/components/pages/gameData/unitInfo/lookup/main';
 
 
 export default UnitInfoLookup;

pages/[lang]/name.tsx

@@ -0,0 +1,4 @@
+import {UnitNameRefPage} from '../../src/components/pages/gameData/nameRef/main';
+
+
+export default UnitNameRefPage;

pages/[lang]/quest/[pid].tsx

@@ -4,7 +4,7 @@ import {GetServerSideProps} from 'next';
 import {getSession} from 'next-auth/client';
 
 import {QuestPostGetResponse} from '../../../src/api-def/api';
-import {QuestPostOutput} from '../../../src/components/elements/posts/quest/output/main';
+import {QuestPostOutput} from '../../../src/components/pages/posts/quest/output/main';
 import {ApiRequestSender} from '../../../src/utils/services/api/requestSender';
 import {getServerSidePropsPost} from '../../../src/utils/ssr';
 import Error404 from '../../404';

pages/[lang]/quest/[pid]/edit.tsx

@@ -4,7 +4,7 @@ import {GetServerSideProps} from 'next';
 import {getSession} from 'next-auth/client';
 
 import {QuestPostGetResponse} from '../../../../src/api-def/api';
-import {QuestEditForm} from '../../../../src/components/elements/posts/quest/form/edit';
+import {QuestEditForm} from '../../../../src/components/pages/posts/quest/form/edit';
 import {ApiRequestSender} from '../../../../src/utils/services/api/requestSender';
 import {getServerSidePropsPost} from '../../../../src/utils/ssr';
 import Error404 from '../../../404';

pages/[lang]/quest/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import {QuestPostList} from '../../../src/components/elements/posts/quest/list/list';
-import {PostListPage} from '../../../src/components/elements/posts/shared/list/page';
+import {PostListPage} from '../../../src/components/elements/posts/list/page';
+import {QuestPostList} from '../../../src/components/pages/posts/quest/list/list';
 import {GeneralPath, PostPath} from '../../../src/const/path/definitions';
 import {useI18n} from '../../../src/i18n/hook';
-import {makePostPath} from '../../../src/utils/path/make';
+import {makePostUrl} from '../../../src/utils/path/make';
 import {ApiRequestSender} from '../../../src/utils/services/api/requestSender';
 
 
@@ -18,13 +18,13 @@ const QuestList = () => {
       title={title}
       fnFetchList={ApiRequestSender.questList}
       postManageBarProps={{
-        newButtons: [{url: GeneralPath.QUEST_NEW}],
+        newButtons: [{pathname: GeneralPath.QUEST_NEW}],
       }}
       renderPostEntries={(response) => (
         <QuestPostList
           entries={response.posts}
           generateLink={(postId) => (
-            makePostPath(PostPath.QUEST, {pid: postId, lang})
+            makePostUrl(PostPath.QUEST, {pid: postId, lang})
           )}
         />
       )}

pages/[lang]/quest/new.ts

@@ -1,4 +1,4 @@
-import {QuestNewForm} from '../../../src/components/elements/posts/quest/form/new';
+import {QuestNewForm} from '../../../src/components/pages/posts/quest/form/new';
 
 
 export default QuestNewForm;

pages/[lang]/skill/atk.tsx

@@ -1,4 +1,4 @@
-import {AttackingSkillLookup} from '../../../src/components/elements/gameData/skillAtk/main';
+import {AttackingSkillLookup} from '../../../src/components/pages/gameData/skillAtk/main';
 
 
 export default AttackingSkillLookup;

pages/_app.tsx

@@ -83,7 +83,10 @@ NextApp.getInitialProps = async (appContext: AppContext): Promise<AppInitialProp
     ...await getPageMeta(appContext),
     isNotFound: appContext.ctx.res?.statusCode === 404,
     session,
-    simpleUnitInfo: await ResourceLoader.getSimpleUnitInfo(),
+    resources: {
+      simpleUnitInfo: await ResourceLoader.getSimpleUnitInfo(),
+      afflictions: await ResourceLoader.getEnumAfflictionStatus(),
+    },
   };
 
   appProps.pageProps = pageProps;

pm2.yml

@@ -5,10 +5,6 @@ apps:
     # Execution configs
     exec_mode: 'cluster'
     instances: 6
-    # Watch
-    watch_delay: 10000
-    ignore_watch:
-      - 'node_modules'
     # Environments
     env:
       NODE_ENV: 'development'

src/components/elements/common/buttonBar.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {screen} from '@testing-library/react';
+
+import {renderReact} from '../../../../test/render/main';
+import {SupportedLanguages} from '../../../api-def/api';
+import {GeneralPath, PATH_ROOT} from '../../../const/path/definitions';
+import {ButtonBar} from './buttonBar';
+
+
+describe('Button bar', () => {
+  it('prepends language to the button link', async () => {
+    renderReact(() => <ButtonBar buttons={[
+      {pathname: GeneralPath.ABOUT, text: 'About', variant: 'primary'},
+    ]}/>);
+
+    expect(screen.getByText('About')).toHaveAttribute('href', `/${SupportedLanguages.EN}${GeneralPath.ABOUT}`);
+  });
+
+  it('ignores the language passed in and attaches the current language', async () => {
+    renderReact(() => <ButtonBar buttons={[
+      {pathname: `/${SupportedLanguages.CHT}${GeneralPath.ABOUT}`, text: 'About', variant: 'primary'},
+    ]}/>);
+
+    expect(screen.getByText('About')).toHaveAttribute('href', `/${SupportedLanguages.EN}${GeneralPath.ABOUT}`);
+  });
+
+  it('handles language-sensitive pathname correctly', async () => {
+    renderReact(() => <ButtonBar buttons={[
+      {pathname: `${PATH_ROOT}${GeneralPath.ABOUT}`, text: 'About', variant: 'primary'},
+    ]}/>);
+
+    expect(screen.getByText('About')).toHaveAttribute('href', `/${SupportedLanguages.EN}${GeneralPath.ABOUT}`);
+  });
+});

src/components/elements/common/buttonBar.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import {ButtonVariant} from 'react-bootstrap/types';
+
+import {useI18n} from '../../../i18n/hook';
+import {pathnameRemoveLang, urlRemoveLang} from '../../../utils/path/process';
+import {NextLink} from './link';
+
+
+export type ButtonEntry = {
+  pathname: string,
+  variant: ButtonVariant,
+  text: string,
+}
+
+export type ButtonBarProps = {
+  buttons: Array<ButtonEntry>,
+  bottomMarginClass?: string
+}
+
+export const ButtonBar = ({buttons, bottomMarginClass}: ButtonBarProps) => {
+  const {lang} = useI18n();
+
+  const buttonClassNames = `float-right ml-2 ${bottomMarginClass ?? 'mb-3'}`;
+
+  return (
+    <Row>
+      <Col>
+        {
+          buttons.map(({pathname, text, variant}, idx) => {
+            // Ensure pathname won't have language prepended
+            pathname = pathnameRemoveLang(pathname);
+            pathname = urlRemoveLang(pathname);
+
+            return (
+              <NextLink href={pathname} locale={lang} key={idx} passHref>
+                <Button variant={variant} className={buttonClassNames}>
+                  {text}
+                </Button>
+              </NextLink>
+            );
+          })
+        }
+      </Col>
+    </Row>
+  );
+};

src/components/elements/gameData/elements/conditionBadges.tsx → src/components/elements/gameData/conditionBadges.tsx

@@ -4,8 +4,8 @@ import Badge from 'react-bootstrap/Badge';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
-import {useI18n} from '../../../../i18n/hook';
-import {useAtkSkillResources} from '../../../hooks/atkSkillResources';
+import {useI18n} from '../../../i18n/hook';
+import {useAtkSkillResources} from '../../hooks/atkSkillResources';
 
 
 type ConditionBadgeProps = {

src/components/elements/gameData/elements/subTitle.tsx → src/components/elements/gameData/subTitle.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {InfoPopover} from '../../common/overlay/info';
-import {DetailedProps} from '../../common/types';
+import {InfoPopover} from '../common/overlay/info';
+import {DetailedProps} from '../common/types';
 
 
 export const SectionSubTitle = ({title, description}: DetailedProps) => {

src/components/elements/gameData/elements/title.tsx → src/components/elements/gameData/title.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {InfoPopover} from '../../common/overlay/info';
-import {DetailedProps} from '../../common/types';
+import {InfoPopover} from '../common/overlay/info';
+import {DetailedProps} from '../common/types';
 
 
 export const SectionTitle = ({title, description}: DetailedProps) => {

src/components/elements/input/entry.tsx

@@ -8,8 +8,8 @@ import {RadioGroup} from '../common/check/group/radio';
 import {CheckboxInput} from '../common/check/item/checkbox';
 import {CheckOption} from '../common/check/types';
 import {NumericInput} from '../common/input/numeric';
-import {SectionSubTitle} from '../gameData/elements/subTitle';
-import {SectionTitle} from '../gameData/elements/title';
+import {SectionSubTitle} from '../gameData/subTitle';
+import {SectionTitle} from '../gameData/title';
 import {InputEntryProps} from './types';
 
 

src/components/elements/markdown/components.ts

@@ -6,7 +6,7 @@ import {renderLink} from './components/link';
 import {renderListItem} from './components/listItem';
 import {renderParagraph} from './components/paragraph';
 import {renderStrong} from './components/strong';
-import {renderTable, renderTableCell, renderTableRow} from './components/table';
+import {renderTable, renderTableCell, renderTableHeader, renderTableRow} from './components/table';
 
 
 // Key correspondences:
@@ -25,6 +25,7 @@ export const components: Components = {
   h6: renderHeading,
   strong: renderStrong,
   table: renderTable,
+  th: renderTableHeader,
   tr: renderTableRow,
   td: renderTableCell,
   li: renderListItem,

src/components/elements/markdown/components/table.tsx

@@ -33,6 +33,14 @@ export const renderTable = ({children, node}: MarkdownComponentProps) => {
   return <table>{children}</table>;
 };
 
+export const renderTableHeader = ({children}: MarkdownComponentProps) => (
+  <th>
+    <TextChildren>
+      {children}
+    </TextChildren>
+  </th>
+);
+
 export const renderTableRow: TableRowComponent = ({children}) => {
   idxCounter = 0;