Episodio 13

durancristhian · Oct 3, 2020 · cec5ddc · cec5ddc · vercel · Oct 3, 2020
1 parent 66d4951
commit cec5ddc
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 58 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -13,7 +13,7 @@ module.exports = {
     },
   },
   rules: {
-    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
   },
   settings: {

diff --git a/components/CreateChallenge.tsx b/components/CreateChallenge.tsx
@@ -17,6 +17,7 @@ import Heading from '../ui/Heading'
 type InitialValue = {
   cover: string
   coverName: string
+  coverSize: number
   name: string
   description: string
   questions: Question[]
@@ -38,6 +39,7 @@ const ErrorMessage = ({ name }: { name: string }) => (
 const initialValues: InitialValue = {
   cover: '',
   coverName: '',
+  coverSize: 0,
   name: '',
   description: '',
   questions: [],
@@ -103,6 +105,12 @@ const CreateChallenge = () => {
           description: Yup.string()
             .required('Required')
             .max(280, 'Must be 280 characters or less'),
+          cover: Yup.string().required('Required').min(1, 'Required'),
+          coverName: Yup.string().optional(),
+          coverSize: Yup.number().max(
+            5 * 1024 * 1024,
+            'File size should be lower than 5 mb.',
+          ),
           questions: Yup.array()
             .min(1)
             .of(
@@ -133,8 +141,8 @@ const CreateChallenge = () => {
           isSubmitting,
           values,
           setFieldValue,
-          /* setFieldError,
-          setFieldTouched, */
+          setValues,
+          setTouched,
         }) => (
           <Form>
             <div className="mb-4">
@@ -143,6 +151,7 @@ const CreateChallenge = () => {
                 type="text"
                 className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1"
                 placeholder="Name"
+                disabled={isSubmitting}
               />
               <ErrorMessage name="name" />
             </div>
@@ -152,6 +161,7 @@ const CreateChallenge = () => {
                 type="text"
                 className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1"
                 placeholder="Description"
+                disabled={isSubmitting}
               />
               <ErrorMessage name="description" />
             </div>
@@ -172,41 +182,33 @@ const CreateChallenge = () => {
                       ? event.currentTarget.files[0]
                       : null
 
-                  /* function bytesToSize(bytes: number) {
-                    const bytesLog = Math.log(bytes)
-                    const divisor = Math.log(1024)
-                    const floor = Math.floor(bytesLog / divisor)
-                    const value = parseInt(`${floor}`)
-
-                    return bytes / Math.pow(1024, value)
-                  } */
-
                   if (file) {
-                    /* const size = bytesToSize(file.size)
-
-                    if (size > 1) {
-                      setFieldValue('coverName', '')
-                      setFieldValue('cover', '')
-                      setFieldError(
-                        'cover',
-                        'File size should be less than 5 mb.',
-                      )
-                      setFieldTouched('cover', true, false)
-
-                      return
-                    } */
-
                     const reader = new FileReader()
 
                     reader.readAsDataURL(file)
 
                     reader.onload = function () {
-                      setFieldValue('coverName', file.name)
-                      setFieldValue('cover', reader.result)
+                      setTouched({
+                        cover: true,
+                        coverName: true,
+                        coverSize: true,
+                      })
+
+                      setValues({
+                        ...values,
+                        // @ts-ignore
+                        cover: reader.result,
+                        coverName: file.name,
+                        coverSize: file.size,
+                      })
                     }
                   } else {
-                    setFieldValue('coverName', '')
-                    setFieldValue('cover', '')
+                    setValues({
+                      ...values,
+                      cover: '',
+                      coverName: '',
+                      coverSize: 0,
+                    })
 
                     if (coverRef.current) {
                       coverRef.current.value = ''
@@ -218,6 +220,7 @@ const CreateChallenge = () => {
                 <button
                   type="button"
                   className="h-64 w-full border-black border-2 border-dashed focus:outline-none focus:shadow-outline"
+                  disabled={isSubmitting}
                   onClick={() => {
                     if (coverRef.current) {
                       coverRef.current.click()
@@ -238,10 +241,16 @@ const CreateChallenge = () => {
                       className="mx-auto shadow h-64"
                     />
                     <button
+                      type="button"
                       className="absolute bg-white border-2 rounded-full top-0 right-0 p-2 -mt-2 -mr-2 focus:outline-none focus:shadow-outline"
+                      disabled={isSubmitting}
                       onClick={() => {
-                        setFieldValue('coverName', '')
-                        setFieldValue('cover', '')
+                        setValues({
+                          ...values,
+                          cover: '',
+                          coverName: '',
+                          coverSize: 0,
+                        })
 
                         if (coverRef.current) {
                           coverRef.current.value = ''
@@ -254,6 +263,7 @@ const CreateChallenge = () => {
                 </div>
               )}
               <ErrorMessage name="cover" />
+              <ErrorMessage name="coverSize" />
             </div>
             <div className="mb-4">
               <FieldArray
@@ -264,6 +274,7 @@ const CreateChallenge = () => {
                       <Heading type="h2">Questions</Heading>
                       <Button
                         type="button"
+                        disabled={isSubmitting}
                         onClick={() => {
                           const defaultValidOption = uuidv4()
 
@@ -304,6 +315,7 @@ const CreateChallenge = () => {
                             type="text"
                             className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1"
                             placeholder="Description"
+                            disabled={isSubmitting}
                           />
                           <ErrorMessage
                             name={`questions[${questionIndex}].description`}
@@ -314,7 +326,8 @@ const CreateChallenge = () => {
                             name={`questions.${questionIndex}.time`}
                             as="select"
                             className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1"
-                            placeholder="Description"
+                            placeholder="Time"
+                            disabled={isSubmitting}
                           >
                             <option value="30">30 seconds</option>
                             <option value="60">60 seconds</option>
@@ -332,12 +345,14 @@ const CreateChallenge = () => {
                                   placeholder={`Option content #${
                                     optionIndex + 1
                                   }`}
+                                  disabled={isSubmitting}
                                 />
                               </div>
                               <div className="ml-4">
                                 <button
                                   type="button"
                                   className="focus:outline-none focus:shadow-outline"
+                                  disabled={isSubmitting}
                                   onClick={() => {
                                     setFieldValue(
                                       `questions.${questionIndex}.validOption`,
@@ -360,6 +375,7 @@ const CreateChallenge = () => {
                         ))}
                         <Button
                           type="button"
+                          disabled={isSubmitting}
                           onClick={() => {
                             remove(questionIndex)
                           }}

diff --git a/components/ListChallenges.tsx b/components/ListChallenges.tsx
@@ -68,7 +68,7 @@ const ListChallenges = () => {
         (!data.length && (
           <p className="italic text-center">There is no challenges.</p>
         ))}
-      {data && data.length && (
+      {data && !!data.length && (
         <table className="table-fixed w-full">
           <thead>
             <tr className="bg-white text-left">

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -25,6 +25,8 @@ const fuego = new Fuego(firebaseConfig)
 
 const App = ({ Component, pageProps }: AppProps) => {
   useEffect(() => {
+    if (!process.env.NEXT_PUBLIC_GA_TRACKING_ID) return
+
     const handleRouteChange = (url: string) => {
       pageview(url)
     }

diff --git a/pages/games/[gameId].tsx b/pages/games/[gameId].tsx
@@ -1,6 +1,7 @@
 import { fuego, useCollection, useDocument } from '@nandorojo/swr-firestore'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
+import { LoggedOut } from '..'
 import { useAuth } from '../../hooks/useAuth'
 import { Game } from '../../types/Game'
 import { Player } from '../../types/Player'
@@ -151,10 +152,7 @@ function Playing({ gameId }: PlayingProps) {
   )
 
   if (!user) {
-    return (
-      /* TODO: add login action */
-      <p className="italic text-center">You have to log in before playing.</p>
-    )
+    return <LoggedOut />
   }
 
   const play = async () => {
@@ -173,6 +171,7 @@ function Playing({ gameId }: PlayingProps) {
       email: user.email,
       score: 0,
       status: 'created',
+      userId: user.uid,
     })
 
     router.push(`/games/${gameId}/${newPlayer.id}`)

diff --git a/pages/games/[gameId]/[playerId].tsx b/pages/games/[gameId]/[playerId].tsx
@@ -1,21 +1,30 @@
+import { useDocument } from '@nandorojo/swr-firestore'
 import classnames from 'classnames'
-import React, { useState } from 'react'
-import Heading from '../../../ui/Heading'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useDocument } from '@nandorojo/swr-firestore'
-import { Game, Option } from '../../../types/Game'
-import { Player } from '../../../types/Player'
-import Button from '../../../ui/Button'
-import useCremona from '../../../hooks/useCremona'
+import React, { useState } from 'react'
+import { LoggedOut } from '../..'
+import Countdown from '../../../components/Countdown'
 import useAudio from '../../../hooks/useAudio'
+import { useAuth, useUser } from '../../../hooks/useAuth'
+import useCremona from '../../../hooks/useCremona'
 import useInterval from '../../../hooks/useInterval'
-import Countdown from '../../../components/Countdown'
-import Link from 'next/link'
-import A from '../../../ui/A'
 import CheckCircle from '../../../icons/CheckCircle'
 import XCircle from '../../../icons/XCircle'
+import { Game, Option } from '../../../types/Game'
+import { Player } from '../../../types/Player'
+import A from '../../../ui/A'
+import Button from '../../../ui/Button'
+import Heading from '../../../ui/Heading'
+
+export default function PlayerId() {
+  const { user } = useAuth()
+
+  return user ? <Content /> : <LoggedOut />
+}
 
-const PlayerId = () => {
+const Content = () => {
+  const user = useUser()
   const router = useRouter()
   const gameId = Array.isArray(router.query.gameId)
     ? router.query.gameId[0]
@@ -51,14 +60,22 @@ const PlayerId = () => {
     return <p className="italic text-center">There was an error.</p>
   }
 
-  if (!game || !game.id || !player) {
+  if (!game || !player) {
     return (
       <p className="italic text-center">There is no challenge or player.</p>
     )
   }
 
-  /* TODO: verify game and player status */
+  if (user.uid !== player.userId) {
+    return (
+      <p className="italic text-center">
+        The user does not match with the player.
+      </p>
+    )
+  }
+
   if (player.status === 'finished') {
+    /* TODO: verify game and player status */
     /* return <PlayerScore /> */
     return (
       /* TODO: make a component */
@@ -110,14 +127,12 @@ const PlayerId = () => {
   )
 }
 
-export default PlayerId
-
-type GameProps = {
+type PlayerGameProps = {
   game: Game
   onFinish: (score: number) => void
 }
 
-function PlayerGame({ game, onFinish }: GameProps) {
+function PlayerGame({ game, onFinish }: PlayerGameProps) {
   const { currentIndex, gameEnded, totalQuestions, update } = useCremona(
     game,
     onFinish,

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -13,7 +13,7 @@ function LoggedIn() {
   return <ListChallenges />
 }
 
-function LoggedOut() {
+export function LoggedOut() {
   const { googleSignIn } = useAuth()
 
   return (

diff --git a/types/Player.ts b/types/Player.ts
@@ -3,4 +3,5 @@ export type Player = {
   email: string
   score: number
   status: 'created' | 'playing' | 'finished'
+  userId: string
 }
diff --git a/utils/gtag.ts b/utils/gtag.ts
@@ -1,5 +1,6 @@
 export const pageview = (url: string) => {
-  /* window.gtag('config', process.env.NEXT_PUBLIC_GA_TRACKING_ID, {
+  // @ts-ignore
+  window.gtag('config', process.env.NEXT_PUBLIC_GA_TRACKING_ID, {
     page_path: url,
-  }) */
+  })
 }