SearchPage.tsx

import { AudioOutlined } from "@ant-design/icons";
import { Card, Input, List, Space, Table, Typography } from "antd";
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { cardsDataExample, MovieIO } from "./Preview";

const { Search } = Input;


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

//for searching movies
export const SearchPage = () => {
  const [pressed, setPressed] = useState(false);
  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" }}
      >
        <Search
          placeholder="input search text"
          allowClear
          enterButton="Search"
          size="large"
          onChange={(e) => setSearch(e.target.value)}
          onSearch={onSearch}
          width="400 px"
        />
      </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>
      )}
    </>
  );
};