⚙️🎥 | #7: Form for adding posts

src/components/Feed/Feed.jsx

@@ -1,11 +1,21 @@
 import {useMoralisDapp} from "providers/MoralisDappProvider/MoralisDappProvider"
-import {Avatar } from "antd"
+import { useState } from "react"
+
+import {Avatar, button } from "antd"
 import glStyles from "components/gstyles"
 import Blockie from "components/Blockie"
+import AddPost from "./AddPost"
 
 const Feed = () => {
     const [setSelectedCategory] = useMoralisDapp();
+    const [showAddPost, setShowAddPost] = useState(false);
+
     let result = null;
+
+    function toggleShowAddPost() {
+        setShowAddPost(!showAddPost);
+    }
+
     if (selectedCategory["category"] === "default") {
         result = (
             <div className="col-lg-9">
@@ -14,17 +24,24 @@ const Feed = () => {
         );
     } else {
         result = (
+        <div className="col-lg-9">
             <div
-            style={{
-                ...glStyles.card,
-                padding: "10px 13px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-            }}
-        >
-            <Avatar src={<Blockie currentWallet />} />
+                style={{
+                    ...glStyles.card,
+                    padding: "10px 13px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                }}
+            >
+                <Avatar src={<Blockie currentWallet />} />
+                <h4> Your reputation in {selectedCategory["category"]} is {""}</h4>
+                <button shape="round" onClick={toggleShowAddPost}>
+                    Post
+                </button>
             </div>
+            <AddPost/>
+        </div>
         )
     }
 

src/components/Feed/components/AddPost.jsx

@@ -0,0 +1,36 @@
+import { useStat } from "react";
+
+const AddPost = () => {
+    const [title, setTitle] = useState("");
+    const [content, setContent] = useState("");
+
+    function onSubmit(e){
+        e.preventDefault();
+        console.log(title, content);
+    }
+
+    return (
+        <form onSubmit={onSubmit}>
+        <div classname="row">
+            <div className="form-group">
+                <input
+                type="text"
+                className="mb-2 mt-2 form-control"
+                placeholder="Title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                />
+                <textarea
+                type='text'
+                className="mb-2 form-control"
+                placeholder="Post away"
+                rows="5"
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                />
+            </div>
+            <button type="submit" className="btn btn-dark ">Submit</button>
+        </div>
+    </form>
+    )
+}

src/components/README.md

@@ -1,3 +1,4 @@
 What is each file for?
 
-`gstyles.js` -> Highlighting which category you're on (used in `Categories.jsx`)
+`gstyles.js` -> Highlighting which category you're on (used in `Categories.jsx`)
+`Feed/components/AddPost.jsx` -> Creates a form for adding a post in any of the categories (used in `Feed.jsx`)