added rich text support

package.json

@@ -8,9 +8,12 @@
     "@testing-library/user-event": "^12.1.10",
     "antd": "^4.16.6",
     "axios": "^0.21.1",
+    "draft-js": "^0.11.7",
+    "draftjs-to-html": "^0.9.1",
     "feather-icons-react": "^0.4.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-draft-wysiwyg": "^1.14.7",
     "react-loading-skeleton": "^2.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/app/index.css

@@ -4,7 +4,10 @@ font-family: 'Electrolize', sans-serif;
 font-family: 'Montserrat', sans-serif;
 font-family: 'Ubuntu', sans-serif;
 */
-
+* {
+  margin: 0;
+  box-sizing: border-box;
+}
 body {
   overflow-x: hidden;
   margin: 0;

src/app/index.js

@@ -1,5 +1,7 @@
 import "./index.css";
 import "antd/dist/antd.css";
+import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+
 import Router from "./router";
 
 const BlogBook = () => {

src/app/pages/Blogs/Blogs.css

@@ -1,42 +1,54 @@
+.richEditor {
+  border: 1px solid rgb(230, 230, 230);
+  padding: 0 10px;
+  min-height: 400px;
+  cursor: text;
+  border-radius: 5px;
+  width: 100%;
+}
+.richEditor > * {
+  margin: 0;
+}
+
 .blog-create {
-    font-family: 'Ubuntu', sans-serif;
-    border-radius: 0.5vh;
-    padding: 3vh 3vw;
-    margin: auto;
-    width: fit-content;
+  font-family: "Ubuntu", sans-serif;
+  border-radius: 0.5vh;
+  padding: 3vh 3vw;
+  margin: auto;
+  width: fit-content;
 }
 .blog-create label {
-    font-size: 1.7vh;
+  font-size: 1.7vh;
 }
 .blog-create h2 {
-    color: rgb(0, 70, 140);
-    font-size: 2.5vh;
-    font-weight: 900;
+  color: rgb(0, 70, 140);
+  font-size: 2.5vh;
+  font-weight: 900;
 }
 .blog-create a {
-    font-size: 1.8vh;
+  font-size: 1.8vh;
 }
-.blog-create input[type="text"] {
-    width: 60vw;
-    border: none;
-    border-bottom: 0.3vh solid rgb(0, 128, 255);
+.blog-create .ant-input {
+  width: 100%;
+  border: none;
+  border: 1px solid rgb(220, 220, 220);
 }
 .content {
-    height: 600vh;
-    width: 75vw;
-    border-radius: 0.5vh;
-    resize: none;
-    outline: none;
-    font-size: 1.8vh;
-    padding: 0.5vh 0.5vw;
+  height: 600vh;
+  width: 75vw;
+  border-radius: 0.5vh;
+  resize: none;
+  outline: none;
+  font-size: 1.8vh;
+  padding: 0.5vh 0.5vw;
 }
 .bio {
-    resize: none;
-    outline: none;
-    font-size: 1.8vh;
-    padding: 0.5vh 0.5vw;
+  resize: none;
+  outline: none;
+  font-size: 1.8vh;
+  padding: 0.5vh 0.5vw;
 }
 .blog-create-nav {
-    display: flex;
-    justify-content: center;
-}
+  display: flex;
+  justify-content: center;
+}

src/app/pages/Blogs/CreateBlog.js

@@ -1,10 +1,13 @@
 import React, { Component } from "react";
 import { Form, Input } from "antd";
-import { Redirect } from "react-router-dom";
+import { Redirect, Link } from "react-router-dom";
+import { Editor } from "react-draft-wysiwyg";
+import draftjsToHtml from "draftjs-to-html";
 
 import "./Blogs.css";
 import { Button, Navbar } from "../../components";
 import { createBlogAPI } from "../../../services/blog";
+import { routes } from "../../router/routes";
 
 class CreateBlog extends Component {
   constructor(props) {
@@ -17,53 +20,49 @@ class CreateBlog extends Component {
       status: "",
     };
     this.handleChange = this.handleChange.bind(this);
+    this.handleContentChange = this.handleContentChange.bind(this);
     this.selectMethod = this.selectMethod.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
   handleChange = (event) => {
     this.setState({ [event.target.id]: event.target.value });
   };
+  handleContentChange = (content) => {
+    this.setState({ content });
+  };
   selectMethod = (method) => {
     this.setState({ type: method });
   };
   handleSubmit = async () => {
     let status;
-    if (this.state.type === "archive")
-      status = await createBlogAPI({
-        title: this.state.title,
-        content: this.state.content,
-        is_published: false,
-        author: this.state.user.pk,
-      });
-    else
-      status = await createBlogAPI({
-        title: this.state.title,
-        content: this.state.content,
-        is_published: true,
-        author: this.state.user.pk,
-      });
+    status = await createBlogAPI({
+      title: this.state.title,
+      content: draftjsToHtml(this.state.content),
+      is_published: this.state.type === "publish",
+      author: this.state.user.pk,
+    });
     if (status === 200) this.setState({ isSuccess: true });
     else this.setState({ errMsg: "Some error occured." });
   };
   render() {
     return (
       <div className="CreateBlog">
         <Navbar>
-          <a href="/logout/">
+          <Link to={routes.LOGOUT}>
             <i class="material-icons">power_settings_new</i>
             <br />
             <z>Logout</z>
-          </a>
-          <a href="/writer/view/">
+          </Link>
+          <Link to={routes.VIEW_WRITER(this.state.user.username)}>
             <i class="material-icons">account_circle</i>
             <br />
             <z>Profile</z>
-          </a>
-          <a href="/feed/">
+          </Link>
+          <Link to={routes.FEED}>
             <i class="material-icons">home</i>
             <br />
             <z>Feeds</z>
-          </a>
+          </Link>
         </Navbar>
         <br />
         <br />
@@ -74,7 +73,7 @@ class CreateBlog extends Component {
             </center>
             <br />
 
-            <label for="title">Title</label>
+            <label htmlFor="title">Title</label>
             <br />
             <Form.Item
               name="title"
@@ -91,18 +90,11 @@ class CreateBlog extends Component {
             </Form.Item>
             <br />
 
-            <label for="content">Content</label>
-            <br />
-            <Form.Item
-              name="content"
-              rules={[{ required: true, message: "Write some blog content" }]}
-            >
-              <Input.TextArea
-                onChange={this.handleChange}
-                className="content"
-                rows="15"
-              />
-            </Form.Item>
+            <label>Content</label>
+            <Editor
+              onChange={this.handleContentChange}
+              editorClassName="richEditor"
+            />
             <center>
               {!this.state.isSuccess ? (
                 <err>{this.state.errMsg}</err>

src/app/pages/Features/Feed.css

@@ -11,7 +11,7 @@
   height: fit-content;
   width: 80vw;
   margin: 15px auto;
-  padding: 15px 20px 1px 20px;
+  padding: 15px 20px 5px 20px;
   border-radius: 10px;
   border: 2px solid rgb(230, 230, 230);
 }
@@ -42,12 +42,16 @@
   border-top: 1px solid whitesmoke;
   border-bottom: 1px solid whitesmoke;
   margin: 10px 0;
-  padding: 0 10px;
+  padding: 15px 10px;
   font-size: 14px;
   text-align: justify;
   white-space: pre-line;
   overflow: hidden;
 }
+.Blog-Body > * {
+  margin: 0;
+  padding: 0;
+}
 .Blog-Nav {
   display: flex;
   align-items: center;
@@ -67,6 +71,12 @@
   display: flex;
   align-items: center;
 }
+.Blog-Nav span p {
+  margin: 0;
+  color: rgb(100, 100, 100);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1.8vh;
+}
 .Blog-Nav .bookmarked,
 .Blog-Nav .not-bookmarked:hover {
   color: dodgerblue;

src/app/pages/Features/Feed.js

@@ -132,11 +132,14 @@ class Feed extends Component {
                     <FeatherIcon icon="more-vertical" />
                   </div>
                 </div>
-                <div className="Blog-Body">
+                <div
+                  className="Blog-Body"
+                  // dangerouslySetInnerHTML={{ __html: blog.content }}
+                >
                   {window.screen.width > 600 ? (
-                    <p>{ellipsis(blog.content, 600)}</p>
+                    <p>{ellipsis(blog.summary, 600)}</p>
                   ) : (
-                    <p>{ellipsis(blog.content, 300)}</p>
+                    <p>{ellipsis(blog.summary, 300)}</p>
                   )}
                 </div>
                 <div className="Blog-Nav">