[chore]: resolve conflicts

.eslintrc.json

@@ -23,6 +23,7 @@
         "jsx-a11y/img-redundant-alt": "warn",
         "react/jsx-no-constructed-context-values": "warn",
         "react/no-unescaped-entities": "warn",
-        "react-hooks/exhaustive-deps": "warn"
+        "react-hooks/exhaustive-deps": "warn",
+        "array-callback-return": "warn"
     }
-}
+}

backend/routes/user.js

@@ -8,7 +8,7 @@ const requireLogin = require('../middlewares/requireLogin')
 router.put('/follow', requireLogin, async (req, res) => {
 	try {
 		const toFollow = req.body.userID
-		const wantToFollow = req.user._id
+		const wantToFollow = req.user._id.toString()
 
 		await User.findByIdAndUpdate(toFollow, {
 			$addToSet: { friends: wantToFollow },
@@ -28,8 +28,8 @@ router.put('/follow', requireLogin, async (req, res) => {
 // unfriend a user
 router.put('/unfollow', requireLogin, async (req, res) => {
 	try {
-		const toFollow = req.body.userID // ayush
-		const wantToFollow = req.user._id // anumoy
+		const toFollow = req.body.userID
+		const wantToFollow = req.user._id.toString()
 
 		await User.findByIdAndUpdate(
 			toFollow,

frontend/src/components/Client.jsx

@@ -1,16 +1,7 @@
 import React from 'react'
 import Map from './Map'
-// import { io } from 'socket.io-client';
-// const URL = process.env.NODE_ENV === 'production' ? undefined : 'http://localhost:4000';
 
 function Client() {
-	// const io = new Server({
-	//     cors: {
-	//       origin: "http://localhost:3000"
-	//     }
-	// });
-	// io.listen(4000);
-
 	return <Map />
 }
 

frontend/src/components/FriendsPage.jsx

@@ -66,6 +66,17 @@ function FriendsPage() {
 		if (localStorage.getItem('user')) {
 			return (
 				<>
+					<div className='button-container'>
+						<button
+							type='button'
+							className='large-button'
+							onClick={() => {
+								navigate('/client')
+							}}
+						>
+							Go To Map
+						</button>
+					</div>
 					<div className='user-banner'>
 						<UserBanner
 							key={curruser.username}
@@ -83,6 +94,8 @@ function FriendsPage() {
 									name={user.name}
 									dpLink={user.Photo ? user.Photo : defaultPicLink}
 									currentUserName={curruser.username}
+									user={user}
+									curruser={curruser}
 								/>
 							))}
 					</div>

frontend/src/components/Map.jsx

@@ -1,14 +1,15 @@
 import React, { useState, useEffect } from 'react'
 import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'
 import io from 'socket.io-client'
+import '../styles/Map.css'
 
 require('dotenv').config()
 
 const socket = io.connect('http://localhost:5050')
 
 const containerStyle = {
 	width: '70vw',
-	height: '50vh',
+	height: '100vh',
 }
 
 const center = {
@@ -17,56 +18,38 @@ const center = {
 }
 
 function Map() {
-	/*
-  
-  //Room State
-  const [room, setRoom] = useState("");
-  
-  // Messages States
-  const [message, setMessage] = useState("");
-  const [messageReceived, setMessageReceived] = useState("");
-  
-  const joinRoom = () => {
-    if (room !== "") {
-      socket.emit("join_room", room);
-    }
-  };
-  
-  const sendMessage = () => {
-    socket.emit("send_message", { message, room });
-  };
-  
-  useEffect(() => {
-    socket.on("receive_message", (data) => {
-      setMessageReceived(data.message);
-    });
-  }, [socket]);
-  
-  */
-
 	const { isLoaded } = useJsApiLoader({
 		id: 'google-map-script',
 		googleMapsApiKey: process.env.GOOGLE_API_KEY,
 	})
 
 	const [currentCenter, setCurrentCenter] = useState({
-		lat: 25.561083,
-		lng: 88.412666,
+		lat: 22.54905,
+		lng: 88.37816,
 	})
 	const [location, setLocation] = useState({
-		lat: 25.561083,
-		lng: 88.412666,
+		lat: 22.54905,
+		lng: 88.37816,
 	})
 	const [locationReceived, setLocationReceived] = useState({
-		lat: 25.561083,
-		lng: 88.412666,
+		lat: 22.54905,
+		lng: 88.37816,
 	})
 
 	const sendLocation = () => {
 		console.log('hello i am here...')
 		socket.emit('send-location', { location })
 	}
 
+	const [locationArray, setLocationArray] = useState([])
+
+	// Demo positions...
+	const positions = [
+		{ lat: 25.561083, lng: 88.412666 }, // New York
+		{ lat: 22.571093, lng: 85.412672 }, // Los Angeles
+		{ lat: 21.161083, lng: 87.412 }, // London
+	]
+
 	useEffect(() => {
 		if (navigator.geolocation) {
 			navigator.geolocation.getCurrentPosition(position => {
@@ -92,6 +75,11 @@ function Map() {
 			socket.on('receive-location', data => {
 				console.log('frontend receive...')
 
+				console.log('Current Location : ')
+				console.log(location.lat, location.lng)
+
+				console.log('frontend received data : ')
+
 				console.log(data)
 
 				setLocationReceived(location => ({
@@ -105,6 +93,18 @@ function Map() {
 				}))
 
 				console.log(locationReceived.lat, locationReceived.lng)
+
+				const newLocationReceived = {
+					lat: locationReceived.lat,
+					lng: locationReceived.lng,
+				}
+				console.log('New location received through socket : ')
+				console.log(newLocationReceived)
+				console.log('Updated array will be : ')
+				const newArr = locationArray
+				newArr.push(newLocationReceived)
+				setLocation(...newArr)
+				console.log(locationArray)
 			})
 		}
 	}, [socket])
@@ -123,16 +123,37 @@ function Map() {
 
 	return isLoaded ? (
 		<>
-			<GoogleMap
-				mapContainerStyle={containerStyle}
-				center={currentCenter}
-				zoom={18.25}
-			>
-				<Marker position={{ lat: location.lat, lng: location.lng }} />
-			</GoogleMap>
-			<button type='button' onClick={sendLocation}>
-				Click Me
-			</button>
+			<div className='map-container'>
+				<div>
+					<GoogleMap
+						mapContainerStyle={containerStyle}
+						center={currentCenter}
+						zoom={18.25}
+					>
+						<Marker position={{ lat: location.lat, lng: location.lng }} />
+						{/* <Marker position={{
+                            lat: 22.549152,
+                            lng: 88.378260,
+                        }} /> */}
+						{/* <Marker position={{
+                            lat: 22.559132,
+                            lng: 88.388270,
+                        }} /> */}
+						{locationArray.map(loc => {
+							;<Marker position={{ lat: loc.lat, lng: loc.lng }} />
+						})}
+					</GoogleMap>
+				</div>
+				<div className='button-container'>
+					<button
+						type='button'
+						className='enlarge-button'
+						onClick={sendLocation}
+					>
+						Click Me
+					</button>
+				</div>
+			</div>
 		</>
 	) : (
 		<></>

frontend/src/components/UserCard.jsx

@@ -1,11 +1,57 @@
 import React from 'react'
-
 import '../styles/UserCard.css'
+import { useNavigate } from 'react-router-dom'
+
+require('dotenv').config()
+
+const PORT = process.env.PORT || 5050
+const BASE_API_URI = `http://localhost:${PORT}`
+
+function UserCard({ username, name, dpLink, currentUsername, user, curruser }) {
+	const navigate = useNavigate()
+
+	const handleFollow = id => {
+		fetch(`${BASE_API_URI}/api/follow`, {
+			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)
+				// setIsFollow(false)
+			})
+			.catch(err => console.log(err))
+	}
+
+	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)
+				// setIsFollow(true)
+			})
+			.catch(err => console.log(err))
+	}
 
-function UserCard({ username, name, dpLink, currentUserName }) {
 	return (
 		<>
-			{currentUserName !== username ? (
+			{currentUsername !== username &&
+			curruser.friends.includes(user._id) === false ? (
 				<div className='container'>
 					<div className='card_item'>
 						<div className='card_inner'>
@@ -24,7 +70,11 @@ function UserCard({ username, name, dpLink, currentUserName }) {
 									<span>Followers</span>11
 								</div>
 							</div>
-							<button type='button' className='addFriend'>
+							<button
+								type='button'
+								className='addFriend'
+								onClick={() => handleFollow(user._id)}
+							>
 								Add Friend
 							</button>
 						</div>

frontend/src/styles/FriendsPage.css

@@ -10,3 +10,34 @@
 	grid-auto-rows: auto;
 	grid-gap: 1rem;
 }
+
+.button-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	align-items: end;
+}
+
+.large-button {
+	padding: 15px 30px;
+	/* Adjust padding to increase button size */
+	font-size: 18px;
+	/* Adjust font size */
+	border: none;
+	border-radius: 8px;
+	/* Rounded corners */
+	background-color: #3498db;
+	/* Button color */
+	color: white;
+	/* Text color */
+	text-align: center;
+	text-decoration: none;
+	display: inline-block;
+	transition-duration: 0.4s;
+	cursor: pointer;
+}
+
+.large-button:hover {
+	background-color: #2980b9;
+	/* Change color on hover */
+}

frontend/src/styles/Map.css

@@ -0,0 +1,13 @@
+.map-container {
+	display: flex;
+}
+
+.enlarge-button {
+	padding: 10px 20px;
+	font-size: 20px;
+	transition: transform 0.3s ease;
+}
+
+.enlarge-button:hover {
+	transform: scale(1.1);
+}