import React, { useEffect, MouseEvent, useState, useRef } from "react"; import { Outlet, useSearchParams } from "react-router-dom"; import Theme from "./theme"; import Citylist from "../Pages/citylist"; import { MySlide } from "../Pages/myslide"; import { mainimgApi } from "../apis"; import { MainimgType } from "../types"; const initSearchParams = { theme: "", city: "" }; export default function Body() { const [searchParams, setSearchParams] = useSearchParams(initSearchParams); const [getimgs, setGetimgs] = useState([]); async function imgsData() { const imgs = await mainimgApi.getmainimg(); setGetimgs(imgs); } useEffect(() => { imgsData(); }, []); useEffect(() => { console.log(searchParams.get("theme"), searchParams.get("city")); setSearchParams(searchParams); }, []); const themeHandleClick = (event: MouseEvent) => { console.log(`theme id= ${event.currentTarget.id}`); setSearchParams({ ...Object.fromEntries(searchParams), theme: event.currentTarget.id, }); // setPage(1) }; const cityHandleClick = (event: MouseEvent) => { console.log(`city id= ${event.currentTarget.id}`); setSearchParams({ ...Object.fromEntries(searchParams), city: event.currentTarget.id, }); }; //picture insert let themechange = searchParams.get("theme"); let citylistchange = searchParams.get("city"); const Idpics = getimgs.filter((p) => { return ( (p.theme == themechange && p.city == citylistchange) || (p.theme == themechange && citylistchange == "") || (themechange == "" && p.city == citylistchange) || (themechange == "" && citylistchange == "") ); }); let limit = 4; const numPages = Math.ceil(Idpics.length / limit); const slides = []; for (let i = 0; i < numPages; i++) { const k = [ Idpics.slice(i * limit, i * limit + limit).map( (picture, index: number) => (
{picture.title}
) ), ]; slides.push(k); } return (
// Body Page ); }