diff --git a/src/assets/available.svg b/src/assets/available.svg
new file mode 100644
index 000000000..6612d4e26
--- /dev/null
+++ b/src/assets/available.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/requested.svg b/src/assets/requested.svg
new file mode 100644
index 000000000..cbb15a996
--- /dev/null
+++ b/src/assets/requested.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/unavailable.svg b/src/assets/unavailable.svg
new file mode 100644
index 000000000..96e8bc64c
--- /dev/null
+++ b/src/assets/unavailable.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx
index a9b31619c..22b6586cc 100644
--- a/src/components/Discover/index.tsx
+++ b/src/components/Discover/index.tsx
@@ -67,7 +67,7 @@ const Discover: React.FC = () => {
-
+
{titles?.map((title) => (
- {
>
))}
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 3437f7043..4eddb4261 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -90,11 +90,12 @@ const Search: React.FC = () => {
titleCard = (
);
break;
@@ -102,11 +103,12 @@ const Search: React.FC = () => {
titleCard = (
);
break;
diff --git a/src/components/TitleCard/Placeholder.tsx b/src/components/TitleCard/Placeholder.tsx
index 264f6a670..5210739e8 100644
--- a/src/components/TitleCard/Placeholder.tsx
+++ b/src/components/TitleCard/Placeholder.tsx
@@ -3,7 +3,7 @@ import React from 'react';
const Placeholder: React.FC = () => {
return (
);
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index 4066db658..208c62107 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -1,6 +1,10 @@
import React, { useState } from 'react';
-import Transition from '../Transition';
+import type { MediaType } from '../../../server/models/Search';
+import Available from '../../assets/available.svg';
+import Requested from '../../assets/requested.svg';
+import Unavailable from '../../assets/unavailable.svg';
import { withProperties } from '../../utils/typeHelpers';
+import Transition from '../Transition';
import Placeholder from './Placeholder';
interface TitleCardProps {
@@ -9,9 +13,15 @@ interface TitleCardProps {
year: string;
title: string;
userScore: number;
+ mediaType: MediaType;
+ status?: MediaRequestStatus;
+}
- //TODO - change to ENUM
- status: string;
+enum MediaRequestStatus {
+ PENDING,
+ APPROVED,
+ DECLINED,
+ AVAILABLE,
}
const TitleCard: React.FC = ({
@@ -19,13 +29,23 @@ const TitleCard: React.FC = ({
summary,
year,
title,
- userScore,
status,
+ mediaType,
}) => {
const [showDetail, setShowDetail] = useState(false);
+ // Just to get the year from the date
+ if (year) {
+ year = year.slice(0, 4);
+ }
+
return (
-
+
= ({
onMouseLeave={() => setShowDetail(false)}
>
+
+
+ {mediaType === 'movie' ? 'MOVIE' : 'TV SHOW'}
+
+
+
+
+ {status === MediaRequestStatus.AVAILABLE && (
+
+ )}
+ {status === MediaRequestStatus.PENDING && (
+
+ )}
+ {status === MediaRequestStatus.APPROVED && (
+
+ )}
+
+
-
-
-
- {year}
-
-
-
- {title}
-
-
- {summary}
-
-
-
-
- Status: {status}
-
+
+
+
+
{year}
-
- User Score: {userScore}
-
+
{title}
+
+ {summary}
+
-
-
-
-
-
-
+
+
+
+
+
+
+