Creating the post form

app.js

@@ -6,6 +6,7 @@ const middleware = require('./middleware');
 const loginRoute = require('./routes/loginRoutes');
 const registerRoute = require('./routes/registerRoutes');
 const logoutRoute = require('./routes/logoutRoutes')
+const postsApiRoute = require('./routes/api/posts')
 const mongoose = require('./database')
 const config = require('./config')
 
@@ -26,9 +27,11 @@ app.use(session({
     saveUninitialized: false
 }));
 
+
 app.use("/login", loginRoute);
 app.use("/logout", logoutRoute);
 app.use("/register", registerRoute);
+app.use("/api/posts", postsApiRoute);
 
 app.get("/", middleware.requireLogin, (req, res, next) => {
 

public/css/main.css

@@ -3,6 +3,14 @@
     --buttonHoverBg: #d4edff;
     --lightGrey: rgb(230, 236, 240);
     --spacing: 15px;
+    --blueLight: #9bd1f9;
+    --greyText: rgb(101, 119, 134);
+    --greyButtonText: rgba(0, 0, 0, 0.34);
+}
+
+* {
+    outline: none !important;
+
 }
 
 a {
@@ -45,7 +53,12 @@ nav a:hover {
     background-color: var(--buttonHoverBg);
     color: var(--blue);
     border-radius: 50%;
+}
 
+button {
+    background-color: transparent;
+    border: none;
+    color: var(--greyButtonText);
 }
 
 
@@ -64,9 +77,110 @@ nav a:hover {
     align-items: center;
     border-bottom: 1px solid var(--lightGrey);
     flex-shrink: 0;
-
 }
 
 .titleContainer h1 {
     flex: 1;
+}
+
+.postFormContainer {
+    display: flex;
+    padding: var(--spacing);
+    border-bottom: 10px solid rgb(230, 236, 240);
+    flex-shrink: 0;
+}
+
+.userImageContainer {
+    width: 50px;
+    height: 50px;
+}
+
+.userImageContainer img {
+    width: 100%;
+    border-radius: 50%;
+    background-color: white;
+}
+
+.textareaContainer {
+    flex: 1;
+    padding-left: var(--spacing);
+}
+
+.textareaContainer textarea{
+    width: 100%;
+    border: none;
+    resize: none;
+    font-size: 19px;
+}
+
+#submitPostButton {
+    background-color: var(--blue);
+    color: white;
+    border: none;
+    border-radius: 40px;
+    padding: 7px 15px;
+}
+
+#submitPostButton:disabled {
+    background-color: var(--blueLight);
+}
+
+.post {
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacing);
+    cursor: pointer;
+    border-bottom: 1px solid var(--lightGrey);
+    flex-shrink: 0;
+}
+
+.mainContentContainer {
+    flex: 1;
+    display: flex;
+}
+
+.postContentContainer {
+    padding-left: var(--spacing);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.username,
+.date {
+    color: var(--greyText);
+}
+
+.displayName {
+    font-weight: bold;
+}
+
+
+.postFooter {
+    display: flex;
+    align-items: center;
+}
+
+.postFooter .postButtonContainer {
+    flex: 1;
+    display: flex;
+}
+
+.postFooter .postButtonContainer button {
+    padding: 2px 5px;
+}
+
+.header a:hover {
+    text-decoration: underline;
+}
+
+.header a,
+.header span {
+    padding-right: 5px;
+}
+
+.postButtonContainer button:hover {
+    background-color: #d4edff;
+    color: var(--blue);
+    border-radius: 50%;
 }

public/js/common.js

@@ -0,0 +1,77 @@
+$("#postTextarea").keyup(event => {
+    const textbox = $(event.target)
+    const value = textbox.val().trim()
+
+    const submitButton = $("#submitPostButton");
+
+    if (submitButton.length == 0) {
+        return alert ("no submit button found");
+    };
+
+    if (value == "") {
+        submitButton.prop("disabled", true);
+        return;
+    }
+
+    submitButton.prop("disabled", false);
+})
+
+$("#submitPostButton").click(() => {
+    const button = $(event.target);
+    const textbox = $("#postTextarea");
+
+    const data = {
+        content: textbox.val()
+    }
+
+    $.post("/api/posts", data, postData => {
+
+        let html = createPostHTML(postData);
+        $(".postsContainer").prepend(html);
+        textbox.val("");
+        button.prop("disabled", true);
+
+    })
+})
+
+function createPostHTML(postData) {
+
+    const postedBy = postData.postedBy;
+    const displayName = postedBy.firstName + " " + postedBy.lastName;
+    const timestamps = postData.createdAt;
+
+    return `<div class='post'>
+                <div class='mainContentContainer'>
+                    <div class='userImageContainer'>
+                        <img src='${postedBy.profilePic}'>
+                    </div>
+                    <div class='postContentContainer'>
+                        <div class='header'>
+                            <a href='/profile/${postedBy.username}' class='displayName'>${displayName}</a>
+                            <span class='username'>@${postedBy.username}</span>
+                            <span class='date'>${timestamps}</span>
+                        </div>
+                        <div class='postBody'>
+                            <span>${postData.content}</span>
+                        </div>
+                        <div class='postFooter'>
+                            <div class='postButtonContainer'>
+                                <button>
+                                    <i class='far fa-comment'></i>
+                                </button>
+                            </div>
+                            <div class='postButtonContainer'>
+                                <button>
+                                    <i class='fas fa-retweet'></i>
+                                </button>
+                            </div>
+                            <div class='postButtonContainer'>
+                                <button>
+                                    <i class='far fa-heart'></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>`;
+}

routes/api/posts.js

@@ -0,0 +1,40 @@
+const express = require('express');
+const bodyParser = require('body-parser');
+const User = require('../../schemas/UserSchema')
+const Post = require('../../schemas/PostSchema')
+const app = express();
+const router = express.Router();
+
+
+
+app.use(bodyParser.urlencoded({ extended: false}));
+
+router.get("/", (req, res, next) => {
+})
+
+router.post("/", async (req, res, next) => {
+
+    if (!req.body.content) {
+        console.log("Нету никакого содержимого в req.body.content")
+        return res.sendStatus(400);
+    }
+
+    let postData = {
+        content: req.body.content,
+        postedBy: req.session.user
+    }
+
+    await Post.create(postData)
+    .then(async newPost => {
+        newPost = await User.populate(newPost, {path: "postedBy"})
+
+
+        res.status(201).send(newPost)
+    })
+    .catch(err => {
+        console.log(err)
+        res.sendStatus(400)
+    })
+})
+
+module.exports = router;

routes/loginRoutes.js

@@ -25,7 +25,8 @@ router.post("/", async (req, res, next) => {
                 {username: req.body.logUsername},
                 {email: req.body.logUsername}
             ]
-        }).catch((err) => {
+        })
+        .catch((err) => {
             console.log(err);
             payload.errorMessage = "Что-то пошло не так...";
             res.status(200).render("login.pug", payload);

routes/registerRoutes.js

@@ -33,7 +33,8 @@ router.post("/", async (req, res, next) => {
                 {username: username},
                 {email: email}
             ]
-        }).catch((err) => {
+        })
+        .catch((err) => {
             console.log(err);
             payload.errorMessage = "Что-то пошло не так...";
             res.status(200).render("register.pug", payload);

schemas/PostSchema.js

@@ -0,0 +1,17 @@
+const {Schema, model} = require('mongoose')
+
+const PostSchema = new Schema({
+    content: {
+        type: String,
+        trim: true
+    },
+    postedBy: {
+        type: Schema.Types.ObjectId,
+        ref: 'User'
+    },
+    pinned: Boolean
+
+}, {timestamps: true})
+
+const Post = model('Post', PostSchema);
+module.exports = Post;

schemas/UserSchema.js

@@ -30,7 +30,7 @@ const UserSchema = new Schema({
     },
     profilePic: {
         type: String,
-        default: "/images/profilePic.png"
+        default: "/images/profilePic.jpg"
     }
 }, {timestamps: true})
 

views/home.pug

@@ -1,5 +1,5 @@
 extends layouts/main-layout.pug
 
 block content 
-    h1 This is awesome 
-    p #{userLoggedIn.firstName}
+    +createPostForm(userLoggedIn)
+    .postsContainer 

views/layouts/main-layout.pug

@@ -1,5 +1,6 @@
-<!DOCTYPE html>
+include ../mixins/mixins
 
+<!DOCTYPE html>
 html(lang="en")
     head
         meta(charset="UTF-8")
@@ -32,9 +33,11 @@ html(lang="en")
 
                     block content 
                 .d-none.d-md-block.col-md-2.col-lg-4
-                    span third column 
+
 
         script(src='https://code.jquery.com/jquery-3.6.0.min.js', integrity='sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=', crossorigin='anonymous')
         script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM', crossorigin='anonymous')
         script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1', crossorigin='anonymous')
-        script(src='https://kit.fontawesome.com/a52cdcca34.js' crossorigin='anonymous')
+        script(src='https://kit.fontawesome.com/a52cdcca34.js' crossorigin='anonymous')
+
+        script(src="/js/common.js")

views/mixins/mixins.pug

@@ -0,0 +1,8 @@
+mixin createPostForm(userLoggedIn)
+    .postFormContainer 
+        .userImageContainer
+            img(src=userLoggedIn.profilePic, alt="Фото пользователя")
+        .textareaContainer 
+            textarea#postTextarea(placeholder="Что нового?")
+            .buttonsContainer
+                button#submitPostButton(disabled="") Отправить