From 8099a30950abdcabc26d75b482dc8fb55d21514d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kratochv=C3=ADl?= <xkrato10@fi.muni.cz>
Date: Fri, 24 Jun 2022 12:38:18 +0200
Subject: [PATCH] feat: SearchPage - added form interface, deleted example data
---
frontend/src/components/SearchPage.tsx | 59 ++++++++------------------
1 file changed, 17 insertions(+), 42 deletions(-)
diff --git a/frontend/src/components/SearchPage.tsx b/frontend/src/components/SearchPage.tsx
index a71a9e1..99cc473 100644
--- a/frontend/src/components/SearchPage.tsx
+++ b/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"}
/>
--
GitLab