15 |
20 | {children}
16 |
17 |
19 |
17 | {width <= 650 ? (
18 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/routes/commentRoutes.js:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import {
3 | addComment,
4 | deleteComment,
5 | updateComment,
6 | } from "../services/commentServices";
7 |
8 | const router = express.Router();
9 |
10 | router.post("/", async (req, res) => {
11 | try {
12 | const result = await addComment(req.body.comment);
13 | res.send(result);
14 | } catch (error) {
15 | console.log(error);
16 | return res.status(500).json({ error: error.toString() });
17 | }
18 | });
19 |
20 | router.put("/", async (req, res) => {
21 | try {
22 | const result = await updateComment(req.body.comment);
23 | res.send(result);
24 | } catch (error) {
25 | console.log(error);
26 | return res.status(500).json({ error: error.toString() });
27 | }
28 | });
29 |
30 | router.delete("/:id", async (req, res) => {
31 | try {
32 | const result = await deleteComment(req.params.id);
33 | res.send(result);
34 | } catch (error) {
35 | console.log(error);
36 | return res.status(500).json({ error: error.toString() });
37 | }
38 | });
39 |
40 | export default router;
41 |
--------------------------------------------------------------------------------
/src/services/postServices.js:
--------------------------------------------------------------------------------
1 | import Post from "./../models/post";
2 | import User from "./../models/user";
3 |
4 | export const getAllPosts = async () => {
5 | return await Post.find({});
6 | };
7 |
8 | export const getOnePost = async (id) => {
9 | //find post
10 | const post = await Post.findById(id).populate({
11 | path: "comments",
12 | populate: {
13 | path: "createdBy",
14 | },
15 | });
16 |
17 | let res;
18 | if (post) {
19 | //get the name of the creator
20 | const user = await User.findById(post.createdBy);
21 | res = {
22 | ...post.toObject(),
23 | createdByName: user.userName,
24 | userImageUrl: user.imagePath,
25 | };
26 | }
27 | return res;
28 | };
29 |
30 | export const getPostByUserID = async (userId) => {
31 | return await Post.find({ createdBy: userId });
32 | };
33 |
34 | export const addPost = async (post) => {
35 | //add post
36 | return await Post.create(post);
37 | };
38 |
39 | export const updatePost = async (post) => {
40 | return await Post.findByIdAndUpdate(post._id, post);
41 | };
42 |
43 | export const deletePost = async (id) => {
44 | return await Post.findOneAndRemove({ _id: id });
45 | };
46 |
--------------------------------------------------------------------------------
/src/services/userServices.js:
--------------------------------------------------------------------------------
1 | import User from "./../models/user";
2 |
3 | export const getAllUsers = async () => {
4 | return await User.find({});
5 | };
6 |
7 | export const getOneUser = async (id) => {
8 | let user = await User.findById(id);
9 | let res = user.toObject();
10 | delete res.password;
11 | return res;
12 | };
13 |
14 | export const addUser = async (user) => {
15 | return await User.create(user);
16 | };
17 |
18 | export const updateUser = async (user) => {
19 | let res;
20 | //check if the user is updating the profile or the password
21 | if (user.password) {
22 | const foundUser = await User.findById(user._id);
23 | //check if the old password matches the one in the db
24 | if (!foundUser.validPassword(user.oldPassword)) {
25 | throw new Error("Incorrect old password");
26 | }
27 | //encrypt the password
28 | foundUser.password = foundUser.encryptPassword(user.password);
29 | res = await User.findByIdAndUpdate(user._id, foundUser);
30 | } else {
31 | res = await User.findByIdAndUpdate(user._id, user);
32 | }
33 | return res;
34 | };
35 |
36 | export const deleteUser = async (id) => {
37 | return await User.findOneAndRemove({ _id: id });
38 | };
39 |
--------------------------------------------------------------------------------
/client/src/api/api.js:
--------------------------------------------------------------------------------
1 | import Axios from "axios";
2 | const axiosConfig = {
3 | baseURL: `${process.env.REACT_APP_API_URL || `http://:${window.location.hostname}:${process.env.REACT_APP_API_PORT || 5000}`}/api`,
4 | };
5 |
6 | const axios = Axios.create(axiosConfig);
7 |
8 | // AUTH
9 | export const authAPI = {
10 | login: (data) => axios.post(`/auth/login`, data),
11 | signup: (data) => axios.post(`/auth/signup`, data),
12 | };
13 |
14 | // USERS
15 | export const usersAPI = {
16 | getAll: () => axios.get(`/users`),
17 | getOne: (id) => axios.get(`/users/${id}`),
18 | add: (data) => axios.post(`/users`, data),
19 | update: (data) => axios.put(`/users`, data),
20 | delete: (id) => axios.delete(`/users/${id}`),
21 | };
22 |
23 | // POSTS
24 | export const postsAPI = {
25 | getAll: () => axios.get(`/posts`),
26 | getPostByUserId: (id) => axios.get(`/posts/user/${id}`),
27 | getOne: (id) => axios.get(`/posts/${id}`),
28 | add: (data) => axios.post(`/posts`, data),
29 | update: (data) => axios.put(`/posts`, data),
30 | delete: (id) => axios.delete(`/posts/${id}`),
31 | };
32 |
33 | // COMMENTS
34 | export const commentsAPI = {
35 | add: (data) => axios.post(`/comments`, data),
36 | update: (data) => axios.put(`/comments`, data),
37 | delete: (id) => axios.delete(`/comments/${id}`),
38 | };
39 |
--------------------------------------------------------------------------------
/client/src/pages/Login/Login.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { Player } from "@lottiefiles/react-lottie-player";
3 | import "./Login.scss";
4 | import LoginForm from "./LoginForm";
5 |
6 | export default function Login() {
7 | const [width, setWidth] = useState(window.innerWidth);
8 | useEffect(() => {
9 | function handleResize() {
10 | setWidth(window.innerWidth);
11 | }
12 | window.addEventListener("resize", handleResize);
13 | return () => window.removeEventListener("resize", handleResize);
14 | }, [width]);
15 |
16 | return (
17 |
19 |
22 | ) : (
23 | <>
24 | Sign up for free
20 |
25 |
28 |
29 | )}
30 | Sign up for free
26 |
18 | {width <= 650 ? (
19 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
1 | import { Switch, Route } from "react-router-dom";
2 | import Layout from "./components/Layout/Layout";
3 | import Home from "./pages/Home/Home";
4 | import Login from "./pages/Login/Login";
5 | import Signup from "./pages/Signup/Signup";
6 | import NewPost from "./pages/Posts/NewPost";
7 | import UserPosts from "./pages/Posts/UserPosts";
8 | import EditPost from "./pages/Posts/EditPost";
9 | import UserProfile from "./pages/Users/UserProfile";
10 | import Post from "./pages/Posts/Post";
11 | import LoggedInRoute from "./LoggedInRoute";
12 | import NotLoggedInRoute from "./NotLoggedInRoute";
13 | import NotFound from "./pages/NotFound/NotFound";
14 |
15 | function App() {
16 | return (
17 |
20 |
22 | ) : (
23 | <>
24 |
25 |
27 |
28 |
38 |
39 | )}
40 | 29 | #1 Bloggin website for everyone around the globe. Totally free and 30 | easy to use. 31 |
32 |
21 |
77 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/client/src/pages/Posts/UserPosts.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { useSelector } from "react-redux";
3 | import { postsAPI } from "./../../api/api";
4 | import { useLocation } from "react-router-dom";
5 | import PostsGrid from "../../components/PostsGrid/PostsGrid";
6 | import { Form, Input, Button, Tag, message, Image, Spin, Alert } from "antd";
7 |
8 | export default function UserPosts() {
9 | const userState = useSelector((st) => st.user);
10 | const [width, setWidth] = useState(window.innerWidth);
11 | const [postsData, setPostsData] = useState([]);
12 | const location = useLocation();
13 | const [userName, setUserName] = useState(null);
14 | const [userID, setUserID] = useState(null);
15 | const [reload, setReload] = useState(false);
16 | const [errorMsg, setErrorMsg] = useState(null);
17 |
18 | useEffect(() => {
19 | function handleResize() {
20 | setWidth(window.innerWidth);
21 | }
22 | window.addEventListener("resize", handleResize);
23 | return () => window.removeEventListener("resize", handleResize);
24 | }, [width]);
25 |
26 | const getPostsData = async () => {
27 | try {
28 | const { data: res } = await postsAPI.getPostByUserId(
29 | userID ?? userState.user.id
30 | );
31 | setPostsData(res);
32 | setErrorMsg(null);
33 | } catch (error) {
34 | setPostsData([]);
35 | setErrorMsg("Error loading user posts");
36 | console.log("Error retrieving all posts...", error);
37 | }
38 | };
39 |
40 | useEffect(() => {
41 | (async () => {
42 | if (
43 | location.state &&
44 | location.state.hasOwnProperty("userID") &&
45 | location.state.hasOwnProperty("userName")
46 | ) {
47 | setUserName(location.state.userName);
48 | setUserID(location.state.userID);
49 | }
50 |
51 | getPostsData();
52 | })();
53 | }, [location.state]);
54 |
55 | useEffect(() => {
56 | getPostsData();
57 | }, [reload]);
58 |
59 | return (
60 |
61 | {errorMsg ? (
62 | setReload(reloadTrigger)}
76 | />
77 | ) : (
78 |
83 | );
84 | }
85 |
--------------------------------------------------------------------------------
/client/src/pages/Comments/CommentForm.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useHistory } from "react-router-dom";
3 | import { Form, Input, Button, Tag, message, Alert } from "antd";
4 | import { Form as FinalForm, Field } from "react-final-form";
5 | import isEmpty from "lodash.isempty";
6 | import { commentsAPI } from "./../../api/api";
7 |
8 | export default function CommentForm({ createdBy, postId, setReloadingFlag }) {
9 | const router = useHistory();
10 | const [initialValues, setInitialValues] = useState({});
11 | const [submissionErrors, setSubmissionErrors] = useState(null);
12 | const [reloading, setReloading] = useState(false);
13 |
14 | const onSubmit = async (event) => {
15 | if (isEmpty(event) || !event.content) {
16 | setSubmissionErrors("Can't submit an empty comment");
17 | } else {
18 | setSubmissionErrors(null);
19 | }
20 |
21 | try {
22 | await commentsAPI.add({
23 | comment: { ...event, createdBy: createdBy, postId: postId },
24 | });
25 | message.success("Comment added successfully");
26 | setReloading(!reloading);
27 | setReloadingFlag(reloading);
28 | } catch (error) {
29 | console.log("Error adding comment...", error.response ?? error);
30 | if (error.response && error.response.data) {
31 | setSubmissionErrors(error.response.data);
32 | } else setSubmissionErrors("Error adding comment");
33 | }
34 | };
35 |
36 | return (
37 |
63 |
65 | ) : Object.keys(postsData).length === 0 ? (
66 |
67 |
69 | ) : (
70 | <>
71 | {userName ? `Posts of user ${userName}` : "Your posts"}
72 | {Boolean(postsData) && Boolean(postsData.length) ? ( 73 |You have no posts yet
79 | )} 80 | 81 | )} 82 |
38 | (
42 |
85 | )}
86 | />
87 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # MERN-Blog
2 |
3 | ## Table of contents
4 |
5 | - [Introduction](#introduction)
6 | - [Demo](#demo)
7 | - [Features](#features)
8 | - [Technology](#technology)
9 | - [Database Models](#database)
10 | - [Run](#run)
11 | - [License](#license)
12 |
13 | ## Introduction
14 |
15 | A virtual blog application using the MERN stack (MongoDB, Express js, React js, and Node js).
16 |
17 | ## Demo
18 |
19 | 
20 |
21 | 
22 |
23 | This application is deployed on Heroku and can be accessed through the following link:
24 |
25 | [MERN Blog on Heroku](https://mern-blog-01.herokuapp.com/)
26 |
27 | ## Technology
28 |
29 | The main technologies used to build this application are:
30 |
31 | - Node.js version 14.16.0
32 | - MongoDB version 4.4.3
33 | - Express.js version 4.17.1
34 | - React.js version 17.0.1
35 | - Antd, a React UI Framework, version 4.12.3
36 |
37 | ## Features
38 |
39 | A blog app with the following features.
40 |
41 | Unlogged in users can do the following:
42 |
43 | - View all posts.
44 | - View one post's content by clicking on it.
45 | - View post's comments.
46 | - View any user's profile.
47 | - Signup.
48 |
49 | In addition to the above points, logged in users can do the following:
50 |
51 | - Login or logout.
52 | - Create a new post.
53 | - View/Edit/delete their posts.
54 | - Edit their user profile or password.
55 | - Add a new comment on a post.
56 | - View/Edit/Delete their comments.
57 |
58 | ## Database
59 |
60 | All the models can be found in the models directory created using mongoose.
61 |
62 | ### User Schema:
63 |
64 | - userName (String)
65 | - email (String)
66 | - password (String)
67 | - summary (String)
68 | - imagePath (String)
69 |
70 | ### Post Schema:
71 |
72 | - title (String)
73 | - content (String)
74 | - imagePath (String)
75 | - createdAt (Date)
76 | - createdBy (ObjectID - a reference to the user's table)
77 | - comments (ObjectID - an array of comments on the post)
78 |
79 | ### Comment Schema:
80 |
81 | - content (String)
82 | - createdAt (Date)
83 | - createdBy (ObjectID - a reference to the user's table)
84 |
85 | ## Run
86 |
87 | To run this application (the master branch), you have to set your own environmental variables in the server root folder. For security reasons, some variables have been hidden from view and used as environmental variables with the help of dotenv package. Below are the variables that you need to set in order to run the application:
88 |
89 | - MONGO_URI: this is the connection string of your MongoDB Atlas database.
90 |
91 | - SECRET_KEY: you can provide any string here, it is used to encrypt the JWT authentication token.
92 |
93 | After you've set these environmental variables in the .env file at the root of the server folder, you need to navigate to the "seedDB" folder and run "node -r esm seedPosts.js" and "node -r esm seedUsers.js" to fill your empty MongoDB Atlas database.
94 |
95 | Now that the database has data and the environmental variables are all set, you should run the two folders, the client and server together to run the application. Open two terminals, navigate to the client in one and to the server in another, run "npm start" in both terminals and the application should start.
96 |
97 | ## License
98 |
99 | [](http://badges.mit-license.org)
100 |
101 | - MIT License
102 | - Copyright 2021 © [Maryam Aljanabi](https://github.com/maryamaljanabi)
103 |
--------------------------------------------------------------------------------
/client/src/components/PostsGrid/PostsGrid.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Row, Col, Card, Modal, message } from "antd";
3 | import defaultPostImage from "./../../assets/images/default-post-image.jpg";
4 | import { EditTwoTone, DeleteTwoTone } from "@ant-design/icons";
5 | import { useHistory } from "react-router";
6 | import "./PostsGrid.scss";
7 | import { postsAPI } from "./../../api/api";
8 | import { useSelector } from "react-redux";
9 |
10 | const { Meta } = Card;
11 |
12 | export default function PostsGrid({ data, reloadPosts }) {
13 | const router = useHistory();
14 | const [deleteModal, setDeleteModal] = useState(false);
15 | const [deletePostID, setDeletePostID] = useState(null);
16 | const [reload, setReload] = useState(false);
17 | const userState = useSelector((st) => st.user);
18 |
19 | const confirmDelete = async () => {
20 | try {
21 | await postsAPI.delete(deletePostID);
22 | setReload(!reload);
23 | reloadPosts(!reload);
24 | setDeleteModal(false);
25 | message.success("Post deleted successfully");
26 | } catch (error) {
27 | console.log("Error deleting post...", error.response ?? error);
28 | message.error("Error deleting post");
29 | if (error.response && error.response.data) {
30 | message.error(error.response.data);
31 | } else message.error("Error deleting post");
32 | setDeleteModal(false);
33 | }
34 | };
35 |
36 | return (
37 |
38 |
39 | {data.map((item) => (
40 |
47 | router.push("/posts/view", { postID: item._id })
48 | }
49 | >
50 | 
55 |
56 | }
57 | actions={
58 | item.createdBy === userState.user.id
59 | ? [
60 | Are you sure you want to delete post?
96 |
44 | (
50 |
113 | )}
114 | />
115 |
116 | );
117 | }
118 |
--------------------------------------------------------------------------------
/client/src/pages/Comments/CommentsMobile.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import defaultUser from "./../../assets/images/default-user.png";
3 | import Avatar from "antd/lib/avatar/avatar";
4 | import "./Comments.scss";
5 | import moment from "moment";
6 | import { EditTwoTone, DeleteTwoTone } from "@ant-design/icons";
7 | import { Form as FinalForm, Field } from "react-final-form";
8 | import { Form, Input, Button, Alert } from "antd";
9 |
10 | export default function CommentsMobile({
11 | comment,
12 | index,
13 | userState,
14 | setDeleteModal,
15 | selectedEditCommentID,
16 | setDeleteSelectedCommentID,
17 | setEditSelectedCommentID,
18 | onSubmit,
19 | }) {
20 | const [initialValues, setInitialValues] = useState({});
21 | const [submissionErrors, setSubmissionErrors] = useState(null);
22 | return (
23 | Create a new post
45 |
24 |
115 | );
116 | }
117 |
--------------------------------------------------------------------------------
/client/src/pages/Comments/CommentsDesktop.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import defaultUser from "./../../assets/images/default-user.png";
3 | import Avatar from "antd/lib/avatar/avatar";
4 | import "./Comments.scss";
5 | import moment from "moment";
6 | import { EditTwoTone, DeleteTwoTone } from "@ant-design/icons";
7 | import { Form as FinalForm, Field } from "react-final-form";
8 | import { Form, Input, Button, Alert } from "antd";
9 |
10 | export default function CommentsDesktop({
11 | comment,
12 | index,
13 | userState,
14 | setDeleteModal,
15 | selectedEditCommentID,
16 | setDeleteSelectedCommentID,
17 | setEditSelectedCommentID,
18 | onSubmit,
19 | }) {
20 | const [initialValues, setInitialValues] = useState({});
21 | const [submissionErrors, setSubmissionErrors] = useState(null);
22 | return (
23 |
25 |
27 |
28 |
114 |
29 | {comment.createdBy.userName}
30 |
89 |
90 | {comment._id !== selectedEditCommentID && (
91 | <>
92 | {comment.createdBy._id === userState.user.id && (
93 |
31 | {moment(comment.createdAt).fromNow(false)}
32 |
33 |
34 | {comment._id === selectedEditCommentID ? (
35 | (
39 |
82 | )}
83 | />
84 | ) : (
85 | comment.content
86 | )}
87 |
88 |
94 | {
97 | setEditSelectedCommentID(comment._id);
98 | setInitialValues({ ...comment });
99 | }}
100 | />
101 | {
105 | setDeleteSelectedCommentID(comment._id);
106 | setDeleteModal(true);
107 | }}
108 | />
109 |
110 | )}
111 |
112 | )}
113 |
24 |
118 | );
119 | }
120 |
--------------------------------------------------------------------------------
/client/src/pages/Comments/Comments.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import defaultUser from "./../../assets/images/default-user.png";
3 | import Avatar from "antd/lib/avatar/avatar";
4 | import "./Comments.scss";
5 | import moment from "moment";
6 | import { EditTwoTone, DeleteTwoTone } from "@ant-design/icons";
7 | import { useSelector } from "react-redux";
8 | import { Form as FinalForm, Field } from "react-final-form";
9 | import { Form, Input, Button, message, Alert, Modal } from "antd";
10 | import { commentsAPI } from "../../api/api";
11 | import isEmpty from "lodash.isempty";
12 | import CommentsDesktop from "./CommentsDesktop";
13 | import CommentsMobile from "./CommentsMobile";
14 |
15 | export default function Comments({
16 | data,
17 | setDeleteReloadingFlag,
18 | setEditReloadingFlag,
19 | }) {
20 | const userState = useSelector((st) => st.user);
21 | const [deleteModal, setDeleteModal] = useState(false);
22 | const [selectedDeleteCommentID, setDeleteSelectedCommentID] = useState(null);
23 | const [selectedEditCommentID, setEditSelectedCommentID] = useState(null);
24 | const [deleteReloading, setDeleteReloading] = useState(false);
25 | const [editReloading, setEditReloading] = useState(false);
26 | const [initialValues, setInitialValues] = useState({});
27 | const [submissionErrors, setSubmissionErrors] = useState(null);
28 | const [width, setWidth] = useState(window.innerWidth);
29 |
30 | useEffect(() => {
31 | function handleResize() {
32 | setWidth(window.innerWidth);
33 | }
34 | window.addEventListener("resize", handleResize);
35 | return () => window.removeEventListener("resize", handleResize);
36 | }, [width]);
37 |
38 | const confirmDelete = async () => {
39 | try {
40 | await commentsAPI.delete(selectedDeleteCommentID);
41 | setDeleteModal(false);
42 | message.success("Comment deleted successfully");
43 | setDeleteReloadingFlag(!deleteReloading);
44 | setDeleteReloading(!deleteReloading);
45 | } catch (error) {
46 | console.log("Error deleting comment...", error.response ?? error);
47 | message.error("Error deleting comment");
48 | if (error.response && error.response.data) {
49 | message.error(error.response.data);
50 | } else message.error("Error deleting comment");
51 | setDeleteModal(false);
52 | }
53 | };
54 |
55 | const onSubmit = async (event) => {
56 | if (isEmpty(event) || !event.content) {
57 | setSubmissionErrors("Can't submit an empty comment");
58 | } else {
59 | setSubmissionErrors(null);
60 | }
61 |
62 | try {
63 | await commentsAPI.update({
64 | comment: { ...event },
65 | });
66 | message.success("Comment updated successfully");
67 | setEditReloadingFlag(!editReloading);
68 | setEditReloading(!editReloading);
69 | setEditSelectedCommentID(null);
70 | } catch (error) {
71 | console.log("Error editing comment...", error.response ?? error);
72 | message.error("Error editing comment");
73 | }
74 | };
75 |
76 | return (
77 |
25 |
27 |
32 |
117 |
33 | {comment.createdBy.userName}
34 |
90 |
35 | {comment._id === selectedEditCommentID ? (
36 | (
40 |
83 | )}
84 | />
85 | ) : (
86 | comment.content
87 | )}
88 |
89 |
91 | {comment._id !== selectedEditCommentID && (
92 | <>
93 | {moment(comment.createdAt).fromNow(false)}
94 | {comment.createdBy._id === userState.user.id && (
95 |
116 |
96 | {
99 | setEditSelectedCommentID(comment._id);
100 | setInitialValues({ ...comment });
101 | }}
102 | />
103 | {
107 | setDeleteSelectedCommentID(comment._id);
108 | setDeleteModal(true);
109 | }}
110 | />
111 |
112 | )}
113 |
114 | )}
115 |
78 | {data && Boolean(data.length)
79 | ? data.length === 1
80 | ? `${data.length} Comment`
81 | : `${data.length} Comments`
82 | : null}
83 |
84 | {data.map((comment, index) =>
85 | width >= 580 ? (
86 | confirmDelete()}
116 | onCancel={() => setDeleteModal(false)}
117 | centered
118 | >
119 |
121 |
122 | );
123 | }
124 |
--------------------------------------------------------------------------------
/client/src/pages/Posts/EditPost.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { useHistory, useLocation } from "react-router-dom";
3 | import { Form, Input, Button, Tag, message } from "antd";
4 | import { Form as FinalForm, Field } from "react-final-form";
5 | import isEmpty from "lodash.isempty";
6 | import { useSelector } from "react-redux";
7 | import TextArea from "antd/lib/input/TextArea";
8 | import { postsAPI } from "./../../api/api";
9 |
10 | export default function EditPost() {
11 | const router = useHistory();
12 | const [initialValues, setInitialValues] = useState({});
13 | const [submissionErrors, setSubmissionErrors] = useState({});
14 | const userState = useSelector((st) => st.user);
15 | const location = useLocation();
16 | const [postID, setPostID] = useState(null);
17 |
18 | useEffect(() => {
19 | let id = null;
20 | (async () => {
21 | if (location.state && location.state.hasOwnProperty("postID")) {
22 | id = location.state.postID;
23 | setPostID(id);
24 | try {
25 | const { data: res } = await postsAPI.getOne(id);
26 | console.log(res);
27 | setInitialValues(res);
28 | } catch (error) {
29 | console.log("Error retrieving one post...", error);
30 | }
31 | } else {
32 | message.error("Post ID was not provided");
33 | router.goBack();
34 | }
35 | })();
36 | }, [location.state]);
37 |
38 | const onSubmit = async (event) => {
39 | try {
40 | await postsAPI.update({
41 | post: event,
42 | });
43 | message.success("Post updated successfully");
44 | router.goBack();
45 | } catch (error) {
46 | console.log("Error updating post...", error.response ?? error);
47 | if (error.response && error.response.data) {
48 | setSubmissionErrors(error.response.data);
49 | } else setSubmissionErrors({ err: "Update error" });
50 | }
51 | };
52 |
53 | const checkValidation = (values) => {
54 | const errors = {};
55 | if (!values.title?.trim()) {
56 | errors.title = "Please enter the post's title";
57 | }
58 | if (!values.content?.trim()) {
59 | errors.content = "Please enter the post's content";
60 | }
61 | return errors;
62 | };
63 |
64 | return (
65 | Are you sure you want to delete this comment?
120 |
66 | (
72 |
135 | )}
136 | />
137 |
138 | );
139 | }
140 |
--------------------------------------------------------------------------------
/client/src/assets/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import "./variables.scss";
2 |
3 | body {
4 | margin: 0;
5 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
6 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
7 | sans-serif;
8 | -webkit-font-smoothing: antialiased;
9 | -moz-osx-font-smoothing: grayscale;
10 | }
11 |
12 | code {
13 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
14 | monospace;
15 | }
16 |
17 | //ANTD OVERRIDE
18 |
19 | .ant-card {
20 | margin: auto !important;
21 | }
22 | .ant-card-bordered {
23 | border-radius: 10px !important;
24 | width: 90%;
25 | margin: 1rem !important;
26 | // height: 500px;
27 | img {
28 | border-top-left-radius: 10px !important;
29 | border-top-right-radius: 10px !important;
30 | }
31 | }
32 |
33 | .ant-card-body {
34 | height: 150px;
35 | }
36 |
37 | .ant-card-actions {
38 | border-radius: 0 0 10px 10px;
39 | }
40 |
41 | .ant-divider-horizontal.ant-divider-with-text {
42 | margin: 2.5rem 0 0 0 !important;
43 | font-size: 1.4rem;
44 | }
45 |
46 | .ant-input,
47 | .ant-input-affix-wrapper {
48 | line-height: 2 !important;
49 | border-radius: 10px !important;
50 | }
51 |
52 | .no-radius {
53 | .ant-input,
54 | .ant-input-affix-wrapper {
55 | line-height: 2 !important;
56 | border-radius: 2px !important;
57 | }
58 | }
59 |
60 | .ant-btn {
61 | border-radius: 10px !important;
62 | height: 40px !important;
63 | }
64 |
65 | .ant-tag {
66 | margin: 0.5rem 0 !important;
67 | font-size: 0.9rem !important;
68 | border-radius: 5px !important;
69 | }
70 |
71 | //CUSTOM CLASSES
72 |
73 | .page-container {
74 | position: relative;
75 | min-height: 100vh;
76 | }
77 |
78 | .page-content {
79 | padding-bottom: 2.5rem;
80 | }
81 | .footer {
82 | position: absolute;
83 | bottom: 0;
84 | width: 100%;
85 | padding: 1rem;
86 | text-align: center;
87 | background-color: $DarkBlue;
88 | color: white;
89 | }
90 |
91 | .m-auto {
92 | margin: auto;
93 | }
94 |
95 | .loader-container {
96 | margin: 20px 0;
97 | margin-bottom: 20px;
98 | padding: 30px 50px;
99 | text-align: center;
100 | border-radius: 4px;
101 | }
102 |
103 | .disabled {
104 | background: white;
105 | color: black;
106 | border: none !important;
107 | box-shadow: none !important;
108 | font-weight: bold;
109 | padding-left: 0 !important;
110 | cursor: auto;
111 | &:hover,
112 | &:active {
113 | border: none !important;
114 | box-shadow: none !important;
115 | }
116 | }
117 |
118 | .form-container {
119 | width: 60%;
120 | background-color: white;
121 | color: black;
122 | margin: 2rem auto;
123 | padding: 1rem;
124 | -webkit-box-shadow: -2px 5px 14px -1px rgba(0, 0, 0, 0.77);
125 | box-shadow: -2px 5px 14px -1px rgba(0, 0, 0, 0.2);
126 | border: 1px solid $LightestGray;
127 | border-radius: 10px;
128 | }
129 |
130 | .float-right {
131 | float: right;
132 | }
133 |
134 | .unhoverable-menu-item {
135 | color: white !important;
136 | opacity: 1 !important;
137 | &:hover {
138 | background-color: transparent !important;
139 | color: inherit !important;
140 | }
141 | }
142 |
143 | .form {
144 | width: 100%;
145 | padding: 1rem;
146 | display: flex;
147 | flex-direction: column;
148 | }
149 |
150 | .buttons-wrapper-vertical {
151 | display: flex;
152 | flex-direction: column;
153 | gap: 0.5rem;
154 | }
155 |
156 | .buttons-wrapper-horizontal {
157 | display: flex;
158 | flex-direction: row;
159 | gap: 0.5rem;
160 | }
161 |
162 | .my-2-auto {
163 | margin: 2rem auto;
164 | }
165 |
166 | .centered-text {
167 | text-align: center;
168 | }
169 |
170 | .two-cols {
171 | display: flex;
172 | flex-direction: row;
173 | justify-content: space-between;
174 | align-items: baseline;
175 | margin: 2rem auto !important;
176 | }
177 |
178 | .center-panel {
179 | background-color: white;
180 | color: black;
181 | margin: 2rem;
182 | padding: 1rem;
183 | -webkit-box-shadow: -2px 5px 14px -1px rgba(0, 0, 0, 0.77);
184 | box-shadow: -2px 5px 14px -1px rgba(0, 0, 0, 0.2);
185 | border: 1px solid $LightestGray;
186 | border-radius: 10px;
187 | }
188 |
189 | .center-panel-small {
190 | background-color: white;
191 | color: black;
192 | margin: 2rem auto;
193 | padding: 1rem;
194 | -webkit-box-shadow: -2px 5px 14px -1px rgba(0, 0, 0, 0.77);
195 | box-shadow: -2px 5px 14px -1px rgba(0, 0, 0, 0.2);
196 | border: 1px solid $LightestGray;
197 | border-radius: 10px;
198 | width: 60%;
199 | }
200 |
201 | .left-panel {
202 | width: 40vw;
203 | background-color: white;
204 | color: black;
205 | margin: 2rem;
206 | padding: 1rem;
207 | -webkit-box-shadow: -2px 5px 14px -1px rgba(0, 0, 0, 0.77);
208 | box-shadow: -2px 5px 14px -1px rgba(0, 0, 0, 0.2);
209 | border: 1px solid $LightestGray;
210 | border-radius: 10px;
211 | }
212 | .right-panel {
213 | margin: 2rem;
214 | padding: 2rem;
215 | width: 37%;
216 | float: right;
217 | }
218 |
219 | .full-width {
220 | width: 100% !important;
221 | padding: 0.5rem 0.3rem !important;
222 | border-radius: 5px !important;
223 | }
224 |
--------------------------------------------------------------------------------
/client/src/pages/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import Jumbotron from "../../components/Jumbotron/Jumbotron";
3 | import "./Home.scss";
4 | import { Player } from "@lottiefiles/react-lottie-player";
5 | import { Button, Row, Col, Divider, Card, Spin, Alert } from "antd";
6 | import { RightCircleOutlined } from "@ant-design/icons";
7 | import { useHistory } from "react-router-dom";
8 | import { postsAPI } from "../../api/api";
9 | import defaultPostImage from "./../../assets/images/default-post-image.jpg";
10 | import { useSelector } from "react-redux";
11 | import PostsGrid from "../../components/PostsGrid/PostsGrid";
12 | const { Meta } = Card;
13 |
14 | export default function Home() {
15 | const router = useHistory();
16 | const userState = useSelector((st) => st.user);
17 | const [postsData, setPostsData] = useState([]);
18 | const [width, setWidth] = useState(window.innerWidth);
19 | const [errorMsg, setErrorMsg] = useState(null);
20 | const [reload, setReload] = useState(false);
21 |
22 | useEffect(() => {
23 | function handleResize() {
24 | setWidth(window.innerWidth);
25 | }
26 | window.addEventListener("resize", handleResize);
27 | return () => window.removeEventListener("resize", handleResize);
28 | }, [width]);
29 |
30 | useEffect(() => {
31 | (async () => {
32 | try {
33 | const { data: res } = await postsAPI.getAll();
34 | setPostsData(res);
35 | setErrorMsg(null);
36 | } catch (error) {
37 | setErrorMsg("Error loading posts data");
38 | console.log("Error retrieving all posts...", error);
39 | }
40 | })();
41 | }, [reload]);
42 |
43 | return (
44 | Edit post
67 |
45 | {userState.isLoggedIn ? (
46 | <>
47 |
48 |
89 |
90 | ) : (
91 | <>
92 |
93 |
134 |
135 | )}
136 | Most recent posts
137 | {errorMsg ? (
138 | setReload(param)} />
143 | ) : (
144 |
149 | );
150 | }
151 |
--------------------------------------------------------------------------------
/client/src/pages/Posts/Post.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { useHistory, useLocation } from "react-router-dom";
3 | import { Button, message, Image, Spin, Alert, Modal, Divider } from "antd";
4 | import { EditFilled, DeleteFilled } from "@ant-design/icons";
5 | import { useSelector } from "react-redux";
6 | import { postsAPI } from "./../../api/api";
7 | import "./Post.scss";
8 | import defaultPostImage from "./../../assets/images/default-post-image.jpg";
9 | import defaultUser from "./../../assets/images/default-user.png";
10 | import moment from "moment";
11 | import Avatar from "antd/lib/avatar/avatar";
12 | import CommentForm from "../Comments/CommentForm";
13 | import Comments from "../Comments/Comments";
14 |
15 | export default function Post() {
16 | const [postData, setPostData] = useState({});
17 | const router = useHistory();
18 | const userState = useSelector((st) => st.user);
19 | const location = useLocation();
20 | const [deleteModal, setDeleteModal] = useState(false);
21 | const [deletePostID, setDeletePostID] = useState(null);
22 | const [errorMsg, setErrorMsg] = useState(null);
23 | const [reloadDelete, setReloadDelete] = useState(null);
24 | const [reloadEdit, setReloadEdit] = useState(null);
25 | const [reloadPost, setReloadPost] = useState(null);
26 |
27 | useEffect(() => {
28 | let id = null;
29 | (async () => {
30 | if (location.state && location.state.hasOwnProperty("postID")) {
31 | id = location.state.postID;
32 | try {
33 | const { data: res } = await postsAPI.getOne(id);
34 | setPostData(res);
35 | setErrorMsg(null);
36 | } catch (error) {
37 | setPostData({});
38 | setErrorMsg("Error loading post data");
39 | console.log("Error retrieving one post...", error);
40 | }
41 | } else {
42 | message.error("An error occured while retrieving post ID");
43 | router.push("/");
44 | }
45 | })();
46 | }, [location.state, reloadDelete, reloadPost, reloadEdit]);
47 |
48 | const confirmDelete = async () => {
49 | try {
50 | await postsAPI.delete(deletePostID);
51 | setDeleteModal(false);
52 | message.success("Post deleted successfully");
53 | router.goBack();
54 | } catch (error) {
55 | console.log("Error deleting post...", error.response ?? error);
56 | message.error("Error deleting post");
57 | if (error.response && error.response.data) {
58 | message.error(error.response.data);
59 | } else message.error("Error deleting post");
60 | setDeleteModal(false);
61 | }
62 | };
63 |
64 | return (
65 |
49 | {width <= 650 ? (
50 |
88 |
51 |
63 | ) : (
64 | <>
65 | A blogging website for
52 |EVERYONE
53 | } 57 | size="large" 58 | onClick={() => router.push("/posts/new")} 59 | > 60 | Write a post now! 61 | 62 |
66 |
78 | A blogging website for
67 |EVERYONE
68 | } 72 | size="large" 73 | onClick={() => router.push("/posts/new")} 74 | > 75 | Get Started 76 | 77 |
79 |
85 |
86 | )}
87 |
94 | {width <= 650 ? (
95 |
133 |
96 |
108 | ) : (
109 | <>
110 | A blogging website for
97 |EVERYONE
98 | } 102 | size="large" 103 | onClick={() => router.push("/login")} 104 | > 105 | Get Started 106 | 107 |
111 |
123 | A blogging website for
112 |EVERYONE
113 | } 117 | size="large" 118 | onClick={() => router.push("/login")} 119 | > 120 | Get Started 121 | 122 |
124 |
130 |
131 | )}
132 |
139 |
141 | ) : postsData && Boolean(postsData.length) ? (
142 |
145 |
147 | )}
148 |
66 | {errorMsg ? (
67 | setReloadPost(value)}
130 | />
131 |
132 | )}
133 | setReloadDelete(value)}
136 | setEditReloadingFlag={(value) => setReloadEdit(value)}
137 | />
138 |
139 | confirmDelete()}
143 | onCancel={() => setDeleteModal(false)}
144 | centered
145 | >
146 |
148 |
149 | )}
150 |
151 | );
152 | }
153 |
--------------------------------------------------------------------------------
/client/src/pages/Signup/SignupForm.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useHistory } from "react-router-dom";
3 | import { Form, Input, Button, Tag, message } from "antd";
4 | import { Form as FinalForm, Field } from "react-final-form";
5 | import { authAPI } from "./../../api/api";
6 | import isEmpty from "lodash.isempty";
7 |
8 | export default function SignupForm() {
9 | const router = useHistory();
10 | const [initialValues, setInitialValues] = useState({});
11 | const [submissionErrors, setSubmissionErrors] = useState({});
12 |
13 | const onSubmit = async (event) => {
14 | try {
15 | await authAPI.signup({ user: event });
16 | message.success("User created successfully");
17 | router.push("/login");
18 | } catch (error) {
19 | console.log("Error registering a new user...", error.response ?? error);
20 | if (error.response && error.response.data) {
21 | setSubmissionErrors(error.response.data);
22 | } else setSubmissionErrors({ err: "Signup error" });
23 | }
24 | };
25 |
26 | const checkValidation = (values) => {
27 | const errors = {};
28 | if (!values.userName?.trim()) {
29 | errors.userName = "Please enter the userName";
30 | }
31 | if (!values.password?.trim()) {
32 | errors.password = "Please enter the password";
33 | }
34 | if (!values.confirmPassword?.trim()) {
35 | errors.confirmPassword = "Please enter the password confirmation";
36 | } else if (values.confirmPassword !== values.password) {
37 | errors.confirmPassword = "Passwords do not match";
38 | }
39 | if (!values.email?.trim()) {
40 | errors.email = "Please enter the email";
41 | }
42 | return errors;
43 | };
44 |
45 | return (
46 |
68 |
70 | ) : Object.keys(postData).length === 0 ? (
71 |
72 |
74 | ) : (
75 | <>
76 |
77 |
90 | {postData.title}
78 |
79 |
89 |
80 |
87 | {moment(postData.createdAt).format("DD MMMM YYYY")}
88 |
91 |
95 | {postData.content}
96 | {postData.createdBy === userState.user.id && (
97 |
98 | }
102 | onClick={() =>
103 | router.push("/posts/edit", { postID: postData._id })
104 | }
105 | >
106 | Edit
107 |
108 |
109 | }
113 | danger
114 | onClick={() => {
115 | setDeletePostID(postData._id);
116 | setDeleteModal(true);
117 | }}
118 | >
119 | Delete
120 |
121 |
122 | )}
123 | {Boolean(userState.user.id) && (
124 | <>
125 | Are you sure you want to delete post?
147 |
88 |
315 | );
316 | }
317 |
--------------------------------------------------------------------------------
89 | {errorMsg ? (
90 |
314 |
91 |
93 | ) : Object.keys(initialValues).length === 0 ? (
94 |
95 |
97 | ) : (
98 | <>
99 | 100 | {initialValues.userName}'s Profile 101 |
102 |
103 |
108 |
109 | (
114 |
308 | )}
309 | />
310 |
311 |
312 | )}
313 |