1
+ import React , { useState , useEffect } from 'react' ;
2
+ import { submitComment } from '../services' ;
3
+
4
+ const CommentsForm = ( { slug } ) => {
5
+ const [ error , setError ] = useState ( false ) ;
6
+ const [ localStorage , setLocalStorage ] = useState ( null ) ;
7
+ const [ showSuccessMessage , setShowSuccessMessage ] = useState ( false ) ;
8
+ const [ formData , setFormData ] = useState ( { name : null , email : null , comment : null , storeData : false } ) ;
9
+
10
+ useEffect ( ( ) => {
11
+ setLocalStorage ( window . localStorage ) ;
12
+ const initalFormData = {
13
+ name : window . localStorage . getItem ( 'name' ) ,
14
+ email : window . localStorage . getItem ( 'email' ) ,
15
+ storeData : window . localStorage . getItem ( 'name' ) || window . localStorage . getItem ( 'email' ) ,
16
+ } ;
17
+ setFormData ( initalFormData ) ;
18
+ } , [ ] ) ;
19
+
20
+ const onInputChange = ( e ) => {
21
+ const { target } = e ;
22
+ if ( target . type === 'checkbox' ) {
23
+ setFormData ( ( prevState ) => ( {
24
+ ...prevState ,
25
+ [ target . name ] : target . checked ,
26
+ } ) ) ;
27
+ } else {
28
+ setFormData ( ( prevState ) => ( {
29
+ ...prevState ,
30
+ [ target . name ] : target . value ,
31
+ } ) ) ;
32
+ }
33
+ } ;
34
+
35
+ const handlePostSubmission = ( ) => {
36
+ setError ( false ) ;
37
+ const { name, email, comment, storeData } = formData ;
38
+ if ( ! name || ! email || ! comment ) {
39
+ setError ( true ) ;
40
+ return ;
41
+ }
42
+ const commentObj = {
43
+ name,
44
+ email,
45
+ comment,
46
+ slug,
47
+ } ;
48
+
49
+ if ( storeData ) {
50
+ localStorage . setItem ( 'name' , name ) ;
51
+ localStorage . setItem ( 'email' , email ) ;
52
+ } else {
53
+ localStorage . removeItem ( 'name' ) ;
54
+ localStorage . removeItem ( 'email' ) ;
55
+ }
56
+
57
+ submitComment ( commentObj )
58
+ . then ( ( res ) => {
59
+ if ( res . createComment ) {
60
+ if ( ! storeData ) {
61
+ formData . name = '' ;
62
+ formData . email = '' ;
63
+ }
64
+ formData . comment = '' ;
65
+ setFormData ( ( prevState ) => ( {
66
+ ...prevState ,
67
+ ...formData ,
68
+ } ) ) ;
69
+ setShowSuccessMessage ( true ) ;
70
+ setTimeout ( ( ) => {
71
+ setShowSuccessMessage ( false ) ;
72
+ } , 3000 ) ;
73
+ }
74
+ } ) ;
75
+ } ;
76
+
77
+ return (
78
+ < div className = "bg-white shadow-lg rounded-lg p-8 pb-12 mb-8" >
79
+ < h3 className = "text-xl mb-8 font-semibold border-b pb-4" > Leave a Reply</ h3 >
80
+ < div className = "grid grid-cols-1 gap-4 mb-4" >
81
+ < textarea value = { formData . comment } onChange = { onInputChange } className = "p-4 outline-none w-full rounded-lg h-40 focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700" name = "comment" placeholder = "Comment" />
82
+ </ div >
83
+ < div className = "grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4" >
84
+ < input type = "text" value = { formData . name } onChange = { onInputChange } className = "py-2 px-4 outline-none w-full rounded-lg focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700" placeholder = "Name" name = "name" />
85
+ < input type = "email" value = { formData . email } onChange = { onInputChange } className = "py-2 px-4 outline-none w-full rounded-lg focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700" placeholder = "Email" name = "email" />
86
+ </ div >
87
+ < div className = "grid grid-cols-1 gap-4 mb-4" >
88
+ < div >
89
+ < input checked = { formData . storeData } onChange = { onInputChange } type = "checkbox" id = "storeData" name = "storeData" value = "true" />
90
+ < label className = "text-gray-500 cursor-pointer" htmlFor = "storeData" > Save my name, email in this browser for the next time I comment.</ label >
91
+ </ div >
92
+ </ div >
93
+ { error && < p className = "text-xs text-red-500" > All fields are mandatory</ p > }
94
+ < div className = "mt-8" >
95
+ < button type = "button" onClick = { handlePostSubmission } className = "transition duration-500 ease hover:bg-indigo-900 inline-block bg-pink-600 text-lg font-medium rounded-full text-white px-8 py-3 cursor-pointer" > Post Comment</ button >
96
+ { showSuccessMessage && < span className = "text-xl float-right font-semibold mt-3 text-green-500" > Comment submitted for review</ span > }
97
+ </ div >
98
+ </ div >
99
+ ) ;
100
+ } ;
101
+
102
+ export default CommentsForm ;
0 commit comments