Untitled

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;