9 | {post.title} 10 |

12 |

13 |

20 |

{post.author.name}

21 |

22 |

23 | 26 | 27 | {moment(post.createdAt).format('MMM DD, YYYY')} 28 | 29 |

30 |

32 |

37 |

{post.excerpt}

40 | 41 | 42 | Continue Reading 43 | 44 | 45 |

21 |

22 |

23 |

{moment(post.createdAt).format('MMM DD, YYYY')}

24 |

{post.title}

25 |

26 |

34 |

{post.author.name}

35 |

36 |

37 | 38 |

39 | 42 |

43 | 44 |

45 | ))} 46 | 47 | ) 48 | }; 49 | 50 | export default SinglePost; 51 | -------------------------------------------------------------------------------- /components/PostDetail.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import moment from 'moment'; 3 | 4 | const PostDetail = ({post}) => { 5 | const getContentFragment = (index, text, obj, type) => { 6 | let modifiedText = text 7 | 8 | if(obj) { 9 | if(obj.bold) { 10 | modifiedText = ({text}) 11 | } 12 | if(obj.italic) { 13 | modifiedText = ({text}) 14 | } 15 | if(obj.underline) { 16 | modifiedText = ({text}) 17 | } 18 | } 19 | 20 | switch(type) { 21 | case 'heading-three': 22 | return

{modifiedText.map((item, i) => {item})}

23 | case 'paragraph': 24 | return

{modifiedText.map((item, i) => {item})}

25 | case 'image': 26 | return( 27 | {obj.title}

34 | ) 35 | default: 36 | return modifiedText 37 | } 38 | } 39 | 40 | return ( 41 |

42 |

43 |

48 |

49 |

50 |

51 |

52 |

59 |

{post.author.name}

60 |

61 |

62 | 65 | 66 | {moment(post.createdAt).format('MMM DD, YYYY')} 67 | 68 |

69 |

70 |

{post.title}

71 | {post.content.raw.children.map((typeObj, index) => { 72 | const children = typeObj.children.map((item, itemIndex) => getContentFragment(itemIndex, item.text, item)) 73 | return getContentFragment(index, children, typeObj, typeObj.type) 74 | })} 75 |

76 |

77 | ) 78 | }; 79 | 80 | export default PostDetail; 81 | -------------------------------------------------------------------------------- /components/CommentsForm.jsx: -------------------------------------------------------------------------------- 1 | import React, {useRef, useState, useEffect} from 'react'; 2 | 3 | import { submitComment } from '../services'; 4 | 5 | const CommentsForm = ({slug}) => { 6 | const [error, setError] = useState(false) 7 | const [localStorage, setLocalStorage] = useState(null) 8 | const [showSuccessMessage, setShowSuccessMessage] = useState(false) 9 | const commentEl = useRef() 10 | const nameEl = useRef() 11 | const emailEl = useRef() 12 | const storeDataEl = useRef() 13 | 14 | const handleCommentSubmission = () => { 15 | setError(false) 16 | 17 | const {value: comment} = commentEl.current 18 | const {value: name} = nameEl.current 19 | const {value: email} = emailEl.current 20 | const {checked: storeData} = storeDataEl.current 21 | 22 | if(!name || !comment || !email) { 23 | setError(true) 24 | return 25 | } 26 | 27 | const commentsObj = {name, email, comment, slug} 28 | 29 | if(storeData) { 30 | window.localStorage.setItem("name", name) 31 | window.localStorage.setItem("email", email) 32 | }else { 33 | window.localStorage.removeItem("name") 34 | window.localStorage.removeItem("email") 35 | } 36 | 37 | submitComment(commentsObj) 38 | .then(res => { 39 | setShowSuccessMessage(true) 40 | setTimeout(() => { 41 | setShowSuccessMessage(false) 42 | }, 3000) 43 | }) 44 | } 45 | 46 | return ( 47 |

48 |

Comments

49 |

50 |

56 |       </div>
57 |       <div className='grid grid-cols-1 lg:grid-cols-2 gap-4 pb-4'>
58 |         <input 
59 |           type="text" 
60 |           ref={nameEl}
61 |           className='p-4 outline-none w-full rounded-lg focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700'  
62 |           placeholder='Name'
63 |           name='name'
64 |         />
65 |         <input 
66 |           type="email"
67 |           ref={emailEl}
68 |           className='p-4 outline-none w-full rounded-lg focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700'  
69 |           placeholder='Email'
70 |           name="email"
71 |         />
72 |       </div>
73 |       <div className='grid grid-cols-1 gap-4 pb-4'>
74 |         <div>
75 |           <input type="checkbox" id='storeData' name="storeData" value="true" ref={storeDataEl} />
76 |           <label htmlFor="storeData" className='text-gray-500 cursor-pointer ml-2'>Save my name, email in this browser for the next time I comment.</label>
77 |         </div>
78 |       </div>
79 |       {error && <p className='text-xs text-red-500'>All fields are required</p>}
80 |       <div className='mt-8'>
81 |         <button 
82 |           onClick={handleCommentSubmission}
83 |           type='button' 
84 |           className='transition duration-500 ease hover:bg-indigo-900 inline-block bg-indigo-400 text-lg font-medium rounded-full text-white px-8 py-3 cursor-pointer'
85 |           >Post Comment</button>
86 |         {showSuccessMessage && <span className='font-semibold mt-2 text-green-500 text-xl float-right'>Comment submitted for review</span>}
87 |       </div>
88 |     </div>
89 |   )
90 | };
91 | 
92 | export default CommentsForm;
93 |

