[fix] repair Open Library borrowing page rendering

models/Translation.ts

@@ -1,4 +1,10 @@
-import { loadLanguageMapFrom, TranslationMap, TranslationModel } from 'mobx-i18n';
+import {
+  decodeFunctions,
+  encodeFunctions,
+  loadLanguageMapFrom,
+  TranslationMap,
+  TranslationModel,
+} from 'mobx-i18n';
 import { DataObject } from 'mobx-restful';
 import { NextPageContext } from 'next';
 import { createContext } from 'react';
@@ -15,15 +21,17 @@ export type LanguageCode = keyof typeof i18nData;
 
 export interface I18nProps {
   language: LanguageCode;
-  languageMap: typeof zhCN;
+  languageMap: string;
 }
 
 export type I18nKey = keyof typeof zhCN;
 
 export const createI18nStore = <N extends LanguageCode, K extends string>(
   language?: N,
-  data?: TranslationMap<K>,
+  serializedData?: string,
 ) => {
+  const data = serializedData && (JSON.parse(serializedData, decodeFunctions) as TranslationMap<K>);
+
   const store = new TranslationModel({
     ...i18nData,
     ...(language && { [language]: data }),
@@ -57,13 +65,18 @@ export const parseSSRContext = <T extends DataObject = DataObject>(
   return cookie;
 };
 
-export const loadSSRLanguage = (context: NextPageContext) => {
+export const loadSSRLanguage = async (context: NextPageContext) => {
   const { headers } = context.req || {},
     { language } = parseSSRContext(context, ['language']);
   const header = {
     ...headers,
     ...(language ? { cookie: `language=${language}` } : {}),
   };
+  const result = await loadLanguageMapFrom(i18nData, header);
 
-  return loadLanguageMapFrom(i18nData, header);
+  if (result)
+    return {
+      ...result,
+      languageMap: JSON.stringify(result.languageMap, encodeFunctions),
+    };
 };

pages/open-library/book/[id].tsx

@@ -7,14 +7,21 @@ import { Badge, Button, Card, Col, Container, Row, Tab, Table, Tabs } from 'reac
 import { formatDate } from 'web-utility';
 
 import { PageHead } from '../../../components/Layout/PageHead';
+import { larkClient } from '../../../models/Base';
 import type { Book, BookReview, BorrowHistory } from '../../../models/Book';
-import { OpenLibraryBorrowFormURL, OpenLibraryReviewFormURL } from '../../../models/configuration';
+import {
+  API_Host,
+  OpenLibraryBorrowFormURL,
+  OpenLibraryReviewFormURL,
+} from '../../../models/configuration';
 import { I18nContext } from '../../../models/Translation';
-import { openLibraryBooks } from '../../api/open-library/books';
 
 export const getServerSideProps: GetServerSideProps<Book> = async ({ params }) => {
   const bookId = +(params!.id + '');
-  const book = openLibraryBooks.find(({ id }) => id === bookId);
+
+  const { body } = await larkClient.get<Book[]>(`${API_Host}/api/open-library/books`);
+
+  const book = body!.find(({ id }) => id === bookId);
 
   return book ? { props: book } : { notFound: true };
 };