i18n support for sicp

src/features/sicp/utils/SicpUtils.ts

@@ -11,3 +11,16 @@ export const readSicpSectionLocalStorage = () => {
   const data = readLocalStorage(SICP_CACHE_KEY, SICP_INDEX);
   return data;
 };
+
+export const SICP_DEF_TB_LANG = 'en';
+export const SICP_TB_LANG_KEY = 'sicp-textbook-lang';
+
+export const setSicpLangLocalStorage = (value: string) => {
+  setLocalStorage(SICP_TB_LANG_KEY, value);
+  window.dispatchEvent(new Event('sicp-tb-lang-change'));
+};
+
+export const readSicpLangLocalStorage = () => {
+  const data = readLocalStorage(SICP_TB_LANG_KEY, SICP_DEF_TB_LANG);
+  return data;
+};

src/pages/sicp/Sicp.tsx

@@ -13,9 +13,12 @@ import { SicpSection } from 'src/features/sicp/chatCompletion/chatCompletion';
 import { parseArr, ParseJsonError } from 'src/features/sicp/parser/ParseJson';
 import { getNext, getPrev } from 'src/features/sicp/TableOfContentsHelper';
 import {
+  readSicpLangLocalStorage,
   readSicpSectionLocalStorage,
+  setSicpLangLocalStorage,
   setSicpSectionLocalStorage,
   SICP_CACHE_KEY,
+  SICP_DEF_TB_LANG,
   SICP_INDEX
 } from 'src/features/sicp/utils/SicpUtils';
 
