Ivan/blog-bs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: 使用 react-router 替换 curi.

Browse Source
This commit is contained in:
Ivan Li 2021-11-26 23:28:43 +08:00
parent fcd72690d5
commit 48dd4a88bf
13 changed files with 5025 additions and 2975 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7480
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -5,8 +5,6 @@
"dependencies": { "dependencies": {
"@apollo/client": "^3.3.15", "@apollo/client": "^3.3.15",
"@craco/craco": "^6.4.0", "@craco/craco": "^6.4.0",
"@curi/react-dom": "^2.0.4",
"@curi/router": "^2.1.2",
"@date-io/date-fns": "^1.3.13", "@date-io/date-fns": "^1.3.13",
"@emotion/react": "^11.6.0", "@emotion/react": "^11.6.0",
"@emotion/styled": "^11.6.0", "@emotion/styled": "^11.6.0",
@ -41,6 +39,7 @@
"ramda": "^0.27.1", "ramda": "^0.27.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"subscriptions-transport-ws": "^0.9.19", "subscriptions-transport-ws": "^0.9.19",
"typescript": "^4.2.4", "typescript": "^4.2.4",
@ -81,6 +80,7 @@
"@graphql-codegen/typescript-react-apollo": "2.2.3", "@graphql-codegen/typescript-react-apollo": "2.2.3",
"@types/graphql": "^14.5.0", "@types/graphql": "^14.5.0",
"@types/ramda": "^0.27.40", "@types/ramda": "^0.27.40",
"@types/react-router-dom": "^5.3.2",
"@types/sass": "^1.16.0", "@types/sass": "^1.16.0",
"@types/yup": "^0.29.11", "@types/yup": "^0.29.11",
"sass": "^1.32.11" "sass": "^1.32.11"

15
src/App.tsx
View File

@ -1,15 +1,12 @@
import { useResponse } from '@curi/react-dom'; import { BrowserRouter } from "react-router-dom";
import './App.css'; import "./App.css";
import { DefaultLayout } from './layouts'; import { AppRoutes } from "./routes";
function App() { function App() {
const { response } = useResponse();
const { body: Body } = response;
return ( return (
<DefaultLayout> <BrowserRouter>
<Body response={response} /> <AppRoutes />
</DefaultLayout> </BrowserRouter>
); );
} }

14
src/articles/article-editor.tsx
View File

@ -14,8 +14,8 @@ import {
} from "../generated/graphql"; } from "../generated/graphql";
import { DateTimePicker } from "formik-material-ui-pickers"; import { DateTimePicker } from "formik-material-ui-pickers";
import { gql, useMutation } from "@apollo/client"; import { gql, useMutation } from "@apollo/client";
import { useRouter } from "@curi/react-universal";
import * as R from "ramda"; import * as R from "ramda";
import { useNavigate } from "react-router-dom";
const CREATE_ARTICLE = gql` const CREATE_ARTICLE = gql`
mutation createArticle($createArticleInput: CreateArticleInput!) { mutation createArticle($createArticleInput: CreateArticleInput!) {
@ -59,7 +59,7 @@ interface Props {
export const ArticleEditor: FC<Props> = ({ article }) => { export const ArticleEditor: FC<Props> = ({ article }) => {
const classes = useStyles(); const classes = useStyles();
const router = useRouter(); const navigate = useNavigate();
const formik = useRef<FormikProps<Values>>(null); const formik = useRef<FormikProps<Values>>(null);
const validationSchema = Yup.object({ const validationSchema = Yup.object({
@ -144,10 +144,7 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
}, },
}) })
.then(() => { .then(() => {
router.navigate({ navigate("/articles", { replace: true });
url: router.url({ name: "articles" }),
method: "replace",
});
}) })
.finally(() => { .finally(() => {
setSubmitting(false); setSubmitting(false);
@ -168,10 +165,7 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
}, },
}) })
.then(() => { .then(() => {
router.navigate({ navigate("/articles", { replace: true });
url: router.url({ name: "articles" }),
method: "replace",
});
}) })
.finally(() => { .finally(() => {
setSubmitting(false); setSubmitting(false);

23
src/articles/articles-index.tsx
View File

@ -12,10 +12,10 @@ import {
import React, { FC } from "react"; import React, { FC } from "react";
import { Article } from "../generated/graphql"; import { Article } from "../generated/graphql";
import EditIcon from "@mui/icons-material/Edit"; import EditIcon from "@mui/icons-material/Edit";
import { useRouter } from "@curi/react-dom"; import { ARTICLES, REMOVE_ARTICLE } from "./articles.constants";
import { ARTICLES, REMOVE_ARTICLE } from './articles.constants'; import { Delete } from "@mui/icons-material";
import { Delete } from '@mui/icons-material';
import { format } from "date-fns"; import { format } from "date-fns";
import { useNavigate } from "react-router-dom";
export const ArticleIndex: FC = () => { export const ArticleIndex: FC = () => {
const { data } = useQuery<{ const { data } = useQuery<{
@ -24,7 +24,7 @@ export const ArticleIndex: FC = () => {
const [removeArticle] = useMutation<any, { id: string }>(REMOVE_ARTICLE); const [removeArticle] = useMutation<any, { id: string }>(REMOVE_ARTICLE);
const router = useRouter(); const navigate = useNavigate();
return ( return (
<section> <section>
@ -57,15 +57,9 @@ export const ArticleIndex: FC = () => {
<TableCell> <TableCell>
<IconButton <IconButton
aria-label="edit" aria-label="edit"
onClick={() => onClick={() => navigate(`/articles/${article.id}`)}
router.navigate({ size="large"
url: router.url({ >
name: "modify-article",
params: article,
}),
})
}
size="large">
<EditIcon /> <EditIcon />
</IconButton> </IconButton>
<IconButton <IconButton
@ -75,7 +69,8 @@ export const ArticleIndex: FC = () => {
variables: article, variables: article,
}) })
} }
size="large"> size="large"
>
<Delete /> <Delete />
</IconButton> </IconButton>
</TableCell> </TableCell>

20
src/commons/route/active-link.tsx
View File

@ -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}
/>
);
};

31
src/commons/route/router.tsx
View File

@ -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;

9
src/index.tsx
View File

@ -9,7 +9,6 @@ import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns"; import DateFnsUtils from "@date-io/date-fns";
import zhLocale from "date-fns/locale/zh-CN"; import zhLocale from "date-fns/locale/zh-CN";
import { SnackbarProvider } from "notistack"; import { SnackbarProvider } from "notistack";
import Router from "./commons/route/router";
import { AuthProvider } from "./commons/auth/auth.provider"; import { AuthProvider } from "./commons/auth/auth.provider";
import { import {
ThemeProvider, ThemeProvider,
@ -18,8 +17,6 @@ import {
createTheme, createTheme,
} from "@mui/material/styles"; } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles";
declare module "@mui/styles/defaultTheme" { declare module "@mui/styles/defaultTheme" {
// eslint-disable-next-line @typescript-eslint/no-empty-interface // eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {} interface DefaultTheme extends Theme {}
@ -27,10 +24,6 @@ declare module "@mui/styles/defaultTheme" {
const theme = createTheme(); const theme = createTheme();
const useStyles = makeStyles((theme) => ({
root: {},
}));
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<StyledEngineProvider injectFirst> <StyledEngineProvider injectFirst>
@ -39,9 +32,7 @@ ReactDOM.render(
<AuthProvider> <AuthProvider>
<AppApolloClientProvider> <AppApolloClientProvider>
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}> <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
<Router>
<App /> <App />
</Router>
</MuiPickersUtilsProvider> </MuiPickersUtilsProvider>
</AppApolloClientProvider> </AppApolloClientProvider>
</AuthProvider> </AuthProvider>

17
src/layouts/default.tsx
View File

@ -1,8 +1,5 @@
import React, { FC } from "react"; import React, { FC, Suspense } from "react";
import clsx from "clsx";
import { useTheme, Theme, CSSObject, styled } from "@mui/material/styles"; import { useTheme, Theme, CSSObject, styled } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import makeStyles from "@mui/styles/makeStyles";
import Drawer from "@mui/material/Drawer"; import Drawer from "@mui/material/Drawer";
import AppBar, { AppBarProps } from "@mui/material/AppBar"; import AppBar, { AppBarProps } from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar"; import Toolbar from "@mui/material/Toolbar";
@ -18,8 +15,8 @@ import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText"; import ListItemText from "@mui/material/ListItemText";
import { AddCircle, Description, LocalOffer } from "@mui/icons-material"; import { AddCircle, Description, LocalOffer } from "@mui/icons-material";
import { Link } from "@curi/react-dom";
import { Box } from "@mui/system"; import { Box } from "@mui/system";
import { Link } from "react-router-dom";
const drawerWidth = 240; const drawerWidth = 240;
const openedMixin = (theme: Theme): CSSObject => ({ const openedMixin = (theme: Theme): CSSObject => ({
@ -140,7 +137,7 @@ export const DefaultLayout: FC = ({ children }) => {
</DrawerHeader> </DrawerHeader>
<Divider /> <Divider />
<List> <List>
<Link name="create-article"> <Link to="/articles/create">
<ListItem button> <ListItem button>
<ListItemIcon> <ListItemIcon>
<AddCircle /> <AddCircle />
@ -148,7 +145,7 @@ export const DefaultLayout: FC = ({ children }) => {
<ListItemText primary="New Article" /> <ListItemText primary="New Article" />
</ListItem> </ListItem>
</Link> </Link>
<Link name="articles"> <Link to="/articles">
<ListItem button> <ListItem button>
<ListItemIcon> <ListItemIcon>
<Description /> <Description />
@ -156,7 +153,7 @@ export const DefaultLayout: FC = ({ children }) => {
<ListItemText primary="Articles" /> <ListItemText primary="Articles" />
</ListItem> </ListItem>
</Link> </Link>
<Link name="tags"> <Link to="/tags">
<ListItem button> <ListItem button>
<ListItemIcon> <ListItemIcon>
<LocalOffer /> <LocalOffer />
@ -167,7 +164,9 @@ export const DefaultLayout: FC = ({ children }) => {
</List> </List>
<Divider /> <Divider />
</StyledDrawer> </StyledDrawer>
<Main>{children}</Main> <Main>
<Suspense fallback={"Loading"}>{children}</Suspense>
</Main>
</Box> </Box>
); );
}; };

142
src/routes.tsx
View File

@ -1,74 +1,96 @@
import { ApolloClient } from "@apollo/client"; import { useApolloClient } from "@apollo/client";
import { prepareRoutes } from "@curi/router"; import * as R from "ramda";
import { omit } from 'ramda'; import { FC, lazy, useMemo } from "react";
import { useParams, useRoutes } from "react-router-dom";
import { ARTICLE } from "./articles"; import { ARTICLE } from "./articles";
import { Article } from './generated/graphql'; import { Article } from "./generated/graphql";
import { DefaultLayout } from "./layouts";
export default prepareRoutes([ const CreateArticle = lazy(() =>
{ import(
name: "dashboard", /* webpackChunkName: "article-editor" */ "./articles/article-editor"
path: "", ).then((m) => ({
respond() { default: m.ArticleEditor,
return { body: () => <div>DashBoard</div> }; }))
}, );
},
{ const ModifyArticle: FC = () => {
name: "create-article", const { id } = useParams();
path: "articles/create", const client = useApolloClient();
resolve() { const Lazy = useMemo(
const body = import( () =>
/* webpackChunkName: "article-editor" */ "./articles" lazy(async () => {
).then((m) => m.ArticleEditor); const [{ ArticleEditor }, article] = await Promise.all([
return body; import(
}, /* webpackChunkName: "article-editor" */ "./articles/article-editor"
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
), ),
client.query<{ article: Article }, { id: string }>({ client
.query<{ article: Article }, { id: string }>({
query: ARTICLE, query: ARTICLE,
variables: { id: matched!.params.id }, variables: { id: id! },
})
.then(({ data }) => {
return R.omit(["__typename"], data.article);
}), }),
]); ]);
console.log(ArticleEditor, result); return { default: () => <ArticleEditor article={article} /> };
return () => ( }),
<ArticleEditor article={omit(["__typename"], result.data.article)} /> [id, client]
); );
}, return <Lazy />;
respond({ resolved }) { };
return { body: resolved };
}, 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", path: "articles",
resolve() { element: (
return import(/* webpackChunkName: "articles" */ "./articles").then( <DefaultLayout>
(m) => m.ArticleIndex <ArticleIndex />
); </DefaultLayout>
}, ),
respond({ resolved }) {
return { body: resolved };
},
}, },
{ {
name: "tags",
path: "tags", path: "tags",
resolve() { element: (
return import(/* webpackChunkName: "tags" */ "./tags").then( <DefaultLayout>
(m) => m.TagsIndex <TagIndex />
); </DefaultLayout>
),
}, },
respond({ resolved }) { ]);
return { body: resolved };
}, return element;
}, };
]);

197
src/tags/article-editor.tsx
View File

@ -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,
};

1
src/tags/index.ts
View File

@ -1,3 +1,2 @@
export * from "./article-editor";
export * from "./tags-index"; export * from "./tags-index";
export * from "./tags.constants"; export * from "./tags.constants";

19
src/tags/tags-index.tsx
View File

@ -12,9 +12,9 @@ import {
import { FC } from "react"; import { FC } from "react";
import { Tag } from "../generated/graphql"; import { Tag } from "../generated/graphql";
import EditIcon from "@mui/icons-material/Edit"; import EditIcon from "@mui/icons-material/Edit";
import { useRouter } from "@curi/react-dom";
import { Delete } from "@mui/icons-material"; import { Delete } from "@mui/icons-material";
import { REMOVE_TAG, TAGS } from "./tags.constants"; import { REMOVE_TAG, TAGS } from "./tags.constants";
import { useNavigate } from "react-router-dom";
export const TagsIndex: FC = () => { export const TagsIndex: FC = () => {
const { data } = useQuery<{ const { data } = useQuery<{
@ -23,7 +23,7 @@ export const TagsIndex: FC = () => {
const [removeArticle] = useMutation<any, { id: string }>(REMOVE_TAG); const [removeArticle] = useMutation<any, { id: string }>(REMOVE_TAG);
const router = useRouter(); const navigate = useNavigate();
return ( return (
<section> <section>
@ -48,15 +48,9 @@ export const TagsIndex: FC = () => {
<TableCell> <TableCell>
<IconButton <IconButton
aria-label="edit" aria-label="edit"
onClick={() => onClick={() => navigate(`/tags/${tag.id}/modify`)}
router.navigate({ size="large"
url: router.url({ >
name: "modify-tag",
params: tag,
}),
})
}
size="large">
<EditIcon /> <EditIcon />
</IconButton> </IconButton>
<IconButton <IconButton
@ -66,7 +60,8 @@ export const TagsIndex: FC = () => {
variables: tag, variables: tag,
}) })
} }
size="large"> size="large"
>
<Delete /> <Delete />
</IconButton> </IconButton>
</TableCell> </TableCell>