detecting featured artist that are already included as part of the to…

…ur schedule

src/BaseInput.js

@@ -1,6 +1,7 @@
 import { useState, forwardRef, useImperativeHandle, useEffect } from "react";
 import * as React from 'react';
 import { TextField, Button, Stack, FormControl, InputLabel, NativeSelect } from '@mui/material';
+import moment from 'moment';
 
 const mapStyles = [
   { mapId: "1fc21c527f198d4e", displayName: "Default Theme", buttonColorCss: "0070d2" },
@@ -13,6 +14,11 @@ function degreesToRadians(degrees) {
   return degrees * Math.PI / 180;
 }
 
+function formattedDate(incomingDate) {
+  var date = new Date(incomingDate);
+  return moment(date).format('YYYY/MM/DD');
+}
+
 // Calculate the distance in kilometers between two coordinates
 function distanceInKmBetweenEarthCoordinates(lat1, lon1, lat2, lon2) {
   var earthRadiusKm = 6371;
@@ -79,14 +85,18 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start
         console.log(`add incoming concerts into allconcerts`);
         console.log(`total Number Of Concerts Memorized: ${allConcerts.length}`);
         //avoid adding the same concert.. check the title of the concert
-        const found = allConcerts.some((concert)=> { 
-
-          alert(`${incomingArtistName} is already playing as part of ${concert.title}`);
-
-          return resJson.includes(concert);});
-
-        if(!found)
-        {
+        const found = concerts.some((concert) => {
+
+          var found = resJson.map(concert => concert.title).includes(concert.title);
+
+          if (found) {
+            alert(`${incomingArtistName} is already playing as part of ${concert.title} on ${formattedDate(concert.date)}`);
+            return found;
+          }
+
+        });
+
+        if (!found) {
           setAllConcerts((prev) => prev.concat(resJson));
         }
 
@@ -135,19 +145,19 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start
 
     console.log(`filter the sorted concert by date , so we're only left with no more than 1 concert on the same date `);
     var newConcerts = incomingAllConcerts.filter((value, index, self) => {
-      return self.findIndex((v) => {     
-        
+      return self.findIndex((v) => {
+
         var vDate = new Date(v.date).toDateString();
-var valueDate = new Date(value.date).toDateString();
+        var valueDate = new Date(value.date).toDateString();
 
-        return  vDate.valueOf() == valueDate.valueOf();
+        return vDate.valueOf() == valueDate.valueOf();
       }) === index;
     });
 
     console.log(`filter the sorted concert by artist name, so we're only left with one concert per artist`);
-    newConcerts = newConcerts.filter((value, index, self)=>{
+    newConcerts = newConcerts.filter((value, index, self) => {
       return self.findIndex(v => v.artist === value.artist || v.title == value.title) === index;
-    }); 
+    });
 
     newConcerts = newConcerts.sort((a, b) => { return (new Date(a.date) - new Date(b.date)) });
     console.log(`concat the new concerts into the optimized list`);
@@ -180,27 +190,27 @@ var valueDate = new Date(value.date).toDateString();
       </form>
 
       <FormControl fullWidth>
-          <InputLabel
+        <InputLabel
           sx={{
             color: 'white'
           }}
-            variant="standard" htmlFor="mapStyle">
-            Map Style:
-          </InputLabel>
-          <NativeSelect
-            sx={{
-              color: 'white'
-            }}
-            defaultValue={mapStyles[0]}
-            id="mapStyle"
-            onChange={(event) => setMapStyle(event.target.value)}>
-            {mapStyles.map((mapStyle) => (
-              <option style={{backgroundColor: 'darkgrey'}} key={mapStyle.mapId} value={mapStyle.mapId}>
-                {mapStyle.displayName}
-              </option >
-            ))}
-          </NativeSelect>
-        </FormControl>
+          variant="standard" htmlFor="mapStyle">
+          Map Style:
+        </InputLabel>
+        <NativeSelect
+          sx={{
+            color: 'white'
+          }}
+          defaultValue={mapStyles[0]}
+          id="mapStyle"
+          onChange={(event) => setMapStyle(event.target.value)}>
+          {mapStyles.map((mapStyle) => (
+            <option style={{ backgroundColor: 'darkgrey' }} key={mapStyle.mapId} value={mapStyle.mapId}>
+              {mapStyle.displayName}
+            </option >
+          ))}
+        </NativeSelect>
+      </FormControl>
     </Stack>
   );
 });