Merge pull request #41 from TaloDev/develop

Release 0.11.0

Author: tudddorrr

.env.development

@@ -2,5 +2,5 @@ TAILWIND_DISABLE_TOUCH=true
 
 SNOWPACK_PUBLIC_API_URL=http://localhost:3000/
 
-SENTRY_DSN=
-SENTRY_ENV=dev
+SNOWPACK_PUBLIC_SENTRY_DSN=
+SNOWPACK_PUBLIC_SENTRY_ENV=dev

.env.production

@@ -1,4 +1,4 @@
 SNOWPACK_PUBLIC_API_URL=${API_URL}
 
-SENTRY_DSN=https://b857733793ac4aacb2b7c5d36873a1ba@o406248.ingest.sentry.io/5273330
-SENTRY_ENV=prod
+SNOWPACK_PUBLIC_SENTRY_DSN=https://b857733793ac4aacb2b7c5d36873a1ba@o406248.ingest.sentry.io/5273330
+SNOWPACK_PUBLIC_SENTRY_ENV=prod

package.json

@@ -8,8 +8,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^2.8.8",
-    "@sentry/react": "^6.19.3",
-    "@sentry/tracing": "^6.19.3",
+    "@sentry/react": "^6.19.6",
     "@tabler/icons": "^1.60.0",
     "@tippyjs/react": "^4.2.5",
     "axios": "^0.26.0",
@@ -67,5 +66,5 @@
   "lint-staged": {
     "*.{js,jsx}": "eslint --fix"
   },
-  "version": "0.10.0"
+  "version": "0.11.0"
 }

src/App.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, lazy, Suspense } from 'react'
 import { Redirect, Route, Switch, useHistory } from 'react-router-dom'
+import * as Sentry from '@sentry/react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import refreshAccess from './api/refreshAccess'
 import userState from './state/userState'
