started react

backend/app.js

@@ -18,6 +18,10 @@ var ProfileRoutes = require("./routes/profile")
 var PostRoutes = require("./routes/post")
 var HomeRoutes = require("./routes/home")
 
+
+var cors = require('cors');
+app.use(cors());
+
 // sets up the MongoDB
 var url = "mongodb://localhost/melody"
 // var url = "mongodb+srv://public:[email protected]/Melody?retryWrites=true&w=majority"
@@ -76,7 +80,7 @@ app.use(PostRoutes)
 // renders the home page with posts in chronological order if random url is entered
 app.get("/*", function(req, res) {
     // res.redirect("home")  
-    res.send('hello');  
+    res.send('what it do baby');  
 })
 
 

backend/package.json

@@ -13,6 +13,7 @@
     "bcrypt": "^5.0.0",
     "body-parser": "^1.19.0",
     "connect-mongodb-session": "^2.3.3",
+    "cors": "^2.8.5",
     "ejs": "^3.1.3",
     "express": "^4.17.1",
     "express-session": "^1.17.1",

backend/routes/home.js

@@ -8,11 +8,11 @@ var middleware = require("../middleware/index")
 // renders the home page with posts in chronological order
 router.get("/home", middleware.isLoggedIn, function(req, res) {
     User.findById(req.user._id, function(err, user) {
-        if (err) return next(err);
+        if (err) return res.status(400).send(err)
         var following = user.following.map(item => item.username)
         following.push(user.username)
         Post.find({"author.username": {$in : following}}, function(err, posts) {
-            if (err) console.log(err);
+            if (err) return res.status(400).send(err)
             var songs = 0;
             var popular = posts.map(post => post.songTitle)
             var popularFive = []
@@ -28,57 +28,57 @@ router.get("/home", middleware.isLoggedIn, function(req, res) {
                 }
                 songs ++
             }
-            res.render("home", {posts: posts, popular: popularFive})
+            return res.status(200).send({posts: posts, popular: popularFive})
         })
     })
 })
 
-// searches for users by username, and sends the list
-router.post('/search', async function(req, res, next) {
-    var text = req.body.text
-    User.find({'username':  { $regex: text, $options: "i" }}, function(err, users) {
-        if (err) {
-            return next(err);
-        }
-        var content = {
-            users: users,
-            id: req.user._id
-        }
-        res.send(content)
-    })
-})
+// // searches for users by username, and sends the list
+// router.post('/search', async function(req, res, next) {
+//     var text = req.body.text
+//     User.find({'username':  { $regex: text, $options: "i" }}, function(err, users) {
+//         if (err) {
+//             return res.status(400).send(err)
+//         }
+//         var content = {
+//             users: users,
+//             id: req.user._id
+//         }
+//         return res.status(200).send(content);
+//     })
+// })
 
 // searches for users by username, and sends the list
 router.post('/search-page/user', async function(req, res, next) {
     var text = req.body.text
     User.find({'username':  { $regex: text, $options: "i" }}, function(err, users) {
-        if (err) return next(err);
+        if (err) return res.status(400).send(err)
         var content = {
             users: users,
             id: req.user._id
         }
-        res.send(content)
+        return res.status(200).send(content);
     })
 })
 
 // searches for posts by content, and sends the list
 router.post('/search-page/post', async function(req, res, next) {
     var text = req.body.text
     Post.find({'content':  { $regex: text, $options: "i" }}, function(err, posts) {
-        if (err) return next(err);
+        if (err) return res.status(400).send(err)
         var content = {
             posts: posts,
             id: req.user._id
         }
-        res.send(content)
+        return res.status(200).send(content);
     })
 })
 
 // searches for posts by song, and sends the list
 router.post('/search-page/song', async function(req, res, next) {
     var text = req.body.text
     Post.find({'songTitle':  { $regex: text, $options: "i" }}, function(err, posts) {
-        if (err) return next(err);
+        if (err) return res.status(400).send(err)
         var content = {
             posts: posts,
             id: req.user._id
@@ -87,20 +87,20 @@ router.post('/search-page/song', async function(req, res, next) {
     })
 })
 
-// renders the search page
-router.get("/search/:search", function(req, res, next) {
-    var search = req.params.search
-    return res.render("search", {search: search})
-})
+// // renders the search page
+// router.get("/search/:search", function(req, res, next) {
+//     var search = req.params.search
+//     return res.render("search", {search: search})
+// })
 
-// renders the search page
-router.get("/search", function(req, res, next) {
-    res.render("search", {search: false})
-})
+// // renders the search page
+// router.get("/search", function(req, res, next) {
+//     res.render("search", {search: false})
+// })
 
-router.get("/search/user", function(req, res, next) {
+// router.get("/search/user", function(req, res, next) {
 
-})
+// })
 
 
 module.exports = router

frontend-react/package.json

@@ -6,8 +6,12 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.1",
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
+    "react-script-tag": "^1.1.2",
     "react-scripts": "4.0.2",
     "web-vitals": "^1.1.0"
   },

frontend-react/public/js/homepage.js

@@ -0,0 +1,15 @@
+function styleHomePage() {
+    if (window.innerWidth < 992) {
+        document.querySelector("#home-screen-content").classList.remove("home-screen-content")
+    }
+    else {
+        document.querySelector("#home-screen-content").classList.add("home-screen-content")
+    }
+  }
+
+window.addEventListener("resize", () => {
+    styleHomePage()
+})
+window.addEventListener("load", () => {
+    styleHomePage()
+})