Untitled
unknown
plain_text
a month ago
3.5 kB
19
Indexable
Never
import '../../styles/GeneMap.css'; import 'mapbox-gl/dist/mapbox-gl.css'; import React, { useState, useEffect } from 'react'; import { Slider } from '@mantine/core'; import { useAuth } from '../auth/Auth'; import { getMapDataById} from '../../api/Genealogy'; import SosaFilter from '../../filters/SosaFilter'; import useSosaFilter from '../../filters/useSosaFilter'; const MapGeo = (props) => { const { accessGenealogyToken } = useAuth(); const { data } = props; const [isLoading, setIsLoading] = useState(false); const [loading, setLoading] = useState(true); const [filteredByYear, setFilteredByYear] = useState([]); const [mapDatas, setMapDatas] = useState([]); const allYears = data.map((d) => d.year); const minYear = Math.min(...allYears); const maxYear = Math.max(...allYears); const [year, setYear] = useState(minYear); // Update geographic data when the selected year changes useEffect(() => { setFilteredByYear(data.filter((d) => d.year === year)); console.log(`Year: ${year}`); }, [data, year]); // Handle the change of the selected year const handleYearChange = (value) => { setIsLoading(true); setYear(value); setTimeout(() => { setIsLoading(false); }, 2000); }; const yearId = filteredByYear.length > 0 ? filteredByYear[0].id : 1; console.log(`YearID: ${yearId}`); // Fetch geographic data based on the selected year useEffect(() => { const fetchData = async () => { try { const mapDataByYear = await getMapDataById(yearId, accessGenealogyToken); console.log(`mapDatasBY:`, mapDataByYear); setMapDatas(mapDataByYear.maps); } catch (error) { console.error(error); } finally { setLoading(false); } }; fetchData(); }, [yearId, accessGenealogyToken]); console.log(`mapDatas: ${mapDatas}`); // Filter mapDatas by id equal to 1 const filteredMapDatasBy1 = mapDatas.filter((item) => item.id === 1); console.log(`filteredMapDatasBy1: ${filteredMapDatasBy1}`); const individualsInMapDatas = mapDatas.map((mapData) => mapData.individual); console.log(`individualsInMapDatas:`, individualsInMapDatas); const sosaFilter = useSosaFilter(mapDatas); const filteredMapDatas = individualsInMapDatas.filter((individuals) => { return ( sosaFilter.filteredData.includes(individuals) ); }); console.log(`filteredMapDatas: ${filteredMapDatas}`); return ( <div className="App"> <div className="filters-container"> <div className="slider-container"> <Slider min={minYear} max={maxYear} value={year} onChange={handleYearChange} labelAlwaysOn /> </div> <div className="filter-section"> <SosaFilter showOnlyWithSosa={sosaFilter.showOnlyWithSosa} handleShowOnlyWithSosaChange={ sosaFilter.handleShowOnlyWithSosaChange } /> </div> </div> <div> {yearId} </div> </div> ); }; export default MapGeo;