SearchPage.tsx

import { AudioOutlined } from "@ant-design/icons";
import { SearchOutlined } from "@ant-design/icons";
import {
  Button,
  Card,
  Col,
  Divider,
  Form,
  Input,
  List,
  Row,
  Select,
  Slider,
  Space,
  Table,
  Typography,
} from "antd";
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { cardsDataExample, CategoryIO, DirectorIO, MovieIO } from "./Preview";

const { Search } = Input;
const { Option } = Select;

//TODO replace with result of input search and API call
const resultsExample: MovieIO[] = [
  {
    id: "789",
    name: "Saw",
    originalName: "Saw",
    intro: "Jigsaw is the bad guy and this is the game",
    picture:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Jo6M-3oyAlMsB4-F__Z9bwHaHa%26pid%3DApi&f=1",
    publishedAt: "1.6.2000",
    runTimeMinutes: 120,
    director: {
      id: "123456789",
      name: "Karel",
      surname: "Macka",
      birthDate: "20.2.1987",
    },
  },
  {
    id: "999",
    name: "Saw 2",
    originalName: "Saw 2",
    intro: "The sequel to the first one",
    picture:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages01.kaleidescape.com%2Ftransformed%2Fcovers%2F1134x1624s%2F189%2F18976008.jpg&f=1&nofb=1",
    publishedAt: "1.1.2002",
    runTimeMinutes: 150,
    director: {
      id: "123456789",
      name: "Karel",
      surname: "Vomacka",
      birthDate: "20.2.1987",
    },
  },
];

//replace with api call only once
const categoriesList: CategoryIO[] = [
  {
    id: "123",
    name: "Horror",
    movies: [],
  },
  {
    id: "1231",
    name: "Comedy",
    movies: [],
  },
  {
    id: "1232",
    name: "Drama",
    movies: [],
  },
  {
    id: "1234",
    name: "Romcom",
    movies: [],
  },
  {
    id: "1235",
    name: "Western",
    movies: [],
  },
  {
    id: "1236",
    name: "Documentary",
    movies: [],
  },
  {
    id: "1237",
    name: "Adam Sandler",
    movies: [],
  },
  {
    id: "1238",
    name: "Czech",
    movies: [],
  },
];

//replace with api call only once
const directorsList: DirectorIO[] = [
  {
    name: "Karel1",
    surname: "Vomacka",
    birthDate: "17.5.1979",
    id: "1561",
  },
  {
    name: "Karel2",
    surname: "Vomacka",
    birthDate: "17.5.1979",
    id: "1562",
  },
  {
    name: "Karel3",
    surname: "Vomacka",
    birthDate: "17.5.1979",
    id: "1563",
  },
  {
    name: "Karel4",
    surname: "Vomacka",
    birthDate: "17.5.1979",
    id: "1564",
  },
  {
    name: "Karel5",
    surname: "Vomacka",
    birthDate: "17.5.1979",
    id: "1565",
  },
  {
    name: "Karel6",
    surname: "Vomacka",
    birthDate: "17.5.1979",
    id: "1566",
  },
];

const runtimeMarks = {
  0: "0",
  30: "30",
  60: "60",
  90: "90",
  120: "120",
  150: "150",
  180: "180",
  210: "210",
  240: "240",
  270: "270",
  300: "300",
};

const yearMarks = {
  1920: "1920",
  1940: "1940",
  1960: "1960",
  1980: "1980",
  2000: "2000",
  2020: "2020",
};

