SearchPage.tsx

import { SearchOutlined } from "@ant-design/icons";
import {
  Button,
  Col,
  Divider,
  Form,
  Input,
  Row,
  Select,
  Slider,
  Space,
  Table,
} from "antd";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import axiosConfig from "../axios-config";
import { CategoryIO, DirectorIO, MovieIO } from "../dto";

const { Option } = Select;

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",
};

interface IFormProps {
  name: string;
  originalName: string;
  runTimeMinutes: number[];
  publishedAt: number[];
  categoryId: string;
  directorId: string;
};

//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();

  const [categories, setCategories] = useState<CategoryIO[]>([]);
  const [directors, setDirectors] = useState<DirectorIO[]>([]);

  const [resultMovies, setResultMovies] = useState<MovieIO[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const catResponsePromise = axiosConfig.get<CategoryIO[]>('/categories');
      const dirResponsePromise = axiosConfig.get<DirectorIO[]>('/directors');

      setCategories([ ...((await catResponsePromise).data) ]);
      setDirectors([ ...((await dirResponsePromise).data) ]);
    };

    void fetchData();
  }, []);

  const onSubmit = async (values: IFormProps) => {
    try {
      const response = await axiosConfig.get<MovieIO[]>(
        `/movies`, 
        {
          params: {
            name: values.name,
            origName: values.originalName,
            runtime: {
              gte: values.runTimeMinutes ? values.runTimeMinutes[0] : undefined,
              lte: values.runTimeMinutes ? values.runTimeMinutes[1] : undefined,
            },
            published: {
              gte: values.publishedAt ? values.publishedAt[0] : undefined,
              lte: values.publishedAt ? values.publishedAt[1] : undefined,
            },
            categoryId: values.categoryId,
            directorId: values.directorId,
          }
        }
      );
      setResultMovies([ ...response.data ]);
    } catch {
      // TODO: on error
      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();

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

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

        // day
        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 than name
        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="runTimeMinutes" 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}>
              <Form.Item name="publishedAt" label="Year published">
              <Slider
                marks={yearMarks}
                range={{ draggableTrack: true }}
                min={1920}
                max={new Date().getFullYear()}
                defaultValue={[2000, 2010]}
              ></Slider>
              </Form.Item>
            </Col>
            <Col></Col>
          </Row>
          <Row gutter={20}>
            <Col span={6}>
              <Form.Item name="categoryId" label="Category">
              <Select
                showSearch
                style={{ width: "100%" }}
                placeholder="Search or Select"
                optionFilterProp="children"
                filterOption={(input, option) =>
                  (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                }
                filterSort={(optionA, optionB) =>
                  (optionA!.children as unknown as string)
                    .toLowerCase()
                    .localeCompare((optionB!.children as unknown as string).toLowerCase())
                }
              >
                {categories.map((category: CategoryIO) => {
                  return (
                    <Option key={category.id} value={category.id}>
                      {category.name}
                    </Option>
                  );
                })}
              </Select>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="directorId" label="Director">
              <Select
                showSearch
                style={{ width: "100%" }}
                placeholder="Search or Select"
                optionFilterProp="children"
                filterOption={(input, option) =>
                  (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                }
                filterSort={(optionA, optionB) =>
                  (optionA!.children as unknown as string)
                    .toLowerCase()
                    .localeCompare((optionB!.children as unknown as string).toLowerCase())
                }
              >
                {directors.map((director: DirectorIO) => {
                  return (
                    <Option key={director.id} value={director.id}>
                      {`${director.name} ${director.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); // TODO: remove later
                },
              }; // TODO: here change to view movie
            }}
            columns={columns}
            dataSource={resultMovies}
            rowKey='id'
            bordered
            title={() => "Results"}
          />
        </Space>
      )}
    </>
  );
};