[refactor] make Next.js i18n smoother with MobX-i18n 0.7

components/Git/Card.tsx

@@ -1,10 +1,10 @@
 import { text2color } from 'idea-react';
 import { GitRepository } from 'mobx-github';
 import { observer } from 'mobx-react';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import { Badge, Button, Card, CardProps, Col, Row } from 'react-bootstrap';
 
-import { t } from '../../models/Translation';
+import { I18nContext } from '../../models/Translation';
 import { GitLogo } from './Logo';
 
 export interface GitCardProps
@@ -24,45 +24,49 @@ export const GitCard: FC<GitCardProps> = observer(
     description,
     homepage,
     ...props
-  }) => (
-    <Card className={className} {...props}>
-      <Card.Body className="d-flex flex-column gap-3">
-        <Card.Title as="h3" className="h5">
-          <a target="_blank" href={html_url} rel="noreferrer">
-            {full_name}
-          </a>
-        </Card.Title>
+  }) => {
+    const { t } = useContext(I18nContext);
 
-        <nav className="flex-fill">
-          {topics.map(topic => (
-            <Badge
-              key={topic}
-              className="me-1 text-decoration-none"
-              bg={text2color(topic, ['light'])}
-              as="a"
-              target="_blank"
-              href={`https://github.com/topics/${topic}`}
-            >
-              {topic}
-            </Badge>
-          ))}
-        </nav>
-        <Row as="ul" className="list-unstyled g-4" xs={4}>
-          {languages.map(language => (
-            <Col key={language} as="li">
-              <GitLogo name={language} />
-            </Col>
-          ))}
-        </Row>
-        <Card.Text>{description}</Card.Text>
-      </Card.Body>
-      <Card.Footer className="d-flex justify-content-between align-items-center">
-        {homepage && (
-          <Button variant="success" target="_blank" href={homepage}>
-            {t('home_page')}
-          </Button>
-        )}
-      </Card.Footer>
-    </Card>
-  ),
+    return (
+      <Card className={className} {...props}>
+        <Card.Body className="d-flex flex-column gap-3">
+          <Card.Title as="h3" className="h5">
+            <a target="_blank" href={html_url} rel="noreferrer">
+              {full_name}
+            </a>
+          </Card.Title>
+
+          <nav className="flex-fill">
+            {topics.map(topic => (
+              <Badge
+                key={topic}
+                className="me-1 text-decoration-none"
+                bg={text2color(topic, ['light'])}
+                as="a"
+                target="_blank"
+                href={`https://github.com/topics/${topic}`}
+              >
+                {topic}
+              </Badge>
+            ))}
+          </nav>
+          <Row as="ul" className="list-unstyled g-4" xs={4}>
+            {languages.map(language => (
+              <Col key={language} as="li">
+                <GitLogo name={language} />
+              </Col>
+            ))}
+          </Row>
+          <Card.Text>{description}</Card.Text>
+        </Card.Body>
+        <Card.Footer className="d-flex justify-content-between align-items-center">
+          {homepage && (
+            <Button variant="success" target="_blank" href={homepage}>
+              {t('home_page')}
+            </Button>
+          )}
+        </Card.Footer>
+      </Card>
+    );
+  },
 );

components/LarkImage.tsx

@@ -2,7 +2,8 @@ import { TableCellValue } from 'mobx-lark';
 import { FC } from 'react';
 import { Image, ImageProps } from 'react-bootstrap';
 
