Merge pull request #170 from Derek-Stanley/localhost

localhosting

README.md

@@ -24,15 +24,14 @@
 - [x] Loading screen
 - [x] About us page
 - [x] User profile page
-- [x] Responsive UI
 - [ ] Contact page
+- [ ] Responsive UI
 - [ ] Like, comment on blogs
 - [ ] Add images to posts from local storage
 - [ ] Change profile pic
 
 ### Status:
-- [x] Requirements elicitation
-- [x] System design
+- [x] System Software Requirements
 - [x] Development
 - [x] Deployment
 - [x] Testing

api/index.js

@@ -16,7 +16,7 @@ dotenv.config();
 app.use(express.json());
 app.use(cors());
 
-mongoose.set('strictQuery', false);
+mongoose.set("strictQuery", false);
 mongoose
     .connect(
         process.env.MONGO_URL,

api/models/User.js

@@ -4,7 +4,6 @@ const UserSchema = new mongoose.Schema(
     {
         fullname: {
             type: String,
-            required: true,
         },
         username: {
             type: String,
@@ -34,4 +33,4 @@ const UserSchema = new mongoose.Schema(
     }
 );
 
-module.exports = mongoose.model('User', UserSchema);
+module.exports = mongoose.model('User', UserSchema);

client/.gitignore

@@ -13,7 +13,6 @@
 
 # misc
 .DS_Store
-.env
 .env.local
 .env.development.local
 .env.test.local

client/package.json

@@ -4,19 +4,18 @@
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.4.3",
-    "axios": "^1.2.1",
-    "dotenv": "^16.0.3",
+    "axios": "^0.27.2",
     "http-proxy-middleware": "^2.0.6",
-    "jshint": "^2.13.6",
+    "jshint": "^2.13.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.6.1",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
-    "react-spinners": "^0.13.7",
-    "web-vitals": "^3.1.0",
-    "webpack": "^5.75.0"
+    "react-spinners": "^0.13.4",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.74.0"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

@@ -11,68 +11,20 @@ import {
   BrowserRouter as
   Router,
   Routes,
-  Route,
+  Route
 } from "react-router-dom";
-import { useContext, useEffect, useState } from "react";
+import { useContext } from "react";
 import { Context } from "./context/Context";
 import './app.css';
-import axios from 'axios';
 
 function App() {
   const { user } = useContext(Context);
-  const [posts, setPosts] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [query, setQuery] = useState("");
-  const [list, setList] = useState(true);
-  const keys = ["title", "desc"];
-
-  useEffect(() => {
-      setLoading(true);
-      const fetchPosts = async () => {
-          const res = await axios.get(process.env.REACT_APP_BASE_URL+"/api/posts", {mode: 'cors'});
-          setLoading(false);
-          setPosts(res.data);
-      };
-
-      fetchPosts();
-  }, []);
-
-  const searchs = (posts) => {
-    // return posts.filter((item) =>
-    // keys.some(key => item[key].toLowerCase().includes(query.toLowerCase()))
-    // || item.categories.join("").toString().toLowerCase().includes(query.toLowerCase())
-    // );
-    return posts;
-  };
-
-  const p = searchs(posts);
-
-  useEffect(() => {
-      if (p.length === 0) {
-          setList(false);
-      }
-      if (p.length) {
-          setList(true);
-      }
-  }, [p.length]);
-
 
   return (
     <div className="app">
       <Router>
-        <Topbar
-          p={p}
-          setQuery={setQuery}
-          list={list}
-          loading={loading}
-        />
+        <Topbar />
         <Routes>
-          <Route exact path="/" element={<Homepage
-            p={p}
-            setQuery={setQuery}
-            list={list}
-            loading={loading} />
-          }/>
           <Route exact path="/" element={ <Homepage /> } />
           <Route path="/about" element={ <About /> } />
           <Route path="/posts" element={ <Homepage /> } />

client/src/app.css

@@ -1,22 +1,18 @@
-html {
-    width: 100%;
-}
-
 .app {
-  width: auto;
+    width: auto;
 }
 
 .loader {
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100vh;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
 }
 
 @media (max-width: 768px) {
     .sidebar {
         display: none;
     }
-}
+}

client/src/components/categories/Categories.jsx

@@ -9,7 +9,7 @@ export default function Categories() {
     useEffect(() => {
         let isMounted = true; 
         const getCats = async () => {
-            const res = await axios.get(process.env.REACT_APP_BASE_URL+"/api/categories");
+            const res = await axios.get("http://localhost:5000/api/categories");
             if (isMounted) setCats(res.data);
         };
 

client/src/components/categories/categories.css

@@ -1,6 +1,5 @@
 .catBar {
-  /* flex: 1; */
-  width: 15vw;
+  flex: 1;
   height: fit-content;
   margin: 20px;
   padding-bottom: 30px;

client/src/components/indvidualPost/IndividualPost.jsx

@@ -19,31 +19,19 @@ export default function IndividualPost() {
     useEffect(() => {
         setLoading(true);
         const getPost = async () => {
-            const res = await axios.get(process.env.REACT_APP_BASE_URL+"/api/posts/" + path);
-            setPost(res.data);
+            const res = await axios.get("http://localhost:5000/api/posts/" + path);
             setLoading(false);
+            setPost(res.data);
+            setPost(res.data);
             setTitle(res.data.title);
             setDesc(res.data.desc);
         };
         getPost();
     }, [path]);
 
-    const handleUpvote = async () => {
-        const newVote = {
-            post: post._id,
-            user: user._id,
-            type: true
-        };
-        try{
-            const res = await axios.post(process.env.REACT_APP_BASE_URL+`/api/posts/upvote`, newVote);
-        } catch (err){
-            // console.log(err);
-        }
-    }
-
     const handleDelete = async () => {
         try {
-        await axios.delete(process.env.REACT_APP_BASE_URL+`/api/posts/${post._id}`, {
+        await axios.delete(`http://localhost:5000/api/posts/${post._id}`, {
             data: { username: user.username },
         });
         window.location.replace("/");
@@ -52,8 +40,8 @@ export default function IndividualPost() {
 
     const handleUpdate = async () => {
         try {
-            await axios.put(process.env.REACT_APP_BASE_URL+`/api/posts/${post._id}`, {
-                user: user._id,
+            await axios.put(`http://localhost:5000/api/posts/${post._id}`, {
+                username: user.username,
                 title,
                 desc,
             });
@@ -94,7 +82,7 @@ export default function IndividualPost() {
                             ) : (
                                 <h1 className="indPostTitle">
                                     { title }
-                                    {user && post.user ? post.user._id === user._id && (
+                                    {post.username === user?.username && (
                                     <div className="indPostEdit">
                                         <i
                                             className="indPostIcon far fa-edit"
@@ -105,17 +93,17 @@ export default function IndividualPost() {
                                         onClick={handleDelete}
                                         ></i>
                                     </div>
-                                    ):""}
+                                    )}
                                 </h1>
                             )}
                             <div className="indPostInfo">
                                 <span>
                                     Author:
                                     <b className="indPostAuthor">
-                                        <Link className="link" to={`/?user=${post.user?post.user._id:""}`}>
-                                            { post.user?post.user.fullname:"" }
+                                        <Link className="link" to={`/?user=${post.username}`}>
+                                            { post.username }
                                         </Link>
-                                    </b> | {post.votes?post.votes.length +" Votes":""} {user?(<button onClick={handleUpvote}>Upvote</button>):""}
+                                    </b>
                                 </span>
                                 <span>{ new Date(post.createdAt).toDateString() }</span>
                             </div>

client/src/components/indvidualPost/individualPost.css

@@ -76,7 +76,6 @@
 
 .indPostAuthor{
     margin-left: 5px;
-    text-transform: capitalize;
 }
 
 .indPostDesc {

client/src/components/post/Post.jsx

@@ -2,7 +2,6 @@ import { Link } from 'react-router-dom';
 import './post.css';
 
 export default function Post({ post }) {
-
     return (
         <div className="post">
             { post.photo && 

client/src/components/post/post.css

@@ -40,9 +40,6 @@
     font-weight: 900;
     margin-top: 15px;
     cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
 }
 
 .postDate {

client/src/components/posts/Posts.jsx

@@ -4,7 +4,6 @@ import './posts.css';
 
 export default function Posts({ posts }) {
     const [num, setNum] = useState(6)
-
     return (
         <div className='postsContainer'>
             <div className="posts">

client/src/components/sidebar/sidebar.css

@@ -1,6 +1,5 @@
 .sidebar {
-  /* flex: 3; */
-  width: 20vw;
+  flex: 3;
   height: fit-content;
   margin: 20px;
   padding-bottom: 30px;
@@ -42,9 +41,6 @@
   align-items: center;
   display: inline;
 }
-.user-profile{
-  padding: 10px 20px;
-}
 
 .sidebarItem > p {
   padding: 30px;

client/src/components/topbar/Topbar.jsx

@@ -1,13 +1,11 @@
-import { useContext, useEffect, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { useContext, useState } from "react";
+import { Link } from "react-router-dom";
 import { Context } from "../../context/Context";
-import SearchPosts from "../searchbar/SearchPosts";
-import './topbar.css';    
+import './topbar.css';
 
-export default function Topbar({ setQuery}) {
+export default function Topbar() {
     const { user, dispatch } = useContext(Context);
     const [hamburgerOpen, setHamburgerOpen] = useState(false);
-    const path = useLocation().pathname;
 
     const handleLogout = () => {
         setHamburgerOpen(false);
@@ -18,17 +16,6 @@ export default function Topbar({ setQuery}) {
         setHamburgerOpen(current => !current)
     }
 
-    const [width, setWidth] = useState(window.innerWidth);
-    const breakpoint = 768;
-
-    useEffect(() => {
-        const handleResizeWindow = () => setWidth(window.innerWidth);
-        window.addEventListener("resize", handleResizeWindow);
-        return () => {
-        window.removeEventListener("resize", handleResizeWindow);
-        };
-    }, []);
-
     return (
         <div className="top">
             <div className="mobile-hamburger" onClick={handleHamburger}>
@@ -113,11 +100,6 @@ export default function Topbar({ setQuery}) {
                     <div></div>
                 </div>
             </div>
-            {
-                ["/"].includes(path) && width < breakpoint ? <div>
-                <SearchPosts setQuery={setQuery} />
-                </div> : <div></div>
-            }
         </div>
     )
 }

client/src/components/topbar/topbar.css

@@ -80,10 +80,7 @@
     }
 
     .top {
-        /* flex-direction: column; */
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+        flex-direction: column;
         height: auto;
         overflow: hidden;
     }