Episodio 12

durancristhian · Sep 29, 2020 · 8201e3f · 8201e3f · vercel · Sep 29, 2020
1 parent 3fe3835
commit 8201e3f
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 4 deletions.
diff --git a/.env.template b/.env.template
@@ -1,3 +1,7 @@
+# Google Analytics
+NEXT_PUBLIC_GA_TRACKING_ID=''
+
+# Firebase
 NEXT_PUBLIC_API_KEY=''
 NEXT_PUBLIC_AUTH_DOMAIN=''
 NEXT_PUBLIC_DATABASE_URL=''

diff --git a/components/CreateChallenge.tsx b/components/CreateChallenge.tsx
@@ -103,8 +103,6 @@ const CreateChallenge = () => {
  description: Yup.string()
  .required('Required')
  .max(280, 'Must be 280 characters or less'),
- cover: Yup.string(),
- coverExtension: Yup.mixed().oneOf(['jpg', 'jpeg', 'png']),
  questions: Yup.array()
  .min(1)
  .of(
@@ -135,6 +133,8 @@ const CreateChallenge = () => {
  isSubmitting,
  values,
  setFieldValue,
+ /* setFieldError,
+ setFieldTouched, */
  }) => (
  <Form>
  <div className="mb-4">
@@ -172,7 +172,30 @@ 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)
@@ -230,6 +253,7 @@ const CreateChallenge = () => {
  </div>
  </div>
  )}
+ <ErrorMessage name="cover" />
  </div>
  <div className="mb-4">
  <FieldArray

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -3,10 +3,12 @@ import 'firebase/auth'
 import 'firebase/firestore'
 import 'firebase/storage'
 import { AppProps } from 'next/app'
-import React from 'react'
+import React, { useEffect } from 'react'
 import Layout from '../components/Layout'
 import { ProvideAuth } from '../hooks/useAuth'
 import '../styles/globals.css'
+import Router from 'next/router'
+import { pageview } from '../utils/gtag'
 
 const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
@@ -22,6 +24,18 @@ const firebaseConfig = {
 const fuego = new Fuego(firebaseConfig)
 
 const App = ({ Component, pageProps }: AppProps) => {
+ useEffect(() => {
+ const handleRouteChange = (url: string) => {
+ pageview(url)
+ }
+
+ Router.events.on('routeChangeComplete', handleRouteChange)
+
+ return () => {
+ Router.events.off('routeChangeComplete', handleRouteChange)
+ }
+ }, [])
+
  return (
  <FuegoProvider fuego={fuego}>
  <ProvideAuth>

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -6,6 +6,26 @@ class MyDocument extends Document {
  return (
  <Html>
  <Head>
+ {process.env.NEXT_PUBLIC_GA_TRACKING_ID && (
+ <>
+ <script
+ async
+ src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
+ />
+ <script
+ dangerouslySetInnerHTML={{
+ __html: `
+ window.dataLayer = window.dataLayer || [];
+ function gtag(){dataLayer.push(arguments);}
+ gtag('js', new Date());
+ gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}', {
+ page_path: window.location.pathname,
+ });
+ `,
+ }}
+ />
+ </>
+ )}
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </Head>
  <body className="bg-gray-100">

diff --git a/pages/games/[gameId].tsx b/pages/games/[gameId].tsx
@@ -265,7 +265,9 @@ function Table({ gameId, isAdmin }: TableProps) {
  }
 
  const exportCSV = (players: Player[]) => {
- const csv = players.map((p) => `${p.name},${p.email},${p.score}`).join('\n')
+ const csv = players
+ .map((p, i) => `${i + 1},${p.name},${p.email},${p.score}`)
+ .join('\n')
  const csvContent = encodeURI(csv)
 
  const elem = window.document.createElement('a')

diff --git a/utils/gtag.ts b/utils/gtag.ts
@@ -0,0 +1,5 @@
+export const pageview = (url: string) => {
+ /* window.gtag('config', process.env.NEXT_PUBLIC_GA_TRACKING_ID, {
+ page_path: url,
+ }) */
+}