Compare commits
No commits in common. "48dd4a88bf29b0bbc03b522a35e5229800aadc84" and "218a6c4c3a7b74f390f2bee918412d87c1e49b8b" have entirely different histories.
48dd4a88bf
...
218a6c4c3a
7492
package-lock.json
generated
7492
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,6 +5,8 @@
|
||||
"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",
|
||||
@ -39,7 +41,6 @@
|
||||
"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",
|
||||
@ -80,7 +81,6 @@
|
||||
"@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
15
src/App.tsx
@ -1,12 +1,15 @@
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import "./App.css";
|
||||
import { AppRoutes } from "./routes";
|
||||
import { useResponse } from '@curi/react-dom';
|
||||
import './App.css';
|
||||
import { DefaultLayout } from './layouts';
|
||||
|
||||
function App() {
|
||||
const { response } = useResponse();
|
||||
|
||||
const { body: Body } = response;
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<AppRoutes />
|
||||
</BrowserRouter>
|
||||
<DefaultLayout>
|
||||
<Body response={response} />
|
||||
</DefaultLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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 navigate = useNavigate();
|
||||
const router = useRouter();
|
||||
const formik = useRef<FormikProps<Values>>(null);
|
||||
|
||||
const validationSchema = Yup.object({
|
||||
@ -144,7 +144,10 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
navigate("/articles", { replace: true });
|
||||
router.navigate({
|
||||
url: router.url({ name: "articles" }),
|
||||
method: "replace",
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setSubmitting(false);
|
||||
@ -165,7 +168,10 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
navigate("/articles", { replace: true });
|
||||
router.navigate({
|
||||
url: router.url({ name: "articles" }),
|
||||
method: "replace",
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setSubmitting(false);
|
||||
|
||||
@ -12,10 +12,10 @@ import {
|
||||
import React, { FC } from "react";
|
||||
import { Article } from "../generated/graphql";
|
||||
import EditIcon from "@mui/icons-material/Edit";
|
||||
import { ARTICLES, REMOVE_ARTICLE } from "./articles.constants";
|
||||
import { Delete } from "@mui/icons-material";
|
||||
import { useRouter } from "@curi/react-dom";
|
||||
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 navigate = useNavigate();
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<section>
|
||||
@ -57,9 +57,15 @@ export const ArticleIndex: FC = () => {
|
||||
<TableCell>
|
||||
<IconButton
|
||||
aria-label="edit"
|
||||
onClick={() => navigate(`/articles/${article.id}`)}
|
||||
size="large"
|
||||
>
|
||||
onClick={() =>
|
||||
router.navigate({
|
||||
url: router.url({
|
||||
name: "modify-article",
|
||||
params: article,
|
||||
}),
|
||||
})
|
||||
}
|
||||
size="large">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
@ -69,8 +75,7 @@ export const ArticleIndex: FC = () => {
|
||||
variables: article,
|
||||
})
|
||||
}
|
||||
size="large"
|
||||
>
|
||||
size="large">
|
||||
<Delete />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
|
||||
20
src/commons/route/active-link.tsx
Normal file
20
src/commons/route/active-link.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
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
Normal file
31
src/commons/route/router.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
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,6 +9,7 @@ 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,
|
||||
@ -17,6 +18,8 @@ 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 {}
|
||||
@ -24,6 +27,10 @@ declare module "@mui/styles/defaultTheme" {
|
||||
|
||||
const theme = createTheme();
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {},
|
||||
}));
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<StyledEngineProvider injectFirst>
|
||||
@ -32,7 +39,9 @@ ReactDOM.render(
|
||||
<AuthProvider>
|
||||
<AppApolloClientProvider>
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
|
||||
<App />
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
</MuiPickersUtilsProvider>
|
||||
</AppApolloClientProvider>
|
||||
</AuthProvider>
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import React, { FC, Suspense } from "react";
|
||||
import { useTheme, Theme, CSSObject, styled } from "@mui/material/styles";
|
||||
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 Drawer from "@mui/material/Drawer";
|
||||
import AppBar, { AppBarProps } from "@mui/material/AppBar";
|
||||
import AppBar from "@mui/material/AppBar";
|
||||
import Toolbar from "@mui/material/Toolbar";
|
||||
import List from "@mui/material/List";
|
||||
import CssBaseline from "@mui/material/CssBaseline";
|
||||
@ -14,83 +17,76 @@ 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 { Box } from "@mui/system";
|
||||
import { Link } from "react-router-dom";
|
||||
import { AddCircle, Description, LocalOffer } from '@mui/icons-material';
|
||||
import { Link } from '@curi/react-dom';
|
||||
const drawerWidth = 240;
|
||||
|
||||
const openedMixin = (theme: Theme): CSSObject => ({
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create("width", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
overflowX: "hidden",
|
||||
});
|
||||
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: {
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create("width", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
drawerClose: {
|
||||
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: {
|
||||
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),
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
const closedMixin = (theme: Theme): CSSObject => ({
|
||||
transition: theme.transitions.create("width", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
overflowX: "hidden",
|
||||
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,
|
||||
}));
|
||||
|
||||
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 }) => {
|
||||
export const DefaultLayout: FC = ({children}) => {
|
||||
const classes = useStyles();
|
||||
const theme = useTheme();
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
@ -103,70 +99,86 @@ export const DefaultLayout: FC = ({ children }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<CssBaseline />
|
||||
<StyledAppBar position="fixed" open={open}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={handleDrawerOpen}
|
||||
edge="start"
|
||||
sx={{
|
||||
marginRight: "36px",
|
||||
...(open && { display: "none" }),
|
||||
}}
|
||||
size="large"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" noWrap>
|
||||
Mini variant drawer
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</StyledAppBar>
|
||||
<StyledDrawer variant="permanent" open={open}>
|
||||
<DrawerHeader>
|
||||
<IconButton onClick={handleDrawerClose} size="large">
|
||||
{theme.direction === "rtl" ? (
|
||||
<ChevronRightIcon />
|
||||
) : (
|
||||
<ChevronLeftIcon />
|
||||
)}
|
||||
</IconButton>
|
||||
</DrawerHeader>
|
||||
<Divider />
|
||||
<List>
|
||||
<Link to="/articles/create">
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<AddCircle />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="New Article" />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link to="/articles">
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<Description />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Articles" />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link to="/tags">
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<LocalOffer />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Tags" />
|
||||
</ListItem>
|
||||
</Link>
|
||||
</List>
|
||||
<Divider />
|
||||
</StyledDrawer>
|
||||
<Main>
|
||||
<Suspense fallback={"Loading"}>{children}</Suspense>
|
||||
</Main>
|
||||
</Box>
|
||||
<div className={classes.root}>
|
||||
<CssBaseline />
|
||||
<AppBar
|
||||
position="fixed"
|
||||
className={clsx(classes.appBar, {
|
||||
[classes.appBarShift]: open,
|
||||
})}
|
||||
>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={handleDrawerOpen}
|
||||
edge="start"
|
||||
className={clsx(classes.menuButton, {
|
||||
[classes.hide]: open,
|
||||
})}
|
||||
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}>
|
||||
<IconButton onClick={handleDrawerClose} size="large">
|
||||
{theme.direction === "rtl" ? (
|
||||
<ChevronRightIcon />
|
||||
) : (
|
||||
<ChevronLeftIcon />
|
||||
)}
|
||||
</IconButton>
|
||||
</div>
|
||||
<Divider />
|
||||
<List>
|
||||
<Link name="create-article">
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<AddCircle />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="New Article" />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link name="articles">
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<Description />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Articles" />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link name="tags">
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<LocalOffer />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Tags" />
|
||||
</ListItem>
|
||||
</Link>
|
||||
</List>
|
||||
<Divider />
|
||||
</Drawer>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.toolbar} />
|
||||
{ children }
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
156
src/routes.tsx
156
src/routes.tsx
@ -1,96 +1,74 @@
|
||||
import { useApolloClient } from "@apollo/client";
|
||||
import * as R from "ramda";
|
||||
import { FC, lazy, useMemo } from "react";
|
||||
import { useParams, useRoutes } from "react-router-dom";
|
||||
import { ApolloClient } from "@apollo/client";
|
||||
import { prepareRoutes } from "@curi/router";
|
||||
import { omit } from 'ramda';
|
||||
import { ARTICLE } from "./articles";
|
||||
import { Article } from "./generated/graphql";
|
||||
import { DefaultLayout } from "./layouts";
|
||||
import { Article } from './generated/graphql';
|
||||
|
||||
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>,
|
||||
export default prepareRoutes([
|
||||
{
|
||||
name: "dashboard",
|
||||
path: "",
|
||||
respond() {
|
||||
return { body: () => <div>DashBoard</div> };
|
||||
},
|
||||
{
|
||||
path: "/articles/create",
|
||||
element: (
|
||||
<DefaultLayout>
|
||||
<CreateArticle />
|
||||
</DefaultLayout>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "create-article",
|
||||
path: "articles/create",
|
||||
resolve() {
|
||||
const body = import(
|
||||
/* webpackChunkName: "article-editor" */ "./articles"
|
||||
).then((m) => m.ArticleEditor);
|
||||
return body;
|
||||
},
|
||||
{
|
||||
path: "/articles/:id",
|
||||
element: (
|
||||
<DefaultLayout>
|
||||
<ModifyArticle />
|
||||
</DefaultLayout>
|
||||
),
|
||||
respond({ resolved }) {
|
||||
return { body: resolved };
|
||||
},
|
||||
{
|
||||
path: "articles",
|
||||
element: (
|
||||
<DefaultLayout>
|
||||
<ArticleIndex />
|
||||
</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: "tags",
|
||||
element: (
|
||||
<DefaultLayout>
|
||||
<TagIndex />
|
||||
</DefaultLayout>
|
||||
),
|
||||
respond({ resolved }) {
|
||||
return { body: resolved };
|
||||
},
|
||||
]);
|
||||
|
||||
return element;
|
||||
};
|
||||
},
|
||||
{
|
||||
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 };
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
197
src/tags/article-editor.tsx
Normal file
197
src/tags/article-editor.tsx
Normal file
@ -0,0 +1,197 @@
|
||||
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,2 +1,3 @@
|
||||
export * from "./article-editor";
|
||||
export * from "./tags-index";
|
||||
export * from "./tags.constants";
|
||||
|
||||
@ -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 navigate = useNavigate();
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<section>
|
||||
@ -48,9 +48,15 @@ export const TagsIndex: FC = () => {
|
||||
<TableCell>
|
||||
<IconButton
|
||||
aria-label="edit"
|
||||
onClick={() => navigate(`/tags/${tag.id}/modify`)}
|
||||
size="large"
|
||||
>
|
||||
onClick={() =>
|
||||
router.navigate({
|
||||
url: router.url({
|
||||
name: "modify-tag",
|
||||
params: tag,
|
||||
}),
|
||||
})
|
||||
}
|
||||
size="large">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
@ -60,8 +66,7 @@ export const TagsIndex: FC = () => {
|
||||
variables: tag,
|
||||
})
|
||||
}
|
||||
size="large"
|
||||
>
|
||||
size="large">
|
||||
<Delete />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user