leetcode-cheat/src/codeTemplates/codeTemplate.jsx at refs/heads/master · leetcode-pp/leetcode-cheat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React, { useEffect, useState } from "react";
import { Button, Collapse, Tabs } from "antd";
import Codes from "../components/codes";
import { t, getLeetcodeUrlForLang } from "../locales";
import { CONTRIBUTE_PROGRAMMING_LANGUAGE_URL } from "../constant/index";

const { TabPane } = Tabs;
const { Panel } = Collapse;

function computedURL(problem) {
  if (problem.id.startsWith("http://") || problem.id.startsWith("https://"))
    return problem.id;

  return `${getLeetcodeUrlForLang()}/problems/${problem.id}`;
}

export default function CodeTemplate({ templates }) {
  const [tab, setTab] = useState("");
  const [tempaltesState, setTempaltesState] = useState([]);

  useEffect(() => {
    setTempaltesState(templates.map((c) => c?.call()));
  }, [templates]);

  useEffect(() => {
    tempaltesState[0] && setTab(tempaltesState[0].title);
  }, [tempaltesState]);

  return (
    <div>
      <Tabs activeKey={tab} onChange={setTab}>
        {tempaltesState.map((tempalte) => (
          <TabPane
            tab={
              <div>
                {tempalte.title}
                <img
                  alt={tempalte.title}
                  style={
                    tempalte.logo
                      ? { margin: "0 0 0 10px" }
                      : { display: "none" }
                  }
                  src={tempalte.logo}
                  className="problem-icon"
                />
              </div>
            }
            key={tempalte.title}
          >
            {tempalte.link && (
              <div>
                {t("Locale.codeTemplate.perSum.tips")}
                <Button type="link" href={tempalte.link} target="_blank">
                  {t("Locale.app.article")}
                </Button>
                ~
              </div>
            )}
            {tempalte.list.map(({ text, problems, codes }) => (
              <Collapse key={text}>
                <Panel header={<span>{text}</span>} key={text}>
                  <div style={problems.length > 0 ? {} : { display: "none" }}>
                    {t("Locale.app.recommendedQuestions")}
                    <ul>
                      {problems.map((problem) => (
                        <li key={problem.title}>
                          <Button type="text">{problem.title}</Button>
                          <Button
                            onClick={(e) => e.stopPropagation()}
                            type="link"
                            href={computedURL(problem)}
                            target="_blank"
                            size="small"
                            style={{ marginLeft: "10px" }}
                          >
                            {t("Locale.app.goForDictation")}
                          </Button>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <Codes codes={codes} />
                  <Button
                    type="link"
                    href={CONTRIBUTE_PROGRAMMING_LANGUAGE_URL}
                  >
                    {t("Locale.app.contribution")}
                  </Button>
                </Panel>
              </Collapse>
            ))}
          </TabPane>
        ))}

        <TabPane
          tab={t("Locale.codeTemplate.moreTemplate")}
          key="more"
          disabled
        ></TabPane>
      </Tabs>
    </div>
  );
}