Troubles-not-ok

Troubles-not-ok.tsx

import React, { memo, useEffect, useMemo, useState } from "react";
import { Divider, Header, List, Image, Grid } from "semantic-ui-react";

type TMovie = {
  id: string;
  previewLink: string;
  name: string;
  year: string;
  description: string;
  rate: string;
};

/**
 * Рут
 */
export const Troubles = memo(function () {
  const [selected, setSelected] = useState<Record<string, string>>();
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  const listConfig: TMovie[] = useMemo(
    () => [
      {
        id: "i0",
        previewLink:
          "https://avatars.mds.yandex.net/get-kinopoisk-image/1900788/318cac11-6fc3-45f1-bf41-ad5de7c64927/1920x",
        name: "Лестница Иакова",
        year: "1990",
        description:
          "Иаков Сингер возвращается в Нью-Йорк после ранения во Вьетнаме. Терзаемый воспоминаниями о сыне и ужасах войны Иаков постепенно теряет контроль над реальностью.",
        rate: "7.5",
      },
      {
        id: "i1",
        previewLink:
          "https://avatars.mds.yandex.net/get-kinopoisk-image/1773646/41b9c191-4ddb-4676-acf4-8a1677178347/1920x",
        name: "Сердце Ангела",
        year: "1987",
        description:
          "Частный детектив попадает в круговорот загадочных смертей. Нуарный триллер с Микки Рурком и Робертом Де Ниро",
        rate: "7.5",
      },
      {
        id: "i2",
        previewLink:
          "https://avatars.mds.yandex.net/get-kinopoisk-image/1777765/98d9976a-2e3a-4c67-9b9e-621cb12ddedb/1920x",
        name: "Бомж с дробовиком",
        year: "2011",
        description:
          "Бродяга решает покончить с преступностью. Очень кровавый экшен, отдающий дань уважения боевикам 1970-х.",
        rate: "6.0",
      },
      {
        id: "i3",
        previewLink:
          "https://avatars.mds.yandex.net/get-kinopoisk-image/1704946/0f10e101-f247-4a0a-b659-1497988ee1c5/1920x",
        name: "Столетний старик, который вылез в окно и исчез",
        year: "2013",
        description:
          "Взрывы, погони и встреча со Сталиным. Ироничная трагикомедия об удивительной жизни шведского пенсионера.",
        rate: "7.3",
      },
      {
        id: "i4",
        previewLink:
          "https://avatars.mds.yandex.net/get-kinopoisk-image/6201401/7514c3c8-87d6-4179-9c30-6269d9f83987/1920x",
        name: "Форест Гамп",
        year: "1993",
        description:
          "Полувековая история США глазами чудака из Алабамы. Абсолютная классика Роберта Земекиса с Томом Хэнксом.",
        rate: "8.9",
      },
    ],
    [],
  );

  useEffect(() => {
    if (!selected) setSelected(listConfig[0]);
    if (!time) setTime(new Date().toLocaleTimeString());

    setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
  }, []);

  const handleSelectMovie = (id: string): void =>
    setSelected(listConfig.find((el) => el.id === id));

  return (
    <>
      <Header as="h2" content="Мои любимые фильмы" subheader={time} />

      <MovieList
        selected={selected}
        handleSelectMovie={handleSelectMovie}
        listConfig={listConfig}
      />

      {selected && <Card selected={selected} />}
    </>
  );
});

/**
 * Лист
 */
function MovieList({
  selected,
  handleSelectMovie,
  listConfig,
}: {
  selected: any;
  handleSelectMovie: Function;
  listConfig: any;
}) {
  return (
    <List selection divided relaxed size="large" verticalAlign="middle">
      {listConfig.map((el) => (
        <Item
          selected={selected}
          handleSelectMovie={handleSelectMovie}
          {...el}
        />
      ))}
    </List>
  );
}

/**
 * Элемент листа
 */
function Item({
  id,
  selected,
  previewLink,
  name,
  year,
  handleSelectMovie,
}: {
  id: string;
  selected: any;
  previewLink: string;
  name: string;
  year: string;
  handleSelectMovie: Function;
}) {
  return (
    <List.Item
      active={selected && selected.id === id}
      onClick={() => handleSelectMovie(id)}
    >
      <Image src={previewLink} avatar />
      <List.Content>
        <b>{name}</b> / {year}
      </List.Content>
    </List.Item>
  );
}

/**
 * Детализация по фильму
 */
function Card({ selected }: { selected: any }) {
  if (!selected) return null;

  return (
    <>
      <Divider />

      <Grid>
        <Grid.Row columns={2}>
          <Grid.Column>
            <Image rounded src={selected.previewLink} />
          </Grid.Column>

          <Grid.Column>
            <Grid>
              <Grid.Row>
                <Grid.Column>
                  <Header as="h1">{selected.name}</Header>
                </Grid.Column>
              </Grid.Row>

              <Grid.Row columns={2}>
                <Grid.Column>
                  <b>Год: {selected.year}</b>
                </Grid.Column>

                <Grid.Column>
                  <b>Рейтинг: {selected.rate}</b>
                </Grid.Column>
              </Grid.Row>

              <Grid.Row>
                <Grid.Column>{selected.description}</Grid.Column>
              </Grid.Row>
            </Grid>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </>
  );
}