Skip to content

feat: i18n #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Nov 1, 2023
Merged

feat: i18n #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
35c3dfe
feat: support insert button on en website
rennzhang Oct 31, 2023
4087ea4
chore: delete comment
rennzhang Oct 31, 2023
ab6aec0
Merge branch 'fix-contentScript'
rennzhang Oct 31, 2023
8671341
feat: support change language; supplement i18n
rennzhang Oct 31, 2023
5f93f6c
fix: button was inserted into the plugin
rennzhang Oct 31, 2023
7926040
chore: add comment
rennzhang Nov 1, 2023
60130b8
feat: Adjust lang button position
rennzhang Nov 1, 2023
546d794
feat: Optimize the language configuration logic
rennzhang Nov 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
height: 30px;
}
.guide-wrapper {
display: flex;
display: inline-flex;
}
.ant-layout-sider {
background: none;
Expand Down
288 changes: 156 additions & 132 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { LEETCODE_CN_URL } from "./constant/index";
import ProblemDetail from "./Detail";
import Roadmap from "./roadmap/roadmap.jsx";
import TagOrLink from "./components/TagOrLink";
import tempaltes from "./codeTemplates/index";
import templates from "./codeTemplates/index";
import checkUpdate from "./checkUpdates";

import { isInExtension, getUrlParameter } from "./utils";
Expand All @@ -22,7 +22,8 @@ import "./App.css";
import CodeTemplates from "./codeTemplates/codeTemplate";
import ComplexityRating from "./complexityRating/index";
import SolutionTemplate from "./solutionTemplate/index";
import { t, initLang } from "./locales";
import { t, initLang, setLang, lang } from "./locales";

// import { data as a } from "./db/binary-tree";

const DataStrutureVis = isInExtension()
Expand Down Expand Up @@ -82,6 +83,7 @@ const columns = [
},
];
const initialTab = getUrlParameter("tab") || "code-template";
const isDev = process.env.NODE_ENV === "development";
function App() {
// eslint-disable-next-line
chrome &&
Expand All @@ -91,6 +93,7 @@ function App() {
console.log("[leetcode 插件打印]:chrome.tabs.query", tabs);
const currentUrl = tabs[0].url;
initLang(currentUrl);
setLangReady(true);
const match = currentUrl.match(/problems\/(.+?)\//);
const problemId = match && match[1];
setProblemId(problemId);
Expand All @@ -106,6 +109,8 @@ function App() {
// setHasSolution(!!problems[problemId]);
// }, 1000);

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

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

return (
<div className="container">
<div
className="tree-vis"
style={{
display: "none",
position: "fixed",
zIndex: 99,
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: "rgba(0,0,0,.4)",
}}
>
<div>{/* <pre>{a}</pre> */}</div>
<canvas width="1000" height="1000" id="canvas"></canvas>
</div>
{isInExtension() && (
<>
<div className="guide-wrapper">
<div className="guide">
{page !== "" ? (
<Button type="link" onClick={() => setPage("")}>
{t("Locale.app.back")}
</Button>
) : (
""
)}
{hasSolution && page === "" ? (
<Button type="link" onClick={() => setPage("detail")}>
{t("Locale.app.viewSolution")}
<img
src={viewLogo}
alt="view-solution"
className="problem-icon"
style={{ margin: "0 0 0 10px" }}
/>
</Button>
) : (
""
)}
const changeLang = async () => {
await setLangReady(false);
setLang(lang === "zh" ? "en" : "zh");
setLangReady(true);
};

{!hasSolution &&
page !== "allSolutions" &&
(inSelected ? (
<Button
type="link"
target="_blank"
href={selected[problemId].url}
>
{t("Locale.app.viewInHandpickCollection",selected[problemId].title)}
return (
langReady && (
<div className="container">
<div
className="tree-vis"
style={{
display: "none",
position: "fixed",
zIndex: 99,
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: "rgba(0,0,0,.4)",
}}
>
<div>{/* <pre>{a}</pre> */}</div>
<canvas width="1000" height="1000" id="canvas"></canvas>
</div>
<Button
type="primary"
onClick={changeLang}
size="small"
style={{ marginBottom: "8px", padding: "0 4px" }}
>
{t("app.changeLang")}
</Button>
{isInExtension() && (
<>
<div className="guide-wrapper">
<div className="guide">
{page !== "" ? (
<Button type="link" onClick={() => setPage("")}>
{t("Locale.app.back")}
</Button>
) : (
""
)}
{hasSolution && page === "" ? (
<Button type="link" onClick={() => setPage("detail")}>
{t("Locale.app.viewSolution")}
<img
alt="view-solutions"
src={collectionLogo}
src={viewLogo}
alt="view-solution"
className="problem-icon"
style={{ margin: "0 0 0 10px" }}
/>
</Button>
) : (
<Button type="link" onClick={() => setPage("allSolutions")}>
{t("Locale.app.notCollected")}
</Button>
))}
</div>
{page === "detail" && <ProblemDetail problemId={problemId} />}
</div>
""
)}

<div style={page === "allSolutions" ? {} : { display: "none" }}>
<Empty description={t("Locale.app.writingExplanation")}>
<div className="row" style={{ marginTop: "20px" }}>
{t("Locale.app.allCollected")}
{!hasSolution &&
page !== "allSolutions" &&
(inSelected ? (
<Button
type="link"
target="_blank"
href={selected[problemId].url}
>
{t(
"Locale.app.viewInHandpickCollection",
selected[problemId].title
)}
<img
alt="view-solutions"
src={collectionLogo}
className="problem-icon"
style={{ margin: "0 0 0 10px" }}
/>
</Button>
) : (
<Button type="link" onClick={() => setPage("allSolutions")}>
{t("Locale.app.notCollected")}
</Button>
))}
</div>
<Table
pagination={{ hideOnSinglePage: true }}
dataSource={dataSource}
rowKey="id"
columns={columns}
/>
</Empty>
</div>
</>
)}
{page === "" && (
<Tabs type="card" activeKey={tab} onChange={setTab}>
<TabPane key="code-template" tab={t("Locale.codeTemplate.name")}>
<CodeTemplates tempaltes={tempaltes}></CodeTemplates>
</TabPane>
<TabPane
key="data-structure-vis"
tab={t("Locale.dataStructureVisualization.name")}
>
{isInExtension() ? (
<Button
type="link"
target="_blank"
href="https://leetcode-pp.github.io/leetcode-cheat/?tab=data-structure-vis"
{page === "detail" && <ProblemDetail problemId={problemId} />}
</div>

<div style={page === "allSolutions" ? {} : { display: "none" }}>
<Empty description={t("Locale.app.writingExplanation")}>
<div className="row" style={{ marginTop: "20px" }}>
{t("Locale.app.allCollected")}
</div>
<Table
pagination={{ hideOnSinglePage: true }}
dataSource={dataSource}
rowKey="id"
columns={columns}
/>
</Empty>
</div>
</>
)}
{page === "" && (
<Tabs type="card" activeKey={tab} onChange={setTab}>
<TabPane key="code-template" tab={t("Locale.codeTemplate.name")}>
<CodeTemplates templates={templates}></CodeTemplates>
</TabPane>
<TabPane
key="data-structure-vis"
tab={t("Locale.dataStructureVisualization.name")}
>
{isInExtension() ? (
<Button
type="link"
target="_blank"
href="https://leetcode-pp.github.io/leetcode-cheat/?tab=data-structure-vis"
>
{t("Locale.app.goToTheWebsiteToUse")}
</Button>
) : (
<Suspense fallback={<div>Loading...</div>}>
<DataStrutureVis></DataStrutureVis>
</Suspense>
)}
</TabPane>
{!isInExtension() && (
<TabPane
key="solution-template"
tab={t("Locale.explanationTemplate.name")}
>
{t("Locale.app.goToTheWebsiteToUse")}
</Button>
) : (
<Suspense fallback={<div>Loading...</div>}>
<DataStrutureVis></DataStrutureVis>
</Suspense>
<SolutionTemplate></SolutionTemplate>
</TabPane>
)}
</TabPane>
{!isInExtension() && (

<TabPane
key="solution-template"
tab={t("Locale.explanationTemplate.name")}
key="complexityRating"
tab={t("Locale.complexityQuickCheck.name")}
>
<SolutionTemplate></SolutionTemplate>
<ComplexityRating />
</TabPane>
)}

<TabPane
key="complexityRating"
tab={t("Locale.complexityQuickCheck.name")}
>
<ComplexityRating />
</TabPane>
<TabPane key="roadmap" tab={t("Locale.learningRoute.name")}>
<Roadmap />
</TabPane>
{isInExtension() && (
<TabPane key="checkUpdate" tab={t("Locale.checkForUpdates.name")}>
<div>{t("Locale.app.checkTips")}</div>
<Button
style={{ margin: "20px 0 0 20px" }}
type="primary"
onClick={checkUpdate}
>
{t("Locale.app.checkBtn")}
</Button>
<TabPane key="roadmap" tab={t("Locale.learningRoute.name")}>
<Roadmap />
</TabPane>
)}
{isInExtension() && (
<TabPane key="checkUpdate" tab={t("Locale.checkForUpdates.name")}>
<div>{t("Locale.app.checkTips")}</div>
<Button
style={{ margin: "20px 0 0 20px" }}
type="primary"
onClick={checkUpdate}
>
{t("Locale.app.checkBtn")}
</Button>
</TabPane>
)}

<TabPane key="about" tab={t("Locale.aboutMe.name")}>
<div>
<div>{t("Locale.app.selfIntroduction")}</div>
<Image src="https://p.ipic.vip/h9nm77.jpg"></Image>
</div>
</TabPane>
</Tabs>
)}
</div>
<TabPane key="about" tab={t("Locale.aboutMe.name")}>
<div>
<div>{t("Locale.app.selfIntroduction")}</div>
<Image src="https://p.ipic.vip/h9nm77.jpg"></Image>
</div>
</TabPane>
</Tabs>
)}
</div>
)
);
}

Expand Down
7 changes: 3 additions & 4 deletions src/codeTemplates/backtrack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = {
module.exports = () => ({
logo: require("../imgs/backtrack.svg"),
title: "回溯",
list: [
Expand Down Expand Up @@ -107,6 +107,5 @@ class Solution:
],
},
],
link:
"https://github.com/azl397985856/leetcode/blob/master/thinkings/backtrack.md",
};
link: "https://github.com/azl397985856/leetcode/blob/master/thinkings/backtrack.md",
});
4 changes: 2 additions & 2 deletions src/codeTemplates/bfs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import bfsLogo from "../imgs/bfs.svg";

export default {
export default () => ({
title: "BFS",
logo: bfsLogo,
list: [
Expand Down Expand Up @@ -82,4 +82,4 @@ export default {
},
],
link: "https://github.com/azl397985856/leetcode/blob/master/thinkings/tree.md",
};
});
Loading