{"size": 953, "ext": "js", "max_stars_repo_path": "example/src/components/PhotoModal.js", "max_stars_repo_name": "bence-toth/nano-router", "max_stars_repo_stars_event_min_datetime": "2020-08-28T10:36:58.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-28T15:58:29.000Z", "max_issues_repo_path": "example/src/components/PhotoModal.js", "max_issues_repo_name": "bence-toth/nano-router", "max_issues_repo_issues_event_min_datetime": "2021-09-02T18:10:17.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-14T15:18:43.000Z", "max_forks_repo_path": "example/src/components/PhotoModal.js", "max_forks_repo_name": "bence-toth/nano-router", "max_forks_repo_forks_event_min_datetime": "2021-03-16T06:33:46.000Z", "max_forks_repo_forks_event_max_datetime": "2021-03-16T06:33:46.000Z"}
{"max_stars_count": 8, "max_issues_count": 40, "max_forks_count": 1, "avg_line_length": 23.825, "max_line_length": 77, "alphanum_fraction": 0.6002098636}
import React from "react";

import { Modal, Header, Body, Close } from "@zendeskgarden/react-modals";

import { useRouter, useParams, useLocation } from "@nano-router/react";
import { useData } from "../hooks/useData";

import { LoadingPanel } from "./LoadingPanel";

export const PhotoModal = () => {
  const { state } = useLocation();
  const { userId, photoId } = useParams();
  const router = useRouter();

  const { data, loading, error } = useData(
    `https://jsonplaceholder.typicode.com/photos/${photoId}`,
    state
  );

  if (error) throw error;

  const onClose = () => {
    router.navigate({
      route: "users/photos",
      params: { userId },
      replace: true,
    });
  };

  const { url, alt } = state || data || {};

  return (
    <Modal onClose={onClose}>
      <Header>Photo</Header>
      <Body>{loading ? <LoadingPanel /> : <img src={url} alt={alt} />}</Body>
      <Close aria-label="Close modal" />
    </Modal>
  );
};
