refactor: 使用 react-router 替换 curi.

fix: 修复更新到 mui-v5 后，菜单折叠失效的问题。
2021-11-26 23:28:43 +08:00 · 2021-11-25 22:36:25 +08:00
13 changed files with 5160 additions and 3121 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -5,8 +5,6 @@
  "dependencies": {
    "@apollo/client": "^3.3.15",
    "@craco/craco": "^6.4.0",
-    "@curi/react-dom": "^2.0.4",
-    "@curi/router": "^2.1.2",
    "@date-io/date-fns": "^1.3.13",
    "@emotion/react": "^11.6.0",
    "@emotion/styled": "^11.6.0",
@ -41,6 +39,7 @@
    "ramda": "^0.27.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "subscriptions-transport-ws": "^0.9.19",
    "typescript": "^4.2.4",
@ -81,6 +80,7 @@
    "@graphql-codegen/typescript-react-apollo": "2.2.3",
    "@types/graphql": "^14.5.0",
    "@types/ramda": "^0.27.40",
+    "@types/react-router-dom": "^5.3.2",
    "@types/sass": "^1.16.0",
    "@types/yup": "^0.29.11",
    "sass": "^1.32.11"
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,15 +1,12 @@
-import { useResponse } from '@curi/react-dom';
-import './App.css';
-import { DefaultLayout } from './layouts';
+import { BrowserRouter } from "react-router-dom";
+import "./App.css";
+import { AppRoutes } from "./routes";

 function App() {
-const { response } = useResponse();
-
-const { body: Body } = response;
  return (
-    <DefaultLayout>
-      <Body response={response} />
-    </DefaultLayout>
+    <BrowserRouter>
+      <AppRoutes />
+    </BrowserRouter>
  );
 }

--- a/src/articles/article-editor.tsx
+++ b/src/articles/article-editor.tsx
@ -14,8 +14,8 @@ import {
 } from "../generated/graphql";
 import { DateTimePicker } from "formik-material-ui-pickers";
 import { gql, useMutation } from "@apollo/client";
-import { useRouter } from "@curi/react-universal";
 import * as R from "ramda";
+import { useNavigate } from "react-router-dom";

 const CREATE_ARTICLE = gql`
  mutation createArticle($createArticleInput: CreateArticleInput!) {
@ -59,7 +59,7 @@ interface Props {

 export const ArticleEditor: FC<Props> = ({ article }) => {
  const classes = useStyles();
-  const router = useRouter();
+  const navigate = useNavigate();
  const formik = useRef<FormikProps<Values>>(null);

  const validationSchema = Yup.object({
@ -144,10 +144,7 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
        },
      })
        .then(() => {
-          router.navigate({
-            url: router.url({ name: "articles" }),
-            method: "replace",
-          });
+          navigate("/articles", { replace: true });
        })
        .finally(() => {
          setSubmitting(false);
@ -168,10 +165,7 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
        },
      })
        .then(() => {
-          router.navigate({
-            url: router.url({ name: "articles" }),
-            method: "replace",
-          });
+          navigate("/articles", { replace: true });
        })
        .finally(() => {
          setSubmitting(false);
--- a/src/articles/articles-index.tsx
+++ b/src/articles/articles-index.tsx
@ -12,10 +12,10 @@ import {
 import React, { FC } from "react";
 import { Article } from "../generated/graphql";
 import EditIcon from "@mui/icons-material/Edit";
-import { useRouter } from "@curi/react-dom";
-import { ARTICLES, REMOVE_ARTICLE } from './articles.constants';
-import { Delete } from '@mui/icons-material';
+import { ARTICLES, REMOVE_ARTICLE } from "./articles.constants";
+import { Delete } from "@mui/icons-material";
 import { format } from "date-fns";
+import { useNavigate } from "react-router-dom";

 export const ArticleIndex: FC = () => {
  const { data } = useQuery<{
@ -24,7 +24,7 @@ export const ArticleIndex: FC = () => {

  const [removeArticle] = useMutation<any, { id: string }>(REMOVE_ARTICLE);

-  const router = useRouter();
+  const navigate = useNavigate();

  return (
    <section>
@ -57,15 +57,9 @@ export const ArticleIndex: FC = () => {
                <TableCell>
                  <IconButton
                    aria-label="edit"
-                    onClick={() =>
-                      router.navigate({
-                        url: router.url({
-                          name: "modify-article",
-                          params: article,
-                        }),
-                      })
-                    }
-                    size="large">
+                    onClick={() => navigate(`/articles/${article.id}`)}
+                    size="large"
+                  >
                    <EditIcon />
                  </IconButton>
                  <IconButton
@ -75,7 +69,8 @@ export const ArticleIndex: FC = () => {
                        variables: article,
                      })
                    }
-                    size="large">
+                    size="large"
+                  >
                    <Delete />
                  </IconButton>
                </TableCell>
--- a/src/commons/route/active-link.tsx
+++ b/src/commons/route/active-link.tsx
@ -1,20 +0,0 @@
-import { ActiveHookProps, Link, LinkProps, useActive } from '@curi/react-dom';
-import React, { FC, ReactNode } from 'react';
-
-export type ActiveLinkProps = ActiveHookProps &
-  LinkProps & {
-    className?: string;
-    children: ReactNode;
-  };
-
-export const ActiveLink:FC<ActiveLinkProps> = ({ name, params, partial, className = "", ...rest }) => {
-  const active = useActive({ name, params, partial });
-  return (
-    <Link
-      name={name}
-      params={params}
-      {...rest}
-      className={active ? `${className} active` : className}
-    />
-  );
-};
--- a/src/commons/route/router.tsx
+++ b/src/commons/route/router.tsx
@ -1,31 +0,0 @@
-import { useApolloClient } from "@apollo/client";
-import { createRouterComponent } from "@curi/react-dom";
-import { createRouter, announce } from "@curi/router";
-import { browser } from "@hickory/browser";
-import { FC, useEffect, useState } from "react";
-import routes from "../../routes";
-import { LinearProgress } from "@mui/material";
-
-const Component: FC = ({ children }) => {
-  const client = useApolloClient();
-  const [body, setBody] = useState<any>(null);
-
-  useEffect(() => {
-    const router = createRouter(browser, routes, {
-      sideEffects: [
-        announce(({ response }) => {
-          return `Navigated to ${response.location.pathname}`;
-        }),
-      ],
-      external: { client },
-    });
-    const Router = createRouterComponent(router);
-    router.once(() => {
-      setBody(<Router>{children}</Router>);
-    });
-  }, [setBody, client, children]);
-
-  return body ?? <LinearProgress />;
-};
-
-export default Component;
--- a/src/index.tsx
+++ b/src/index.tsx
@ -9,7 +9,6 @@ import { MuiPickersUtilsProvider } from "@material-ui/pickers";
 import DateFnsUtils from "@date-io/date-fns";
 import zhLocale from "date-fns/locale/zh-CN";
 import { SnackbarProvider } from "notistack";
-import Router from "./commons/route/router";
 import { AuthProvider } from "./commons/auth/auth.provider";
 import {
  ThemeProvider,
@ -18,8 +17,6 @@ import {
  createTheme,
 } from "@mui/material/styles";

-import makeStyles from "@mui/styles/makeStyles";
-
 declare module "@mui/styles/defaultTheme" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
@ -27,10 +24,6 @@ declare module "@mui/styles/defaultTheme" {

 const theme = createTheme();

-const useStyles = makeStyles((theme) => ({
-  root: {},
-}));
-
 ReactDOM.render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
@ -39,9 +32,7 @@ ReactDOM.render(
          <AuthProvider>
            <AppApolloClientProvider>
              <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
-                <Router>
                <App />
-                </Router>
              </MuiPickersUtilsProvider>
            </AppApolloClientProvider>
          </AuthProvider>
--- a/src/layouts/default.tsx
+++ b/src/layouts/default.tsx
@ -1,10 +1,7 @@
-import React, { FC } from "react";
-import clsx from "clsx";
-import { useTheme, Theme } from "@mui/material/styles";
-import createStyles from '@mui/styles/createStyles';
-import makeStyles from '@mui/styles/makeStyles';
+import React, { FC, Suspense } from "react";
+import { useTheme, Theme, CSSObject, styled } from "@mui/material/styles";
 import Drawer from "@mui/material/Drawer";
-import AppBar from "@mui/material/AppBar";
+import AppBar, { AppBarProps } from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import List from "@mui/material/List";
 import CssBaseline from "@mui/material/CssBaseline";
@ -17,76 +14,83 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ListItem from "@mui/material/ListItem";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import { AddCircle, Description, LocalOffer } from '@mui/icons-material';
-import { Link } from '@curi/react-dom';
+import { AddCircle, Description, LocalOffer } from "@mui/icons-material";
+import { Box } from "@mui/system";
+import { Link } from "react-router-dom";
 const drawerWidth = 240;

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: "flex",
-    },
-    appBar: {
-      zIndex: theme.zIndex.drawer + 1,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-    },
-    appBarShift: {
-      marginLeft: drawerWidth,
-      width: `calc(100% - ${drawerWidth}px)`,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    },
-    menuButton: {
-      marginRight: 36,
-    },
-    hide: {
-      display: "none",
-    },
-    drawer: {
-      width: drawerWidth,
-      flexShrink: 0,
-      whiteSpace: "nowrap",
-    },
-    drawerOpen: {
+const openedMixin = (theme: Theme): CSSObject => ({
  width: drawerWidth,
  transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.enteringScreen,
  }),
-    },
-    drawerClose: {
+  overflowX: "hidden",
+});
+
+const closedMixin = (theme: Theme): CSSObject => ({
  transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  overflowX: "hidden",
-      width: theme.spacing(7) + 1,
-      [theme.breakpoints.up("sm")]: {
-        width: theme.spacing(9) + 1,
-      },
-    },
-    toolbar: {
+  width: `calc(${theme.spacing(7)} + 1px)`,
+});
+
+const DrawerHeader = styled("div")(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-end",
  padding: theme.spacing(0, 1),
  // necessary for content to be below app bar
  ...theme.mixins.toolbar,
-    },
-    content: {
-      flexGrow: 1,
-      padding: theme.spacing(3),
-    },
-  })
-);
+}));

-export const DefaultLayout: FC = ({children}) => {
-  const classes = useStyles();
+const Main = styled("main")(({ theme }) => ({
+  padding: theme.spacing(2, 2),
+  [theme.breakpoints.up("md")]: {
+    padding: theme.spacing(4, 3),
+  },
+  width: "100%",
+  marginTop: theme.mixins.toolbar.minHeight,
+}));
+
+const StyledAppBar = styled(AppBar, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<AppBarProps & { open?: boolean }>(({ theme, open }) => ({
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(["width", "margin"], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  ...(open && {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  }),
+}));
+
+const StyledDrawer = styled(Drawer, {
+  shouldForwardProp: (prop) => prop !== "open",
+})(({ theme, open }) => ({
+  width: drawerWidth,
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+  boxSizing: "border-box",
+  ...(open && {
+    ...openedMixin(theme),
+    "& .MuiDrawer-paper": openedMixin(theme),
+  }),
+  ...(!open && {
+    ...closedMixin(theme),
+    "& .MuiDrawer-paper": closedMixin(theme),
+  }),
+}));
+
+export const DefaultLayout: FC = ({ children }) => {
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

@ -99,45 +103,30 @@ export const DefaultLayout: FC = ({children}) => {
  };

  return (
-    <div className={classes.root}>
+    <Box sx={{ display: "flex" }}>
      <CssBaseline />
-        <AppBar
-          position="fixed"
-          className={clsx(classes.appBar, {
-            [classes.appBarShift]: open,
-          })}
-        >
+      <StyledAppBar position="fixed" open={open}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
-              className={clsx(classes.menuButton, {
-                [classes.hide]: open,
-              })}
-              size="large">
+            sx={{
+              marginRight: "36px",
+              ...(open && { display: "none" }),
+            }}
+            size="large"
+          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap>
            Mini variant drawer
          </Typography>
        </Toolbar>
-        </AppBar>
-        <Drawer
-          variant="permanent"
-          className={clsx(classes.drawer, {
-            [classes.drawerOpen]: open,
-            [classes.drawerClose]: !open,
-          })}
-          classes={{
-            paper: clsx({
-              [classes.drawerOpen]: open,
-              [classes.drawerClose]: !open,
-            }),
-          }}
-        >
-          <div className={classes.toolbar}>
+      </StyledAppBar>
+      <StyledDrawer variant="permanent" open={open}>
+        <DrawerHeader>
          <IconButton onClick={handleDrawerClose} size="large">
            {theme.direction === "rtl" ? (
              <ChevronRightIcon />
@ -145,10 +134,10 @@ export const DefaultLayout: FC = ({children}) => {
              <ChevronLeftIcon />
            )}
          </IconButton>
-          </div>
+        </DrawerHeader>
        <Divider />
        <List>
-            <Link name="create-article">
+          <Link to="/articles/create">
            <ListItem button>
              <ListItemIcon>
                <AddCircle />
@ -156,7 +145,7 @@ export const DefaultLayout: FC = ({children}) => {
              <ListItemText primary="New Article" />
            </ListItem>
          </Link>
-            <Link name="articles">
+          <Link to="/articles">
            <ListItem button>
              <ListItemIcon>
                <Description />
@ -164,7 +153,7 @@ export const DefaultLayout: FC = ({children}) => {
              <ListItemText primary="Articles" />
            </ListItem>
          </Link>
-            <Link name="tags">
+          <Link to="/tags">
            <ListItem button>
              <ListItemIcon>
                <LocalOffer />
@ -174,11 +163,10 @@ export const DefaultLayout: FC = ({children}) => {
          </Link>
        </List>
        <Divider />
-        </Drawer>
-        <main className={classes.content}>
-          <div className={classes.toolbar} />
-          { children }
-        </main>
-    </div>
+      </StyledDrawer>
+      <Main>
+        <Suspense fallback={"Loading"}>{children}</Suspense>
+      </Main>
+    </Box>
  );
-}
+};
--- a/src/routes.tsx
+++ b/src/routes.tsx
@ -1,74 +1,96 @@
-import { ApolloClient } from "@apollo/client";
-import { prepareRoutes } from "@curi/router";
-import { omit } from 'ramda';
+import { useApolloClient } from "@apollo/client";
+import * as R from "ramda";
+import { FC, lazy, useMemo } from "react";
+import { useParams, useRoutes } from "react-router-dom";
 import { ARTICLE } from "./articles";
-import { Article } from './generated/graphql';
+import { Article } from "./generated/graphql";
+import { DefaultLayout } from "./layouts";

-export default prepareRoutes([
-  {
-    name: "dashboard",
-    path: "",
-    respond() {
-      return { body: () => <div>DashBoard</div> };
-    },
-  },
-  {
-    name: "create-article",
-    path: "articles/create",
-    resolve() {
-      const body = import(
-        /* webpackChunkName: "article-editor" */ "./articles"
-      ).then((m) => m.ArticleEditor);
-      return body;
-    },
-    respond({ resolved }) {
-      return { body: resolved };
-    },
-  },
-  {
-    name: "modify-article",
-    path: "articles/:id",
-    async resolve(matched, { client }: { client: ApolloClient<any> }) {
-      const [ArticleEditor, result] = await Promise.all([
-        import(/* webpackChunkName: "article-editor" */ "./articles").then(
-          (m) => m.ArticleEditor
+const CreateArticle = lazy(() =>
+  import(
+    /* webpackChunkName: "article-editor" */ "./articles/article-editor"
+  ).then((m) => ({
+    default: m.ArticleEditor,
+  }))
+);
+
+const ModifyArticle: FC = () => {
+  const { id } = useParams();
+  const client = useApolloClient();
+  const Lazy = useMemo(
+    () =>
+      lazy(async () => {
+        const [{ ArticleEditor }, article] = await Promise.all([
+          import(
+            /* webpackChunkName: "article-editor" */ "./articles/article-editor"
          ),
-        client.query<{ article: Article }, { id: string }>({
+          client
+            .query<{ article: Article }, { id: string }>({
              query: ARTICLE,
-          variables: { id: matched!.params.id },
+              variables: { id: id! },
+            })
+            .then(({ data }) => {
+              return R.omit(["__typename"], data.article);
            }),
        ]);
-      console.log(ArticleEditor, result);
-      return () => (
-        <ArticleEditor article={omit(["__typename"], result.data.article)} />
+        return { default: () => <ArticleEditor article={article} /> };
+      }),
+    [id, client]
  );
-    },
-    respond({ resolved }) {
-      return { body: resolved };
-    },
+  return <Lazy />;
+};
+
+const ArticleIndex = lazy(() =>
+  import(/* webpackChunkName: "articles" */ "./articles").then((m) => ({
+    default: m.ArticleIndex,
+  }))
+);
+
+const TagIndex = lazy(() =>
+  import(/* webpackChunkName: "tags" */ "./tags").then((m) => ({
+    default: m.TagsIndex,
+  }))
+);
+
+export const AppRoutes: FC = () => {
+  const element = useRoutes([
+    {
+      index: true,
+      element: <div>DashBoard</div>,
+    },
+    {
+      path: "/articles/create",
+      element: (
+        <DefaultLayout>
+          <CreateArticle />
+        </DefaultLayout>
+      ),
+    },
+    {
+      path: "/articles/:id",
+      element: (
+        <DefaultLayout>
+          <ModifyArticle />
+        </DefaultLayout>
+      ),
    },
    {
-    name: "articles",
      path: "articles",
-    resolve() {
-      return import(/* webpackChunkName: "articles" */ "./articles").then(
-        (m) => m.ArticleIndex
-      );
-    },
-    respond({ resolved }) {
-      return { body: resolved };
-    },
+      element: (
+        <DefaultLayout>
+          <ArticleIndex />
+        </DefaultLayout>
+      ),
    },
    {
-    name: "tags",
      path: "tags",
-    resolve() {
-      return import(/* webpackChunkName: "tags" */ "./tags").then(
-        (m) => m.TagsIndex
-      );
+      element: (
+        <DefaultLayout>
+          <TagIndex />
+        </DefaultLayout>
+      ),
    },
-    respond({ resolved }) {
-      return { body: resolved };
-    },
-  },
-]);
+  ]);
+
+  return element;
+};
--- a/src/tags/article-editor.tsx
+++ b/src/tags/article-editor.tsx
@ -1,197 +0,0 @@
-import { Button, Grid, Paper } from "@mui/material";
-import createStyles from '@mui/styles/createStyles';
-import makeStyles from '@mui/styles/makeStyles';
-import { Field, Form, Formik, FormikHelpers } from "formik";
-import { FC } from "react";
-import { Editor } from "../commons/editor/vditor";
-import * as Yup from "yup";
-import { Article, CreateArticleInput, UpdateArticleInput } from "../generated/graphql";
-import { DateTimePicker } from "formik-material-ui-pickers";
-import { gql, useMutation } from "@apollo/client";
-import { useRouter } from "@curi/react-universal";
-
-const CREATE_ARTICLE = gql`
-  mutation createArticle($createArticleInput: CreateArticleInput!) {
-    createArticle(createArticleInput: $createArticleInput) {
-      id
-      title
-      content
-      publishedAt
-    }
-  }
-`;
-
-const UPDATE_ARTICLE = gql`
-  mutation updateArticle($updateArticleInput: UpdateArticleInput!) {
-    updateArticle(updateArticleInput: $updateArticleInput) {
-      id
-      title
-      content
-      publishedAt
-    }
-  }
-`;
-
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    form: {
-      padding: "15px 30px",
-    },
-    editor: {
-      height: "700px",
-    },
-  })
-);
-
-type Values = CreateArticleInput | UpdateArticleInput;
-interface Props {
-  article?: Values;
-}
-
-export const ArticleEditor: FC<Props> = ({ article }) => {
-  const classes = useStyles();
-
-  const validationSchema = Yup.object({
-    content: Yup.string()
-      .max(65535, "文章内容不得超过 65535 个字符")
-      .required("文章内容不得为空"),
-    publishedAt: Yup.date(),
-  });
-  const router = useRouter();
-
-  const [createArticle] = useMutation<{createArticle: Article} ,{
-    createArticleInput: CreateArticleInput;
-  }>(CREATE_ARTICLE, {
-    update(cache, { data }) {
-      cache.modify({
-        fields: {
-          articles(existingArticles = []) {
-            const newArticleRef = cache.writeFragment({
-              data: data!.createArticle,
-              fragment: gql`
-                fragment NewArticle on Article {
-                  id
-                  title
-                  content
-                  publishedAt
-                }
-              `,
-            });
-            return [newArticleRef, ...existingArticles];
-          },
-        },
-      });
-    },
-  });
-  const [updateArticle] = useMutation<{
-    updateArticleInput: UpdateArticleInput;
-  }>(UPDATE_ARTICLE);
-
-  const SubmitForm = (
-    values: Values,
-    { setSubmitting }: FormikHelpers<Values>
-  ) => {
-    if ("id" in article!) {
-      const title = /# (.+)$/m.exec(values.content ?? "")?.[1];
-      if (!title) {
-        console.log("no title");
-        setSubmitting(false);
-        return;
-      }
-      updateArticle({
-        variables: {
-          updateArticleInput: {
-            ...values,
-            title,
-          },
-        },
-      })
-        .then(() => {
-          router.navigate({
-            url: router.url({ name: "articles" }),
-            method: "replace",
-          });
-        })
-        .finally(() => {
-          setSubmitting(false);
-        });
-    } else {
-      const title = /# (.+)$/m.exec(values.content ?? "")?.[1];
-      if (!title) {
-        console.log("no title");
-        setSubmitting(false);
-        return;
-      }
-      createArticle({
-        variables: {
-          createArticleInput: {
-            ...values as CreateArticleInput,
-            title,
-          },
-        },
-      })
-        .then(() => {
-          router.navigate({
-            url: router.url({ name: "articles" }),
-            method: "replace",
-          });
-        })
-        .finally(() => {
-          setSubmitting(false);
-        });
-    }
-    setSubmitting(false);
-  };
-  return (
-    <Paper>
-      <Formik
-        initialValues={article!}
-        validationSchema={validationSchema}
-        autoComplete="off"
-        onSubmit={SubmitForm}
-      >
-        {({ submitForm, isSubmitting }) => (
-          <Form className={classes.form}>
-            <Grid container spacing={3}>
-              <Grid item xs={12}>
-                <Editor
-                  className={classes.editor}
-                  name="content"
-                  label="Content"
-                />
-              </Grid>
-              <Grid item xs={12}>
-                <Field
-                  ampm={false}
-                  component={DateTimePicker}
-                  label="Published At"
-                  name="publishedAt"
-                  format="yyyy-MM-dd HH:mm:ss"
-                />
-              </Grid>
-              <Grid item xs={12}>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  disabled={isSubmitting}
-                  onClick={submitForm}
-                >
-                  Submit
-                </Button>
-              </Grid>
-            </Grid>
-          </Form>
-        )}
-      </Formik>
-    </Paper>
-  );
-};
-
-ArticleEditor.defaultProps = {
-  article: {
-    title: "",
-    content: "",
-    publishedAt: new Date(),
-    tags: [],
-  } as CreateArticleInput,
-};
--- a/src/tags/index.ts
+++ b/src/tags/index.ts
@ -1,3 +1,2 @@
-export * from "./article-editor";
 export * from "./tags-index";
 export * from "./tags.constants";
--- a/src/tags/tags-index.tsx
+++ b/src/tags/tags-index.tsx
@ -12,9 +12,9 @@ import {
 import { FC } from "react";
 import { Tag } from "../generated/graphql";
 import EditIcon from "@mui/icons-material/Edit";
-import { useRouter } from "@curi/react-dom";
 import { Delete } from "@mui/icons-material";
 import { REMOVE_TAG, TAGS } from "./tags.constants";
+import { useNavigate } from "react-router-dom";

 export const TagsIndex: FC = () => {
  const { data } = useQuery<{
@ -23,7 +23,7 @@ export const TagsIndex: FC = () => {

  const [removeArticle] = useMutation<any, { id: string }>(REMOVE_TAG);

-  const router = useRouter();
+  const navigate = useNavigate();

  return (
    <section>
@ -48,15 +48,9 @@ export const TagsIndex: FC = () => {
                <TableCell>
                  <IconButton
                    aria-label="edit"
-                    onClick={() =>
-                      router.navigate({
-                        url: router.url({
-                          name: "modify-tag",
-                          params: tag,
-                        }),
-                      })
-                    }
-                    size="large">
+                    onClick={() => navigate(`/tags/${tag.id}/modify`)}
+                    size="large"
+                  >
                    <EditIcon />
                  </IconButton>
                  <IconButton
@ -66,7 +60,8 @@ export const TagsIndex: FC = () => {
                        variables: tag,
                      })
                    }
-                    size="large">
+                    size="large"
+                  >
                    <Delete />
                  </IconButton>
                </TableCell>
Author	SHA1	Message	Date
Ivan Li	48dd4a88bf	refactor: 使用 react-router 替换 curi.	2021-11-26 23:28:43 +08:00
Ivan Li	fcd72690d5	fix: 修复更新到 mui-v5 后，菜单折叠失效的问题。	2021-11-25 22:36:25 +08:00