Merge pull request #39 from TaloDev/develop

Release 0.10.0

Author: tudddorrr

package.json

@@ -23,6 +23,7 @@
     "randomcolor": "^0.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-focus-lock": "^2.8.1",
     "react-hook-form": "^7.28.1",
     "react-required-if": "^1.0.3",
     "react-resize-detector": "^6.7.1",
@@ -66,5 +67,5 @@
   "lint-staged": {
     "*.{js,jsx}": "eslint --fix"
   },
-  "version": "0.9.0"
+  "version": "0.10.0"
 }

src/App.jsx

@@ -31,6 +31,8 @@ const RecoverAccount = lazy(() => import(/* webpackChunkName: 'recover-account'
 const Activity = lazy(() => import(/* webpackChunkName: 'activity' */ './pages/Activity'))
 const Stats = lazy(() => import(/* webpackChunkName: 'stats' */ './pages/Stats'))
 const PlayerStats = lazy(() => import(/* webpackChunkName: 'player-stats' */ './pages/PlayerStats'))
+const AcceptInvite = lazy(() => import(/* webpackChunkName: 'accept-invite' */ './pages/AcceptInvite'))
+const Organisation = lazy(() => import(/* webpackChunkName: 'organisation' */ './pages/Organisation'))
 
 const App = () => {
   const [user, setUser] = useRecoilState(userState)
@@ -93,6 +95,7 @@ const App = () => {
             <Route exact path={routes.demo} component={Demo} />
             <Route exact path={routes.verify2FA} component={Verify2FA} />
             <Route exact path={routes.recover} component={RecoverAccount} />
+            <Route exact path={routes.acceptInvite} component={AcceptInvite} />
 
             <Redirect to={`${routes.login}?next=${intendedUrl}`} />
           </Switch>
@@ -109,6 +112,7 @@ const App = () => {
               <Route exact path={routes.dashboard} component={Dashboard} />
               <Route exact path={routes.account} component={Account} />
               <Route exact path={routes.confirmPassword} component={ConfirmPassword} />
+              {canViewPage(user, routes.organisation) && <Route exact path={routes.organisation} component={Organisation} />}
 
               {activeGame &&
                 <>

src/api/createInvite.js

@@ -0,0 +1,3 @@
+import api from './api'
+
+export default (email, type) => api.post('/invites', { email, type })

src/api/getInvite.js

@@ -0,0 +1,3 @@
+import api from './api'
+
+export default (token) => api.get(`/public/invites/${token}`)

src/api/useOrganisation.js

@@ -0,0 +1,26 @@
+import useSWR from 'swr'
+import buildError from '../utils/buildError'
+import api from './api'
+
+const useOrganisation = () => {
+  const fetcher = async (url) => {
+    const res = await api.get(url)
+    return res.data
+  }
+
+  const { data, error, mutate } = useSWR(
+    'organisations/current',
+    fetcher
+  )
+
+  return {
+    games: data?.games ?? [],
+    members: data?.members ?? [],
+    pendingInvites: data?.pendingInvites ?? [],
+    loading: !data && !error,
+    error: error && buildError(error),
+    mutate
+  }
+}
+
+export default useOrganisation

src/components/DevDataStatus.jsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames'
+import React from 'react'
+import { useRecoilState } from 'recoil'
+import devDataState from '../state/devDataState'
+import Toggle from './Toggle'
+
+function DevDataStatus() {
+  const [includeDevData, setIncludeDevData] = useRecoilState(devDataState)
+
+  return (
+    <div className='space-y-4'>
+      <h2 className='text-2xl mt-4 md:mt-0'>Dev data is currently
+        <span className={classNames('font-semibold', { 'text-orange-400': includeDevData })}>
+          {' '}{includeDevData ? 'enabled' : 'not enabled'}
+        </span>
+      </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} />
+    </div>
+  )
+}
+
+export default DevDataStatus

src/components/GameSwitcher.jsx

@@ -68,7 +68,7 @@ const GameSwitcher = () => {
             </motion.ul>
           )}
         >
-          <div className={classNames('bg-indigo-300 rounded p-2 flex items-center justify-between w-60 md:w-80', { 'rounded-b-none': isOpen })}>
+          <div className={classNames('bg-indigo-300 rounded p-2 flex items-center justify-between w-60 lg:w-80', { 'rounded-b-none': isOpen })}>
             <div className='flex items-center'>
               <span
                 style={{ backgroundColor: randomColor({ seed: activeGame.name, luminosity: 'dark' }) }}

src/components/Modal.jsx

@@ -5,6 +5,7 @@ import Button from './Button'
 import classNames from 'classnames'
 import usePortal from '../utils/usePortal'
 import { createPortal } from 'react-dom'
+import FocusLock from 'react-focus-lock'
 
 const Modal = (props) => {
   const [, setOpen] = props.modalState
@@ -24,27 +25,36 @@ const Modal = (props) => {
   const target = usePortal(props.id)
 
   return createPortal(
-    <div className='fixed w-screen md:p-4 bg-gray-900 bg-opacity-60 flex items-start md:items-center justify-center inset-0 z-50 text-black transition-colors'>
-      <dialog className='overflow-scroll block w-full h-full md:h-auto md:w-[600px] bg-white md:rounded p-0' aria-modal='true' aria-labelledby={`modal-${props.id}-label`}>
-        <div className='p-4 border-b border-gray-200 flex items-center justify-between'>
-          <h2
-            id={`modal-${props.id}-label`}
-            className={classNames('text-xl font-semibold', { 'hidden': props.hideTitle })}
-          >
-            {props.title}
-          </h2>
-
-          <Button
-            variant='icon'
-            onClick={() => setOpen(false)}
-            icon={<IconX />}
-            extra={{ 'aria-label': 'Close modal' }}
-          />
-        </div>
-
-        {props.children}
-      </dialog>
-    </div>,
+    <FocusLock>
+      <div className='fixed w-screen md:p-4 bg-gray-900 bg-opacity-60 flex items-start md:items-center justify-center inset-0 z-50 text-black transition-colors'>
+        <dialog
+          className={classNames('block w-full h-full md:h-auto md:w-[600px] bg-white md:rounded p-0', {
+            'overflow-scroll': props.scroll,
+            'overflow-visible': !props.scroll
+          })}
+          aria-modal='true'
+          aria-labelledby={`modal-${props.id}-label`}
+        >
+          <div className='p-4 border-b border-gray-200 flex items-center justify-between'>
+            <h2
+              id={`modal-${props.id}-label`}
+              className={classNames('text-xl font-semibold', { 'hidden': props.hideTitle })}
+            >
+              {props.title}
+            </h2>
+
+            <Button
+              variant='icon'
+              onClick={() => setOpen(false)}
+              icon={<IconX />}
+              extra={{ 'aria-label': 'Close modal' }}
+            />
+          </div>
+
+          {props.children}
+        </dialog>
+      </div>
+    </FocusLock>,
     target
   )
 }
@@ -54,7 +64,12 @@ Modal.propTypes = {
   title: PropTypes.string.isRequired,
   hideTitle: PropTypes.bool,
   children: PropTypes.any.isRequired,
-  modalState: PropTypes.array.isRequired
+  modalState: PropTypes.array.isRequired,
+  scroll: PropTypes.bool
+}
+
+Modal.defaultProps = {
+  scroll: true
 }
 
 export default Modal

src/components/Page.jsx

@@ -6,7 +6,7 @@ import Loading from './Loading'
 
 function Page({ title, showBackButton, isLoading, containerClassName, extraTitleComponent, children }) {
   return (
-    <div className={classNames('space-y-4 md:space-y-8', containerClassName)}>
+    <div className={classNames('space-y-8', containerClassName)}>
       <div className='flex items-center'>
         <Title showBackButton={showBackButton}>{title}</Title>
 

src/components/SecondaryNav.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Link from './Link'
+import classNames from 'classnames'
+import { useLocation } from 'react-router-dom'
+import canViewPage from '../utils/canViewPage'
+import userState from '../state/userState'
+import { useRecoilValue } from 'recoil'
+
+function SecondaryNav({ routes }) {
+  const location = useLocation()
+  const user = useRecoilValue(userState)
+
+  const availableRoutes = routes.filter(({ to }) => canViewPage(user, to))
+  if (availableRoutes.length < 2) return null
+
+  return (
+    <nav className='bg-gray-700 w-screen px-4 md:px-8 -mx-4 md:-mx-8 -mt-4 md:-mt-8 mb-8 py-4 border-b-2 border-b-gray-600 flex justify-between items-center'>
+      <ul className='flex space-x-8'>
+        {availableRoutes.map(({ title, to }) => (
+          <li key={to} className='relative'>
+            <Link to={to} className={classNames({ '!text-white': location.pathname === to, '!text-indigo-300': location.pathname !== to })}>{title}</Link>
+            {location.pathname === to && <div className='absolute bottom-[-16px] left-0 right-0 h-[2px] bg-white transform translate-y-full' />}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+SecondaryNav.propTypes = {
+  routes: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    to: PropTypes.string.isRequired
+  })).isRequired
+}
+
+export default SecondaryNav