fix: warnings

This commit is contained in:
Paul Pan 2023-07-16 22:25:07 +08:00
parent aedf2bbf17
commit 6c9ab90843
3 changed files with 39 additions and 26 deletions

View File

@ -6,7 +6,6 @@ import {
Descriptions, Descriptions,
Tag, Tag,
Space, Space,
Typography,
Button, Button,
} from "antd"; } from "antd";
import { PlayCircleOutlined, SearchOutlined } from "@ant-design/icons"; import { PlayCircleOutlined, SearchOutlined } from "@ant-design/icons";
@ -23,7 +22,7 @@ export async function ProblemLoader({ params }: { params: { id: string } }) {
return await ProblemApi.Details({ pid: id }); return await ProblemApi.Details({ pid: id });
} }
function ProblemPage() { export function ProblemPage() {
const details = useLoaderData() as DetailsResp; const details = useLoaderData() as DetailsResp;
const navigate = useNavigate(); const navigate = useNavigate();
@ -31,15 +30,13 @@ function ProblemPage() {
<Descriptions bordered column={1} size="small"> <Descriptions bordered column={1} size="small">
<Descriptions.Item label="Provider"> <Descriptions.Item label="Provider">
<Link to={`/user/${details.problem.provider.meta.ID}`}> <Link to={`/user/${details.problem.provider.meta.ID}`}>
<Typography.Link> {details.problem.provider.nick_name}
{details.problem.provider.nick_name}
</Typography.Link>
</Link> </Link>
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label="Supported Languages"> <Descriptions.Item label="Supported Languages">
<Space size={[0, 8]} wrap> <Space size={[0, 8]} wrap>
{details.context.Languages.map((l) => ( {details.context.Languages.map((l) => (
<Tag>{l.Lang}</Tag> <Tag key={l.Lang}>{l.Lang}</Tag>
))} ))}
</Space> </Space>
</Descriptions.Item> </Descriptions.Item>
@ -114,5 +111,3 @@ function ProblemPage() {
</> </>
); );
} }
export { ProblemPage };

View File

@ -1,22 +1,35 @@
import { Link, Outlet, useLocation, useNavigation } from "react-router-dom"; import { Link, Outlet, useLocation, useNavigation } from "react-router-dom";
import { Layout, Menu, Skeleton, theme } from "antd"; import { Layout, Menu, MenuProps, Skeleton, theme } from "antd";
import { NavConfigs } from "../routes.tsx"; import { NavConfigs } from "../routes.tsx";
import { useEffect, useState } from "react";
const { Header, Footer, Content } = Layout; const { Header, Footer, Content } = Layout;
const navItems: MenuProps["items"] = NavConfigs.map((c) => {
return {
label: <Link to={c.to}>{c.label}</Link>,
key: c.key,
};
});
function Root() { function Root() {
const { const {
token: { colorBgContainer }, token: { colorBgContainer },
} = theme.useToken(); } = theme.useToken();
const nav = useNavigation();
const pathname = useLocation().pathname;
const pathToKey = () => { const nav = useNavigation();
const routes = NavConfigs.filter((c) => pathname.startsWith(c.prefix)); const location = useLocation();
if (routes.length === 0) return ["home"];
return [routes[0].key]; const [curTab, setCurTab] = useState("home");
};
useEffect(() => {
setCurTab(
NavConfigs.filter((c) => c.regex.test(location.pathname))
.map((c) => c.key)
.concat(["home"])[0],
);
}, [location]);
return ( return (
<> <>
@ -26,14 +39,9 @@ function Root() {
theme="dark" theme="dark"
mode="horizontal" mode="horizontal"
defaultSelectedKeys={["home"]} defaultSelectedKeys={["home"]}
selectedKeys={pathToKey()} selectedKeys={[curTab]}
> items={navItems}
{NavConfigs.map((c) => ( />
<Menu.Item key={c.key}>
<Link to={c.to}>{c.label}</Link>
</Menu.Item>
))}
</Menu>
</Header> </Header>
<Layout> <Layout>
<Content <Content

View File

@ -22,8 +22,18 @@ const RouteConfigs = [
]; ];
const NavConfigs = [ const NavConfigs = [
{ key: "home", to: "home", label: "Home", prefix: "/home" }, {
{ key: "problem", to: "problem", label: "Problem", prefix: "/problem" }, key: "home",
to: "/home",
label: "Home",
regex: /^\/$|^\/home$/gi,
},
{
key: "problem",
to: "/search/",
label: "Problem",
regex: /^\/+(problem|search)($|\/.*)/gi,
},
]; ];
export { RouteConfigs, NavConfigs }; export { RouteConfigs, NavConfigs };