From 857af39a96497470615257cf7dc0044a02c8febf 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 11:25:33 +0200
Subject: [PATCH] feat: SearchPage - fetching categories from the API
---
frontend/src/components/SearchPage.tsx | 66 ++++++++------------------
1 file changed, 19 insertions(+), 47 deletions(-)
diff --git a/frontend/src/components/SearchPage.tsx b/frontend/src/components/SearchPage.tsx
index f95dc3d..dd869d9 100644
--- a/frontend/src/components/SearchPage.tsx
+++ b/frontend/src/components/SearchPage.tsx
@@ -15,8 +15,9 @@ import {
Table,
Typography,
} from "antd";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
+import axiosConfig from "../axios-config";
import { cardsDataExample, CategoryIO, DirectorIO, MovieIO } from "./Preview";
const { Search } = Input;
@@ -58,50 +59,6 @@ const resultsExample: MovieIO[] = [
},
];
-//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[] = [
{
@@ -172,6 +129,21 @@ export const SearchPage = () => {
const [form] = Form.useForm();
+ const [categories, setCategories] = useState<CategoryIO[]>([]);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await axiosConfig.get<CategoryIO[]>('/categories');
+ setCategories([ ...response.data ]);
+ } catch {
+
+ }
+ };
+
+ void fetchData();
+ }, []);
+
// here will be API call for search on BE, everything needed is in values
const onSubmit = (values: any) => {
alert(JSON.stringify(values));
@@ -350,8 +322,8 @@ export const SearchPage = () => {
)
}
>
- {categoriesList.map((cat: CategoryIO) => {
- return <Option value={cat.id}>{cat.name}</Option>;
+ {categories.map((category: CategoryIO) => {
+ return <Option value={category.id}>{category.name}</Option>;
})}
</Select>
</Form.Item>
--
GitLab