diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e8a7bdc9233fd51106428497c2259ef63a4bc2dc..92e75cd2778d3eaaa4b2818e48f99649be1191d6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,7 +12,8 @@
"antd": "^4.21.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
- "react-router-dom": "^6.3.0"
+ "react-router-dom": "^6.3.0",
+ "swr": "^1.3.0"
},
"devDependencies": {
"@types/react": "^18.0.12",
@@ -2198,6 +2199,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/swr": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+ "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+ "peerDependencies": {
+ "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -3763,6 +3772,12 @@
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true
},
+ "swr": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+ "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+ "requires": {}
+ },
"to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f15169587e15cac033815bad516988dfa3744295..5a6f0849f08ee9f2ed5d29accf071f7fae9eb384 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,7 +12,8 @@
"antd": "^4.21.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
- "react-router-dom": "^6.3.0"
+ "react-router-dom": "^6.3.0",
+ "swr": "^1.3.0"
},
"devDependencies": {
"@types/react": "^18.0.12",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2c8bdc9e30aa2dbbe55707dfec5a587cae67d35c..9b3f9a6a9bb5ca9a72fd23f58249b1a6374ab6b4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,11 +6,12 @@ import { Routes, Route, Outlet, Link, BrowserRouter } from "react-router-dom";
import { NavigationBar } from "./components/NavigationBar";
import { About } from "./components/About";
import React from "react";
-import { Browse } from "./components/Browse";
+import { BrowseMovies } from "./components/BrowseMovies";
import { SearchPage } from "./components/SearchPage";
import { ErrorPage } from "./components/ErrorPage";
import { MoviePage } from "./components/MoviePage";
import { DirectorPage } from "./components/DirectorPage";
+import { BrowseDirectors } from "./components/BrowseDirectors";
function App() {
return (
@@ -19,7 +20,8 @@ function App() {
<Routes>
<Route path="/" element={<MainPage />}></Route>
- <Route path="/browse" element={<Browse />}></Route>
+ <Route path="/movies" element={<BrowseMovies />}></Route>
+ <Route path="/directors" element={<BrowseDirectors/>}></Route>
<Route path="/search" element={<SearchPage />}></Route>
<Route path="/about" element={<About />}></Route>
<Route path="/movie/:id" element={<MoviePage></MoviePage>}></Route>
diff --git a/frontend/src/components/BrowseDirectors.tsx b/frontend/src/components/BrowseDirectors.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..48cc949dbd6cbee7c8c5f2add7fa9d50d9de885a
--- /dev/null
+++ b/frontend/src/components/BrowseDirectors.tsx
@@ -0,0 +1,100 @@
+import { Space, Card, Table } from "antd";
+import React from "react"
+import { Link } from "react-router-dom";
+import { DirectorIO } from "./Preview"
+
+//TODO replace by API CALL - get ALL directors
+const exampleDirectors: DirectorIO[] = [{
+ id: "123",
+ name: "Karel",
+ surname: "Macka",
+ birthdate: "20.2.1987",
+ },
+ {
+ id: "456",
+ name: "Jan",
+ surname: "Vomacka",
+ birthdate: "20.12.1990",
+ },
+ {
+ id: "890",
+ name: "Karel",
+ surname: "Vomacka",
+ birthdate: "1.2.1987",
+ },
+ {
+ id: "666",
+ name: "Pan",
+ surname: "Natas",
+ birthdate: "20.2.1687",
+ },
+]
+
+
+
+
+
+
+export const BrowseDirectors = () => {
+
+ const columns = [
+ {
+ title: "Name",
+ dataIndex: "name",
+ sorter: (a:DirectorIO, b:DirectorIO) => {
+ //surname has higher priority
+ if(a.surname < b.surname){return -1;}
+ if(a.surname > b.surname){return 1;}
+
+ if(a.name < b.name){return -1;}
+ if(a.name > b.name){return 1;}
+ return 0;
+
+
+ },
+
+ render: (text: string, record: DirectorIO) => (
+ <Link to={`/director/${record.id}`}>
+ <a>{record.name} {record.surname}</a>
+ </Link>
+ ),
+ },
+
+ {
+ title: "Birthdate",
+ className: "birthdate",
+ dataIndex: "birthdate",
+ sorter: (a:DirectorIO, b:DirectorIO) => {
+ const first = a.birthdate.split('.').reverse();
+ const second = b.birthdate.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;},
+ }
+
+ ];
+
+
+
+
+
+ return (
+ <div className="browse-container">
+ <Space direction="vertical" size="middle" style={{ padding: "4%" }}>
+ <Table
+ columns={columns}
+ dataSource={exampleDirectors}
+ >
+
+ </Table>
+
+ </Space>
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Browse.tsx b/frontend/src/components/BrowseMovies.tsx
similarity index 90%
rename from frontend/src/components/Browse.tsx
rename to frontend/src/components/BrowseMovies.tsx
index 74024c623b320d8946662c00698a366e8bda6a75..14bbe8360096d5ff6a078977bf656d8ff912a2df 100644
--- a/frontend/src/components/Browse.tsx
+++ b/frontend/src/components/BrowseMovies.tsx
@@ -10,6 +10,8 @@ const gridStyle: React.CSSProperties = {
textAlign: "center",
};
+
+// TODO replace this with API call for all categories with movies inside
const categories: CategoryIO[] = [
{
id: "12345",
@@ -23,7 +25,7 @@ const categories: CategoryIO[] = [
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.1.2000",
- runTimeMinutes: 120,
+ runtimeMinutes: 120,
director: {
id: "123456789",
name: "Karel",
@@ -39,7 +41,7 @@ const categories: CategoryIO[] = [
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,
+ runtimeMinutes: 150,
director: {
id: "123456789",
name: "Karel",
@@ -61,7 +63,7 @@ const categories: CategoryIO[] = [
picture:
"https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F2ht1mik98ka4dogie28vqc4y.wpengine.netdna-cdn.com%2Fwp-content%2Fuploads%2F2015%2F10%2FWho-Killed-Capt-Alex.jpg&f=1&nofb=1",
published: "8.8.2015",
- runTimeMinutes: 60,
+ runtimeMinutes: 60,
director: {
id: "2323",
name: "Pastor",
@@ -73,7 +75,7 @@ const categories: CategoryIO[] = [
},
];
-export const Browse = () => {
+export const BrowseMovies = () => {
return (
<div className="browse-container">
<Space direction="vertical" size="middle" style={{ padding: "4%" }}>
diff --git a/frontend/src/components/DirectorPage.tsx b/frontend/src/components/DirectorPage.tsx
index 4b85ccafe910f8b00625bcc041709d122f54483b..7e90902d6530ac09accb7ed115ed92789783f1f6 100644
--- a/frontend/src/components/DirectorPage.tsx
+++ b/frontend/src/components/DirectorPage.tsx
@@ -2,6 +2,8 @@ import { Descriptions } from "antd";
import React from "react";
import { DirectorIO } from "./Preview";
+
+// TODO replace this with API call by director id
const exampleDirector: DirectorIO = {
name: "Karel",
surname: "Vomacka",
diff --git a/frontend/src/components/MainPage.tsx b/frontend/src/components/MainPage.tsx
index 849c1a02d3c260b436065e2db6186d653a13aa10..3165f24b6c3e715ae23648a836371b3467f12ca0 100644
--- a/frontend/src/components/MainPage.tsx
+++ b/frontend/src/components/MainPage.tsx
@@ -19,7 +19,6 @@ const MainPage = () => (
textAlign: "center",
}}
>
- Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
);
diff --git a/frontend/src/components/MoviePage.tsx b/frontend/src/components/MoviePage.tsx
index ed9458c75d631f86a54edd3adccaa06b1fecb85d..0c360c9e3e055446251a44951f0211ec598888c9 100644
--- a/frontend/src/components/MoviePage.tsx
+++ b/frontend/src/components/MoviePage.tsx
@@ -5,8 +5,8 @@ import { MovieIO } from "./Preview";
export const MoviePage = () => {
const { id, name } = useParams();
- //need to fetch /channel/${id} here to preview data
-
+
+ //replace this with /channel/${id} API call
const exampleMovie: MovieIO = {
id: "789",
name: "Saw",
@@ -15,7 +15,7 @@ export const MoviePage = () => {
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.1.2000",
- runTimeMinutes: 120,
+ runtimeMinutes: 120,
director: {
id: "123456789",
name: "Karel",
@@ -47,7 +47,7 @@ export const MoviePage = () => {
{exampleMovie.published}
</Descriptions.Item>
<Descriptions.Item label="Runtime" span={2}>
- {exampleMovie.runTimeMinutes} minutes
+ {exampleMovie.runtimeMinutes} minutes
</Descriptions.Item>
</Descriptions>
<Descriptions title="Director" bordered style={{ padding: "5%" }}>
diff --git a/frontend/src/components/NavigationBar.tsx b/frontend/src/components/NavigationBar.tsx
index 92102d45e66a0414f288711d4f0c4af4b89bf307..207026c4739299a0044ad7e70bb447bee8efbe96 100644
--- a/frontend/src/components/NavigationBar.tsx
+++ b/frontend/src/components/NavigationBar.tsx
@@ -8,15 +8,19 @@ import { Link } from "react-router-dom";
export const NavigationBar = () => {
return (
<div className="navigation-bar">
- <Header>
+ <Header style={{display: "flex"}}>
+ <Image src={logo} width={48} height={48} style={{width:"48", height: "48"}} preview={false}></Image>
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={["2"]}>
- <Image src={logo} width={50} preview={false}></Image>
+
<Menu.Item>
<Link to="/">Home</Link>
</Menu.Item>
<Menu.Item>
- <Link to="/browse">Browse</Link>
+ <Link to="/movies">Movies</Link>
+ </Menu.Item>
+ <Menu.Item>
+ <Link to="/directors">Directors</Link>
</Menu.Item>
<Menu.Item>
<Link to="/search">Search</Link>
diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index 7dc187d872a3354f52f9fb8ff15ec1578a08cec8..bcbb38ac64bc76db1434081f855209518e99075f 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -1,4 +1,4 @@
-import { Card, Carousel, Image, Space } from "antd";
+import { Card, Carousel, Divider, Image, Space } from "antd";
import Meta from "antd/lib/card/Meta";
import Title from "antd/lib/skeleton/Title";
import React from "react";
@@ -25,7 +25,7 @@ export interface MovieIO {
intro: string;
picture: string;
published: string;
- runTimeMinutes: number;
+ runtimeMinutes: number;
director: DirectorIO;
}
@@ -36,7 +36,7 @@ export interface DirectorIO {
birthdate: string;
}
-//example
+//example - TODO replace this with API preview call - get POPULAR movies (probably 6 is enough)
export const cardsDataExample: MovieIO[] = [
{
id: "1",
@@ -44,7 +44,7 @@ export const cardsDataExample: MovieIO[] = [
name: "Auta",
intro: "auta ve filmu",
published: "7.8.2005",
- runTimeMinutes: 125,
+ runtimeMinutes: 125,
director: {
id: "xd123",
name: "Kenny",
@@ -59,7 +59,7 @@ export const cardsDataExample: MovieIO[] = [
name: "V tom domě straší",
intro: "jo ten dum je docela spooky",
published: "4.4.1994",
- runTimeMinutes: 80,
+ runtimeMinutes: 80,
picture:
"https://images-na.ssl-images-amazon.com/images/S/pv-target-images/9a996123e0b01f618ab2291b479f9d5034de354b2d1bb58979ddc6937588dfa8._RI_V_TTW_.jpg",
director: {
@@ -75,7 +75,7 @@ export const cardsDataExample: MovieIO[] = [
name: "Pokémon",
intro: "Gotta catch them all.",
published: "9.9.1970",
- runTimeMinutes: 600,
+ runtimeMinutes: 600,
picture:
"https://www.obchod.crew.cz/im/coc/1280/0/content/629080/cover_image.1607432614.jpg",
director: {
@@ -91,7 +91,7 @@ export const cardsDataExample: MovieIO[] = [
name: "Gympl",
intro: "VO SEDUMNÁCT METRŮ?",
published: "2.2.2005",
- runTimeMinutes: 96,
+ runtimeMinutes: 96,
picture:
"https://img.csfd.cz/files/images/user/profile/162/847/162847510_91e839.jpg",
director: {
@@ -107,7 +107,7 @@ export const cardsDataExample: MovieIO[] = [
name: "Příběh hraček",
intro: "Hmm the floor here is made of floor",
published: "4.5.1999",
- runTimeMinutes: 90,
+ runtimeMinutes: 90,
picture:
"https://m.media-amazon.com/images/M/MV5BMDU2ZWJlMjktMTRhMy00ZTA5LWEzNDgtYmNmZTEwZTViZWJkXkEyXkFqcGdeQXVyNDQ2OTk4MzI@._V1_.jpg",
director: {
@@ -124,7 +124,107 @@ export const cardsDataExample: MovieIO[] = [
intro:
"Jedu dál stále s tebou víme kam cesty vedou je to fajn fajn fajn je to fajn fajnový",
published: "17.11.1989",
- runTimeMinutes: 50,
+ runtimeMinutes: 50,
+ picture:
+ "https://img.csfd.cz/files/images/user/profile/164/556/164556101_d8e43b.jpg",
+ director: {
+ id: "xx787",
+ name: "Zdenda",
+ surname: "Pohlreich",
+ birthdate: "4.4.1985",
+ },
+ },
+];
+
+//example - TODO replace this with API preview call - get RECENT movies (probably 6-7 is enough)
+export const cardsDataExample2: MovieIO[] = [
+ {
+ id: "1",
+ originalName: "Cars",
+ name: "Auta",
+ intro: "auta ve filmu",
+ published: "7.8.2005",
+ runtimeMinutes: 125,
+ director: {
+ id: "xd123",
+ name: "Kenny",
+ surname: "Omega",
+ birthdate: "9.9.1980",
+ },
+ picture: "https://upload.wikimedia.org/wikipedia/en/3/34/Cars_2006.jpg",
+ },
+ {
+ id: "2",
+ originalName: "Monster House",
+ name: "V tom domě straší",
+ intro: "jo ten dum je docela spooky",
+ published: "4.4.1994",
+ runtimeMinutes: 80,
+ picture:
+ "https://images-na.ssl-images-amazon.com/images/S/pv-target-images/9a996123e0b01f618ab2291b479f9d5034de354b2d1bb58979ddc6937588dfa8._RI_V_TTW_.jpg",
+ director: {
+ id: "xp234",
+ name: "Bray",
+ surname: "Wyatt",
+ birthdate: "unknown",
+ },
+ },
+ {
+ id: "3",
+ originalName: "Pokemon",
+ name: "Pokémon",
+ intro: "Gotta catch them all.",
+ published: "9.9.1970",
+ runtimeMinutes: 600,
+ picture:
+ "https://www.obchod.crew.cz/im/coc/1280/0/content/629080/cover_image.1607432614.jpg",
+ director: {
+ id: "xc456",
+ name: "Kazuchika",
+ surname: "Okada",
+ birthdate: "17.2.1984",
+ },
+ },
+ {
+ id: "4",
+ originalName: "Gympl",
+ name: "Gympl",
+ intro: "VO SEDUMNÁCT METRŮ?",
+ published: "2.2.2005",
+ runtimeMinutes: 96,
+ picture:
+ "https://img.csfd.cz/files/images/user/profile/162/847/162847510_91e839.jpg",
+ director: {
+ id: "xs789",
+ name: "Tomáš",
+ surname: "Vorel",
+ birthdate: "někdy minulé století",
+ },
+ },
+ {
+ id: "5",
+ originalName: "Toy Story",
+ name: "Příběh hraček",
+ intro: "Hmm the floor here is made of floor",
+ published: "4.5.1999",
+ runtimeMinutes: 90,
+ picture:
+ "https://m.media-amazon.com/images/M/MV5BMDU2ZWJlMjktMTRhMy00ZTA5LWEzNDgtYmNmZTEwZTViZWJkXkEyXkFqcGdeQXVyNDQ2OTk4MzI@._V1_.jpg",
+ director: {
+ id: "xl753",
+ name: "Tomohiro",
+ surname: "Ishii",
+ birthdate: "19.9.1970",
+ },
+ },
+ {
+ id: "6",
+ name: "Smoke",
+ originalName: "Kouř",
+ intro:
+ "Jedu dál stále s tebou víme kam cesty vedou je to fajn fajn fajn je to fajn fajnový",
+ published: "17.11.1989",
+ runtimeMinutes: 50,
picture:
"https://img.csfd.cz/files/images/user/profile/164/556/164556101_d8e43b.jpg",
director: {
@@ -137,10 +237,34 @@ export const cardsDataExample: MovieIO[] = [
];
const Preview: React.FC = () => (
- <div>
- <h1>Popular movies</h1>
- <Space>
+ <Space className="preview" direction="vertical" style={{display: "flex"}}>
+ <Card title="Popular movies" >
+ <Space style={{ display: 'flex', padding: "5 %", justifyContent: "flex-end", width:"fit-content", overflow: "auto"}}>
+
{cardsDataExample.map((movie) => {
+ return (
+ <>
+ <Link to={`/movie/${movie.id}`}>
+ <Card
+ hoverable
+ style={{
+ width: "240px",
+ }}
+ cover={<img alt={movie.name} src={movie.picture} />}
+ >
+ <Meta title={movie.name} description={movie.originalName} />
+ </Card>
+ </Link>
+ </>
+ );
+ })}
+ </Space>
+ </Card>
+ <Divider/>
+
+ <Card title="Recent movies" >
+ <Space style={{ display: 'flex', padding: "5 %", justifyContent: "flex-end", width:"fit-content", overflow: "auto"}}>
+ {cardsDataExample2.map((movie) => {
return (
<>
<Link to={`/movie/${movie.id}`}>
@@ -158,28 +282,8 @@ const Preview: React.FC = () => (
);
})}
</Space>
-
- <Carousel autoplay>
- <div>
- <h3 style={contentStyle}>Avengers</h3>
- </div>
- <div>
- <h3 style={contentStyle}>Morbius</h3>
- </div>
- <div>
- <h3 style={contentStyle}>Princezna a Bubeník</h3>
- </div>
- <div>
- <h3 style={contentStyle}>Scary Movie</h3>
- </div>
- <div>
- <h3 style={contentStyle}>Scary Movie 2</h3>
- </div>
- <div>
- <h3 style={contentStyle}>Scary Movie 3</h3>
- </div>
- </Carousel>
- </div>
+ </Card>
+ </Space>
);
export default Preview;
diff --git a/frontend/src/components/SearchPage.tsx b/frontend/src/components/SearchPage.tsx
index 44b2978bf04ac960425008b128c4a894e12e19f3..91e4b06e978148a371d2e7ef2cfa7eb1b7005495 100644
--- a/frontend/src/components/SearchPage.tsx
+++ b/frontend/src/components/SearchPage.tsx
@@ -6,6 +6,8 @@ import { cardsDataExample, MovieIO } from "./Preview";
const { Search } = Input;
+
+//TODO replace with result of input search and API call
const resultsExample: MovieIO[] = [
{
id: "789",
@@ -14,12 +16,12 @@ const resultsExample: MovieIO[] = [
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.1.2000",
- runTimeMinutes: 120,
+ published: "1.6.2000",
+ runtimeMinutes: 120,
director: {
id: "123456789",
name: "Karel",
- surname: "Vomacka",
+ surname: "Macka",
birthdate: "20.2.1987",
},
},
@@ -31,7 +33,7 @@ const resultsExample: MovieIO[] = [
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,
+ runtimeMinutes: 150,
director: {
id: "123456789",
name: "Karel",
@@ -44,17 +46,24 @@ const resultsExample: MovieIO[] = [
//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(value);
+ console.log(searchValue); // just debug tool
setPressed(true);
- }; // API request search goes here
+ }; // 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>
@@ -65,18 +74,54 @@ export const SearchPage = () => {
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",
+ dataIndex: "runtimeMinutes",
+ sorter: (a:MovieIO, b:MovieIO) => a.runtimeMinutes - b.runtimeMinutes,
},
{
- title: "Director Surname",
+ 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 (
@@ -90,6 +135,7 @@ export const SearchPage = () => {
allowClear
enterButton="Search"
size="large"
+ onChange={(e) => setSearch(e.target.value)}
onSearch={onSearch}
width="400 px"
/>
@@ -103,7 +149,7 @@ export const SearchPage = () => {
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
- console.log(record.id);
+ console.log(record.id); //remove later
},
}; //here change to view movie
}}