Episodio 8

components/CreateChallenge.tsx

@@ -1,10 +1,12 @@
 import { useCollection } from '@nandorojo/swr-firestore'
+import { useRouter } from 'next/router'
 import React, { FormEvent, useState } from 'react'
 import { useUser } from '../hooks/useAuth'
-import Heading from '../ui/Heading'
 import { Game } from '../types/Game'
+import Heading from '../ui/Heading'
 
 const CreateChallenge = () => {
+ const router = useRouter()
  const [inProgress, setInProgress] = useState(false)
  const [message, setMessage] = useState('')
  const user = useUser()
@@ -103,7 +105,9 @@ const CreateChallenge = () => {
  })
 
  setInProgress(false)
- setMessage('')
+ setMessage('Challenge created. Redirecting home...')
+
+ router.push('/')
  } catch (error) {
  console.error(error)
 

components/Layout.tsx

@@ -1,7 +1,8 @@
 import Link from 'next/link'
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useState } from 'react'
 import A from '../ui/A'
-import { useAuth } from '../hooks/useAuth'
+import { useAuth, useUser } from '../hooks/useAuth'
+import ChevronRight from '../icons/ChevronRight'
 
 type Props = {
  children: ReactNode
@@ -67,18 +68,50 @@ function LoggedIn() {
 }
 
 function LoggedOut() {
+ const [isOpen, setIsOpen] = useState(false)
  const { signout } = useAuth()
+ const user = useUser()
 
  return (
- <>
- <button
- onClick={() => {
- signout()
- }}
- className="text-blue-700 focus:outline-none focus:shadow-outline"
- >
- Sign out
- </button>
- </>
+ <div className="relative inline-block">
+ <div>
+ <span className="shadow-sm">
+ <button
+ type="button"
+ className="flex items-center w-full border px-4 py-2 focus:outline-none focus:shadow-outline-blue transition ease-in-out duration-150"
+ id="options-menu"
+ aria-haspopup="true"
+ aria-expanded="true"
+ onClick={() => {
+ setIsOpen(!isOpen)
+ }}
+ >
+ {user.displayName}
+ <ChevronRight className="h-6 ml-4" />
+ </button>
+ </span>
+ </div>
+ {isOpen && (
+ <div className="origin-top-right absolute right-0 mt-1 w-56">
+ <div className="bg-white border">
+ <div
+ className="px-4 py-2"
+ role="menu"
+ aria-orientation="vertical"
+ aria-labelledby="options-menu"
+ >
+ <button
+ onClick={() => {
+ signout()
+ }}
+ className="focus:outline-none focus:shadow-outline w-full text-left"
+ >
+ Sign out
+ </button>
+ </div>
+ </div>
+ </div>
+ )}
+ </div>
  )
 }

components/ListChallenges.tsx

@@ -1,66 +1,103 @@
 import { useCollection } from '@nandorojo/swr-firestore'
 import Link from 'next/link'
-import React from 'react'
+import React, { useState } from 'react'
 import { useUser } from '../hooks/useAuth'
+import CheckCircle from '../icons/CheckCircle'
 import { Game } from '../types/Game'
 import A from '../ui/A'
+import Button from '../ui/Button'
 import Heading from '../ui/Heading'
 
+const FILTERS = [
+ {
+ text: 'Created',
+ value: 'created',
+ },
+ {
+ text: 'Playing',
+ value: 'playing',
+ },
+ {
+ text: 'Finished',
+ value: 'finished',
+ },
+]
+
 const ListChallenges = () => {
  const user = useUser()
+ const [statusFilter, setStatusFilter] = useState('created')
  const { data, error, loading } = useCollection<Game>('challenges', {
  listen: true,
  parseDates: ['createdAt'],
- where: ['createdBy', '==', user.uid],
+ where: [
+ ['createdBy', '==', user.uid],
+ ['status', '==', statusFilter],
+ ],
  orderBy: ['createdAt', 'desc'],
  })
 
- if (loading) {
- return <p className="italic text-center">Loading...</p>
- }
-
- if (error) {
- return <p className="italic text-center">There was an error.</p>
- }
-
- if (!data || !data.length) {
- return <p className="italic text-center">There is no challenges.</p>
- }
-
  return (
  <>
- <div className="mb-4">
- <Heading type="h2" align="center">
- Your challenges
- </Heading>
+ <Heading type="h2" align="center">
+ Your challenges
+ </Heading>
+ <div className="flex items-center my-4">
+ <div className="flex flex-auto">
+ {FILTERS.map(({ text, value }) => (
+ <div key={value} className="mr-4">
+ <Button
+ onClick={() => {
+ setStatusFilter(value)
+ }}
+ >
+ {statusFilter === value && <CheckCircle className="h-6 mr-4" />}
+ {text}
+ </Button>
+ </div>
+ ))}
+ </div>
+ <div>
+ <Link href="/create" passHref>
+ <A href="#!">Create</A>
+ </Link>
+ </div>
  </div>
- <table className="table-fixed w-full">
- <thead>
- <tr className="bg-white text-left">
- <th className="border w-1/3 px-4 py-2">Name</th>
- <th className="border w-1/3 px-4 py-2">Status</th>
- <th className="border w-1/3 px-4 py-2">Created at</th>
- </tr>
- </thead>
- <tbody>
- {data.map((game) => (
- <tr
- key={game.id}
- className={game.status === 'finished' ? '' : 'bg-green-100'}
- >
- <td className="border px-4 py-2">
- <Link href="/games/[gameId]" as={`/games/${game.id}`} passHref>
- <A href="#!">{game.name}</A>
- </Link>
- </td>
- <td className="border px-4 py-2">{game.status}</td>
- <td className="border px-4 py-2">
- {game.createdAt.toLocaleString()}
- </td>
+ {loading && <p className="italic text-center">Loading...</p>}
+ {error && <p className="italic text-center">There was an error.</p>}
+ {!data ||
+ (!data.length && (
+ <p className="italic text-center">There is no challenges.</p>
+ ))}
+ {data && data.length && (
+ <table className="table-fixed w-full">
+ <thead>
+ <tr className="bg-white text-left">
+ <th className="border w-1/3 px-4 py-2">Name</th>
+ <th className="border w-1/3 px-4 py-2">Status</th>
+ <th className="border w-1/3 px-4 py-2">Created at</th>
  </tr>
- ))}
- </tbody>
- </table>
+ </thead>
+ <tbody>
+ {data.map((game) => (
+ <tr key={game.id}>
+ <td className="border px-4 py-2">
+ <Link
+ href="/games/[gameId]"
+ as={`/games/${game.id}`}
+ passHref
+ >
+ <A href="#!">{game.name}</A>
+ </Link>
+ </td>
+ <td className="border px-4 py-2">{game.status}</td>
+ <td className="border px-4 py-2">
+ {game.createdAt.toLocaleString()}
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ )}
  </>
  )
 }

icons/ChevronRight.tsx

@@ -0,0 +1,22 @@
+import React, { SVGAttributes } from 'react'
+
+type Props = SVGAttributes<SVGElement>
+
+const ChevronRight = (props: Props) => {
+ return (
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ {...props}
+ >
+ <path
+ fillRule="evenodd"
+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+ clipRule="evenodd"
+ />
+ </svg>
+ )
+}
+
+export default ChevronRight

pages/create.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import CreateChallenge from '../components/CreateChallenge'
+import { useAuth } from '../hooks/useAuth'
+
+function Create() {
+ const { user } = useAuth()
+
+ if (!user) {
+ return null
+ }
+
+ return (
+ <div className="p-4">
+ <CreateChallenge />
+ </div>
+ )
+}
+
+export default Create