feat: SearchPage - added form interface, deleted example data

frontend/src/components/SearchPage.tsx

@@ -18,42 +18,6 @@ import { CategoryIO, DirectorIO, MovieIO } from "./Preview";
 
 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",
-    },
-  },
-];
-
 const runtimeMarks = {
   0: "0",
   30: "30",
@@ -77,6 +41,15 @@ const yearMarks = {
   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
@@ -87,6 +60,8 @@ export const SearchPage = () => {
   const [categories, setCategories] = useState<CategoryIO[]>([]);
   const [directors, setDirectors] = useState<DirectorIO[]>([]);
 
+  const [resultMovies, setResultMovies] = useState<MovieIO[]>([]);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -104,7 +79,7 @@ export const SearchPage = () => {
   }, []);
 
   // here will be API call for search on BE, everything needed is in values
-  const onSubmit = (values: any) => {
+  const onSubmit = async (values: IFormProps) => {
     alert(JSON.stringify(values));
   };
 
@@ -219,7 +194,7 @@ export const SearchPage = () => {
           </Row>
           <Row gutter={20}>
             <Col span={12}>
-              <Form.Item name="runtime" label="Runtime minutes">
+              <Form.Item name="runTimeMinutes" label="Runtime minutes">
                 <Slider
                   marks={runtimeMarks}
                   range={{ draggableTrack: true }}
@@ -233,7 +208,7 @@ export const SearchPage = () => {
 
           <Row gutter={20}>
             <Col span={12}>
-              <Form.Item name="published" label="Year published">
+              <Form.Item name="publishedAt" label="Year published">
               <Slider
                 marks={yearMarks}
                 range={{ draggableTrack: true }}
@@ -247,7 +222,7 @@ export const SearchPage = () => {
           </Row>
           <Row gutter={20}>
             <Col span={6}>
-              <Form.Item name="category" label="Category">
+              <Form.Item name="categoryId" label="Category">
               <Select
                 showSearch
                 style={{ width: "100%" }}
@@ -275,7 +250,7 @@ export const SearchPage = () => {
               </Form.Item>
             </Col>
             <Col span={6}>
-              <Form.Item name="director" label="Director">
+              <Form.Item name="directorId" label="Director">
               <Select
                 showSearch
                 style={{ width: "100%" }}
@@ -351,7 +326,7 @@ export const SearchPage = () => {
               }; //here change to view movie
             }}
             columns={columns}
-            dataSource={resultsExample}
+            dataSource={resultMovies}
             bordered
             title={() => "Results"}
           />