Added recommendation bar in home page

kimlimjustin · Oct 16, 2020 · b8df68e · b8df68e
1 parent 69387f0
commit b8df68e
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 7 deletions.
diff --git a/client/public/styles.css b/client/public/styles.css
@@ -11,6  11,11 @@ body{cursor: pointer;}
 
 .home{
     min-height: 100vh;
     width: 100%;
 }
 
 .recommendation{
     display: none;
 }
 
 .activity-info{
@@ -123,3  128,15 @@ body{cursor: pointer;}
         width: 30%;
     }
 }
 
 @media only screen and (min-width: 1200px){
     .recommendation{
         width: 30%;
         float: left;
         display: block;
     }
     .home{
         width: 70%;
         float: left;
     }    
 }
diff --git a/client/src/Components/home.component.js b/client/src/Components/home.component.js
@@ -28,6  28,8 @@ const Home = () => {
     const [skip, setSkip] = useState(0);
     const [likeInfo, setLikeInfo] = useState({});
     const [totalLikes, setTotalLikes] = useState({});
     const [newestUser, setNewestUser] = useState([]);
     const [taggedList, setTaggedList] = useState([]);
 
     useEffect(() => {
         check_token().then(result => {
@@ -119,6  121,35 @@ const Home = () => {
             })
         }
     }
 
     useEffect(() => {
         Axios.get('http://localhost:5000/users/get_newest')
         .then(res => {
             (res.data).forEach((user) => {
                 setNewestUser(existing => [...existing, user])
             })
         })
         .catch(err => console.log(err));
     }, [])
 
     useEffect(() => {
         if(userInfo){
             Axios.get(`http://localhost:5000/posts/get/tagged/${userInfo.username}`)
             .then(res => {
                 (res.data).forEach((tag) => {
                     Axios.get("http://localhost:5000/users")
                     .then(users => {
                         (users.data).forEach((user) => {
                             if(user._id === tag.user){
                                 tag.username = user.username;
                                 setTaggedList(ex => [...ex, tag]);
                             }
                         })
                     })
                 })
             })
         }
     }, [userInfo])
 
     const GeneratePost = ({post}) => {
         return <div key={post._id} className="box box-shadow margin-top-bottom">
@@ -154,13  185,34 @@ const Home = () => {
     }
 
     return(
-        <div className="container home">
-            {posts.length !== 0?(
-            [posts.map((post)=> {
-                return <GeneratePost post = {post} key={post._id} />
-            })]
-            )
-            : <h1>Loading...</h1>}
         <div className="container">
             <div className="home">
                 {posts.length !== 0?(
                 [posts.map((post)=> {
                     return <GeneratePost post = {post} key={post._id} />
                 })]
                 )
                 : <h1>Loading...</h1>}
             </div>
             <div className="recommendation">
                 <div className="margin box box-shadow">
                     <h3 className="box-title">You might like these users:</h3>
                     <ul>
                         {newestUser.map((user) => {
                             if (user.username !== userInfo.username){
                             return <li key={user._id}><NavLink className="link" to={`/u/${user.username}`}>{user.username}</NavLink> (joined {moment(user.createdAt).fromNow()})</li>
                             }else{return null;}
                         })}
                     </ul>
                 </div>
                 <div className="margin box box-shadow">
                     <h3 className="box-title">Tags:</h3>
                     {taggedList.map((tag) => {
                         return <p key={tag._id}><NavLink className="link" to={`/u/${tag.username}`}>{tag.username}</NavLink> tagged you on a 
                         &nbsp;<NavLink to={`/post/${tag._id}`} className="link">post</NavLink></p>
                     })}
                 </div>
             </div>
         </div>
     )
 }

diff --git a/server/Routers/postRouter.js b/server/Routers/postRouter.js
@@ -39,6  39,22 @@ router.post("/create", jsonParser,(req, res)=> {
     })
 })
 
 router.get('/get/tagged/:user', (req, res) => {
     let tagged_list = []
     const user = req.params.user
     Post.find()
     .sort({_id: -1})
     .then(posts => {
         posts.forEach((post) => {
             if(post.tags.includes(user)){
                 tagged_list.push(post)
             }
         })
         res.json(tagged_list);
     })
     .catch(err => res.status(400).json("Error: " err));
 })
 
 router.get("/get/:user", (req, res)=> {
     const skip = req.query.skip && /^\d $/.test(req.query.skip) ? Number(req.query.skip) : 0
     Post.find({user: req.params.user}, undefined, {skip, limit: 1}).sort({_id: -1})

diff --git a/server/Routers/userRouter.js b/server/Routers/userRouter.js
@@ -95,4  95,12 @@ router.post('/profile', jsonParser, (req, res)=> {
     }).catch(err => res.status(400).json("Error: " err));
 })
 
 router.get('/get_newest', (req, res) => {
     User.find()
     .sort({_id: -1})
     .limit(3)
     .then(users => res.json(users))
     .catch(err => res.status(400).json("Error: " err));
 })
 
 module.exports = router;