import { useParams } from "react-router-dom";
import Header from "./components/Header";
import "./index.scss";
import { useEffect, useMemo } from "react";
import Body from "./components/Body";
import { initQueryResult, queryResultStore } from "./store";

export default function ArtistView() {
  const params = useParams();

  const artistItem = useMemo(() => {
    const artistInState = history.state.usr?.artistItem ?? {};

    return {
      ...artistInState,
      platform: params?.platform,
      id: params?.id,
    } as IArtist.IArtistItem;
  }, [params?.platform, params?.id]);

  useEffect(() => {
    return () => {
      queryResultStore.setValue(initQueryResult);
    };
  })

  return (
    <div className="artist-view--container">
      <Header artistItem={artistItem}></Header>
      <Body artistItem = {artistItem}></Body>
    </div>
  );
}
