Stringify -Objekt -Haken -Abhängigkeits -Array Problem ⇐ JavaScript

[Anonymous]

Es gibt Probleme, wenn es um das Abhängigkeitsarray geht, das inkonsistente Daten liefert, wenn das Value Stringify im Abhängigkeitsarray verwendet wird. Wenn ich die Daten nach Städten filtriert habe, können die Diagramme keine Daten herausfiltern, wenn die Y -Variable gleich ist. Angenommen, ich habe zum Beispiel Treffen in Tokio, JP, mit 2 Besprechungen gefiltert und es wird nicht horizontal in die aktuelle Stadt geändert, um Toronto, CN, mit 2 Sitzungen zu sagen. Dies ist eine konsistente Inkonsistenz in den Daten, wenn Sie die Stadt mit der gleichen Anzahl von Objekten haben, die Änderung des Inhalts dieser Objekte für die Fyi-Stadtnamenname nicht bemerkt.

Code: Select all

import React from 'react';[b]import { useEffect, useState } from 'react';
import CitySearch from './components/CitySearch';
import EventList from './components/EventList';
import NumberOfEvents from './components/NumberOfEvents'
import { getEvents, extractLocations } from './api';
import './App.css';
import { CityAlert, NumberAlert, EventAlert } from './components/Alert';
import CityEventsChart from './components/CityEventsChart';
import EventGenresChart from './components/EventGenresChart';

const App = () => {
const [events, setEvents] = useState([]);
const [allLocations, setAllLocations] = useState([]);
const [currentCity, setCurrentCity] = useState("See all cities");
const [currentNOE, setCurrentNOE] = useState(32);
const [cityAlert, setCityAlert] = useState("");
const [numberAlert, setNumberAlert] = useState("");
const [eventAlert, setEventAlert] = useState("");
const [isOnline, setIsOnline] = useState(navigator.onLine);
// const [defaultFiltered, setDefaultFiltered] = useState("")

const updateOnlineStatus = () => {
const online = navigator.onLine;
setIsOnline(online);
setEventAlert(online ? "" : "Currently viewing Offline Database");
};
useEffect(() => {
updateOnlineStatus();
fetchData();
window.addEventListener("online", updateOnlineStatus);
window.addEventListener("offline", updateOnlineStatus);
return () => {
window.removeEventListener("online", updateOnlineStatus);
window.removeEventListener("offline", updateOnlineStatus);
};
}, [currentCity, currentNOE]);

const fetchData = async () => {
const allEvents = await getEvents();
const filteredEvents = currentCity === "See all cities" ?
allEvents :
allEvents.filter(event => event.location === currentCity)
setEvents(filteredEvents.slice(0, currentNOE));
setAllLocations(extractLocations(allEvents));
}

return (

Meetup App
[img]/calendar.png[/img]


{eventAlert.length ?  : null}



{cityAlert.length ?  : null}



{numberAlert ?  : null}






);
}

export default App;
< /code>
import mockData from './mock-data';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';  // Include the CSS for styling

export const getAccessToken = async () => {
const accessToken = localStorage.getItem('access_token');
const tokenCheck = accessToken &&  (await checkToken(accessToken));

if (!accessToken || tokenCheck.error) {
await localStorage.removeItem("access_token");
const searchParams = new URLSearchParams(window.location.search);
const code = await searchParams.get("code");
if (!code) {
const response = await fetch(
"https://pp3rdn62qf.execute-api.us-east-1.amazonaws.com/dev/api/get-auth-url"
);
const result = await response.json();
const { authUrl } = result;
return (window.location.href = authUrl);
}
return code && getToken(code);
}
return accessToken;
};

export const extractLocations = (events) => {
const extractedLocations = events.map((event) => event.location);
const locations = [...new Set(extractedLocations)];
return locations;
};

const checkToken = async (accessToken) => {
const response = await fetch(
`https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=${accessToken}`
);
const result = await response.json();
return result;
};

const removeQuery = () => {
let newurl;
if (window.history.pushState && window.location.pathname) {
newurl =
window.location.protocol +
"//" +
window.location.host +
window.location.pathname;
window.history.pushState("", "", newurl);
} else {
newurl = window.location.protocol + "//" + window.location.host;
window.history.pushState("", "", newurl);
}
};

export const getEvents = async () => {
if (window.location.href.startsWith("http://localhost")) {
return mockData;
}
if (!navigator.onLine) {
const events = localStorage.getItem("lastEvents");
NProgress.done();
return events?JSON.parse(events):[];
}
const token = await getAccessToken();
if (token) {
removeQuery();
const url =  "https://pp3rdn62qf.execute-api.us-east-1.amazonaws.com/
dev/api/get-calendar- events" + "/" + token;
const response = await fetch(url);
const result = await response.json();

if (result) {
NProgress.done();
localStorage.setItem("lastEvents", JSON.stringify(result.events));
return result.events;
} else {
return null;
}
};
return null;
};

const getToken = async (code) => {
try {
const encodeCode = encodeURIComponent(code);

const response = await fetch( 'https://pp3rdn62qf.execute-api.us-east-1.amazonaws.com/dev/api/token' + '/' + encodeCode);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
const { access_token } = await response.json();
access_token && localStorage.setItem("access_token", access_token);
return access_token;
} catch (error) {
error.json();
}
}

SRC/Components/CityEventschart.jsx

Code: Select all

