Merge pull request #7 from kiko-g/all-clips

All clips

src/components/DelayDisclaimer.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { InformationCircleIcon } from '@heroicons/react/outline'
+
+type Props = {}
+
+export const DelayDisclaimer = ({}: Props) => {
+  return (
+    <div
+      className="mx-auto my-4 flex flex-wrap items-center justify-between rounded border-2 
+      border-primary/25 bg-primary/20 p-4 dark:border-light/10 dark:bg-dark"
+    >
+      <div className="flex flex-1 items-center justify-between">
+        <div className="flex">
+          <InformationCircleIcon className="h-6 w-6" aria-hidden="true" />
+          <p className="ml-3 truncate font-medium">
+            <span>Expect some delay on the requests!</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/index.tsx

@@ -1,31 +1,32 @@
 import api from '../api/twitch'
-import Seo from '../components/Seo'
 import '../styles/pages/index.css'
+import { shuffle } from '../utils'
 import { useStaticQuery, graphql } from 'gatsby'
 import { PlusIcon } from '@heroicons/react/solid'
 import React, { useState, useEffect } from 'react'
-import usePaginationQuantity from '../hooks/usePaginationQuantity'
 
+import Seo from '../components/Seo'
 import { Layout } from '../layout/Layout'
 import { ViewTogglers } from '../components/ViewTogglers'
 import { TwitchVideoClip } from '../components/TwitchVideoClip'
 import { Skeleton } from '../components/Skeleton'
+import { DelayDisclaimer } from '../components/DelayDisclaimer'
 
 const IndexPage = () => {
   const data = useStaticQuery(homeQuery)
   const title = data.site.siteMetadata?.title ?? 'Title'
   const description = data.site.siteMetadata?.description ?? 'Description'
 
   const [view, setView] = useState(false) //grid or list view boolean
-  const [cursor, setCursor] = useState(null) //pagination cursor string
+  const [shown, setShown] = useState(9) // how many clips are displayed
   const [videos, setVideos] = useState([]) //array of arrays with video links
-  const [paginationQuantity] = usePaginationQuantity()
+  const [cursor, setCursor] = useState(null) //pagination cursor string
 
   const requestLoad = () => {
     api.getClips((cursor: string, embedUrls: string[]) => {
       setCursor(cursor)
       setVideos(embedUrls)
-    }, paginationQuantity)
+    }, shown)
   }
 
   const requestLoadMore = () => {
@@ -34,45 +35,48 @@ const IndexPage = () => {
         setCursor(cursor)
         setVideos([...videos.concat(embedUrls)])
       },
-      paginationQuantity,
+      shown,
       cursor
     )
   }
 
   const requestLoadAll = () => {
-    api.getAllClips((videos: string[]) => {})
+    api.getAllClips((allEmbedUrls: string[]) => {
+      setVideos(shuffle(allEmbedUrls))
+    })
   }
 
   useEffect(() => {
-    requestLoad()
+    requestLoadAll()
   }, [])
 
   return (
     <Layout location="Home" background={false}>
       <Seo title="Home" />
       <header>
         <h2>{title}</h2>
-        <div>
+        <section>
           <p>{description}</p>
           <ViewTogglers hook={[view, setView]} />
-        </div>
+        </section>
+        <DelayDisclaimer />
       </header>
 
       <main className={view ? 'list' : 'grid'}>
-        {videos.map((video: string, videoIdx: number) => (
+        {videos.slice(0, shown).map((video: string, videoIdx: number) => (
           <TwitchVideoClip video={video} parent={process.env.GATSBY_DOMAIN} key={`video-${videoIdx}`} />
         ))}
         {videos.length === 0 &&
-          Array(6)
+          Array(shown)
             .fill(null)
             .map((skeleton, skeletonIdx) => <Skeleton key={`skeleton-${skeletonIdx}`} />)}
       </main>
 
       <footer>
         <button
           type="button"
-          className={`load-more ${cursor ? 'inline-flex' : 'hidden'}`}
-          onClick={() => requestLoadMore()}
+          className={`load-more ${videos.length === 0 ? 'hidden' : 'inline-flex'}`}
+          onClick={() => setShown(shown + 3)}
         >
           <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
           Load More Videos

src/styles/pages/index.css

@@ -2,11 +2,11 @@ header > h2 {
   @apply text-4xl font-extrabold tracking-tight sm:text-5xl;
 }
 
-header > div {
+header > section {
   @apply mt-4 flex justify-between space-x-2 md:space-x-3;
 }
 
-header > div > p {
+header > section > p {
   @apply grow text-lg font-normal;
 }