@@ -35,11 +38,24 @@ export const CodeSnippetContext = React.createContext({
 
 const loadingComponent = <NonIdealState title="Loading Content" icon={<Spinner />} />;
 
+const AVAILABLE_SICP_TB_LANGS: readonly string[] = ['en', 'zh_CN'];
+
+const loadInitialLang = () => {
+  const saved = readSicpLangLocalStorage();
+  if (AVAILABLE_SICP_TB_LANGS.includes(saved)) {
+    return saved;
+  } else {
+    setSicpLangLocalStorage(SICP_DEF_TB_LANG);
+    return SICP_DEF_TB_LANG;
+  }
+};
+
 const Sicp: React.FC = () => {
   const [data, setData] = useState(<></>);
   const [loading, setLoading] = useState(false);
   const [active, setActive] = useState('0');
-  const { section } = useParams<{ section: string }>();
+  const { paramLang, section } = useParams<{ paramLang: string; section: string }>();
+  const [lang, setLang] = useState(loadInitialLang());
   const parentRef = useRef<HTMLDivElement>(null);
   const refs = useRef<Record<string, HTMLElement | null>>({});
   const navigate = useNavigate();
@@ -88,6 +104,23 @@ const Sicp: React.FC = () => {
 
   // Handle loading of latest viewed section and fetch json data
   React.useEffect(() => {
+    if (paramLang || (section && AVAILABLE_SICP_TB_LANGS.includes(section))) {
+      const pLang = (paramLang ? paramLang : section)!;
+      if (AVAILABLE_SICP_TB_LANGS.includes(pLang)) {
+        setLang(pLang);
+        setSicpLangLocalStorage(pLang);
+      } else {
+        setLang(SICP_DEF_TB_LANG);
+        setSicpLangLocalStorage(SICP_DEF_TB_LANG);
+      }
+      if (paramLang) {
+        navigate(`/sicpjs/${section}`, { replace: true });
+      } else {
+        navigate(`/sicpjs/${readSicpSectionLocalStorage()}`, { replace: true });
+      }
+      return;
+    }
+
     if (!section) {
       /**
        * Handles rerouting to the latest viewed section when clicking from
@@ -105,7 +138,11 @@ const Sicp: React.FC = () => {
 
     setLoading(true);
 
-    fetch(baseUrl + section + extension)
+    if (!AVAILABLE_SICP_TB_LANGS.includes(lang)) {
+      setLang(SICP_DEF_TB_LANG);
+      setSicpLangLocalStorage(SICP_DEF_TB_LANG);
+    }
+    fetch(baseUrl + lang + '/' + section + extension)
       .then(response => {
         if (!response.ok) {
           throw Error(response.statusText);
@@ -138,7 +175,7 @@ const Sicp: React.FC = () => {
       .finally(() => {
         setLoading(false);
       });
-  }, [section, navigate]);
+  }, [paramLang, section, lang, navigate]);
 
   // Scroll to correct position
   React.useEffect(() => {
@@ -163,10 +200,33 @@ const Sicp: React.FC = () => {
     dispatch(WorkspaceActions.resetWorkspace('sicp'));
     dispatch(WorkspaceActions.toggleUsingSubst(false, 'sicp'));
   };
+
+  const handleLanguageToggle = () => {
+    const newLang = lang === 'en' ? 'zh_CN' : 'en';
+    setLang(newLang);
+    setSicpLangLocalStorage(newLang);
+  };
+
   const handleNavigation = (sect: string) => {
     navigate('/sicpjs/' + sect);
   };
 
+  // Language toggle button with fixed position
+  const languageToggle = (
+    <div
+      style={{
+        position: 'sticky',
+        top: '20px',
+        left: '20px',
+        zIndex: 0
+      }}
+    >
+      <Button onClick={handleLanguageToggle} intent="primary" small>
+        {lang === 'en' ? '切换到中文' : 'Switch to English'}
+      </Button>
+    </div>
+  );
+
   // `section` is defined due to the navigate logic in the useEffect above
   const navigationButtons = (
     <div className="sicp-navigation-buttons">
@@ -186,6 +246,7 @@ const Sicp: React.FC = () => {
     >
       <SicpErrorBoundary>
         <CodeSnippetContext.Provider value={{ active: active, setActive: handleSnippetEditorOpen }}>
+          {languageToggle}
           {loading ? (
             <div className="sicp-content">{loadingComponent}</div>
           ) : section === 'index' ? (

src/pages/sicp/subcomponents/SicpToc.tsx

@@ -1,9 +1,15 @@
 import { Tree, TreeNodeInfo } from '@blueprintjs/core';
+import { NonIdealState, Spinner } from '@blueprintjs/core';
 import { cloneDeep } from 'lodash';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router';
+import Constants from 'src/commons/utils/Constants';
+import { readSicpLangLocalStorage } from 'src/features/sicp/utils/SicpUtils';
 
-import toc from '../../../features/sicp/data/toc.json';
+import fallbackToc from '../../../features/sicp/data/toc.json';
+
+const baseUrl = Constants.sicpBackendUrl + 'json/';
+const loadingComponent = <NonIdealState title="Loading Content" icon={<Spinner />} />;
 
 type TocProps = OwnProps;
 
@@ -14,8 +20,9 @@ type OwnProps = {
 /**
  * Table of contents of SICP.
  */
-const SicpToc: React.FC<TocProps> = props => {
-  const [sidebarContent, setSidebarContent] = useState(toc as TreeNodeInfo[]);
+
+const Toc: React.FC<{ toc: TreeNodeInfo[]; props: TocProps }> = ({ toc, props }) => {
+  const [sidebarContent, setSidebarContent] = useState(toc);
   const navigate = useNavigate();
 
   const handleNodeExpand = (_node: TreeNodeInfo, path: integer[]) => {
@@ -40,15 +47,61 @@ const SicpToc: React.FC<TocProps> = props => {
     [navigate, props]
   );
 
+  return (
+    <Tree
+      className="sicp-toc-tree"
+      contents={sidebarContent}
+      onNodeClick={handleNodeClicked}
+      onNodeCollapse={handleNodeCollapse}
+      onNodeExpand={handleNodeExpand}
+    />
+  );
+};
+
+const SicpToc: React.FC<TocProps> = props => {
+  const [lang, setLang] = useState(readSicpLangLocalStorage());
+  const [toc, setToc] = useState([] as TreeNodeInfo[]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  React.useEffect(() => {
+    const handleLangChange = () => {
+      setLang(readSicpLangLocalStorage());
+    };
+    window.addEventListener('sicp-tb-lang-change', handleLangChange);
+    return () => window.removeEventListener('sicp-tb-lang-change', handleLangChange);
+  }, []);
+
+  React.useEffect(() => {
+    setLoading(true);
+    fetch(baseUrl + lang + '/toc.json')
+      .then(response => {
+        if (!response.ok) {
+          throw Error(response.statusText);
+        }
+        return response.json();
+      })
+      .then(json => {
+        setToc(json as TreeNodeInfo[]);
+      })
+      .catch(error => {
+        console.log(error);
+        setError(true);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [lang]);
+
   return (
     <div className="sicp-toc">
-      <Tree
-        className="sicp-toc-tree"
-        contents={sidebarContent}
-        onNodeClick={handleNodeClicked}
-        onNodeCollapse={handleNodeCollapse}
-        onNodeExpand={handleNodeExpand}
-      />
+      {loading ? (
+        <div className="sicp-content">{loadingComponent}</div>
+      ) : error ? (
+        <Toc toc={fallbackToc as TreeNodeInfo[]} props={props} />
+      ) : (
+        <Toc toc={toc} props={props} />
+      )}
     </div>
   );
 };