import React, { useState, useEffect } from 'react';
import {
ScatterChart,
Scatter,
XAxis, YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
Label
} from 'recharts';

const CityEventsChart = ( {allLocations, events}  ) => {
const [data, setData] = useState([]);
const getData = () => {
const data = allLocations.map((location) => {
const countnumber = events.filter((event) => event.location === location).length
const city = location.split((/, | - /))[0]
return { city, countnumber };
})
return data;
};
useEffect(() => {
setData(getData());
}, [JSON.stringify(events)]);// this works consistantly

// [`${events}`]) SAME NUMBER OBJECTS = SAME ARRAY WHEN VALUE SHOULD OF CHANGED CF PLEASE   INVESTIGATE

return (













);
}

export default CityEventsChart;
< /code>
Ereignisgenres-Diagramm < /p>
import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from 'recharts';
import { useEffect, useState} from 'react';

const EventGenresChart = ({ allLocations, events }) => {
const [data, setData] = useState([]);
const genres = ['React', 'JavaScript', 'Node', 'jQuery', 'Angular' ];
const COLORS = ['#0088FE','#00C49F','#FFBB28','#FF8042','#8884d8'];
const getData = () => {
const data = genres.map((genre) => {
const filteredEvents = events.filter(event => event.summary.includes(genre));
return {
name: genre,
value: filteredEvents.length
}
})
return data;
};
useEffect(() => {
setData(getData());
}, [JSON.stringify(events)]);// this works consistantly

// [`${events}`]) SAME NUMBER OBJECTS = SAME ARRAY WHEN VALUE SHOULD OF CHANGED CF PLEASE  INVESTIGATE

return (



{data.map((entry, index) => (

))}




);
}

export default EventGenresChart;
< /code>
Stadtsuchkomponente < /p>
import React from 'react';
import { useState, useEffect, useRef } from "react";
import '../../src/App.css';

const CitySearch = ({ setCurrentCity, allLocations,
setCityAlert}) => {
const [showSuggestions, setShowSuggestions] = useState(false);
const [suggestions, setSuggestions] = useState(allLocations);
const SuggestionListRef = useRef(null);
const [eventAlert, setEventAlert] = useState("");
const [query, setQuery] = useState("");

const handleInputChanged = (event) => {
const value = event.target.value;
setQuery(value); // Always reflect what's typed

const trimmedValue = value.trim();

// Filter suggestions based on input
const filteredSuggestions = allLocations.filter((location)
=>
location.toLowerCase().includes(trimmedValue.toLowerCase())
);

if (filteredSuggestions.length === 0) {
setSuggestions([]);
setCityAlert("We can not find the city you are looking
for.  Please try another city.");
} else {
setSuggestions(filteredSuggestions);
/// setCityAlert(""); CANNOT FIND FUNCTION DON'T GET
WHY!!!!
}
setShowSuggestions(true);
};

const handleItemClicked = (event) => {
const value = event.target.textContent;
setQuery(value);
setShowSuggestions(false); // Hide suggestions
setCurrentCity(value);
setEventAlert("");
};

// Handle clicking outside the dropdown
useEffect(() => {
const handleClickOutside = (event) => {
if (SuggestionListRef.current &&
!SuggestionListRef.current.contains(event.target)) {
setShowSuggestions(false); // Hide suggestions when
clicking outside
}
};

document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown",
handleClickOutside);
};
}, [`${allLocations}`]);

return (

Choose your nearest city
 {
if (query.trim() === "") {
setSuggestions(allLocations);
}
setShowSuggestions(true);
}}
onChange={handleInputChanged}
data-testid="search-input"
/>
{showSuggestions && (
[list]      {SuggestionListRef}>

{suggestions.map((suggestion, index) => (
[*]                className="cityName"
onClick={handleItemClicked}
key={`${suggestion}-${index}`}
>
{suggestion}

))}
[*]              className="cityName"
key="See all cities"
onClick={handleItemClicked}
>
See all cities[/b]

[/list]
)}

);
};

export default CitySearch;
< /code>
Anzahl der Ereigniskomponenten < /p>
import React from 'react';
import { useState } from "react";
import '../App.css';

const NumberOfEvents = ({setCurrentNOE, currentNOE,
setNumberAlert }) => {
const handleInputChanged = (event) => {
const value = event.target.value;

// Convert value to a number if it's a valid numeric
string
const numericValue = Number(value);

setCurrentNOE(value);

// Validate the input
if (isNaN(numericValue)) {
setNumberAlert('Enter a valid number');
} else if (numericValue < 1) {
setNumberAlert('Number must be greater than 0');
} else if (!Number.isInteger(numericValue)) {
setNumberAlert('Input must be a whole number')
}
else
{
setNumberAlert('');
setCurrentNOE(numericValue); // Update the main
state only when input is valid
}
};

return (

Number of Events:


);
};

export default NumberOfEvents;

SRC/Components/eventlist.js

Code: Select all

import React from 'react';
import Event from "./Event";
import '../../src/App.css';
const EventList = ({ events }) => {
return (
[list]
{events ?
events.map(event => ) :
null}
[/list]
);
}

export default EventList;

SRC/Components/event.js

Code: Select all

import React from 'react';
import Button from './Button'
import '../../src/App.css';

const Event = ({ event }) => {
return (
[*]
{event.summary}
{event.start.dateTime}
{event.end.dateTime}
{event.location}


);
}

export default Event;