Merge pull request #37 from TaloDev/develop

tudddorrr · web-flow · commit 18c2db401f6c · 2022-04-18T19:53:58.000+01:00
Release 0.9.0
diff --git a/package.json b/package.json
@@ -59,12 +59,12 @@
     "postcss-cli": "^8.3.1",
     "postcss-nesting": "^8.0.1",
     "snowpack": "^3.8.8",
-    "tailwindcss": "^2.2.2"
+    "tailwindcss": "^3.0.24"
   },
   "license": "MIT",
   "browserslist": ">0.75%",
   "lint-staged": {
     "*.{js,jsx}": "eslint --fix"
   },
-  "version": "0.8.1"
+  "version": "0.9.0"
 }
diff --git a/src/api/api.js b/src/api/api.js
@@ -14,6 +14,8 @@ instance.interceptors.request.use((config) => {
     config.headers['Authorization'] = `Bearer ${AuthService.getToken()}`
   }
 
+  config.headers['X-Talo-Include-Dev-Data'] = window.localStorage.getItem('includeDevData') === 'true' ? '1' : '0'
+
   return config
 }, (error) => Promise.reject(error)
 )
diff --git a/src/api/confirmEmail.js b/src/api/confirmEmail.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async (code) => api.post('/users/confirm_email', { code })
+export default (code) => api.post('/users/confirm_email', { code })
diff --git a/src/api/createAPIKey.js b/src/api/createAPIKey.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async (gameId, scopes) => api.post('/api-keys', { gameId, scopes })
+export default (gameId, scopes) => api.post('/api-keys', { gameId, scopes })
diff --git a/src/api/createDataExport.js b/src/api/createDataExport.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async (gameId, entities) => api.post('/data-exports', { gameId, entities })
+export default (gameId, entities) => api.post('/data-exports', { gameId, entities })
diff --git a/src/api/createDemo.js b/src/api/createDemo.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async () => api.post('/public/demo')
+export default () => api.post('/public/demo')
diff --git a/src/api/createGame.js b/src/api/createGame.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async (name) => api.post('/games', { name })
+export default (name) => api.post('/games', { name })
diff --git a/src/api/deleteAPIKey.js b/src/api/deleteAPIKey.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async (apiKeyId) => api.delete(`/api-keys/${apiKeyId}`)
+export default (apiKeyId) => api.delete(`/api-keys/${apiKeyId}`)
diff --git a/src/api/findPlayer.js b/src/api/findPlayer.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async (gameId, playerId) => api.get(`/players?gameId=${gameId}&search=${playerId}`)
+export default (gameId, playerId) => api.get(`/players?gameId=${gameId}&search=${playerId}`)
diff --git a/src/api/getAPIKeyScopes.js b/src/api/getAPIKeyScopes.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async () => api.get('/api-keys/scopes')
+export default () => api.get('/api-keys/scopes')
diff --git a/src/api/getAPIKeys.js b/src/api/getAPIKeys.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async (gameId) => api.get(`/api-keys?gameId=${gameId}`)
+export default (gameId) => api.get(`/api-keys?gameId=${gameId}`)
diff --git a/src/api/login.js b/src/api/login.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async (data) => api.post('/public/users/login', data)
+export default (data) => api.post('/public/users/login', data)
diff --git a/src/api/logout.js b/src/api/logout.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async () => api.post('/users/logout')
+export default () => api.post('/users/logout')
diff --git a/src/api/refreshAccess.js b/src/api/refreshAccess.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 import AuthService from '../services/AuthService'
 import { apiConfig } from './api'
 
