feat: 文章保存到草稿。

src/articles/article-editor.tsx

@@ -5,14 +5,21 @@ import {
   makeStyles,
   Paper,
 } from "@material-ui/core";
-import { Field, Form, Formik, FormikHelpers } from "formik";
+import { Field, Form, Formik, FormikHelpers, FormikProps } from "formik";
-import { FC } from "react";
+import { FC, useCallback, useMemo, useRef, useState } from "react";
 import { Editor } from "../commons/editor/vditor";
 import * as Yup from "yup";
-import { Article, CreateArticleInput, UpdateArticleInput } from "../generated/graphql";
+import {
+  Article,
+  CreateArticleInput,
+  CreateDraftArticleInput,
+  DraftArticle,
+  UpdateArticleInput,
+} 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";
 
 const CREATE_ARTICLE = gql`
   mutation createArticle($createArticleInput: CreateArticleInput!) {
@@ -47,13 +54,17 @@ const useStyles = makeStyles((theme) =>
   })
 );
 
-type Values = CreateArticleInput | UpdateArticleInput;
+const fields = ["title", "content", "publishedAt", "tags"] as const;
+type Values = Pick<Article, typeof fields[number]> &
+  Partial<Pick<Article, "id" | "key">>;
 interface Props {
   article?: Values;
 }
 
 export const ArticleEditor: FC<Props> = ({ article }) => {
   const classes = useStyles();
+  const router = useRouter();
+  const formik = useRef<FormikProps<Values>>(null);
 
   const validationSchema = Yup.object({
     content: Yup.string()
@@ -61,11 +72,13 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
       .required("文章内容不得为空"),
     publishedAt: Yup.date(),
   });
-  const router = useRouter();
 
-  const [createArticle] = useMutation<{createArticle: Article} ,{
+  const [createArticle] = useMutation<
-    createArticleInput: CreateArticleInput;
+    { createArticle: Article },
-  }>(CREATE_ARTICLE, {
+    {
+      createArticleInput: CreateArticleInput;
+    }
+  >(CREATE_ARTICLE, {
     update(cache, { data }) {
       cache.modify({
         fields: {
@@ -91,7 +104,31 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
     updateArticleInput: UpdateArticleInput;
   }>(UPDATE_ARTICLE);
 
-  const SubmitForm = (
+  const [putDraft] = useMutation<
+    {
+      draft: DraftArticle;
+    },
+    {
+      draft: CreateDraftArticleInput;
+    }
+  >(gql`
+    mutation ($draft: CreateDraftArticleInput!) {
+      draft: putDraftForArticle(draft: $draft) {
+        id
+        createdAt
+      }
+    }
+  `);
+
+  const tempKey = useMemo(() => {
+    if (article?.key) {
+      return article.key;
+    } else {
+      return new Date().valueOf().toString();
+    }
+  }, [article]);
+
+  const submitForm = async (
     values: Values,
     { setSubmitting }: FormikHelpers<Values>
   ) => {
@@ -102,7 +139,7 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
         setSubmitting(false);
         return;
       }
-      updateArticle({
+      await updateArticle({
         variables: {
           updateArticleInput: {
             ...values,
@@ -126,10 +163,10 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
         setSubmitting(false);
         return;
       }
-      createArticle({
+      await createArticle({
         variables: {
           createArticleInput: {
-            ...values as CreateArticleInput,
+            ...(values as CreateArticleInput),
             title,
           },
         },
@@ -146,13 +183,46 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
     }
     setSubmitting(false);
   };
+
+  const [drafts, setDrafts] = useState<DraftArticle[]>([]);
+  const handleSave = useCallback(
+    async (automatically = true) => {
+      const { data } = await putDraft({
+        variables: {
+          draft: {
+            key: tempKey,
+            payload: formik.current?.values,
+            automatically,
+          },
+        },
+      });
+      if (!data?.draft) {
+        return;
+      }
+      setDrafts((drafts) => {
+        const index = drafts.findIndex((it) => it.id === data.draft.id);
+        if (index === -1) {
+          return [data.draft, ...drafts];
+        } else {
+          const arr = [...drafts];
+          arr[index] = data.draft;
+          return arr;
+        }
+      });
+    },
+    [tempKey, putDraft, formik, drafts]
+  );
+
   return (
     <Paper>
       <Formik
-        initialValues={article!}
+        initialValues={{
+          ...R.pick(fields, article!),
+        }}
+        innerRef={formik}
         validationSchema={validationSchema}
         autoComplete="off"
-        onSubmit={SubmitForm}
+        onSubmit={submitForm}
       >
         {({ submitForm, isSubmitting }) => (
           <Form className={classes.form}>
@@ -178,9 +248,18 @@ export const ArticleEditor: FC<Props> = ({ article }) => {
                   variant="contained"
                   color="primary"
                   disabled={isSubmitting}
+                  onClick={() => handleSave(false)}
+                >
+                  Save
+                </Button>
+                <Button
+                  style={{ marginLeft: "10px" }}
+                  variant="contained"
+                  color="secondary"
+                  disabled={isSubmitting}
                   onClick={submitForm}
                 >
-                  Submit
+                  Publish
                 </Button>
               </Grid>
             </Grid>
@@ -197,5 +276,5 @@ ArticleEditor.defaultProps = {
     content: "",
     publishedAt: new Date(),
     tags: [],
-  } as CreateArticleInput,
+  } as Values,
 };

src/articles/articles-index.tsx

@@ -36,6 +36,7 @@ export const ArticleIndex: FC = () => {
               <TableCell>Published At</TableCell>
               <TableCell>Views</TableCell>
               <TableCell>Comments</TableCell>
+              <TableCell>Status</TableCell>
               <TableCell>Actions</TableCell>
             </TableRow>
           </TableHead>
@@ -46,10 +47,13 @@ export const ArticleIndex: FC = () => {
                   {article.title}
                 </TableCell>
                 <TableCell>
-                  {format(article.publishedAt, "yyyy-MM-dd HH:mm:ss")}
+                  {article.publishedAt
+                    ? format(article.publishedAt, "yyyy-MM-dd HH:mm:ss")
+                    : "--"}
                 </TableCell>
                 <TableCell align="right"> -- </TableCell>
                 <TableCell align="right"> -- </TableCell>
+                <TableCell align="center">{"Published"}</TableCell>
                 <TableCell>
                   <IconButton
                     aria-label="edit"

src/commons/editor/vditor.tsx

@@ -1,7 +1,7 @@
 import { createStyles, FormControl, FormHelperText, FormLabel, makeStyles } from '@material-ui/core';
 import { Skeleton } from "@material-ui/lab";
 import { FieldHookConfig, useField } from "formik";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useMemo, useRef, useState } from "react";
 import Vditor from "vditor";
 import "vditor/src/assets/scss/index.scss";
 
@@ -22,7 +22,10 @@ export const Editor: FC<Props> = ({ label, className, ...props }) => {
   const [, meta, helpers] = useField(props);
   const editor = useRef<HTMLDivElement>(null);
   const [instance, setInstance] = useState<Vditor | null>(() => null);
-  const [containerKey] = useState(() => Math.random().toString(36).slice(2, 8));
+  const containerKey = useMemo(
+    () => Math.random().toString(36).slice(2, 8),
+    []
+  );
   useEffect(() => {
     if (!editor.current) {
       return;
@@ -45,13 +48,18 @@ export const Editor: FC<Props> = ({ label, className, ...props }) => {
     return () => {
       _instance?.destroy();
     };
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerKey]);
 
   const classes = useStyles();
   return (
     <FormControl className={classes.formControl}>
       <FormLabel>{label}</FormLabel>
-      <div className={className} ref={editor} key={containerKey}></div>
+      <div
+        className={`${className} vditor`}
+        ref={editor}
+        key={containerKey}
+      ></div>
       {meta.error && <FormHelperText error={true}>{meta.error}</FormHelperText>}
       {instance ? null : (
         <Skeleton

src/generated/graphql.schema.json

@@ -97,6 +97,18 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "key",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "html",
             "description": null,
@@ -230,6 +242,71 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "INPUT_OBJECT",
+        "name": "CreateDraftArticleInput",
+        "description": null,
+        "fields": null,
+        "inputFields": [
+          {
+            "name": "payload",
+            "description": null,
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Object",
+                "ofType": null
+              }
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "key",
+            "description": null,
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "automatically",
+            "description": null,
+            "type": {
+              "kind": "SCALAR",
+              "name": "Boolean",
+              "ofType": null
+            },
+            "defaultValue": "true",
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "SCALAR",
+        "name": "Boolean",
+        "description": "The `Boolean` scalar type represents `true` or `false`.",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "INPUT_OBJECT",
         "name": "CreateTagInput",
@@ -267,6 +344,81 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "OBJECT",
+        "name": "DraftArticle",
+        "description": null,
+        "fields": [
+          {
+            "name": "id",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "ID",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "payload",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Object",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "key",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "automatically",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Boolean",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "inputFields": null,
+        "interfaces": [],
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "Hello",
@@ -398,6 +550,113 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "putDraftForArticle",
+            "description": null,
+            "args": [
+              {
+                "name": "draft",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "INPUT_OBJECT",
+                    "name": "CreateDraftArticleInput",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "DraftArticle",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "listDraftForArticle",
+            "description": null,
+            "args": [
+              {
+                "name": "key",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "LIST",
+                "name": null,
+                "ofType": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "OBJECT",
+                    "name": "DraftArticle",
+                    "ofType": null
+                  }
+                }
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "lastDraftForArticle",
+            "description": null,
+            "args": [
+              {
+                "name": "key",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "DraftArticle",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "createTag",
             "description": null,
@@ -513,6 +772,16 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "SCALAR",
+        "name": "Object",
+        "description": "The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "Query",
@@ -819,16 +1088,6 @@
         "enumValues": null,
         "possibleTypes": null
       },
-      {
-        "kind": "SCALAR",
-        "name": "Boolean",
-        "description": "The `Boolean` scalar type represents `true` or `false`.",
-        "fields": null,
-        "inputFields": null,
-        "interfaces": null,
-        "enumValues": null,
-        "possibleTypes": null
-      },
       {
         "kind": "OBJECT",
         "name": "__Schema",

src/generated/graphql.tsx

@@ -12,6 +12,8 @@ export type Scalars = {
   Float: number;
   /** A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date-time format. */
   DateTime: any;
+  /** The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf). */
+  Object: any;
 };
 
 export type Article = {
@@ -21,6 +23,7 @@ export type Article = {
   content: Scalars['String'];
   publishedAt?: Maybe<Scalars['DateTime']>;
   tags: Array<Scalars['String']>;
+  key?: Maybe<Scalars['String']>;
   html: Scalars['String'];
   description?: Maybe<Scalars['String']>;
 };
@@ -32,11 +35,25 @@ export type CreateArticleInput = {
   tags: Array<Scalars['String']>;
 };
 
+export type CreateDraftArticleInput = {
+  payload: Scalars['Object'];
+  key: Scalars['String'];
+  automatically?: Maybe<Scalars['Boolean']>;
+};
+
 export type CreateTagInput = {
   name: Scalars['String'];
 };
 
 
+export type DraftArticle = {
+  __typename?: 'DraftArticle';
+  id: Scalars['ID'];
+  payload: Scalars['Object'];
+  key: Scalars['String'];
+  automatically: Scalars['Boolean'];
+};
+
 export type Hello = {
   __typename?: 'Hello';
   message: Scalars['String'];
@@ -47,6 +64,9 @@ export type Mutation = {
   createArticle: Article;
   updateArticle: Article;
   removeArticle: Scalars['Int'];
+  putDraftForArticle: DraftArticle;
+  listDraftForArticle: Array<DraftArticle>;
+  lastDraftForArticle: DraftArticle;
   createTag: Tag;
   updateTag: Tag;
   removeTag: Tag;
@@ -68,6 +88,21 @@ export type MutationRemoveArticleArgs = {
 };
 
 
+export type MutationPutDraftForArticleArgs = {
+  draft: CreateDraftArticleInput;
+};
+
+
+export type MutationListDraftForArticleArgs = {
+  key: Scalars['String'];
+};
+
+
+export type MutationLastDraftForArticleArgs = {
+  key: Scalars['String'];
+};
+
+
 export type MutationCreateTagArgs = {
   createTagInput: CreateTagInput;
 };
@@ -82,6 +117,7 @@ export type MutationRemoveTagArgs = {
   id: Scalars['String'];
 };
 
+
 export type Query = {
   __typename?: 'Query';
   hello: Hello;