Skip to content

Commit

Permalink
Consolidate queue count fetch and add visual loading state
Browse files Browse the repository at this point in the history
  • Loading branch information
Justin Campbell committed Nov 19, 2020
1 parent 18e0565 commit 1743ecb
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 30 deletions.
21 changes: 1 addition & 20 deletions src/components/AppView/AppView.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export default function AppView({ setDarkMode }){
const [queues, setQueues] = useState([]);
const [items, setItems] = useState([]);
const [selectedQueues, setSelectedQueues] = useState([]);
const [queueCounts, setQueueCounts] = useState([]);

const access_token = useToken();

Expand Down Expand Up @@ -55,24 +54,6 @@ export default function AppView({ setDarkMode }){
setItems(tempItems);
}, [queues]);

useEffect( _ => {
async function getQueueCounts(){
if (access_token === null){
return
}

let myHeaders = new Headers();
myHeaders.append("Authorization", `Bearer ${access_token}`);
let requestOptions = { headers: myHeaders };

const apiResponse = await fetch(`/api/get_queues`, requestOptions);
const queueCountJson = await apiResponse.json();
setQueueCounts(queueCountJson);
};
getQueueCounts();
return _ => setQueueCounts([]);
}, [selectedQueues, access_token]);

const theme = useTheme();
const transitionWidth = theme.transitions.create(["width"], {
duration: theme.transitions.duration.enteringScreen,
Expand Down Expand Up @@ -111,7 +92,7 @@ export default function AppView({ setDarkMode }){

<Box className={classes.leftCol}>
<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
<QueueSelector queues={queueCounts} selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
<QueueSelector selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
<ItemTable data={items} rowCanBeSelected={sidebarOpen}/>
</Box>

Expand Down
57 changes: 47 additions & 10 deletions src/components/QueueSelector/QueueSelector.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,44 @@
import React from "react";
import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { TextField, Checkbox, InputAdornment, Box, useTheme } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import CircularProgress from '@material-ui/core/CircularProgress';
import { useToken } from "../AuthProvider/";

export default function QueueSelector({ queues, selectedQueues, setSelectedQueues }) {
export default function QueueSelector({ selectedQueues, setSelectedQueues }) {
const [open, setOpen] = useState(false);
const [queues, setQueues] = useState([]);
const access_token = useToken();
const loading = open && queues.length === 0;

useEffect( _ => {
const getQueueCounts = async _ => {
if (access_token === null){
return undefined
}

let myHeaders = new Headers();
myHeaders.append("Authorization", `Bearer ${access_token}`);
let requestOptions = { headers: myHeaders };

const apiResponse = await fetch(`/api/get_queues`, requestOptions);
const queueCountJson = await apiResponse.json();
setQueues(queueCountJson);
};

if (loading) {
getQueueCounts();
}

}, [loading, access_token]);

useEffect(() => {
if (!open) {
setQueues([]);
}
}, [open]);

const theme = useTheme();

Expand Down Expand Up @@ -46,35 +79,39 @@ export default function QueueSelector({ queues, selectedQueues, setSelectedQueue
{params.InputProps.startAdornment}
</>
),
endAdornment: (
<>
{loading ? <CircularProgress color="inherit" size={20} /> : null}
{params.InputProps.endAdornment}
</>
)
}}
/>
)}

options={queues}
onChange={handleChange}
getOptionLabel={(option) => `${option.name} (${option.number_of_items})`}
renderOption={optionRenderer}
getOptionSelected={ (option, value) => option.name === value.name }
size="small"
open={open}
onOpen={_ => setOpen(true)}
onClose={_ => setOpen(false)}
loading={true}
disableCloseOnSelect
disableListWrap
fullWidth
multiple
size="small"
autoHighlight
/>
</Box>
);
};

QueueSelector.propTypes = {
/** An array of objects with keys of name and number of items for each queue. */
"queues": PropTypes.array,
/** State variable to manage selected queues. */
"selectedQueues": PropTypes.array.isRequired,
/** Function to update state variable that manages selected queues. */
"setSelectedQueues": PropTypes.func.isRequired
};

QueueSelector.defaultProps = {
"queues": []
};

0 comments on commit 1743ecb

Please sign in to comment.