Merge branch 'master' into fix/client-state-desync

client/src/api/profile.js

@@ -1,5 +1,4 @@
 import { request, relog } from './util'
-import { toasts } from '../util'
 
 export const privateProfile = () => {
   return request('GET', '/users/me')
@@ -29,10 +28,13 @@ export const updateAccount = (name, division) => {
     .then(resp => {
       switch (resp.kind) {
         case 'goodUserUpdate':
-          return resp.data
+          return {
+            data: resp.data
+          }
         default:
-          toasts.useToast().add(resp.message)
-          return null
+          return {
+            error: resp.message
+          }
       }
     })
 }

client/src/components/toast.js

@@ -0,0 +1,86 @@
+import { createContext } from 'preact'
+import { useState, useContext, useCallback, useEffect } from 'preact/hooks'
+import withStyles from './jss'
+
+const ToastCtx = createContext()
+
+// Use sequential IDs
+let toastIdCounter = 0
+
+function genToastId () {
+  return toastIdCounter++
+}
+
+function Toast ({ children, remove, type, id }) {
+  const wrappedRemove = useCallback(() => remove(id), [remove, id])
+  useEffect(() => {
+    const duration = 1000 * 5
+    const timeout = setTimeout(wrappedRemove, duration)
+
+    return () => clearTimeout(timeout)
+  }, [wrappedRemove])
+
+  return (
+    <div className={`toast toast--${type}`}>
+      {children}
+      <button onClick={wrappedRemove} className='btn-close' />
+    </div>
+  )
+}
+
+const ToastContainer = withStyles({
+  container: {
+    position: 'fixed',
+    top: '1em',
+    right: '1em',
+    zIndex: 9999,
+    width: '320px'
+  }
+}, ({ classes, ...props }) => <div class={classes.container} {...props} />)
+
+export function ToastProvider ({ children }) {
+  const [toasts, setToasts] = useState([])
+
+  const remove = useCallback((id) => {
+    setToasts(toasts => toasts.filter(t => id !== t.id))
+  }, [])
+  const add = useCallback((data) => {
+    const id = genToastId()
+    const toast = {
+      ...data,
+      id
+    }
+    setToasts(toasts => [...toasts, toast])
+    return () => remove(id)
+  }, [remove])
+
+  return (
+    <ToastCtx.Provider value={add}>
+      {children}
+      { toasts.length > 0 &&
+        <ToastContainer>
+          { toasts.map(({ id, type, body }) =>
+            <Toast type={type} key={id} id={id} remove={remove}>
+              {body}
+            </Toast>
+          )}
+        </ToastContainer>
+      }
+    </ToastCtx.Provider>
+  )
+}
+
+export function useToast () {
+  const toast = useContext(ToastCtx)
+
+  return { toast }
+}
+
+export function withToast (Component) {
+  return function Toasted (props) {
+    const { toast } = useToast()
+    return (
+      <Component {...props} toast={toast} />
+    )
+  }
+}

client/src/index.js

@@ -9,7 +9,7 @@ import Header from './components/header'
 import { Home, Registration, Login, Profile, Challenges, Scoreboard, Error, Sponsors, Verify, Logout } from './pages'
 import 'cirrus-ui'
 
-import util from './util'
+import { ToastProvider } from './components/toast'
 
 class App extends Component {
   state = {
@@ -48,10 +48,12 @@ class App extends Component {
 
     return (
       <div id='app'>
-        <Header paths={currentPaths} currentPath={currentPath} />
-        <Router onChange={this.handleRoute}>
-          {allPaths}
-        </Router>
+        <ToastProvider>
+          <Header paths={currentPaths} currentPath={currentPath} />
+          <Router onChange={this.handleRoute}>
+            {allPaths}
+          </Router>
+        </ToastProvider>
       </div>
     )
   }
@@ -63,4 +65,4 @@ class App extends Component {
   }
 }
 
-export default util.toasts.withToastProvider(App)
+export default App

client/src/pages/challenges.js

@@ -5,7 +5,7 @@ import 'linkstate/polyfill'
 import withStyles from '../components/jss'
 
 import { getChallenges, submitFlag, getPrivateSolves } from '../api/challenges'
-import util from '../util'
+import { withToast } from '../components/toast'
 
 export default withStyles({
   frame: {
@@ -19,7 +19,7 @@ export default withStyles({
   showSolved: {
     marginBottom: '10px'
   }
-}, class Challenges extends Component {
+}, withToast(class Challenges extends Component {
   state = {
     problems: [],
     categories: {}, // Dict with {string name, bool filter}
@@ -63,7 +63,7 @@ export default withStyles({
       .then(({ error }) => {
         if (error === undefined) {
           // Flag was submitted successfully
-          util.toasts.useToast().add('Flag successfully submitted!')
+          this.props.toast({ body: 'Flag successfully submitted!', type: 'success' })
           this.setState(prevState => ({
             solveIDs: [...prevState.solveIDs, id]
           }))
@@ -214,4 +214,4 @@ export default withStyles({
       </div>
     )
   }
-})
+}))

client/src/pages/profile.js

@@ -5,6 +5,7 @@ import 'linkstate/polyfill'
 import withStyles from '../components/jss'
 
 import { privateProfile, publicProfile, deleteAccount, updateAccount } from '../api/profile'
+import { withToast } from '../components/toast'
 import Form from '../components/form'
 import Modal from '../components/modal'
 import util from '../util'
@@ -79,29 +80,7 @@ const DeleteModal = withStyles({
   )
 })
 
-export default withStyles({
-  quote: {
-    fontSize: 'small',
-    overflowWrap: 'break-word'
-  },
-  icon: {
-    '& svg': {
-      verticalAlign: 'middle',
-      height: '20px',
-      fill: '#333'
-    },
-    marginRight: '25px'
-  },
-  form: {
-    '& button': {
-      margin: 0,
-      lineHeight: '20px',
-      padding: '10px',
-      float: 'right'
-    },
-    padding: '0 !important'
-  }
-}, class Profile extends Component {
+class Profile extends Component {
   state = {
     loaded: false,
     name: '',
@@ -190,17 +169,22 @@ export default withStyles({
     })
 
     updateAccount(this.state.updateName, this.state.updateDivision)
-      .then(resp => {
+      .then(({ error, data }) => {
         this.setState({
           disabledButton: false
         })
 
-        if (resp) {
-          this.setState({
-            name: resp.user.name,
-            division: divisionMap.get(Number.parseInt(resp.user.division))
-          })
+        if (error !== undefined) {
+          this.props.toast({ body: error, type: 'error' })
+          return
         }
+
+        this.props.toast({ body: 'Profile updated' })
+
+        this.setState({
+          name: data.user.name,
+          division: divisionMap.get(Number.parseInt(data.user.division))
+        })
       })
   }
 
@@ -342,4 +326,28 @@ export default withStyles({
       </div>
     )
   }
-})
+}
+
+export default withStyles({
+  quote: {
+    fontSize: 'small',
+    overflowWrap: 'break-word'
+  },
+  icon: {
+    '& svg': {
+      verticalAlign: 'middle',
+      height: '20px',
+      fill: '#333'
+    },
+    marginRight: '25px'
+  },
+  form: {
+    '& button': {
+      margin: 0,
+      lineHeight: '20px',
+      padding: '10px',
+      float: 'right'
+    },
+    padding: '0 !important'
+  }
+}, withToast(Profile))

client/src/util/index.js

@@ -1,4 +1,3 @@
 module.exports = {
-  strings: require('./strings'),
-  toasts: require('./toasts')
+  strings: require('./strings')
 }