Skip to content

Commit 8671341

Browse files
rennzhangrennzhang
committed
feat: support change language; supplement i18n
1 parent ab6aec0 commit 8671341

23 files changed

+430
-279
lines changed

‎src/App.js

+155-132
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, Suspense } from "react";
1+
import React, { useState, Suspense, useEffect } from "react";
22
import { Button, Table, Empty, Tabs, Image } from "antd";
33

44
import "highlight.js/styles/github.css";
@@ -12,7 +12,7 @@ import { LEETCODE_CN_URL } from "./constant/index";
1212
import ProblemDetail from "./Detail";
1313
import Roadmap from "./roadmap/roadmap.jsx";
1414
import TagOrLink from "./components/TagOrLink";
15-
import tempaltes from "./codeTemplates/index";
15+
import templates from "./codeTemplates/index";
1616
import checkUpdate from "./checkUpdates";
1717

1818
import { isInExtension, getUrlParameter } from "./utils";
@@ -22,7 +22,7 @@ import "./App.css";
2222
import CodeTemplates from "./codeTemplates/codeTemplate";
2323
import ComplexityRating from "./complexityRating/index";
2424
import SolutionTemplate from "./solutionTemplate/index";
25-
import { t, initLang } from "./locales";
25+
import { t, initLang, setLang, lang } from "./locales";
2626
// import { data as a } from "./db/binary-tree";
2727

