sync refactor with main

.eslintrc.json

@@ -16,6 +16,14 @@
         "react/prop-types": "warn",
         "import/prefer-default-export": "warn",
         "new-cap": "warn",
-        "prefer-regex-literals": "warn"
+        "prefer-regex-literals": "warn",
+        "no-unused-vars": "warn",
+        "react/jsx-filename-extension": "warn",
+        "react/jsx-no-useless-fragment": "warn",
+        "jsx-a11y/img-redundant-alt": "warn",
+        "react/jsx-no-constructed-context-values": "warn",
+        "react/no-unescaped-entities": "warn",
+        "react-hooks/exhaustive-deps": "warn",
+        "array-callback-return": "warn"
     }
-}
+}

.github/workflows/eslint.yml

@@ -0,0 +1,33 @@
+name: ESLint Check
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  eslint:
+    name: Run ESLint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21.1.0
+
+      - name: Install dependencies
+        run: npm ci --only=dev
+
+      - name: Run ESLint
+        run: npm run eslint:github-action
+
+      - name: Check ESLint status
+        id: eslint-status
+        run: |
+          npm run eslint:github-action || echo 'failed'
+          echo "::set-output name=eslint-status::${{ steps.eslint-status.outputs.stdout }}"

.github/workflows/prettier.yml

@@ -0,0 +1,33 @@
+name: Prettier Check
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  prettier:
+    name: Run Prettier
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21.1.0
+
+      - name: Install dependencies
+        run: npm ci --only=dev
+
+      - name: Run Prettier
+        run: npm run prettier:github-action
+
+      - name: Check Prettier formatting
+        id: prettier-status
+        run: |
+          npm run prettier:github-action || echo 'failed'
+          echo "::set-output name=prettier-status::${{ steps.prettier-status.outputs.stdout }}"

.prettierrc

@@ -3,7 +3,6 @@
     "bracketSpacing": true,
     "htmlWhitespaceSensitivity": "css",
     "insertPragma": false,
-    "jsxBracketSameLine": false,
     "jsxSingleQuote": true,
     "printWidth": 80,
     "proseWrap": "always",

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/Login.jsx

@@ -89,7 +89,7 @@ function Login() {
 				</div>
 				<div className='form-container input-div'>
 					<div className='form'>
-						<img src={logo} />
+						<img src={logo} alt='User Profile Photo' />
 						<div>
 							<input
 								type='email'

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,14 +123,37 @@ function Map() {
 
 	return isLoaded ? (
 		<>
-			<GoogleMap
-				mapContainerStyle={containerStyle}
-				center={currentCenter}
-				zoom={18.25}
-			>
-				<Marker position={{ lat: location.lat, lng: location.lng }} />
-			</GoogleMap>
-			<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/Signup.jsx

@@ -146,7 +146,7 @@ function Signup() {
 				</div>
 				<div className='form-container input-div'>
 					<div className='form'>
-						<img src={logo} />
+						<img src={logo} alt='User Profile Photo' />
 						<div>
 							<input
 								type='email'