@@ -52,6 +53,8 @@ const App = () => {
       const accessToken = res.data.accessToken
       AuthService.setToken(accessToken)
       setUser(res.data.user)
+
+      Sentry.setUser({ id: res.data.user.id, username: res.data.user.username })
     } catch (err) {
       console.log('User doesn\'t have a session')
       setActiveGame(null)

src/components/NavBar.jsx

@@ -10,13 +10,16 @@ import { IconMenu2 } from '@tabler/icons'
 import MobileMenu from './MobileMenu'
 import Button from './Button'
 import ServicesLink from './ServicesLink'
+import * as Sentry from '@sentry/react'
 
 const NavBar = () => {
   const activeGame = useRecoilValue(activeGameState)
   const [showMobileMenu, setShowMobileMenu] = useState(false)
 
   const onLogoutClick = async () => {
     try {
+      Sentry.configureScope((scope) => scope.setUser(null))
+
       await logout()
     } catch (err) {
       console.warn('Logout failed:', err.message)

src/components/ServicesLink.jsx

@@ -8,6 +8,7 @@ import LinkButton from './LinkButton'
 import routes from '../constants/routes'
 import userState from '../state/userState'
 import { useRecoilValue } from 'recoil'
+import Tippy from '@tippyjs/react'
 
 function ServicesLink() {
   const user = useRecoilValue(userState)
@@ -66,30 +67,43 @@ function ServicesLink() {
   ]
 
   return (
-    <li className='relative'>
-      <LinkButton onClick={() => setShowServicesMenu(!showServicesMenu)}>
-        <div className='flex sm:flex-row-reverse items-center'>
-          Services
-          <IconCaretDown size={20} className={classNames('ml-1 sm:ml-0 sm:mr-1 fill-current transform transition-transform', { 'rotate-180': showServicesMenu })} />
+    <li>
+      <Tippy
+        placement='bottom-start'
+        visible={showServicesMenu}
+        onClickOutside={() => setShowServicesMenu(false)}
+        offset={[0, 10]}
+        interactive={true}
+        arrow={false}
+        theme='bare'
+        content={(
+          <ul className='w-full sm:w-[480px] grid grid-cols-2 gap-2 bg-gray-800 border border-gray-700 p-2 rounded text-white transition-all'>
+            {services.filter(({ route }) => canViewPage(user, route)).map(({ name, desc, icon: Icon, route }) => (
+              <li key={name}>
+                {showServicesMenu &&
+                  <RouterLink to={route} className={classNames('group block p-4 rounded transition-colors hover:bg-gray-700 focus:bg-gray-700 space-y-2', focusStyle)}>
+                    <p className='font-bold text-white group-hover:text-indigo-300 group-focus:text-indigo-300'>
+                      <Icon size={18} className='inline-block mb-1 mr-1' />
+                      {name}
+                    </p>
+                    <p className='text-gray-300 text-sm group-hover:text-white group-focus:text-white'>{desc}</p>
+                  </RouterLink>
+                }
+                {!showServicesMenu && <div className='h-[80px]' />}
+              </li>
+            ))}
+          </ul>
+        )}
+      >
+        <div>
+          <LinkButton onClick={() => setShowServicesMenu(!showServicesMenu)}>
+            <div className='flex sm:flex-row-reverse items-center'>
+              Services
+              <IconCaretDown size={20} className={classNames('ml-1 sm:ml-0 sm:mr-1 fill-current transform transition-transform', { 'rotate-180': showServicesMenu })} />
+            </div>
+          </LinkButton>
         </div>
-      </LinkButton>
-
-      <ul className={classNames('w-full sm:w-[480px] grid grid-cols-2 gap-2 absolute top-0 pointer-events-none opacity-0 bg-gray-800 border border-gray-700 p-2 rounded text-white transition-all', { '!top-10 z-50 opacity-100 filter drop-shadow-md !pointer-events-auto': showServicesMenu })}>
-        {services.filter(({ route }) => canViewPage(user, route)).map(({ name, desc, icon: Icon, route }) => (
-          <li key={name}>
-            {showServicesMenu &&
-              <RouterLink to={route} className={classNames('group block p-4 rounded transition-colors hover:bg-gray-700 focus:bg-gray-700 space-y-2', focusStyle)}>
-                <p className='font-bold text-white group-hover:text-indigo-300 group-focus:text-indigo-300'>
-                  <Icon size={18} className='inline-block mb-1 mr-1' />
-                  {name}
-                </p>
-                <p className='text-gray-300 text-sm group-hover:text-white group-focus:text-white'>{desc}</p>
-              </RouterLink>
-            }
-            {!showServicesMenu && <div className='h-[80px]' />}
-          </li>
-        ))}
-      </ul>
+      </Tippy>
     </li>
   )
 }

src/components/tables/Table.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import TableHeader from './TableHeader'
+
+export default function Table({ columns, children }) {
+  return (
+    <div className='overflow-x-scroll'>
+      <table className='table-auto w-full'>
+        <TableHeader columns={columns} />
+        {children}
+      </table>
+    </div>
+  )
+}
+
+Table.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.string).isRequired,
+  children: PropTypes.node.isRequired
+}

src/constants/userTypes.js

@@ -1,5 +1,6 @@
 export default {
-  DEV: 0,
+  OWNER: 0,
   ADMIN: 1,
-  DEMO: 2
+  DEV: 2,
+  DEMO: 3
 }

src/index.jsx

@@ -6,13 +6,10 @@ import App from './App'
 import { RecoilRoot } from 'recoil'
 import { BrowserRouter } from 'react-router-dom'
 import * as Sentry from '@sentry/react'
-import { BrowserTracing } from '@sentry/tracing'
 
 Sentry.init({
-  dsn: import.meta.env.SENTRY_DSN,
-  environment: import.meta.env.SENTRY_ENV,
-  integrations: [new BrowserTracing()],
-  tracesSampleRate: 1.0
+  dsn: import.meta.env.SNOWPACK_PUBLIC_SENTRY_DSN,
+  environment: import.meta.env.SNOWPACK_PUBLIC_SENTRY_ENV
 })
 
 ReactDOM.render(

src/modals/NewGame.jsx

@@ -4,7 +4,7 @@ import Modal from '../components/Modal'
 import TextInput from '../components/TextInput'
 import Button from '../components/Button'
 import createGame from '../api/createGame'
-import { useRecoilState } from 'recoil'
+import { useRecoilState, useSetRecoilState } from 'recoil'
 import activeGameState from '../state/activeGameState'
 import userState from '../state/userState'
 import buildError from '../utils/buildError'
@@ -15,7 +15,7 @@ const NewGame = (props) => {
   const [name, setName] = useState('')
   const [isLoading, setLoading] = useState(false)
   const [user, setUser] = useRecoilState(userState)
-  const [, setActiveGame] = useRecoilState(activeGameState)
+  const setActiveGame = useSetRecoilState(activeGameState)
   const [error, setError] = useState(null)
 
   const onCreateClick = async (e) => {