Integrated MUI & friendspage wip

.eslintrc.json

@@ -24,6 +24,7 @@
         "react/jsx-no-constructed-context-values": "warn",
         "react/no-unescaped-entities": "warn",
         "react-hooks/exhaustive-deps": "warn",
-        "array-callback-return": "warn"
+        "array-callback-return": "warn",
+        "jsx-a11y/no-noninteractive-element-interactions": "warn"
     }
 }

backend/routes/user.js

@@ -84,4 +84,24 @@ router.get('/allusers', requireLogin, async (req, res) => {
 	}
 })
 
+// save profile picture of users inside mongodb (through cloudinary)
+
+router.put('/uploadProfilePic', requireLogin, async (req, res) => {
+	try {
+		const userData = await User.findByIdAndUpdate(
+			req.user._id,
+			{
+				$set: { Photo: req.body.pic },
+			},
+			{
+				new: true,
+			},
+		)
+		res.status(200).json({ success: true })
+	} catch (error) {
+		console.log(error)
+		res.status(422).json({ error: 'Something went wrong...' })
+	}
+})
+
 module.exports = router

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import Signup from './components/Signup'
 import Login from './components/Login'
 import FriendsPage from './components/FriendsPage'
 import Client from './components/Client'
+import LogoutModal from './components/LogoutModal'
 import { LoginContext } from './context/LoginContext'
 
 require('dotenv').config()
@@ -29,6 +30,7 @@ function App() {
 							<Route path='/client' element={<Client />} />
 						</Routes>
 					</BrowserRouter>
+					{modalOpen ? <LogoutModal /> : ''}
 				</LoginContext.Provider>
 			</GoogleOAuthProvider>
 		</div>

frontend/src/components/Client.jsx

@@ -1,8 +1,19 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import Map from './Map'
 
 function Client() {
-	return <Map />
+	const navigate = useNavigate()
+
+	const checker = () => {
+		if (localStorage.getItem('user') !== null) {
+			;<Map />
+		} else {
+			navigate('/login')
+		}
+	}
+
+	return <div>{checker()}</div>
 }
 
 export default Client

frontend/src/components/FriendsCard.jsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import '../styles/UserCard.css'
+import { useNavigate } from 'react-router-dom'
+import Button from '@mui/material/Button'
+
+require('dotenv').config()
+
+const PORT = process.env.PORT || 5050
+const BASE_API_URI = `http://localhost:${PORT}`
+
+function FriendsCard({
+	username,
+	name,
+	dpLink,
+	currentUsername,
+	user,
+	curruser,
+	users,
+	setUsers,
+}) {
+	const navigate = useNavigate()
+
+	const handleUnFollow = id => {
+		fetch(`${BASE_API_URI}/api/unfollow`, {
+			method: 'PUT',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${localStorage.getItem('jwt')}`,
+			},
+			body: JSON.stringify({
+				userID: id,
+			}),
+		})
+			.then(res => res.json())
+			.then(result => {
+				console.log(result)
+				const newUsers = users.filter(u => u._id !== id)
+				setUsers(newUsers)
+				// setIsFollow(true)
+			})
+			.catch(err => console.log(err))
+	}
+
+	return (
+		<>
+			{currentUsername !== username &&
+			curruser._id !== user._id &&
+			curruser.friends.includes(user._id) === true ? (
+				<div className='container'>
+					<div className='card_item'>
+						<div className='card_inner'>
+							<img src={dpLink} alt='' />
+							<div className='Name'>{name}</div>
+							<div className='userName'>{username}</div>
+							<div className='userUrl' />
+							<div className='detail-box'>
+								<div className='gitDetail'>
+									<span>College</span>JU
+								</div>
+								<div className='gitDetail'>
+									<span>Following</span>45
+								</div>
+								<div className='gitDetail'>
+									<span>Followers</span>11
+								</div>
+							</div>
+
+							{/* <Button className="top-margin" size="large" variant="contained" onClick={() => handleUnFollow(user._id)}>Remove Friend</Button> */}
+							<button
+								type='button'
+								className='removeFriend'
+								onClick={() => handleUnFollow(user._id)}
+							>
+								Remove Friend
+							</button>
+						</div>
+					</div>
+				</div>
+			) : null}
+		</>
+	)
+}
+
+export default FriendsCard