Rewrite queue settings page with hooks

CHANGELOG.md

@@ -12,6 +12,7 @@ with the current semantic version and the next changes should go under a **[Next
 * Remove unused style tag. ([@nwalters512](https://github.com/nwalters512) in [#259](https://github.com/illinois/queue/pull/259))
 * Fix active staff socket errors. ([@nwalters512](https://github.com/nwalters512) in [#262](https://github.com/illinois/queue/pull/262))
 * Rewrite queue page with hooks; fix miscellaneous bugs. ([@nwalters512](https://github.com/nwalters512) in [#263](https://github.com/illinois/queue/pull/263))
+* Rewrite queue setting page with hooks to fix bug with admission control "Update" button. ([@nwalters512](https://github.com/nwalters512) in [#264](https://github.com/illinois/queue/pull/264))
 
 ## v1.0.4
 

src/pages/queueSettings.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Container } from 'reactstrap'
 import { connect } from 'react-redux'
@@ -7,8 +7,8 @@ import { Router } from '../routes'
 import {
   fetchQueue,
   fetchQueueRequest,
-  updateQueue,
-  deleteQueue,
+  updateQueue as updateQueueAction,
+  deleteQueue as deleteQueueAction,
 } from '../actions/queue'
 import Error from '../components/Error'
 import GeneralPanel from '../components/queueSettings/GeneralPanel'
@@ -17,61 +17,67 @@ import PageWithUser from '../components/PageWithUser'
 import DangerPanel from '../components/queueSettings/DangerPanel'
 import { isUserCourseStaffForQueue, isUserAdmin } from '../selectors'
 
-class QueueSettings extends React.Component {
-  static async getInitialProps({ isServer, store, query }) {
-    const queueId = Number.parseInt(query.id, 10)
-    if (isServer) {
-      store.dispatch(fetchQueueRequest(queueId))
-    }
-    return {
-      queueId,
-      isFetching: isServer,
-    }
-    // Nothing to do at the moment
-  }
+const QueueSettings = props => {
+  const [queueLoading, setQueueLoading] = useState(true)
 
-  componentDidMount() {
-    this.props.fetchQueue(this.props.queueId).then(() => {
-      if (this.props.pageTransitionReadyToEnter) {
-        this.props.pageTransitionReadyToEnter()
+  useEffect(() => {
+    setQueueLoading(true)
+    props.fetchQueue(props.queueId).then(() => {
+      setQueueLoading(false)
+      if (props.pageTransitionReadyToEnter) {
+        props.pageTransitionReadyToEnter()
       }
     })
-  }
+  }, [props.queueId])
 
-  updateQueue(attributes) {
-    this.props.updateQueue(this.props.queueId, attributes)
+  const updateQueue = attributes => {
+    props.updateQueue(props.queueId, attributes)
   }
 
-  deleteQueue() {
-    const { id: queueId, courseId } = this.props.queue
-    this.props.deleteQueue(courseId, queueId).then(() => {
+  const deleteQueue = () => {
+    const { id: queueId, courseId } = props.queue
+    props.deleteQueue(courseId, queueId).then(() => {
       Router.replaceRoute('index')
     })
   }
 
-  render() {
-    if (!this.props.queue) return null
-    if (!this.props.isUserAdmin && !this.props.isUserCourseStaffForQueue) {
-      return <Error statusCode={403} />
-    }
-    return (
-      <Container>
-        <h1 className="display-4">Queue Settings</h1>
-        <h2 className="mb-5">{this.props.queue.name}</h2>
-        <GeneralPanel
-          queue={this.props.queue}
-          updateQueue={attributes => this.updateQueue(attributes)}
-        />
-        <AdmissionControlPanel
-          queue={this.props.queue}
-          updateQueue={attributes => this.updateQueue(attributes)}
-        />
-        <DangerPanel deleteQueue={() => this.deleteQueue()} />
-      </Container>
-    )
+  if (queueLoading) return null
+
+  if (!queueLoading && !props.queue) {
+    return <Error statusCode={404} />
+  }
+
+  if (!props.isUserAdmin && !props.isUserCourseStaffForQueue) {
+    return <Error statusCode={403} />
   }
+
+  return (
+    <Container>
+      <h1 className="display-4">Queue Settings</h1>
+      <h2 className="mb-5">{props.queue.name}</h2>
+      <GeneralPanel
+        queue={props.queue}
+        updateQueue={attributes => updateQueue(attributes)}
+      />
+      <AdmissionControlPanel
+        queue={props.queue}
+        updateQueue={attributes => updateQueue(attributes)}
+      />
+      <DangerPanel deleteQueue={() => deleteQueue()} />
+    </Container>
+  )
 }
 
+QueueSettings.getInitialProps = async ({ isServer, store, query }) => {
+  const queueId = Number.parseInt(query.id, 10)
+  if (isServer) {
+    store.dispatch(fetchQueueRequest(queueId))
+  }
+  return { queueId }
+}
+
+QueueSettings.pageTransitionDelayEnter = true
+
 QueueSettings.propTypes = {
   fetchQueue: PropTypes.func.isRequired,
   updateQueue: PropTypes.func.isRequired,
@@ -95,8 +101,6 @@ QueueSettings.defaultProps = {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  isFetching: state.queues.isFetching,
-  hasQueue: !!state.queues.queues[ownProps.queueId],
   queue: state.queues.queues[ownProps.queueId],
   isUserCourseStaffForQueue: isUserCourseStaffForQueue(state, ownProps),
   isUserAdmin: isUserAdmin(state, ownProps),
@@ -106,8 +110,9 @@ const mapStateToProps = (state, ownProps) => ({
 const mapDispatchToProps = dispatch => ({
   fetchQueue: queueId => dispatch(fetchQueue(queueId)),
   updateQueue: (queueId, attributes) =>
-    dispatch(updateQueue(queueId, attributes)),
-  deleteQueue: (courseId, queueId) => dispatch(deleteQueue(courseId, queueId)),
+    dispatch(updateQueueAction(queueId, attributes)),
+  deleteQueue: (courseId, queueId) =>
+    dispatch(deleteQueueAction(courseId, queueId)),
   dispatch,
 })