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

7492
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": {
"@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"

15
src/App.tsx
View File

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

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

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

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

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

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;

11
src/index.tsx
View File

@ -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>
<App />
</MuiPickersUtilsProvider>
</AppApolloClientProvider>
</AuthProvider>

17
src/layouts/default.tsx
View File

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

156
src/routes.tsx
View File

@ -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> };
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 }>({
query: ARTICLE,
variables: { id: id! },
})
.then(({ data }) => {
return R.omit(["__typename"], data.article);
}),
]);
return { default: () => <ArticleEditor article={article} /> };
}),
[id, client]
);
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>,
},
},
{
name: "create-article",
path: "articles/create",
resolve() {
const body = import(
/* webpackChunkName: "article-editor" */ "./articles"
).then((m) => m.ArticleEditor);
return body;
{
path: "/articles/create",
element: (
<DefaultLayout>
<CreateArticle />
</DefaultLayout>
),
},
respond({ resolved }) {
return { body: resolved };
{
path: "/articles/:id",
element: (
<DefaultLayout>
<ModifyArticle />
</DefaultLayout>
),
},
},
{
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 }>({
query: ARTICLE,
variables: { id: matched!.params.id },
}),
]);
console.log(ArticleEditor, result);
return () => (
<ArticleEditor article={omit(["__typename"], result.data.article)} />
);
{
path: "articles",
element: (
<DefaultLayout>
<ArticleIndex />
</DefaultLayout>
),
},
respond({ resolved }) {
return { body: resolved };
{
path: "tags",
element: (
<DefaultLayout>
<TagIndex />
</DefaultLayout>
),
},
},
{
name: "articles",
path: "articles",
resolve() {
return import(/* webpackChunkName: "articles" */ "./articles").then(
(m) => m.ArticleIndex
);
},
respond({ resolved }) {
return { body: resolved };
},
},
{
name: "tags",
path: "tags",
resolve() {
return import(/* webpackChunkName: "tags" */ "./tags").then(
(m) => m.TagsIndex
);
},
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.constants";

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

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