2828
const DataStrutureVis = isInExtension()
@@ -106,13 +106,20 @@ function App() {
106106
// setHasSolution(!!problems[problemId]);
107107
// }, 1000);
108108

109+
const [langReady, setLangReady] = useState(false);
109110
const [problemId, setProblemId] = useState("");
110111

111112
const [hasSolution, setHasSolution] = useState(false);
112113
const [inSelected, setInSelected] = useState(false); // 是否被精选题解（其实就是合集）收录
113114
const [page, setPage] = useState("");
114115
const [tab, setTab] = useState(initialTab);
115116

117+
useEffect(() => {
118+
process.env.NODE_ENV === "development" && initLang();
119+
setLangReady(true);
120+
}, []);
121+
122+
116123
// const [inLeetCode, setInLeetCode] = useState(true);
117124

118125
// if (!inLeetCode) return window.open(LEETCODE_CN_URL + "/problemset/all/");
@@ -124,152 +131,168 @@ function App() {
124131
// }, 1000);
125132
// console.log(a);
126133

127-
return (
128-
<div className="container">
129-
<div
130-
className="tree-vis"
131-
style={{
132-
display: "none",
133-
position: "fixed",
134-
zIndex: 99,
135-
top: 0,
136-
bottom: 0,
137-
left: 0,
138-
right: 0,
139-
backgroundColor: "rgba(0,0,0,.4)",
140-
}}
141-
>
142-
<div>{/* <pre>{a}</pre> */}</div>
143-
<canvas width="1000" height="1000" id="canvas"></canvas>
144-
</div>
145-
{isInExtension() && (
146-
<>
147-
<div className="guide-wrapper">
148-
<div className="guide">
149-
{page !== "" ? (
150-
<Button type="link" onClick={() => setPage("")}>
151-
{t("Locale.app.back")}
152-
</Button>
153-
) : (
154-
""
155-
)}
156-
{hasSolution && page === "" ? (
157-
<Button type="link" onClick={() => setPage("detail")}>
158-
{t("Locale.app.viewSolution")}
159-
<img
160-
src={viewLogo}
161-
alt="view-solution"
162-
className="problem-icon"
163-
style={{ margin: "0 0 0 10px" }}
164-
/>
165-
</Button>
166-
) : (
167-
""
168-
)}
134+
const changeLang = async () => {
135+
await setLangReady(false);
136+
setLang(lang === "zh" ? "en" : "zh");
137+
setLangReady(true);
138+
};
169139

170-
{!hasSolution &&
171-
page !== "allSolutions" &&
172-
(inSelected ? (
173-
<Button
174-
type="link"
175-
target="_blank"
176-
href={selected[problemId].url}
177-
>
178-
{t("Locale.app.viewInHandpickCollection",selected[problemId].title)}
140+
return (
141+
langReady && (
142+
<div className="container">
143+
<div
144+
className="tree-vis"
145+
style={{
146+
display: "none",
147+
position: "fixed",
148+
zIndex: 99,
149+
top: 0,
150+
bottom: 0,
151+
left: 0,
152+
right: 0,
153+
backgroundColor: "rgba(0,0,0,.4)",
154+
}}
155+
>
156+
<div>{/* <pre>{a}</pre> */}</div>
157+
<canvas width="1000" height="1000" id="canvas"></canvas>
158+
</div>
159+
{isInExtension() && (
160+
<>
161+
<div className="guide-wrapper">
162+
<div className="guide">
163+
{page !== "" ? (
164+
<Button type="link" onClick={() => setPage("")}>
165+
{t("Locale.app.back")}
166+
</Button>
167+
) : (
168+
""
169+
)}
170+
{hasSolution && page === "" ? (
171+
<Button type="link" onClick={() => setPage("detail")}>
172+
{t("Locale.app.viewSolution")}
179173
<img
180-
alt="view-solutions"
181-
src={collectionLogo}
174+
src={viewLogo}
175+
alt="view-solution"
182176
className="problem-icon"
183177
style={{ margin: "0 0 0 10px" }}
184178
/>
185179
</Button>
186180
) : (
187-
<Button type="link" onClick={() => setPage("allSolutions")}>
188-
{t("Locale.app.notCollected")}
189-
</Button>
190-
))}
191-
</div>
192-
{page === "detail" && <ProblemDetail problemId={problemId} />}
193-
</div>
181+
""
182+
)}
194183

195-
<div style={page === "allSolutions" ? {} : { display: "none" }}>
196-
<Empty description={t("Locale.app.writingExplanation")}>
197-
<div className="row" style={{ marginTop: "20px" }}>
198-
{t("Locale.app.allCollected")}
184+
{!hasSolution &&
185+
page !== "allSolutions" &&
186+
(inSelected ? (
187+
<Button
188+
type="link"
189+
target="_blank"
190+
href={selected[problemId].url}
191+
>
192+
{t(
193+
"Locale.app.viewInHandpickCollection",
194+
selected[problemId].title
195+
)}
196+
<img
197+
alt="view-solutions"
198+
src={collectionLogo}
199+
className="problem-icon"
200+
style={{ margin: "0 0 0 10px" }}
201+
/>
202+
</Button>
203+
) : (
204+
<Button type="link" onClick={() => setPage("allSolutions")}>
205+
{t("Locale.app.notCollected")}
206+
</Button>
207+
))}
199208
</div>
200-
<Table
201-
pagination={{ hideOnSinglePage: true }}
202-
dataSource={dataSource}
203-
rowKey="id"
204-
columns={columns}
205-
/>
206-
</Empty>
207-
</div>
208-
</>
209-
)}
210-
{page === "" && (
211-
<Tabs type="card" activeKey={tab} onChange={setTab}>
212-
<TabPane key="code-template" tab={t("Locale.codeTemplate.name")}>
213-
<CodeTemplates tempaltes={tempaltes}></CodeTemplates>
214-
</TabPane>
215-
<TabPane
216-
key="data-structure-vis"
217-
tab={t("Locale.dataStructureVisualization.name")}
218-
>
219-
{isInExtension() ? (
220-
<Button
221-
type="link"
222-
target="_blank"
223-
href="https://leetcode-pp.github.io/leetcode-cheat/?tab=data-structure-vis"
209+
{page === "detail" && <ProblemDetail problemId={problemId} />}
210+
</div>
211+
212+
<div style={page === "allSolutions" ? {} : { display: "none" }}>
213+
<Empty description={t("Locale.app.writingExplanation")}>
214+
<div className="row" style={{ marginTop: "20px" }}>
215+
{t("Locale.app.allCollected")}
216+
</div>
217+
<Table
218+
pagination={{ hideOnSinglePage: true }}
219+
dataSource={dataSource}
220+
rowKey="id"
221+
columns={columns}
222+
/>
223+
</Empty>
224+
</div>
225+
</>
226+
)}
227+
{page === "" && (
228+
<Tabs type="card" activeKey={tab} onChange={setTab}>
229+
<TabPane key="code-template" tab={t("Locale.codeTemplate.name")}>
230+
<CodeTemplates templates={templates}></CodeTemplates>
231+
</TabPane>
232+
<TabPane
233+
key="data-structure-vis"
234+
tab={t("Locale.dataStructureVisualization.name")}
235+
>
236+
{isInExtension() ? (
237+
<Button
238+
type="link"
239+
target="_blank"
240+
href="https://leetcode-pp.github.io/leetcode-cheat/?tab=data-structure-vis"
241+
>
242+
{t("Locale.app.goToTheWebsiteToUse")}
243+
</Button>
244+
) : (
245+
<Suspense fallback={<div>Loading...</div>}>
246+
<DataStrutureVis></DataStrutureVis>
247+
</Suspense>
248+
)}
249+
</TabPane>
250+
{!isInExtension() && (
251+
<TabPane
252+
key="solution-template"
253+
tab={t("Locale.explanationTemplate.name")}
224254
>
225-
{t("Locale.app.goToTheWebsiteToUse")}
226-
</Button>
227-
) : (
228-
<Suspense fallback={<div>Loading...</div>}>
229-
<DataStrutureVis></DataStrutureVis>
230-
</Suspense>
255+
<SolutionTemplate></SolutionTemplate>
256+
</TabPane>
231257
)}
232-
</TabPane>
233-
{!isInExtension() && (
258+
234259
<TabPane
235-
key="solution-template"
236-
tab={t("Locale.explanationTemplate.name")}
260+
key="complexityRating"
261+
tab={t("Locale.complexityQuickCheck.name")}
237262
>
238-
<SolutionTemplate></SolutionTemplate>
263+
<ComplexityRating />
239264
</TabPane>
240-
)}
265+
<TabPane key="roadmap" tab={t("Locale.learningRoute.name")}>
266+
<Roadmap />
267+
</TabPane>
268+
{isInExtension() && (
269+
<TabPane key="checkUpdate" tab={t("Locale.checkForUpdates.name")}>
270+
<div>{t("Locale.app.checkTips")}</div>
271+
<Button
272+
style={{ margin: "20px 0 0 20px" }}
273+
type="primary"
274+
onClick={checkUpdate}
275+
>
276+
{t("Locale.app.checkBtn")}
277+
</Button>
278+
</TabPane>
279+
)}
241280

242-
<TabPane
243-
key="complexityRating"
244-
tab={t("Locale.complexityQuickCheck.name")}
245-
>
246-
<ComplexityRating />
247-
</TabPane>
248-
<TabPane key="roadmap" tab={t("Locale.learningRoute.name")}>
249-
<Roadmap />
250-
</TabPane>
251-
{isInExtension() && (
252-
<TabPane key="checkUpdate" tab={t("Locale.checkForUpdates.name")}>
253-
<div>{t("Locale.app.checkTips")}</div>
254-
<Button
255-
style={{ margin: "20px 0 0 20px" }}
256-
type="primary"
257-
onClick={checkUpdate}
258-
>
259-
{t("Locale.app.checkBtn")}
281+
<TabPane key="about" tab={t("Locale.aboutMe.name")}>
282+
<div>
283+
<div>{t("Locale.app.selfIntroduction")}</div>
284+
<Image src="https://p.ipic.vip/h9nm77.jpg"></Image>
285+
</div>
286+
</TabPane>
287+
<TabPane key="changeLang" tab={t("app.setLang")} onClick={changeLang}>
288+
<Button type="primary" onClick={changeLang}>
289+
{t("app.changeLang")}
260290
</Button>
261291
</TabPane>
262-
)}
263-
264-
<TabPane key="about" tab={t("Locale.aboutMe.name")}>
265-
<div>
266-
<div>{t("Locale.app.selfIntroduction")}</div>
267-
<Image src="https://p.ipic.vip/h9nm77.jpg"></Image>
268-
</div>
269-
</TabPane>
270-
</Tabs>
271-
)}
272-
</div>
292+
</Tabs>
293+
)}
294+
</div>
295+
)
273296
);
274297
}
275298

‎src/codeTemplates/backtrack.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = {
1+
module.exports = () => ({
22
logo: require("../imgs/backtrack.svg"),
33
title: "回溯",
44
list: [
@@ -107,6 +107,5 @@ class Solution:
107107
],
108108
},
109109
],
110-
link:
111-
"https://github.com/azl397985856/leetcode/blob/master/thinkings/backtrack.md",
112-
};
110+
link: "https://github.com/azl397985856/leetcode/blob/master/thinkings/backtrack.md",
111+
});

‎src/codeTemplates/bfs.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import bfsLogo from "../imgs/bfs.svg";
22

3-
export default {
3+
export default () => ({
44
title: "BFS",
55
logo: bfsLogo,
66
list: [
@@ -82,4 +82,4 @@ export default {
8282
},
8383
],
8484
link: "https://github.com/azl397985856/leetcode/blob/master/thinkings/tree.md",
85-
};
85+
});

‎src/codeTemplates/binarySearch.js

+4-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import halfLogo from "../imgs/half.svg";
2-
3-
export default {
1+
module.exports = () => ({
42
title: "二分法",
5-
logo: halfLogo,
3+
logo: require("../imgs/half.svg"),
64
list: [
75
{
86
text: "查找一个数",
@@ -402,6 +400,5 @@ function searchInsertRight(nums, x) {
402400
],
403401
},
404402
],
405-
link:
406-
"https://github.com/azl397985856/leetcode/blob/master/91/binary-search.md",
407-
};
403+
link: "https://github.com/azl397985856/leetcode/blob/master/91/binary-search.md",
404+
});

0 commit comments

Comments
 (0)