Release 0.4 Progress

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.