From b5e8428a39575c4961dab62a0f4720911429ff0d Mon Sep 17 00:00:00 2001
From: Alex Zoitos <azoitos1@gmail.com>
Date: Sun, 13 Sep 2020 23:16:57 -0400
Subject: [PATCH] New Titlecard Design - Desktop (#81)

* feat(frontend): title card desktop redesign

* refactor(frontend): title card desktop - update status prop

* fix(frontend): update props in search for titlecard
---
 src/assets/available.svg                 |   4 +
 src/assets/requested.svg                 |   4 +
 src/assets/unavailable.svg               |   4 +
 src/components/Discover/index.tsx        |   5 +-
 src/components/Search/index.tsx          |   6 +-
 src/components/TitleCard/Placeholder.tsx |   2 +-
 src/components/TitleCard/index.tsx       | 163 ++++++++++++++++-------
 7 files changed, 136 insertions(+), 52 deletions(-)
 create mode 100644 src/assets/available.svg
 create mode 100644 src/assets/requested.svg
 create mode 100644 src/assets/unavailable.svg

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 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.5 0H0L43.5 43.5V0Z" fill="#31C48D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.707 9.29303C36.8945 9.48056 36.9998 9.73487 36.9998 10C36.9998 10.2652 36.8945 10.5195 36.707 10.707L28.707 18.707C28.5195 18.8945 28.2652 18.9998 28 18.9998C27.7348 18.9998 27.4805 18.8945 27.293 18.707L23.293 14.707C23.1108 14.5184 23.0101 14.2658 23.0123 14.0036C23.0146 13.7414 23.1198 13.4906 23.3052 13.3052C23.4906 13.1198 23.7414 13.0146 24.0036 13.0124C24.2658 13.0101 24.5184 13.1109 24.707 13.293L28 16.586L35.293 9.29303C35.4805 9.10556 35.7348 9.00024 36 9.00024C36.2652 9.00024 36.5195 9.10556 36.707 9.29303Z" fill="#F7FAFC"/>
+</svg>
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 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.5 0H0L43.5 43.5V0Z" fill="#ED8936"/>
+<path d="M31 5.79999C29.5678 5.79999 28.1943 6.36891 27.1816 7.38161C26.1689 8.39431 25.6 9.76782 25.6 11.2V14.4274L24.9637 15.0637C24.8379 15.1896 24.7522 15.3499 24.7175 15.5245C24.6828 15.699 24.7006 15.8799 24.7687 16.0444C24.8368 16.2088 24.9521 16.3494 25.1001 16.4482C25.2481 16.5471 25.422 16.5999 25.6 16.6H36.4C36.578 16.5999 36.7519 16.5471 36.8999 16.4482C37.0479 16.3494 37.1632 16.2088 37.2313 16.0444C37.2994 15.8799 37.3172 15.699 37.2825 15.5245C37.2478 15.3499 37.1621 15.1896 37.0363 15.0637L36.4 14.4274V11.2C36.4 9.76782 35.8311 8.39431 34.8184 7.38161C33.8057 6.36891 32.4322 5.79999 31 5.79999ZM31 20.2C30.2839 20.2 29.5972 19.9155 29.0908 19.4092C28.5845 18.9028 28.3 18.2161 28.3 17.5H33.7C33.7 18.2161 33.4155 18.9028 32.9092 19.4092C32.4028 19.9155 31.7161 20.2 31 20.2Z" fill="white"/>
+</svg>
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 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.5 0H0L43.5 43.5V0Z" fill="#E53E3E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31 20.2C32.9096 20.2 34.7409 19.4414 36.0912 18.0912C37.4414 16.7409 38.2 14.9095 38.2 13C38.2 11.0904 37.4414 9.25908 36.0912 7.90882C34.7409 6.55856 32.9096 5.79999 31 5.79999C29.0904 5.79999 27.2591 6.55856 25.9088 7.90882C24.5586 9.25908 23.8 11.0904 23.8 13C23.8 14.9095 24.5586 16.7409 25.9088 18.0912C27.2591 19.4414 29.0904 20.2 31 20.2ZM31.9 9.39999C31.9 9.16129 31.8052 8.93237 31.6364 8.76359C31.4676 8.59481 31.2387 8.49999 31 8.49999C30.7613 8.49999 30.5324 8.59481 30.3636 8.76359C30.1948 8.93237 30.1 9.16129 30.1 9.39999V13C30.1 13.2387 30.1949 13.4675 30.3637 13.6363L32.9089 16.1824C32.9925 16.266 33.0918 16.3323 33.201 16.3776C33.3103 16.4228 33.4274 16.4461 33.5456 16.4461C33.6639 16.4461 33.781 16.4228 33.8903 16.3776C33.9995 16.3323 34.0988 16.266 34.1824 16.1824C34.266 16.0988 34.3323 15.9995 34.3776 15.8902C34.4229 15.781 34.4461 15.6639 34.4461 15.5456C34.4461 15.4274 34.4229 15.3103 34.3776 15.201C34.3323 15.0918 34.266 14.9925 34.1824 14.9089L31.9 12.6274V9.39999Z" fill="white"/>
+</svg>
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 = () => {
           </span>
         </div>
       </div>
-      <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      <ul className="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
         {titles?.map((title) => (
           <li
             key={title.id}
@@ -75,11 +75,12 @@ const Discover: React.FC = () => {
           >
             <TitleCard
               image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
-              status={'Not Requested'}
+              status={title.request?.status}
               summary={title.overview}
               title={title.title}
               userScore={title.voteAverage}
               year={title.releaseDate}
+              mediaType={title.mediaType}
             />
           </li>
         ))}
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 = (
                 <TitleCard
                   image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
-                  status={'Not Requested'}
+                  status={title.request?.status}
                   summary={title.overview}
                   title={title.title}
                   userScore={title.voteAverage}
                   year={title.releaseDate}
+                  mediaType={title.mediaType}
                 />
               );
               break;
@@ -102,11 +103,12 @@ const Search: React.FC = () => {
               titleCard = (
                 <TitleCard
                   image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
-                  status={'Not Requested'}
+                  status={title.request?.status}
                   summary={title.overview}
                   title={title.name}
                   userScore={title.voteAverage}
                   year={title.firstAirDate}
+                  mediaType={title.mediaType}
                 />
               );
               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 (
     <div
-      style={{ width: 250, height: 375 }}
+      style={{ width: 180, height: 270 }}
       className="animate-pulse rounded-lg bg-cool-gray-700"
     />
   );
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<TitleCardProps> = ({
@@ -19,13 +29,23 @@ const TitleCard: React.FC<TitleCardProps> = ({
   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 (
-    <div style={{ width: 250 }}>
+    <div
+      style={{
+        width: 180,
+        height: 270,
+      }}
+    >
       <div
         className="titleCard"
         style={{
@@ -35,56 +55,105 @@ const TitleCard: React.FC<TitleCardProps> = ({
         onMouseLeave={() => setShowDetail(false)}
       >
         <div className="absolute top-0 h-full w-full bottom-0 left-0 right-0 overflow-hidden">
+          <div
+            className={`absolute left-0 top-0 rounded-tl-md rounded-br-md z-50 ${
+              mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
+            }`}
+          >
+            <div className="flex items-center text-center text-xs text-white h-4 px-2 py-1 font-normal">
+              {mediaType === 'movie' ? 'MOVIE' : 'TV SHOW'}
+            </div>
+          </div>
+
+          <div
+            className="absolute right-0 top-0 z-50"
+            style={{
+              right: '-1px',
+            }}
+          >
+            {status === MediaRequestStatus.AVAILABLE && (
+              <Available className="rounded-tr-md" />
+            )}
+            {status === MediaRequestStatus.PENDING && (
+              <Requested className="rounded-tr-md" />
+            )}
+            {status === MediaRequestStatus.APPROVED && (
+              <Unavailable className="rounded-tr-md" />
+            )}
+          </div>
+
           <Transition
             show={showDetail}
             enter="transition ease-in-out duration-300 transform opacity-0"
-            enterFrom="translate-y-full opacity-0"
-            enterTo="translate-y-0 opacity-100"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
             leave="transition ease-in-out duration-300 transform opacity-100"
-            leaveFrom="translate-y-0 opacity-100"
-            leaveTo="translate-y-full opacity-0"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
           >
-            <div className="absolute w-full bottom-0 bg-white rounded-lg overflow-hidden">
-              <div className="p-5">
-                <div className="text-blue-800 text-sm font-bold leading-4 ">
-                  {year}
-                </div>
+            <div
+              className="absolute w-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden"
+              style={{
+                background:
+                  'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)',
+              }}
+            >
+              <div className="absolute bottom-0 w-full left-0 right-0">
+                <div className="px-2 text-white">
+                  <div className="text-sm">{year}</div>
 
-                <h1 className="mt-2 text-2xl text-gray-900 leading-5 font-semibold">
-                  {title}
-                </h1>
-                <div className="mt-2 text-gray-500 text-m font-semibold tracking-wide leading-tight truncate hover:overflow-visible">
-                  {summary}
-                </div>
-
-                <div className="mt-1 flex justify-between">
-                  <span className="mt-3 text-teal-800 text-sm font-semibold leading-4 ">
-                    Status: {status}
-                  </span>
-
-                  <span className="mt-3 text-purple-800 text-sm font-semibold leading-4 ">
-                    User Score: {userScore}
-                  </span>
-                </div>
-              </div>
-              <div className="border-t border-gray-200 rounded-b-lg">
-                <div className="-mt-px flex">
-                  <div className="w-0 flex-1 flex border-r border-gray-200">
-                    <a
-                      href="#"
-                      className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150"
-                    >
-                      <span className="ml-3">View More</span>
-                    </a>
+                  <h1 className="text-xl leading-tight">{title}</h1>
+                  <div
+                    className="text-xs"
+                    style={{
+                      WebkitLineClamp: 3,
+                      display: '-webkit-box',
+                      overflow: 'hidden',
+                      WebkitBoxOrient: 'vertical',
+                    }}
+                  >
+                    {summary}
                   </div>
-                  <div className="-ml-px w-0 flex-1 flex">
-                    <a
-                      href="#"
-                      className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150"
+                </div>
+                <div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
+                  <button className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm mr-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
+                    <svg
+                      className="w-4 mx-auto"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <span className="ml-3">Request</span>
-                    </a>
-                  </div>
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                      />
+                    </svg>
+                  </button>
+                  <button className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
+                    <svg
+                      className="w-4 mx-auto"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                      />
+                    </svg>
+                  </button>
                 </div>
               </div>
             </div>