-export default async () => {
+export default () => {
   const api = axios.create(apiConfig)
 
   api.interceptors.response.use((response) => {
diff --git a/src/api/updatePlayer.js b/src/api/updatePlayer.js
@@ -1,3 +1,3 @@
 import api from './api'
 
-export default async (playerId, data) => api.patch(`/players/${playerId}`, data)
+export default (playerId, data) => api.patch(`/players/${playerId}`, data)
diff --git a/src/api/useHeadlines.js b/src/api/useHeadlines.js
@@ -3,7 +3,7 @@ import buildError from '../utils/buildError'
 import api from './api'
 import { stringify } from 'querystring'
 
-const useHeadlines = (activeGame, startDate, endDate) => {
+const useHeadlines = (activeGame, startDate, endDate, includeDevData) => {
   const fetcher = async (url) => {
     const qs = stringify({
       gameId: activeGame.id,
@@ -21,7 +21,7 @@ const useHeadlines = (activeGame, startDate, endDate) => {
   }
 
   const { data, error } = useSWR(
-    activeGame && startDate && endDate ? ['/headlines', activeGame, startDate, endDate] : null,
+    activeGame && startDate && endDate ? ['/headlines', activeGame, startDate, endDate, includeDevData] : null,
     fetcher
   )
 
diff --git a/src/api/useStats.js b/src/api/useStats.js
@@ -3,7 +3,7 @@ import buildError from '../utils/buildError'
 import api from './api'
 import { stringify } from 'querystring'
 
-const useStats = (activeGame) => {
+const useStats = (activeGame, includeDevData) => {
   const fetcher = async (url) => {
     const qs = stringify({ gameId: activeGame.id })
 
@@ -12,7 +12,7 @@ const useStats = (activeGame) => {
   }
 
   const { data, error, mutate } = useSWR(
-    ['game-stats', activeGame],
+    ['game-stats', activeGame, includeDevData],
     fetcher
   )
 
diff --git a/src/components/PlayerIdentifier.jsx b/src/components/PlayerIdentifier.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function PlayerIdentifier({ player }) {
+  return (
+    <div>
+      <code className='bg-gray-900 rounded p-2 text-xs md:text-sm'>
+        {player?.devBuild && <span className='mr-2 bg-orange-600 rounded px-1 py-0.5'>DEV</span>}
+        Player = {player?.id}
+      </code>
+    </div>
+  )
+}
+
+PlayerIdentifier.propTypes = {
+  player: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    devBuild: PropTypes.bool.isRequired
+  })
+}
+
+export default PlayerIdentifier
diff --git a/src/components/TextInput.jsx b/src/components/TextInput.jsx
@@ -27,12 +27,13 @@ const TextInput = (props) => {
     p-2
     w-full
     rounded
+    disabled:bg-gray-300
     ${focusStyle}
     ${props.inputClassName ?? ''}
   `, {
     'bg-gray-600': !props.variant,
     'bg-gray-100 text-black': props.variant === 'light',
-    'bg-white border border-gray-300 focus:border-opacity-0 disabled:bg-gray-200': props.variant === 'modal'
+    'bg-white border border-gray-300 focus:border-opacity-0': props.variant === 'modal'
   })
 
   return (
diff --git a/src/components/Toggle.jsx b/src/components/Toggle.jsx
@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { motion } from 'framer-motion'
+import { labelFocusStyle } from '../styles/theme'
+import { IconCheck } from '@tabler/icons'
+
+function Toggle({ id, enabled, onToggle }) {
+  const [focus, setFocus] = useState(false)
+
+  return (
+    <>
+      <input
+        id={id}
+        type='checkbox'
+        className='absolute inset-0 opacity-0'
+        onFocus={() => setFocus(true)}
+        onBlur={() => setFocus(false)}
+        onChange={() => onToggle(!enabled)}
+      />
+
+      <label
+        htmlFor={id}
+        className={classNames('block h-12 w-24 p-2 bg-gray-900 border-2 border-gray-700 rounded-lg cursor-pointer', { [labelFocusStyle]: focus })}
+      >
+        <motion.div
+          animate={{
+            x: enabled ? 44 : 0,
+            opacity: enabled ? 1 : 0.2
+          }}
+          initial={false}
+          transition={{ duration: 0.2 }}
+          className={classNames('bg-indigo-500 h-full w-8 rounded-md')}
+        >
+          {enabled &&
+            <span className='flex items-center justify-center h-full'>
+              <IconCheck size={24} stroke={3} />
+            </span>
+          }
+        </motion.div>
+      </label>
+    </>
+  )
+}
+
+Toggle.propTypes = {
+  id: PropTypes.string.isRequired,
+  enabled: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired
+}
+
+export default Toggle
diff --git a/src/components/__tests__/Title.test.jsx b/src/components/__tests__/Title.test.jsx
@@ -6,7 +6,7 @@ import { createMemoryHistory } from 'history'
 import Title from '../Title'
 
 describe('<Title />', () => {
-  it('should go back', async () => {
+  it('should go back', () => {
     const history = createMemoryHistory()
     history.push('/players')
     history.push('/players/1/props')
diff --git a/src/components/__tests__/Toggle.test.jsx b/src/components/__tests__/Toggle.test.jsx
@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Toggle from '../Toggle'
+
+describe('<Toggle />', () => {
+  // eslint-disable-next-line react/prop-types
+  function ToggleDummy({ toggleMock }) {
+    const [enabled, setEnabled] = useState(false)
+
+    useEffect(() => toggleMock(enabled), [enabled])
+
+    return (
+      <Toggle id='test' enabled={enabled} onToggle={setEnabled} />
+    )
+  }
+
+  it('should correctly toggle between states', () => {
+    const toggleMock = jest.fn()
+
+    render(<ToggleDummy toggleMock={toggleMock} />)
+
+    userEvent.click(screen.getByRole('checkbox'))
+    expect(toggleMock).toHaveBeenLastCalledWith(true)
+
+    userEvent.click(screen.getByRole('checkbox'))
+    expect(toggleMock).toHaveBeenLastCalledWith(false)
+  })
+})
diff --git a/src/components/tables/TableBody.jsx b/src/components/tables/TableBody.jsx
@@ -2,18 +2,19 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-const TableBody = (props) => {
+function TableBody({ iterator, children, startIdx, configureClassNames }) {
   return (
     <tbody>
-      {props.iterator.map((iterator, idx) => (
+      {iterator.map((iteraee, idx) => (
         <tr
           key={idx}
           className={classNames({
-            'bg-indigo-600': (props.startIdx + idx) % 2 !== 0,
-            'bg-indigo-500': (props.startIdx + idx) % 2 === 0
+            'bg-indigo-600': (startIdx + idx) % 2 !== 0,
+            'bg-indigo-500': (startIdx + idx) % 2 === 0,
+            ...configureClassNames?.(iteraee, startIdx + idx)
           })}
         >
-          {props.children(iterator, idx)}
+          {children(iteraee, idx)}
         </tr>
       ))}
     </tbody>
@@ -27,7 +28,8 @@ TableBody.defaultProps = {
 TableBody.propTypes = {
   iterator: PropTypes.array.isRequired,
   children: PropTypes.func.isRequired,
-  startIdx: PropTypes.number
+  startIdx: PropTypes.number,
+  configureClassNames: PropTypes.func
 }
 
 export default TableBody
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
@@ -1,7 +1,7 @@
 
 import React, { useState, useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import useHeadlines from '../api/useHeadlines'
 import ErrorMessage from '../components/ErrorMessage'
 import HeadlineStat from '../components/HeadlineStat'
@@ -15,13 +15,17 @@ import useTimePeriod from '../utils/useTimePeriod'
 import Link from '../components/Link'
 import userState from '../state/userState'
 import useStats from '../api/useStats'
+import Toggle from '../components/Toggle'
+import devDataState from '../state/devDataState'
 
 const Dashboard = () => {
   const history = useHistory()
 
   const [intendedRouteChecked, setIntendedRouteChecked] = useState(false)
   const user = useRecoilValue(userState)
 
+  const [includeDevData, setIncludeDevData] = useRecoilState(devDataState)
+
   useEffect(() => {
     const intended = window.localStorage.getItem('intendedRoute')
     if (intended) {
@@ -44,8 +48,8 @@ const Dashboard = () => {
 
   const [timePeriod, setTimePeriod] = useLocalStorage('headlinesTimePeriod', timePeriods[1].id)
   const { startDate, endDate } = useTimePeriod(timePeriod)
-  const { headlines, loading: headlinesLoading, error: headlinesError } = useHeadlines(activeGame, startDate, endDate)
-  const { stats, loading: statsLoading, error: statsError } = useStats(activeGame)
+  const { headlines, loading: headlinesLoading, error: headlinesError } = useHeadlines(activeGame, startDate, endDate, includeDevData)
+  const { stats, loading: statsLoading, error: statsError } = useStats(activeGame, includeDevData)
 
   if (!intendedRouteChecked) return null
 
@@ -62,8 +66,17 @@ const Dashboard = () => {
 
   return (
     <Page title={`${activeGame.name} dashboard`} isLoading={headlinesLoading || statsLoading}>
+      <div className='space-y-4'>
+        <h2 className='text-2xl mt-4 md:mt-0'>Enable dev data</h2>
+        <p>When enabled, you&apos;ll see data submitted by players from dev builds of your game</p>
+
+        <Toggle id='dev-data' enabled={includeDevData} onToggle={setIncludeDevData} />
+
+        <p className='font-semibold'>This is currently turned {includeDevData ? 'on' : 'off'}</p>
+      </div>
+
       <div className='flex flex-col-reverse md:flex-row md:justify-between md:items-center'>
-        <h2 className='text-2xl mt-4 md:mt-0'>{titlePrefix} at a glance</h2>
+        <h2 className='text-2xl mt-4'>{titlePrefix} at a glance</h2>
         <TimePeriodPicker
           periods={timePeriods}
           onPick={(period) => setTimePeriod(period.id)}
diff --git a/src/pages/LeaderboardEntries.jsx b/src/pages/LeaderboardEntries.jsx
@@ -16,6 +16,7 @@ import Button from '../components/Button'
 import getLeaderboard from '../api/getLeaderboard'
 import updateLeaderboardEntry from '../api/updateLeaderboardEntry'
 import buildError from '../utils/buildError'
+import classNames from 'classnames'
 
 const LeaderboardEntries = () => {
   const location = useLocation()
@@ -106,7 +107,13 @@ const LeaderboardEntries = () => {
           <div className='overflow-x-scroll'>
             <table className='table-auto w-full'>
               <TableHeader columns={['#', 'Player', 'Score', 'Time', '']} />
-              <TableBody iterator={entries}>
+              <TableBody
+                iterator={entries}
+                configureClassNames={(entry, idx) => ({
+                  'bg-orange-600': entry.playerAlias.player.devBuild && idx % 2 !== 0,
+                  'bg-orange-500': entry.playerAlias.player.devBuild && idx % 2 === 0
+                })}
+              >
                 {(entry) => (
                   <>
                     <TableCell><span className='font-semibold'>{entry.position + 1}</span></TableCell>
@@ -115,7 +122,7 @@ const LeaderboardEntries = () => {
                         <span>{entry.playerAlias.identifier}</span>
                         <Button
                           variant='icon'
-                          className='ml-2 p-1 rounded-full bg-indigo-900'
+                          className={classNames('ml-2 p-1 rounded-full bg-indigo-900', { 'bg-orange-900': entry.playerAlias.player.devBuild })}
                           onClick={() => goToPlayer(entry.playerAlias.identifier)}
                           icon={<IconArrowRight size={16} />}
                         />
diff --git a/src/pages/PlayerEvents.jsx b/src/pages/PlayerEvents.jsx
diff --git a/src/pages/PlayerProps.jsx b/src/pages/PlayerProps.jsx
diff --git a/src/pages/PlayerStats.jsx b/src/pages/PlayerStats.jsx
diff --git a/src/pages/Players.jsx b/src/pages/Players.jsx
diff --git a/src/pages/__tests__/PlayerProps.test.jsx b/src/pages/__tests__/PlayerProps.test.jsx
diff --git a/src/state/devDataState.js b/src/state/devDataState.js
diff --git a/src/utils/__tests__/usePlayer.test.js b/src/utils/__tests__/usePlayer.test.js
diff --git a/src/utils/usePlayer.js b/src/utils/usePlayer.js
diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,8 @@ instance.interceptors.request.use((config) => {`
`14`	`14`	config.headers['Authorization'] = `Bearer ${AuthService.getToken()}`
`15`	`15`	`}`
`16`	`16`
	`17`	`+ config.headers['X-Talo-Include-Dev-Data'] = window.localStorage.getItem('includeDevData') === 'true' ? '1' : '0'`
	`18`	`+`
`17`	`19`	`return config`
`18`	`20`	`}, (error) => Promise.reject(error)`
`19`	`21`	`)`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import api from './api'`
`2`	`2`
`3`		`-export default async (code) => api.post('/users/confirm_email', { code })`
	`3`	`+export default (code) => api.post('/users/confirm_email', { code })`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import api from './api'`
`2`	`2`
`3`		`-export default async (gameId, scopes) => api.post('/api-keys', { gameId, scopes })`
	`3`	`+export default (gameId, scopes) => api.post('/api-keys', { gameId, scopes })`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import api from './api'`
`2`	`2`
`3`		`-export default async (gameId, entities) => api.post('/data-exports', { gameId, entities })`
	`3`	`+export default (gameId, entities) => api.post('/data-exports', { gameId, entities })`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import api from './api'`
`2`	`2`
`3`		`-export default async () => api.post('/public/demo')`
	`3`	`+export default () => api.post('/public/demo')`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import api from './api'`
`2`	`2`
`3`		`-export default async (name) => api.post('/games', { name })`
	`3`	`+export default (name) => api.post('/games', { name })`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import api from './api'`
`2`	`2`
`3`		-export default async (apiKeyId) => api.delete(`/api-keys/${apiKeyId}`)
	`3`	+export default (apiKeyId) => api.delete(`/api-keys/${apiKeyId}`)
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import api from './api'`
`2`	`2`
`3`		-export default async (gameId, playerId) => api.get(`/players?gameId=${gameId}&search=${playerId}`)
	`3`	+export default (gameId, playerId) => api.get(`/players?gameId=${gameId}&search=${playerId}`)
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import api from './api'`
`2`	`2`
`3`		`-export default async () => api.get('/api-keys/scopes')`
	`3`	`+export default () => api.get('/api-keys/scopes')`