fix: warnings
This commit is contained in:
parent
aedf2bbf17
commit
6c9ab90843
@ -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 };
|
|
||||||
|
@ -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
|
||||||
|
@ -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 };
|
||||||
|
Reference in New Issue
Block a user