export default function ExhibitPage()

in src/components/pages/Exhibit/Exhibit.tsx [22:89]


export default function ExhibitPage({ exhibit, slug }: Props) {
  const {
    setId: setGalleryId,
    setIsOpen: setIsOpenGallery,
    setIsOpeningWithZoom: setIsOpeningGalleryWithZoom,
    setZoom: setGalleryZoom,
  } = useImageGalleryStore(
    useShallow((state) => ({
      setId: state.setId,
      setIsOpen: state.setIsOpen,
      setIsOpeningWithZoom: state.setIsOpeningWithZoom,
      setZoom: state.setZoom,
    })),
  );
  const locale = capitalizeFirstLetter(useLocale()) as LocaleCodeCamelcase;
  const [currentLocale, setCurrentLocale] = useState(locale);

  useEffect(() => {
    if (exhibit?.sys.id && slug && currentLocale) {
      triggerGtagVisit(exhibit.sys.id, currentLocale, slug);
    }
  }, [exhibit?.sys.id, slug, currentLocale]);

  useEffect((): void => {
    const initGalleryZoomWithSelectedImage = (href: string): void => {
      const params = new URLSearchParams(new URL(href).search);
      const idString = params.get('imageId') || '';
      const xString = params.get('x');
      const yString = params.get('y');
      const zoomString = params.get('zoom');
      const x = xString ? parseInt(xString, 10) : 0;
      const y = yString ? parseInt(yString, 10) : 0;
      const zoom = zoomString ? parseInt(zoomString, 10) : 0;

      setIsOpeningGalleryWithZoom(true);
      setGalleryId(idString);
      setGalleryZoom(zoom, x, y);
      setIsOpenGallery(true);
    };

    const clickEventListener = (e: MouseEvent): void => {
      const { href } = e?.target as HTMLAnchorElement;

      if (!href.includes('imageId')) {
        return;
      }

      e.preventDefault();

      initGalleryZoomWithSelectedImage(href);
    };

    document
      .getElementById('exhibit-description')
      ?.querySelectorAll('a')
      .forEach((link) => {
        link.addEventListener('click', clickEventListener);
      });
  });

  const title = exhibit[`name${currentLocale}`];

  if (!title) {
    return <ExhibitNotFoundMessage exhibit={exhibit} setLocale={setCurrentLocale} />;
  }

  return <ExhibitDetails exhibit={exhibit} selectedLocale={locale} />;
}