-import { DefaultImage, fileURLOf } from '../pages/api/Lark/file/[id]';
+import { fileURLOf } from '../models/Base';
+import { DefaultImage } from '../models/configuration';
 
 export interface LarkImageProps extends Omit<ImageProps, 'src'> {
   src?: TableCellValue;

components/Layout/NotFoundCard.tsx

@@ -1,10 +1,13 @@
+import { observer } from 'mobx-react';
 import { ErrorProps } from 'next/error';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 
-import { i18n } from '../../models/Translation';
+import { I18nContext } from '../../models/Translation';
 
-export const NotFoundCard: FC<ErrorProps> = ({ title }) =>
-  i18n.currentLanguage.startsWith('zh') ? (
+export const NotFoundCard: FC<ErrorProps> = observer(({ title }) => {
+  const { currentLanguage } = useContext(I18nContext);
+
+  return currentLanguage.startsWith('zh') ? (
     <script
       src="//cdn.dnpw.org/404/v1.min.js"
       // @ts-expect-error https://www.dnpw.org/cn/pa-notfound.html
@@ -18,3 +21,4 @@ export const NotFoundCard: FC<ErrorProps> = ({ title }) =>
       src="https://notfound-static.fwebservices.be/en/404?key=66abb751ed312"
     />
   );
+});

components/Layout/PageHead.tsx

@@ -1,21 +1,20 @@
 import Head from 'next/head';
 import type { FC, PropsWithChildren } from 'react';
 
+import { Name, Summary } from '../../models/configuration';
+
 export type PageHeadProps = PropsWithChildren<{
   title?: string;
   description?: string;
 }>;
 
-const Name = process.env.NEXT_PUBLIC_SITE_NAME,
-  Summary = process.env.NEXT_PUBLIC_SITE_SUMMARY;
-
 export const PageHead: FC<PageHeadProps> = ({
   title,
   description = Summary,
   children,
 }) => (
   <Head>
-    <title>{`${title}${title && ' - '}${Name}`}</title>
+    <title>{`${title ? `${title} - ` : ''}${Name}`}</title>
 
     {description && <meta name="description" content={description} />}
 

components/Navigator/LanguageMenu.tsx

@@ -1,16 +1,16 @@
 import { Option, Select } from 'idea-react';
 import { observer } from 'mobx-react';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 
-import { i18n, LanguageName } from '../../models/Translation';
+import { I18nContext, LanguageName } from '../../models/Translation';
 
 const LanguageMenu: FC = observer(() => {
-  const { currentLanguage } = i18n;
+  const i18n = useContext(I18nContext);
 
   return (
     <Select
-      value={currentLanguage}
-      onChange={key => i18n.changeLanguage(key as typeof currentLanguage)}
+      value={i18n.currentLanguage}
+      onChange={key => i18n.loadLanguages(key as typeof i18n.currentLanguage)}
     >
       {Object.entries(LanguageName).map(([key, name]) => (
         <Option key={key} value={key}>

components/Navigator/MainNavigator.tsx

@@ -1,43 +1,46 @@
 import { observer } from 'mobx-react';
 import dynamic from 'next/dynamic';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import { Container, Nav, Navbar } from 'react-bootstrap';
 
-import { t } from '../../models/Translation';
+import { Name } from '../../models/configuration';
+import { I18nContext } from '../../models/Translation';
 
-const LanguageMenu = dynamic(import('./LanguageMenu'), { ssr: false });
+const LanguageMenu = dynamic(() => import('./LanguageMenu'), { ssr: false });
 
-const Name = process.env.NEXT_PUBLIC_SITE_NAME || '';
+export const MainNavigator: FC = observer(() => {
+  const { t } = useContext(I18nContext);
 
-export const MainNavigator: FC = observer(() => (
-  <Navbar bg="light" variant="light" fixed="top" expand="sm" collapseOnSelect>
-    <Container>
-      <Navbar.Brand href="/">{Name}</Navbar.Brand>
+  return (
+    <Navbar bg="light" variant="light" fixed="top" expand="sm" collapseOnSelect>
+      <Container>
+        <Navbar.Brand href="/">{Name}</Navbar.Brand>
 
-      <Navbar.Toggle aria-controls="navbar-inner" />
+        <Navbar.Toggle aria-controls="navbar-inner" />
 
-      <Navbar.Collapse id="navbar-inner">
-        <Nav className="me-auto">
-          <Nav.Link href="/article">{t('article')}</Nav.Link>
+        <Navbar.Collapse id="navbar-inner">
+          <Nav className="me-auto">
+            <Nav.Link href="/article">{t('article')}</Nav.Link>
 
-          <Nav.Link href="/activity">{t('activity')}</Nav.Link>
+            <Nav.Link href="/activity">{t('activity')}</Nav.Link>
 
-          <Nav.Link href="/community">{t('community')}</Nav.Link>
+            <Nav.Link href="/community">{t('community')}</Nav.Link>
 
-          <Nav.Link href="/article/Wiki/_posts/Profile/about">
-            {t('about')}
-          </Nav.Link>
+            <Nav.Link href="/article/Wiki/_posts/Profile/about">
+              {t('about')}
+            </Nav.Link>
 
-          <Nav.Link
-            target="_blank"
-            href="https://github.com/FreeCodeCamp-Chengdu/FreeCodeCamp-Chengdu.github.io"
-          >
-            {t('source_code')}
-          </Nav.Link>
-        </Nav>
+            <Nav.Link
+              target="_blank"
+              href="https://github.com/FreeCodeCamp-Chengdu/FreeCodeCamp-Chengdu.github.io"
+            >
+              {t('source_code')}
+            </Nav.Link>
+          </Nav>
 
-        <LanguageMenu />
-      </Navbar.Collapse>
-    </Container>
-  </Navbar>
-));
+          <LanguageMenu />
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+});

components/Navigator/SearchBar.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import {
   Button,
   Form,
@@ -9,7 +9,7 @@ import {
   InputGroupProps,
 } from 'react-bootstrap';
 
-import { t } from '../../models/Translation';
+import { I18nContext } from '../../models/Translation';
 import styles from './SearchBar.module.less';
 
 export interface SearchBarProps
@@ -27,24 +27,30 @@ export const SearchBar: FC<SearchBarProps> = observer(
     action = '/search',
     size,
     name = 'keywords',
-    placeholder = t('keywords'),
+    placeholder,
     expanded = true,
     defaultValue,
     value,
     onChange,
     ...props
-  }) => (
-    <Form {...{ action, ...props }}>
-      <InputGroup size={size}>
-        <Form.Control
-          className={expanded ? '' : styles.input}
-          type="search"
-          {...{ name, placeholder, defaultValue, value, onChange }}
-        />
-        <Button type="submit" variant="light">
-          🔍
-        </Button>
-      </InputGroup>
-    </Form>
-  ),
+  }) => {
+    const { t } = useContext(I18nContext);
+
+    placeholder ??= t('keywords');
+
+    return (
+      <Form {...{ action, ...props }}>
+        <InputGroup size={size}>
+          <Form.Control
+            className={expanded ? '' : styles.input}
+            type="search"
+            {...{ name, placeholder, defaultValue, value, onChange }}
+          />
+          <Button type="submit" variant="light">
+            🔍
+          </Button>
+        </InputGroup>
+      </Form>
+    );
+  },
 );

models/Base.ts

@@ -2,33 +2,26 @@ import 'core-js/full/array/from-async';
 
 import { HTTPClient } from 'koajax';
 import { githubClient, RepositoryModel } from 'mobx-github';
+import { TableCellAttachment, TableCellMedia, TableCellValue } from 'mobx-lark';
 
-export const isServer = () => typeof window === 'undefined';
-
-const VercelHost = process.env.VERCEL_URL,
-  GithubToken = process.env.GITHUB_TOKEN;
-
-const API_Host = isServer()
-  ? VercelHost
-    ? `https://${VercelHost}`
-    : 'http://localhost:3000'
-  : globalThis.location.origin;
+import { GITHUB_TOKEN, LARK_API_HOST } from './configuration';
 
 export const larkClient = new HTTPClient({
-  baseURI: `${API_Host}/api/Lark/`,
+  baseURI: LARK_API_HOST,
   responseType: 'json',
 });
 
 githubClient.use(({ request }, next) => {
-  if (GithubToken)
+  if (GITHUB_TOKEN)
     request.headers = {
       ...request.headers,
-      Authorization: `Bearer ${GithubToken}`,
+      Authorization: `Bearer ${GITHUB_TOKEN}`,
     };
+
   return next();
 });
 
-export const repositoryStore = new RepositoryModel('freecodecamp-chengdu');
+export const repositoryStore = new RepositoryModel('idea2app');
 
 type UploadedFile = Record<'originalname' | 'filename' | 'location', string>;
 /**
@@ -42,5 +35,18 @@ export async function upload(file: Blob) {
     'https://api.escuelajs.co/api/v1/files/upload',
     form,
   );
+
   return body!.location;
 }
+
+export function fileURLOf(field: TableCellValue, cache = false) {
+  if (!(field instanceof Array) || !field[0]) return field + '';
+
+  const file = field[0] as TableCellMedia | TableCellAttachment;
+
+  let URI = `/api/Lark/file/${'file_token' in file ? file.file_token : file.attachmentToken}/${file.name}`;
+
+  if (cache) URI += '?cache=1';
+
+  return URI;
+}