SearchPage.tsx

import { AudioOutlined } from "@ant-design/icons";
import { SearchOutlined } from '@ant-design/icons';
import {
  Button,
  Card,
  Col,
  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",
    published: "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",
    published: "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 delte in future
  const [searchValue, setSearch] = useState("");

  //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"

  //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.published.split(".").reverse();
        const second = b.published.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>
          <Row>
            <Col span={6}>
              <div>Name</div> <Input></Input>
            </Col>
            <Col span={6}>
              <div>Original name</div>
              <Input></Input>
            </Col>
          </Row>
          <Col span={12}>
            <div>Runtime</div>
            <Slider
              marks={runtimeMarks}
              range={{ draggableTrack: true }}
              step={10}
              max={300}
              defaultValue={[60, 120]}
            ></Slider>
          </Col>

          <Row>
            <Col span={12}>
              <div>Year published</div>
              <Slider
                marks={yearMarks}
                range={{ draggableTrack: true }}
                min={1920}
                max={2022}
                defaultValue={[2000, 2010]}
              ></Slider>
            </Col>
            <Col></Col>
          </Row>
          <Row>
            <Col span={6}>
              <div>Category</div>
              <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>
            </Col>
            <Col span={6}>
              <div>Directors</div>
              <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>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
            <Button style={{width: "100%"}} type="primary" icon={<SearchOutlined />} size="large">
      Search
    </Button>
            </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>
      )}
    </>
  );
};