(DELETE_MUTATION)
48 |
49 | const handlePublish = useCallback(() => {
50 | if (!postQuery.data) return
51 |
52 | publishMutation({
53 | variables: {
54 | id: postQuery.data.post.id,
55 | },
56 | })
57 | .then(() => {
58 | client.resetStore().then(() => history.push('/'))
59 | })
60 | .catch((e) => {
61 | setError(e.message)
62 | })
63 | }, [client, history, postQuery.data, publishMutation])
64 |
65 | const handleDeleteDialogClose = useCallback(() => {
66 | setIsDeleteDialogOpen(false)
67 | }, [])
68 |
69 | const handleDelete = useCallback(() => {
70 | if (!postQuery.data) return
71 |
72 | deleteMutation({
73 | variables: {
74 | where: { id: postQuery.data.post.id },
75 | },
76 | })
77 | .then(() => {
78 | client.resetStore().then(() => {
79 | handleDeleteDialogClose()
80 | history.push(
81 | postQuery.data && postQuery.data.post.published ? '/' : '/drafts',
82 | )
83 | })
84 | })
85 | .catch((e) => {
86 | setError(e.message)
87 | })
88 | }, [client, deleteMutation, handleDeleteDialogClose, history, postQuery.data])
89 |
90 | const handleDeleteDialogOpen = useCallback(() => {
91 | setIsDeleteDialogOpen(true)
92 | }, [])
93 |
94 | if (!meQuery || !meQuery.data || !postQuery || !postQuery.data)
95 | return ERROR
96 | if (meQuery.loading || postQuery.loading) return Loading
97 | if (postQuery.error)
98 | return Post query error: {postQuery.error.message}
99 | if (meQuery.error) return Me query error: {meQuery.error.message}
100 | if (!postQuery.data.post) return Post not found
101 |
102 | const isOwner = postQuery.data.post.author.id === meQuery.data.me.id
103 |
104 | return (
105 |
106 |
{postQuery.data.post.title}
107 | {isOwner && (
108 |
114 | )}
115 | {isOwner && !postQuery.data.post.published && (
116 |
117 | )}
118 | {isOwner && }
119 | {error}
120 |
126 |
127 | )
128 | }
129 |
130 | const PUBLISH_MUTATION = gql`
131 | mutation Publish($id: ID!) {
132 | publish(id: $id) {
133 | id
134 | title
135 | }
136 | }
137 | `
138 |
139 | const DELETE_MUTATION = gql`
140 | mutation DeletePost($where: PostWhereUniqueInput!) {
141 | deletePost(where: $where) {
142 | id
143 | }
144 | }
145 | `
146 |
147 | const POST_QUERY = gql`
148 | query Post($where: PostWhereUniqueInput!) {
149 | post(where: $where) {
150 | id
151 | title
152 | published
153 | author {
154 | id
155 | name
156 | }
157 | }
158 | }
159 | `
160 |
161 | export default PostDetail
162 |
--------------------------------------------------------------------------------
/frontend/src/components/post/PostEdit.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useCallback } from 'react'
2 | import { Formik, FormikActions } from 'formik'
3 |
4 | import TextField from '@material-ui/core/TextField'
5 | import Box from '@material-ui/core/Box'
6 | import Paper from '@material-ui/core/Paper'
7 | import Button from '@material-ui/core/Button'
8 |
9 | import gql from 'graphql-tag'
10 | import { useMutation, useApolloClient, useQuery } from 'react-apollo-hooks'
11 |
12 | import * as Yup from 'yup'
13 |
14 | import useReactRouter from 'use-react-router'
15 |
16 | import PostType from './../../types/Post'
17 |
18 | const PostCreateSchema = Yup.object().shape({
19 | title: Yup.string()
20 | .min(2, 'Too Short!')
21 | .max(50, 'Too Long!')
22 | .required('Required'),
23 | })
24 |
25 | interface Props {}
26 |
27 | interface Form {
28 | title: string
29 | }
30 | type FormValues = Record
31 |
32 | interface PostQueryResponse {
33 | post: PostType
34 | }
35 |
36 | interface UpdatePostMutationResponse {
37 | updatePost: PostType
38 | }
39 |
40 | interface MatchParam {
41 | id: string
42 | }
43 |
44 | const PostEdit: React.FC = () => {
45 | const createDraftMutation = useMutation(
46 | UPDATE_POST_MUTATION,
47 | )
48 | const { history, match } = useReactRouter()
49 | const [error, setError] = useState()
50 |
51 | const client = useApolloClient()
52 | const postQuery = useQuery(POST_QUERY, {
53 | variables: {
54 | where: {
55 | id: match.params.id,
56 | },
57 | },
58 | })
59 |
60 | const handleSubmit = useCallback(
61 | (values: FormValues, { setSubmitting }: FormikActions) => {
62 | if (!postQuery || !postQuery.data || !postQuery.data.post) return
63 |
64 | setError(undefined)
65 | createDraftMutation({
66 | variables: {
67 | data: {
68 | title: values.title,
69 | },
70 | where: {
71 | id: postQuery.data.post.id,
72 | },
73 | },
74 | })
75 | .then((res) => {
76 | if (!res.data) return
77 | client
78 | .resetStore()
79 | .then(() =>
80 | history.push(
81 | postQuery.data && postQuery.data.post.published
82 | ? '/'
83 | : '/drafts',
84 | ),
85 | ) // TODO wtf typescript
86 | })
87 | .catch((e) => {
88 | console.error(e)
89 | setError(e.message)
90 | setSubmitting(false)
91 | })
92 | },
93 | [client, createDraftMutation, history, postQuery],
94 | )
95 |
96 | if (!postQuery || !postQuery.data) return ERROR
97 | if (postQuery.loading) return Loading
98 | if (postQuery.error)
99 | return Post query error: {postQuery.error.message}
// TODO Error || Loading
100 | if (!postQuery.data.post) return Post not found
101 |
102 | return (
103 |
104 |
105 | Update {postQuery.data.post.published ? 'Post' : 'Draft'}
106 |
111 | {({
112 | values,
113 | errors,
114 | touched,
115 | handleChange,
116 | handleBlur,
117 | handleSubmit,
118 | isSubmitting,
119 | /* and other goodies */
120 | }) => (
121 |
122 |
138 |
139 | )}
140 |
141 | {error}
142 |
143 |
144 | )
145 | }
146 |
147 | const POST_QUERY = gql`
148 | query Post($where: PostWhereUniqueInput!) {
149 | post(where: $where) {
150 | id
151 | title
152 | author {
153 | id
154 | name
155 | }
156 | published
157 | }
158 | }
159 | `
160 |
161 | const UPDATE_POST_MUTATION = gql`
162 | mutation UpdatePost($data: PostUpdateInput!, $where: PostWhereUniqueInput!) {
163 | updatePost(data: $data, where: $where) {
164 | id
165 | title
166 | author {
167 | id
168 | name
169 | }
170 | }
171 | }
172 | `
173 |
174 | export default PostEdit
175 |
--------------------------------------------------------------------------------
/frontend/src/components/post/PostList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import PostType from './../../types/Post'
4 |
5 | import List from '@material-ui/core/List'
6 |
7 | import Post from './Post'
8 |
9 | interface Props {
10 | posts: PostType[]
11 | }
12 |
13 | const PostList: React.FC = ({ posts }) => {
14 | return (
15 |
16 | {posts.map((post) => (
17 |
18 | ))}
19 |
20 | )
21 | }
22 |
23 | export default PostList
24 |
--------------------------------------------------------------------------------
/frontend/src/components/user/Profile.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import MeQueryContext from '../../context/MeQueryContext'
3 |
4 | const Profile = () => {
5 | const meQuery = useContext(MeQueryContext)
6 |
7 | if (!meQuery || !meQuery.data) return Error
8 | if (meQuery.loading) return Loading
9 | if (meQuery.error) return {meQuery.error.message}
10 |
11 | return (
12 |
13 |
{meQuery.data.me.name}
14 |
{meQuery.data.me.email}
15 |