feat: SearchPage - fetching directors from the API

frontend/src/components/SearchPage.tsx

@@ -59,46 +59,6 @@ const resultsExample: MovieIO[] = [
   },
 ];
 
-//replace with api call only once
-const directorsList: DirectorIO[] = [
-  {
-    name: "Karel1",
-    surname: "Vomacka",
-    birthDate: "17.5.1979",
-    id: "1561",
-  },
-  {
-    name: "Karel2",
-    surname: "Vomacka",
-    birthDate: "17.5.1979",
-    id: "1562",
-  },
-  {
-    name: "Karel3",
-    surname: "Vomacka",
-    birthDate: "17.5.1979",
-    id: "1563",
-  },
-  {
-    name: "Karel4",
-    surname: "Vomacka",
-    birthDate: "17.5.1979",
-    id: "1564",
-  },
-  {
-    name: "Karel5",
-    surname: "Vomacka",
-    birthDate: "17.5.1979",
-    id: "1565",
-  },
-  {
-    name: "Karel6",
-    surname: "Vomacka",
-    birthDate: "17.5.1979",
-    id: "1566",
-  },
-];
-
 const runtimeMarks = {
   0: "0",
   30: "30",
@@ -130,12 +90,16 @@ export const SearchPage = () => {
   const [form] = Form.useForm();
 
   const [categories, setCategories] = useState<CategoryIO[]>([]);
+  const [directors, setDirectors] = useState<DirectorIO[]>([]);
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         const response = await axiosConfig.get<CategoryIO[]>('/categories');
         setCategories([ ...response.data ]);
+
+        const dirResponse = await axiosConfig.get<DirectorIO[]>('/directors');
+        setDirectors([ ...dirResponse.data ]);
       } catch {
 
       }
@@ -346,10 +310,10 @@ export const SearchPage = () => {
                     )
                 }
               >
-                {directorsList.map((dir: DirectorIO) => {
+                {directors.map((director: DirectorIO) => {
                   return (
-                    <Option value={dir.id}>
-                      {dir.name + " " + dir.surname}
+                    <Option value={director.id}>
+                      {director.name + " " + director.surname}
                     </Option>
                   );
                 })}