feat(frontend): new dashboard concept (#82)

4 years ago · eae38bb9ec
parent b5e8428a39
commit eae38bb9ec
9 changed files with 100 additions and 81 deletions
--- a/src/components/Discover/index.tsx
+++ b/src/components/Discover/index.tsx
@ -1,17 +1,27 @@
 import React, { useRef } from 'react';
-import { useSWRInfinite } from 'swr';
-import type { MovieResult } from '../../../server/models/Search';
+import useSWR, { useSWRInfinite } from 'swr';
+import type { MovieResult, TvResult } from '../../../server/models/Search';
 import TitleCard from '../TitleCard';
 import useVerticalScroll from '../../hooks/useVerticalScroll';

-interface SearchResult {
+interface MovieDiscoverResult {
  page: number;
  totalResults: number;
  totalPages: number;
  results: MovieResult[];
 }

-const getKey = (pageIndex: number, previousPageData: SearchResult | null) => {
+interface TvDiscoverResult {
+  page: number;
+  totalResults: number;
+  totalPages: number;
+  results: TvResult[];
+}
+
+const getKey = (
+  pageIndex: number,
+  previousPageData: MovieDiscoverResult | null
+) => {
  if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
    return null;
  }
@ -20,61 +30,30 @@ const getKey = (pageIndex: number, previousPageData: SearchResult | null) => {
 };

 const Discover: React.FC = () => {
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(getKey, {
-    initialSize: 3,
-  });
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  useVerticalScroll(() => {
-    setSize(size + 1);
-  }, !isLoadingMore && !isLoadingInitialData);
-
-  if (error) {
-    return <div>{error}</div>;
-  }
-
-  const titles = data?.reduce(
-    (a, v) => [...a, ...v.results],
-    [] as MovieResult[]
+  const { data: movieData, error: movieError } = useSWR<MovieDiscoverResult>(
+    '/api/v1/discover/movies'
+  );
+  const { data: tvData, error: tvError } = useSWR<TvDiscoverResult>(
+    '/api/v1/discover/tv'
  );

  return (
    <>
-      <div className="md:flex md:items-center md:justify-between mb-8 mt-8">
+      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
        <div className="flex-1 min-w-0">
-          <h2 className="text-2xl font-bold leading-7 text-white sm:text-3xl sm:leading-9 sm:truncate">
-            Discover
+          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
+            Popular Movies
          </h2>
        </div>
-        <div className="mt-4 flex md:mt-0 md:ml-4">
-          <span className="relative z-0 inline-flex shadow-sm rounded-md">
-            <button
-              type="button"
-              className="relative inline-flex items-center px-4 py-2 rounded-l-md border border-indigo-900 bg-indigo-500 hover:bg-indigo-400 text-sm leading-5 font-medium text-cool-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
-            >
-              Movies
-            </button>
-            <button
-              type="button"
-              className="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-indigo-900 bg-indigo-500   text-sm leading-5 font-medium text-cool-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
-            >
-              TV Shows
-            </button>
-          </span>
-        </div>
      </div>
-      <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}
-            className="col-span-1 flex flex-col text-center items-center"
+      <div
+        className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-2 -mr-4"
+        style={{ height: 295 }}
      >
+        {movieData?.results.map((title) => (
+          <div key={title.id} className="px-2 inline-block">
            <TitleCard
-              image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
+              image={title.posterPath}
              status={title.request?.status}
              summary={title.overview}
              title={title.title}
@ -82,19 +61,48 @@ const Discover: React.FC = () => {
              year={title.releaseDate}
              mediaType={title.mediaType}
            />
-          </li>
+          </div>
        ))}
-        {(isLoadingInitialData ||
-          (isLoadingMore && (titles?.length ?? 0) > 0)) &&
-          [...Array(8)].map((_item, i) => (
-            <li
-              key={`placeholder-${i}`}
-              className="col-span-1 flex flex-col text-center items-center"
+        {!movieData &&
+          !movieError &&
+          [...Array(10)].map((_item, i) => (
+            <div key={`placeholder-${i}`} className="px-2 inline-block">
+              <TitleCard.Placeholder />
+            </div>
+          ))}
+      </div>
+      <div className="md:flex md:items-center md:justify-between mb-4 mt-4">
+        <div className="flex-1 min-w-0">
+          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
+            Popular TV Shows
+          </h2>
+        </div>
+      </div>
+      <div
+        className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-2 -mr-4"
+        style={{ height: 295 }}
      >
+        {tvData?.results.map((title) => (
+          <div key={title.id} className="px-2 inline-block">
+            <TitleCard
+              image={title.posterPath}
+              status={title.request?.status}
+              summary={title.overview}
+              title={title.name}
+              userScore={title.voteAverage}
+              year={title.firstAirDate}
+              mediaType={title.mediaType}
+            />
+          </div>
+        ))}
+        {!tvData &&
+          !tvError &&
+          [...Array(10)].map((_item, i) => (
+            <div key={`placeholder-${i}`} className="px-2 inline-block">
              <TitleCard.Placeholder />
-            </li>
+            </div>
          ))}
-      </ul>
+      </div>
    </>
  );
 };
--- a/src/components/Layout/Notifications/index.tsx
+++ b/src/components/Layout/Notifications/index.tsx
@ -3,7 +3,7 @@ import React from 'react';
 const Notifications: React.FC = () => {
  return (
    <button
-      className="p-1 text-gray-400 rounded-full hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:shadow-outline focus:text-gray-500"
+      className="p-1 text-gray-400 rounded-full hover:bg-cool-gray-500 hover:text-white focus:outline-none focus:shadow-outline focus:text-white"
      aria-label="Notifications"
    >
      <svg
--- a/src/components/Layout/SearchInput/index.tsx
+++ b/src/components/Layout/SearchInput/index.tsx
@ -21,7 +21,7 @@ const SearchInput: React.FC = () => {
          </div>
          <input
            id="search_field"
-            className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
+            className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-base"
            placeholder="Search"
            type="search"
            value={searchValue}
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@ -26,7 +26,7 @@ const UserDropdown: React.FC = () => {
          id="user-menu"
          aria-label="User menu"
          aria-haspopup="true"
-          onClick={() => setDropdownOpen((state) => !state)}
+          onClick={() => setDropdownOpen(true)}
        >
          <img className="h-8 w-8 rounded-full" src={user?.avatar} alt="" />
        </button>
@ -45,28 +45,28 @@ const UserDropdown: React.FC = () => {
          ref={dropdownRef}
        >
          <div
-            className="py-1 rounded-md bg-white shadow-xs"
+            className="py-1 rounded-md bg-cool-gray-700 shadow-xs"
            role="menu"
            aria-orientation="vertical"
            aria-labelledby="user-menu"
          >
            <a
              href="#"
-              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
+              className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"
              role="menuitem"
            >
              Your Profile
            </a>
            <a
              href="#"
-              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
+              className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"
              role="menuitem"
            >
              Settings
            </a>
            <a
              href="#"
-              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
+              className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"
              role="menuitem"
              onClick={() => logout()}
            >
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@ -14,7 +14,7 @@ const Layout: React.FC = ({ children }) => {
      <div className="flex flex-col w-0 flex-1 md:ml-64 relative mb-16">
        <div className="z-10 flex-shrink-0 flex h-16 bg-cool-gray-600 shadow fixed right-0 left-0 md:left-64">
          <button
-            className="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 md:hidden"
+            className="px-4 border-r border-gray-800 text-gray-200 focus:outline-none focus:bg-gray-300 focus:text-gray-600 md:hidden"
            aria-label="Open sidebar"
            onClick={() => setSidebarOpen(true)}
          >
@ -46,7 +46,7 @@ const Layout: React.FC = ({ children }) => {
          tabIndex={0}
        >
          <div className="pt-2 pb-6 md:py-6">
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+            <div className="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
              {children}
            </div>
          </div>
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@ -53,9 +53,9 @@ const Search: React.FC = () => {

  return (
    <>
-      <div className="md:flex md:items-center md:justify-between mb-8 mt-8">
+      <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
        <div className="flex-1 min-w-0">
-          <h2 className="text-2xl font-bold leading-7 text-white sm:text-3xl sm:leading-9 sm:truncate">
+          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
            Search Results
          </h2>
        </div>
@ -81,7 +81,7 @@ const Search: React.FC = () => {
          No Results
        </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) => {
          let titleCard: React.ReactNode;

@ -89,7 +89,7 @@ const Search: React.FC = () => {
            case 'movie':
              titleCard = (
                <TitleCard
-                  image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
+                  image={title.posterPath}
                  status={title.request?.status}
                  summary={title.overview}
                  title={title.title}
@ -102,7 +102,7 @@ const Search: React.FC = () => {
            case 'tv':
              titleCard = (
                <TitleCard
-                  image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
+                  image={title.posterPath}
                  status={title.request?.status}
                  summary={title.overview}
                  title={title.name}
@ -128,7 +128,7 @@ const Search: React.FC = () => {
        })}
        {(isLoadingInitialData ||
          (isLoadingMore && (titles?.length ?? 0) > 0)) &&
-          [...Array(8)].map((_item, i) => (
+          [...Array(10)].map((_item, i) => (
            <li
              key={`placeholder-${i}`}
              className="col-span-1 flex flex-col text-center items-center"
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@ -8,7 +8,7 @@ import Transition from '../Transition';
 import Placeholder from './Placeholder';

 interface TitleCardProps {
-  image: string;
+  image?: string;
  summary: string;
  year: string;
  title: string;
@ -49,12 +49,12 @@ const TitleCard: React.FC<TitleCardProps> = ({
      <div
        className="titleCard"
        style={{
-          backgroundImage: `url(//${image})`,
+          backgroundImage: `url(//image.tmdb.org/t/p/w600_and_h900_bestv2${image})`,
        }}
        onMouseEnter={() => setShowDetail(true)}
        onMouseLeave={() => setShowDetail(false)}
      >
-        <div className="absolute top-0 h-full w-full bottom-0 left-0 right-0 overflow-hidden">
+        <div className="absolute top-0 h-full w-full bottom-0 left-0 right-0 overflow-hidden shadow-md">
          <div
            className={`absolute left-0 top-0 rounded-tl-md rounded-br-md z-50 ${
              mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
@ -83,7 +83,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
          </div>

          <Transition
-            show={showDetail}
+            show={!image || showDetail}
            enter="transition ease-in-out duration-300 transform opacity-0"
            enterFrom="opacity-0"
            enterTo="opacity-100"
@ -104,7 +104,7 @@ const TitleCard: React.FC<TitleCardProps> = ({

                  <h1 className="text-xl leading-tight">{title}</h1>
                  <div
-                    className="text-xs"
+                    className="text-xs whitespace-normal"
                    style={{
                      WebkitLineClamp: 3,
                      display: '-webkit-box',
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -19,3 +19,12 @@ body {
  @apply relative bg-cover rounded-lg bg-cool-gray-800;
  padding-bottom: 150%;
 }
+
+.hide-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -10,7 +10,9 @@ module.exports = {
      },
    },
  },
-  variants: {},
+  variants: {
+    padding: ['first', 'last'],
+  },
  plugins: [
    require('@tailwindcss/ui')({
      layout: 'sidebar',