new ui

package.json

@@ -12,6 +12,7 @@
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
     "feather-icons-react": "^0.4.3",
+    "html-to-draftjs": "^1.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-draft-wysiwyg": "^1.14.7",

src/app/components/Navbar.js

@@ -25,10 +25,10 @@ class Navbar extends Component {
         id="Navbar"
       >
         {this.props.backBtn && (
-          <div>
+          <div onClick={() => window.history.back()}>
             <nav>
-              <span class="material-icons">construction</span>
-              <p>API</p>
+              <span class="material-icons">arrow_back</span>
+              <p>Back</p>
             </nav>
           </div>
         )}

src/app/components/Stud.css

@@ -0,0 +1,16 @@
+.Stud {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: 0.3s ease-in-out;
+}
+.Stud p {
+  margin: 0;
+  transition: 0.3s ease-in-out;
+}
+.Stud span {
+  border-radius: 1000px;
+  padding: 5px;
+  transition: 0.3s ease-in-out;
+}

src/app/components/Stud.js

@@ -0,0 +1,46 @@
+import { Tooltip } from "antd";
+import React, { Component } from "react";
+
+import "./Stud.css";
+
+class Stud extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hover: false,
+    };
+    // this.method = this.method.bind(this);
+  }
+  render() {
+    return (
+      <Tooltip overlay={this.props.type} placement="top">
+        <div
+          className="Stud"
+          onMouseEnter={() => this.setState({ hover: true })}
+          onMouseLeave={() => this.setState({ hover: false })}
+          style={{
+            color:
+              this.state.hover || this.props.active
+                ? this.props.theme
+                : "rgb(150, 150, 150)",
+          }}
+        >
+          <p>{this.props.count}</p>
+          &nbsp;
+          <span
+            className="material-icons"
+            style={{
+              backgroundColor: this.state.hover
+                ? this.props.theme + "33"
+                : "transparent",
+            }}
+          >
+            {this.props.active ? this.props.icon : this.props.icon + "_border"}
+          </span>
+        </div>
+      </Tooltip>
+    );
+  }
+}
+
+export default Stud;

src/app/components/index.js

@@ -3,5 +3,6 @@ import Footer from "./Footer";
 import Logo from "./Logo";
 import Navbar from "./Navbar";
 import Portal from "./Portal";
+import Stud from "./Stud";
 
-export { Button, Footer, Logo, Navbar, Portal };
+export { Button, Footer, Logo, Navbar, Portal, Stud };

src/app/pages/Blogs/UpdateBlog.js

@@ -1,6 +1,11 @@
 import React, { Component } from "react";
-import { Form, Input } from "antd";
+import { Form, Input, message } from "antd";
 import { Redirect } from "react-router-dom";
+import { Editor } from "react-draft-wysiwyg";
+import { ContentState, EditorState, convertToRaw } from "draft-js";
+
+import draftjsToHtml from "draftjs-to-html";
+import htmlToDraftjs from "html-to-draftjs";
 
 import { Button, Navbar } from "../../components";
 import { updateBlogAPI, getBlogAPI } from "../../../services/blog";
@@ -12,50 +17,54 @@ class EditBlog extends Component {
       user: JSON.parse(localStorage.getItem("user")),
       blog: {},
       title: "",
-      content: "",
+      content: EditorState.createEmpty(),
       type: "",
       loaded: false,
     };
     this.handleChange = this.handleChange.bind(this);
     this.selectMethod = this.selectMethod.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleContentChange = this.handleContentChange.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 response;
-    if (this.state.type === "archive")
-      response = await updateBlogAPI(this.state.blog.pk, {
-        title: this.state.title,
-        content: this.state.content,
-        is_published: false,
-      });
-    else
-      response = await updateBlogAPI(this.state.blog.pk, {
-        title: this.state.title,
-        content: this.state.content,
-        is_published: true,
-      });
-    if (response.status === 200) this.setState({ isSuccess: true });
-    else this.setState({ errMsg: "Invalid content." });
+    response = await updateBlogAPI(this.props.match.params.pk, {
+      title: this.state.title,
+      content: draftjsToHtml(
+        convertToRaw(this.state.content.getCurrentContent())
+      ),
+      is_published: this.state.type === "publish",
+    });
+    if (response.status === 200) {
+      message.success("Blog updated !");
+      this.setState({ isSuccess: true });
+    } else message.error("Some error occured !");
   };
   formRef = React.createRef();