//for searching movies
export const SearchPage = () => {
  const [pressed, setPressed] = useState(true); //may modify or delete in future
  const [searchValue, setSearch] = useState("");

  const [form] = Form.useForm();

  // here will be API call for search on BE, everything needed is in values
  const onSubmit = (values: any) => {
    alert(JSON.stringify(values));
  };

  //function that happens when search button is pressed
  const onSearch = (value: string) => {
    console.log(searchValue); // just debug tool
    setPressed(true);
  }; // API request search goes here - request search with value inside variable "searchValue"

  const onReset = () => {
    form.resetFields();
  };
  //columns stays the same
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      sorter: (a: MovieIO, b: MovieIO) => {
        if (a.name < b.name) {
          return -1;
        }
        if (a.name > b.name) {
          return 1;
        }
        return 0;
      },
      render: (text: string, record: MovieIO) => (
        <Link to={`/movie/${record.id}`}>
          <a>{record.name}</a>
        </Link>
      ),
    },
    {
      title: "Original name",
      className: "original-name",
      dataIndex: "originalName",
      sorter: (a: MovieIO, b: MovieIO) => {
        if (a.originalName < b.originalName) {
          return -1;
        }
        if (a.originalName > b.originalName) {
          return 1;
        }
        return 0;
      },
    },
    {
      title: "Release Date",
      dataIndex: "published",
      sorter: (a: MovieIO, b: MovieIO) => {
        const first = a.publishedAt.split(".").reverse();
        const second = b.publishedAt.split(".").reverse();
        if (first[0] > second[0]) {
          return 1;
        }
        if (first[0] < second[0]) {
          return -1;
        }

        if (first[1] > second[1]) {
          return 1;
        }
        if (first[1] < second[1]) {
          return -1;
        }

        if (first[2] > second[2]) {
          return 1;
        }
        if (first[2] < second[2]) {
          return -1;
        }
        return 0;
      },
    },
    {
      title: "Runtime",
      dataIndex: "runtimeMinutes",
      sorter: (a: MovieIO, b: MovieIO) => a.runTimeMinutes - b.runTimeMinutes,
    },
    {
      title: "Director",
      dataIndex: ["director", "surname"],
      sorter: (a: MovieIO, b: MovieIO) => {
        //surname has higher priority
        if (a.director.surname < b.director.surname) {
          return -1;
        }
        if (a.director.surname > b.director.surname) {
          return 1;
        }

        if (a.director.name < b.director.name) {
          return -1;
        }
        if (a.director.name > b.director.name) {
          return 1;
        }
        return 0;
      },
      render: (text: string, record: MovieIO) => (
        <Link to={`/director/${record.director.id}`}>
          <a>
            {record.director.name} {record.director.surname}
          </a>
        </Link>
      ),
    },
  ];
  return (
    <>
      <Space
        direction="vertical"
        style={{ display: "flex", padding: 24, textAlign: "center" }}
      >
        <Form form={form} onFinish={onSubmit}>
          <Row gutter={20}>
            <Col span={6}>
              <Form.Item name="name" label="Name">
                <Input></Input>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="originalName" label="Original name">
                <Input></Input>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={20}>
            <Col span={12}>
              <Form.Item name="runtime" label="Runtime minutes">
                <Slider
                  marks={runtimeMarks}
                  range={{ draggableTrack: true }}
                  step={10}
                  max={300}
                  defaultValue={[60, 120]}
                ></Slider>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={20}>
            <Col span={12}>
              <div>Year published</div>
              <Form.Item name="published" label="Year published">
              <Slider
                marks={yearMarks}
                range={{ draggableTrack: true }}
                min={1920}
                max={2022}
                defaultValue={[2000, 2010]}
              ></Slider>
              </Form.Item>
            </Col>
            <Col></Col>
          </Row>
          <Row gutter={20}>
            <Col span={6}>
              <Form.Item name="category" label="Category">
              <Select
                showSearch
                style={{ width: "100%" }}
                placeholder="Search to Select"
                optionFilterProp="children"
                filterOption={(input, option) =>
                  (option!.children as unknown as string).includes(input)
                }
                filterSort={(optionA, optionB) =>
                  (optionA!.children as unknown as string)
                    .toLowerCase()
                    .localeCompare(
                      (optionB!.children as unknown as string).toLowerCase()
                    )
                }
              >
                {categoriesList.map((cat: CategoryIO) => {
                  return <Option value={cat.id}>{cat.name}</Option>;
                })}
              </Select>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="director" label="Director">
              <Select
                showSearch
                style={{ width: "100%" }}
                placeholder="Search to Select"
                optionFilterProp="children"
                filterOption={(input, option) =>
                  (option!.children as unknown as string).includes(input)
                }
                filterSort={(optionA, optionB) =>
                  (optionA!.children as unknown as string)
                    .toLowerCase()
                    .localeCompare(
                      (optionB!.children as unknown as string).toLowerCase()
                    )
                }
              >
                {directorsList.map((dir: DirectorIO) => {
                  return (
                    <Option value={dir.id}>
                      {dir.name + " " + dir.surname}
                    </Option>
                  );
                })}
              </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Divider></Divider>
            </Col>
          </Row>
          <Row gutter={20}>
            <Col span={6}>
              <Form.Item name="searchbutton">
              <Button
                htmlType="submit"
                style={{ width: "100%" }}
                type="primary"
                icon={<SearchOutlined />}
                size="large"
              >
                Search
              </Button>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="reset">
              <Button
                size="large"
                type="default"
                style={{ width: "100%" }}
                onClick={onReset}
              >
                Reset
              </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Space>
      {pressed && (
        <Space
          direction="vertical"
          style={{ display: "flex", padding: 24, textAlign: "left" }}
        >
          <Table
            onRow={(record, rowIndex) => {
              return {
                onClick: (event) => {
                  console.log(record.id); //remove later
                },
              }; //here change to view movie
            }}
            columns={columns}
            dataSource={resultsExample}
            bordered
            title={() => "Results"}
          />
        </Space>
      )}
    </>
  );
};