--------------------------------------------------------------------------------
/services/index.js:
--------------------------------------------------------------------------------
  1 | import { request, gql } from "graphql-request";
  2 | 
  3 | const grapqhlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT
  4 | 
  5 | export const getPosts = async () => {
  6 |   const query = gql`
  7 |     query MyQuery {
  8 |       postsConnection {
  9 |         edges {
 10 |           node {
 11 |             author {
 12 |               bio
 13 |               name
 14 |               id
 15 |               photo {
 16 |                 url
 17 |               }
 18 |             }
 19 |             createdAt
 20 |             slug
 21 |             title
 22 |             excerpt
 23 |             featuredImage {
 24 |               url
 25 |             }
 26 |             categories {
 27 |               name
 28 |               slug
 29 |             }
 30 |           }
 31 |         }
 32 |       }
 33 |     }
 34 |   `
 35 | 
 36 |   const result = await request(grapqhlAPI, query)
 37 |   return result.postsConnection.edges
 38 | }
 39 | 
 40 | export const getPostDetails = async(slug) => {
 41 |   const query = gql`
 42 |     query GetPostDetails($slug: String!){
 43 |       post(where: {slug: $slug}) {
 44 |         author {
 45 |           bio
 46 |           name
 47 |           id
 48 |           photo{
 49 |             url
 50 |           }
 51 |         }
 52 |         createdAt
 53 |         slug
 54 |         title
 55 |         excerpt
 56 |         featuredImage{
 57 |           url
 58 |         }
 59 |         categories {
 60 |           name
 61 |           slug
 62 |         }
 63 |         content {
 64 |           raw
 65 |         }
 66 |       }
 67 |     }
 68 |   `
 69 | 
 70 |   const result = await request(grapqhlAPI, query, {slug})
 71 |   return result.post
 72 | }
 73 | 
 74 | export const getCategoryPost = async(slug) => {
 75 |   const query = gql`
 76 |     query GetCategoryPost($slug: String!){
 77 |       postsConnection(where: {categories_some: {slug: $slug}}) {
 78 |         edges {
 79 |           node {
 80 |             author {
 81 |               bio
 82 |               name
 83 |               id
 84 |               photo {
 85 |                 url
 86 |               }
 87 |             }
 88 |             createdAt
 89 |             slug
 90 |             title
 91 |             excerpt
 92 |             featuredImage {
 93 |               url
 94 |             }
 95 |             categories {
 96 |               name
 97 |               slug
 98 |             }
 99 |           }
100 |         }
101 |       }
102 |     }
103 |   `
104 | 
105 |   const result = await request(grapqhlAPI, query, {slug})
106 |   return result.postsConnection.edges
107 | }
108 | 
109 | export const getRecentPosts = async() => {
110 |   const query = gql`
111 |     query GetPostDetails() {
112 |       posts(
113 |         orderBy: createdAt_ASC
114 |         last: 3
115 |       ) {
116 |         title
117 |         featuredImage{
118 |           url
119 |         }
120 |         createdAt
121 |         slug
122 |       }
123 |     }
124 |   `
125 | 
126 |   const result = await request(grapqhlAPI, query)
127 |   return result.posts
128 | }
129 | 
130 | export const getSimilarPosts = async(categories, slug) => {
131 |   const query = gql`
132 |     query GetPostDetails($slug: String!, $categories: [String!]){
133 |       posts(
134 |         where: {slug_not: $slug, AND: {categories_some: {slug_in: $categories}}}
135 |         last: 3
136 |       ) {
137 |         title
138 |         featuredImage{
139 |           url
140 |         }
141 |         createdAt
142 |         slug
143 |       }
144 |     }
145 |   `
146 | 
147 |   const result = await request(grapqhlAPI, query, {categories, slug})
148 |   return result.posts
149 | }
150 | 
151 | export const getCategories = async() => {
152 |   const query = gql`
153 |     query getCategories {
154 |       categories {
155 |         name
156 |         slug
157 |       }
158 |     }
159 |   `
160 | 
161 |   const result = await request(grapqhlAPI, query)
162 |   return result.categories
163 | }
164 | 
165 | export const submitComment = async (obj) => {
166 |   const result = await fetch('/api/comments', {
167 |     method: 'POST',
168 |     headers: {
169 |       'Content-Type': 'application/json',
170 |     },
171 |     body: JSON.stringify(obj),
172 |   });
173 | 
174 |   return result.json();
175 | };
176 | 
177 | 
178 | export const getComments = async(slug) => {
179 |   const query = gql `
180 |     query GetComments($slug: String!) {
181 |       comments(where: {post: {slug: $slug}}) {
182 |         name
183 |         createdAt
184 |         comment
185 |       }
186 |     }
187 |   `
188 | 
189 |   const result = await request(grapqhlAPI, query, {slug})
190 |   return result.comments
191 | }
192 | 
193 | export const getFeaturedPosts = async() => {
194 |   const query = gql`
195 |     query GetCategoryPost() {
196 |       posts(where: {featuredPost: true}) {
197 |         author {
198 |           name
199 |           photo {
200 |             url
201 |           }
202 |         }
203 |         featuredImage{
204 |           url
205 |         }
206 |         title
207 |         slug
208 |         createdAt
209 |       }
210 |     }
211 |   `
212 | 
213 |   const result = await request(grapqhlAPI, query)
214 |   return result.posts
215 | }
216 | 
217 | export const getSingleSimilarPosts = async(categories, slug) => {
218 |   
219 |   const query = gql`
220 |     query GetPostDetails($slug: String!, $categories: [String!]){
221 |       posts(
222 |         where: {slug_not: $slug, AND: {categories_some: {slug_in: $categories}}}
223 |         first: 1
224 |       ) {
225 |         title
226 |         featuredImage{
227 |           url
228 |         }
229 |         createdAt
230 |         slug
231 |         author {
232 |           name
233 |           photo {
234 |             url
235 |           }
236 |         }
237 |       }
238 |     }
239 |   `
240 | 
241 |   const result = await request(grapqhlAPI, query, {categories, slug})
242 |   return result.posts
243 | }

--------------------------------------------------------------------------------

{author.name}

16 | Categories 17 |

19 | {comments.length} 20 | {" "} 21 | Comments 22 |

22 | {slug ? 'Related Posts' : 'Recent Posts'} 23 |

9 | {post.title} 10 |

{modifiedText.map((item, i) => {item})}

{post.title}

Comments