-  componentDidMount = async () => {
-    await getBlogAPI(this.props.match.params.pk).then((res) => {
+  componentDidMount = () => {
+    getBlogAPI(this.props.match.params.pk).then((res) => {
       this.setState({ blog: res, loaded: true });
-    });
-    this.setState({
-      title: this.state.blog.title,
-      content: this.state.blog.content,
-    });
-    console.log(this.state.blog.title);
-    this.formRef.current.setFieldsValue({
-      title: this.state.blog.title,
-      content: this.state.blog.content,
+      this.setState({
+        title: this.state.blog.title,
+        content: EditorState.createWithContent(
+          ContentState.createFromBlockArray(
+            htmlToDraftjs(this.state.blog.content)
+          )
+        ),
+      });
+      console.log(this.state.content);
+      this.formRef?.current?.setFieldsValue({
+        title: this.state.blog.title,
+      });
     });
   };
   render() {
@@ -97,19 +106,11 @@ class EditBlog extends Component {
 
                     <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"
-                        defaultValue={this.state.content}
-                      />
-                    </Form.Item>
+                    <Editor
+                      editorState={this.state.content}
+                      onEditorStateChange={this.handleContentChange}
+                      editorClassName="richEditor"
+                    />
 
                     <center>
                       {!this.state.isSuccess ? (
@@ -126,14 +127,14 @@ class EditBlog extends Component {
                           class="outline"
                           onClick={() => this.selectMethod("archive")}
                         >
-                          Archive
-                        </Button>{" "}
+                          Save & Archive
+                        </Button>
                         &nbsp; &nbsp; &nbsp;
                         <Button
                           class="normal"
                           onClick={() => this.selectMethod("publish")}
                         >
-                          Publish
+                          Save & Publish
                         </Button>
                       </div>
                       <br />
@@ -148,7 +149,7 @@ class EditBlog extends Component {
               </div>
             ) : (
               <Redirect to={`/feed/`} />
-            )}{" "}
+            )}
           </div>
         ) : (
           <div></div>

src/app/pages/Blogs/ViewBlog.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { message, Skeleton } from "antd";
-import { Button, Navbar } from "../../components";
+import { Button, Navbar, Stud } from "../../components";
 import { Link } from "react-router-dom";
 
 import { likeBlogAPI, saveBlogAPI, getBlogAPI } from "../../../services/blog";
@@ -41,7 +41,7 @@ class ViewBlog extends Component {
     const blog = this.state.blog;
     return (
       <div className="Feed">
-        <Navbar feed profile logout />
+        <Navbar backBtn feed profile logout />
         <div className="Blogs">
           {this.state.loaded ? (
             <div className="Blog">
@@ -66,60 +66,59 @@ class ViewBlog extends Component {
               ></div>
               {blog.author.username !== this.state.user.username ? (
                 <div className="Blog-Nav">
-                  <span>
-                    <p>{blog.no_of_likes}</p>
-                    {blog.likes.some(
-                      (like) => like.username === this.state.user.username
-                    ) ? (
-                      <button
-                        class="material-icons liked"
-                        onClick={() => this.handleLike(blog.pk)}
-                      >
-                        favorite
-                      </button>
-                    ) : (
-                      <button
-                        class="material-icons not-liked"
-                        onClick={() => this.handleLike(blog.pk)}
-                      >
-                        favorite_border
-                      </button>
-                    )}
-                  </span>
-                  {blog.saves.some(
-                    (save) => save.username === this.state.user.username
-                  ) ? (
-                    <button
-                      className="material-icons bookmarked"
-                      onClick={() => this.handleSave(blog.pk)}
-                    >
-                      bookmark
-                    </button>
-                  ) : (
-                    <button
-                      class="material-icons not-bookmarked"
-                      onClick={() => this.handleSave(blog.pk)}
-                    >
-                      bookmark_border
-                    </button>
-                  )}
+                  <div onClick={() => this.handleLike(blog.pk)}>
+                    <Stud
+                      type="Like"
+                      icon="favorite"
+                      theme="#ff6347"
+                      count={blog.no_of_likes}
+                      active={blog.likes.some(
+                        (like) => like.username === this.state.user.username
+                      )}
+                    />
+                  </div>
+                  <div onClick={() => this.handleSave(blog.pk)}>
+                    <Stud
+                      type="Save"
+                      icon="bookmark"
+                      theme="#1e90ff"
+                      active={blog.saves.some(
+                        (like) => like.username === this.state.user.username
+                      )}
+                    />
+                  </div>
                 </div>
               ) : (
-                <div className="Blog-View-Nav">
-                  <Button class="normal" href={routes.EDIT_BLOG(blog.pk)}>
-                    Edit Blog
-                  </Button>
-                  <Button class="danger" href={routes.DELETE_BLOG(blog.pk)}>
-                    Delete Blog
-                  </Button>
-                  <Button
-                    class="normal"
+                <div className="Blog-Nav">
+                  <div onClick={() => this.handleLike(blog.pk)}>
+                    <Stud
+                      type="Like"
+                      icon="favorite"
+                      theme="#ff6347"
+                      count={blog.no_of_likes}
+                      active={blog.likes.some(
+                        (like) => like.username === this.state.user.username
+                      )}
+                    />
+                  </div>
+                  <Link to={routes.EDIT_BLOG(blog.pk)}>
+                    <Stud type="Edit" icon="edit" theme="#1e90ff" active />
+                  </Link>
+                  <div
                     onClick={() =>
-                      message.warning("This button is currently unavailable !")
+                      message.warn("This button is currently unavailable !")
                     }
                   >
-                    {blog.is_published ? "Archive Blog" : "Publish Blog"}
-                  </Button>
+                    <Stud
+                      type={blog.is_published ? "Archive" : "Publish"}
+                      icon={blog.is_published ? "archive" : "library_books"}
+                      theme="#008000"
+                      active
+                    />
+                  </div>
+                  <Link to={routes.DELETE_BLOG(blog.pk)}>
+                    <Stud type="Delete" icon="delete" theme="#ff6347" active />
+                  </Link>
                 </div>
               )}
             </div>