Skip to content

Commit 324d1a2

Browse files
azl397985856azl397985856
authored
Merge pull request #33 from rennzhang/feat-lang
2 parents 37a8256 + 546d794 commit 324d1a2

26 files changed

+591
-399
lines changed

‎src/App.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
height: 30px;
3636
}
3737
.guide-wrapper {
38-
display: flex;
38+
display: inline-flex;
3939
}
4040
.ant-layout-sider {
4141
background: none;

‎src/App.js

Lines changed: 156 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -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,8 @@ 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";
26+
2627
// import { data as a } from "./db/binary-tree";
2728

2829
const DataStrutureVis = isInExtension()
@@ -82,6 +83,7 @@ const columns = [
8283
},
8384
];
8485
const initialTab = getUrlParameter("tab") || "code-template";
86+
const isDev = process.env.NODE_ENV === "development";
8587
function App() {
8688
// eslint-disable-next-line
8789
chrome &&
@@ -91,6 +93,7 @@ function App() {
9193
console.log("[leetcode 插件打印]:chrome.tabs.query", tabs);
9294
const currentUrl = tabs[0].url;
9395
initLang(currentUrl);
96+
setLangReady(true);
9497
const match = currentUrl.match(/problems\/(.+?)\//);
9598
const problemId = match && match[1];
9699
setProblemId(problemId);
@@ -106,6 +109,8 @@ function App() {
106109
// setHasSolution(!!problems[problemId]);
107110
// }, 1000);
108111

112+
// 开发环境不需要依赖 chrome 插件 query 函数
113+
const [langReady, setLangReady] = useState(isDev);
109114
const [problemId, setProblemId] = useState("");
110115

111116
const [hasSolution, setHasSolution] = useState(false);
@@ -124,152 +129,171 @@ function App() {
124129
// }, 1000);
125130
// console.log(a);
126131

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-
)}
132+
const changeLang = async () => {
133+
await setLangReady(false);
134+
setLang(lang === "zh" ? "en" : "zh");
135+
setLangReady(true);
136+
};
169137

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)}
138+
return (
139+
langReady && (
140+
<div className="container">
141+
<div
142+
className="tree-vis"
143+
style={{
144+
display: "none",
145+
position: "fixed",
146+
zIndex: 99,
147+
top: 0,
148+
bottom: 0,
149+
left: 0,
150+
right: 0,
151+
backgroundColor: "rgba(0,0,0,.4)",
152+
}}
153+
>
154+
<div>{/* <pre>{a}</pre> */}</div>
155+
<canvas width="1000" height="1000" id="canvas"></canvas>
156+
</div>
157+
<Button
158+
type="primary"
159+
onClick={changeLang}
160+
size="small"
161+
style={{ marginBottom: "8px", padding: "0 4px" }}
162+
>
163+
{t("app.changeLang")}
164+
</Button>
165+
{isInExtension() && (
166+
<>
167+
<div className="guide-wrapper">
168+
<div className="guide">
169+
{page !== "" ? (
170+
<Button type="link" onClick={() => setPage("")}>
171+
{t("Locale.app.back")}
172+
</Button>
173+
) : (
174+
""
175+
)}
176+
{hasSolution && page === "" ? (
177+
<Button type="link" onClick={() => setPage("detail")}>
178+
{t("Locale.app.viewSolution")}
179179
<img
180-
alt="view-solutions"
181-
src={collectionLogo}
180+
src={viewLogo}
181+
alt="view-solution"
182182
className="problem-icon"
183183
style={{ margin: "0 0 0 10px" }}
184184
/>
185185
</Button>
186186
) : (
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>
187+
""
188+
)}
194189

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

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>
287+
<TabPane key="about" tab={t("Locale.aboutMe.name")}>
288+
<div>
289+
<div>{t("Locale.app.selfIntroduction")}</div>
290+
<Image src="https://p.ipic.vip/h9nm77.jpg"></Image>
291+
</div>
292+
</TabPane>
293+
</Tabs>
294+
)}
295+
</div>
296+
)
273297
);
274298
}
275299

‎src/codeTemplates/backtrack.js

Lines changed: 3 additions & 4 deletions
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

Lines changed: 2 additions & 2 deletions
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+
});

0 commit comments

Comments
 (0)