Adding react-quill modules and event handlers and also implenting localStorage

Author: pramit-marattha

client/components/update/NewBlog.js

@@ -16,7 +16,18 @@ const ReactQuill = dynamic(() => import("react-quill"),{ssr:false});
 
 const NewBlog = ({router})=>{
 
-    const [body,setBody] = useState({})
+    const getBlogFromLocalStorage =()=>{
+        if (typeof window === "undefined"){
+            return false;
+        }
+
+        if(localStorage.getItem("blog")){
+            return JSON.parse(localStorage.getItem("blog"))
+        } else
+        return false;
+    };
+
+    const [body,setBody] = useState(getBlogFromLocalStorage())
     const [infos,setInfos] = useState({
         error:"",
         sizeError:"",
@@ -28,16 +39,29 @@ const NewBlog = ({router})=>{
 
     const {error,sizeError,success,formData,title,hidePublishButton} = infos
 
+    useEffect(()=>{
+        setInfos({...infos, formData: new FormData()})
+    },[router])
+
     const publishTheBlog = (event)=>{
         event.preventDefault();
     }
 
     const handleChange=(name)=>event=>{
-        console.log(event.target.value);
+        // console.log(event.target.value);
+        const info = name === "photo" ? event.target.files[0] : event.target.value
+        formData.set(name,info)
+        setInfos({...infos,[name]:info, formData,error:''})
+
     };
 
     const handleBody =(event)=>{
-        console.log(event)
+        // console.log(event)
+        setBody(event)
+        formData.set("body",event)
+        if(typeof window !== "undefined"){
+            localStorage.setItem("blog",JSON.stringify(event))
+        }
     };
 
     ////////////////////
@@ -56,7 +80,7 @@ const NewBlog = ({router})=>{
             <input type="text" className="form-control" value={title} onChange={handleChange("title")}/>
             </div>
             <div className="form-group">
-            <ReactQuill style={{"background-color":"white","color":"black"}} value={body} placeholder="Sketch your blog..." onChange={handleBody}/>
+            <ReactQuill modules={NewBlog.modules} formats={NewBlog.formats} style={{"backgroundColor":"white","color":"black"}} value={body} placeholder="Sketch your blog..." onChange={handleBody}/>
             </div>
             <div>
             <button type="submit" className="btn btn-info">
@@ -76,4 +100,34 @@ const NewBlog = ({router})=>{
     )
 };
 
+NewBlog.modules = {
+    toolbar: [
+        [{ header: [1,2,3,4,5,6] }, { font: [] }],
+        [{ size: [] }],
+        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        ['link', 'image', 'video'],
+        ['clean'],
+        ['code-block']
+    ]
+};
+
+NewBlog.formats = [
+    'header',
+    'font',
+    'size',
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    'blockquote',
+    'list',
+    'bullet',
+    'link',
+    'image',
+    'video',
+    'code-block'
+];
+
+
 export default withRouter(NewBlog);