Progress on Issue 1(Resolving Time Display Problem)
The first step in addressing the time display issue was to conduct a comprehensive walkthrough of the entire repository. I wanted to pinpoint where the time-related code resided, and it didn't take long to discover its existence within the view/script file.
Research and Solution Implementation
Now that I knew more precisely where the issue was, I set out to find a reliable and effective fix. The suggested method required figuring out the time difference between the message sending time and the current time using JavaScript's Date() object.
Here's a snippet of the code I have added to tackle the issue:
function formatTimestamp(time) {
const messageTime = new Date(time);
if (isNaN(messageTime.getTime())) {
throw new Error("Invalid date");
}
// Your formatting logic here based on the expected format
const options = { weekday: "long", hour: "2-digit", minute: "2-digit" };
return messageTime.toLocaleString([], options);
}
socket.on("new_message", (data) => {
try {
// Assuming data.time is in the format "H:mm"
const [hours, minutes] = data.time.split(":");
const messageTime = new Date();
messageTime.setHours(parseInt(hours, 10));
messageTime.setMinutes(parseInt(minutes, 10));
if (isNaN(messageTime.getTime())) {
throw new Error("Invalid date");
}
const formattedTime = formatTimestamp(messageTime.toISOString());
appendMessage(data.sender, data.text, formattedTime);
} catch (error) {
console.error("Error parsing date:", error);
}
});
I have done with the issue 1 and now waiting for the feedback and approval of the maintainer.
Progress on Issue 2(Integrating a Map for Pickup Locations)
In order to comprehend the complexities of map integration, I conducted extensive study. In order to understand the best practices and acquire insights into utilizing maps within our CampusCart application, I dug into the Google Cloud Platform.
I implemented the map feature by taking specific actions after conducting the research. I have added a new file, Map.jsx, to the CampusCart-FRONTEND repository's src/pages directory. The map functionality is incorporated using this file as a base.
Using the "@react-google-maps/api" package, I optimized integration and made Google Maps embedding easier. The first commit demonstrates the development of Map.jsx by creating a basic code structure for the map to be displayed and interactive buttons that allow users to quickly indicate where they will be picked up.
This is my Map.jsx file:
import React, { useState } from 'react';
import { GoogleMap, LoadScript, MarkerF } from '@react-google-maps/api';
const Map = () => {
const mapContainerStyle = {
width: '80%',
height: '400px',
borderRadius: '20px'
};
const locations = [
{ name: 'Seneca Newnham Campus', position: { lat: 43.796064317162404, lng: -79.34858433530803 }, address: '1750 Finch Ave E, North York, ON M2J 2X5' },
{ name: 'Seneca Markham Campus', position: { lat: 43.850033105714054, lng: -79.36710996197064 }, address: '8 The Seneca Way, Markham, ON L3R 5Y1' },
{ name: 'Seneca King Campus', position: { lat: 43.95435741446387, lng: -79.51980213157469 }, address: '13990 Dufferin St, King City, ON L7B 1B3' },
];
const [selectedLocation, setSelectedLocation] = useState(null);
const handleLocationClick = (index) => {
const location = locations[index];
setSelectedLocation(location);
};
const handleShowAllClick = () => {
setSelectedLocation(null);
};
return (
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: "20px",
paddingBottom: "20px",
}}
>
<h1 className='font-bold pt-4 text-2xl font-serif'>Select The Location</h1>
<LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}>
<GoogleMap
mapContainerStyle={mapContainerStyle}
zoom={selectedLocation ? 15 : 10}
center={selectedLocation ? selectedLocation.position : { lat: 43.850033105714054, lng: -79.36710996197064 }}
>
{locations.map((location, index) => (
<MarkerF
key={index}
position={location.position}
onClick={() => handleLocationClick(index)}
/>
))}
</GoogleMap>
</LoadScript>
<div className="grid grid-rows-4 grid-flow-col gap-4">
{locations.map((location, index) => (
<button
key={index}
className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg'
onClick={() => handleLocationClick(index)}
>
{location.name}
</button>
))}
{/* Button to show all locations */}
<button
className='bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg'
onClick={handleShowAllClick}
>
Show All
</button>
</div>
{selectedLocation && (
<div>
<div style={{ backgroundColor: 'Red', padding: '10px', borderRadius: '8px' }}>
<p className='text-white font-bold'>{selectedLocation.address}</p>
</div>
</div>
)}
</div>
);
};
export default Map;
Progress on Issue 3(Implementing ESLint and Resolving Errors)
To start, I carefully examined the repository structure, noticing both client-side and server-side code residing in the root of the repository. With this understanding, I proceeded to explore the official ESLint documentation to ensure a seamless integration into the project.
With this I have setup ESLint and created .eslintrc.js file.
This is my .eslintrc.js file:
module.exports = {
env: {
commonjs: true,
es2021: true,
node: true,
},
extends: "eslint:recommended",
overrides: [
{
env: {
node: true,
},
files: [".eslintrc.{js,cjs}"],
parserOptions: {
sourceType: "script",
},
},
],
parserOptions: {
ecmaVersion: "latest",
},
rules: { /* Add your rules here */ },
};
Then after I run the command eslint . command it showed me the below errors:
At the moment I just have solved the errors related to no-undef means the variables are not define.
In the next step I will dealt with the other errors.
Top comments (0)