Refactor handler functions

ECN · Nov 17, 2020 · 172480b · 172480b
1 parent c216a17
commit 172480b
Showing 1 changed file with 40 additions and 36 deletions.
diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js
@@ -6,46 +6,50 @@ import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 
 export default function QueueSelector({ queues, selectedQueues, setSelectedQueues }) {
+
+    const handleChange = (event, newValue) => {
+        setSelectedQueues(newValue)
+    };
+
+    const optionRenderer = (option, { selected }) => (
+        <>
+            <Checkbox
+                icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+                checkedIcon={<CheckBoxIcon fontSize="small" />}
+                style={{ marginRight: 8 }}
+                checked={selected}
+            />
+            {`${option.name} (${option.number_of_items})`}
+        </>
+    );
+
     return(
         <Autocomplete
+            renderInput={(params) => (
+                <TextField
+                    {...params}
+                    placeholder={selectedQueues.length === 0 ? "Click or type to select queues." : ""}
+                    // The MUI Autocomplete component uses the InputProps.startAdornment to store chips fpr multi-selection.
+                    // Using InputProps.startAdornment directly will override those chips. Code below is a workaround.
+                    // See: https://github.com/mui-org/material-ui/issues/19479
+                    InputProps={{
+                        ...params.InputProps,
+                        startAdornment: (
+                            <>
+                                <InputAdornment position="start">
+                                    Active Queues: 
+                                </InputAdornment>
+                                {params.InputProps.startAdornment}
+                            </>
+                        ),
+                    }}
+                />
+            )}
+
             options={queues}
-            onChange={(event, newValue) => {
-                setSelectedQueues(newValue)
-            }}
-            renderInput={(params) => {
-                return(
-                    <TextField
-                        {...params}
-                        placeholder={selectedQueues.length === 0 ? "Click or type to select queues." : ""}
-                        // The MUI Autocomplete component uses the InputProps.startAdornment to store chips fpr multi-selection.
-                        // Using InputProps.startAdornment directly will override those chips. Code below is a workaround.
-                        // See: https://github.com/mui-org/material-ui/issues/19479
-                        InputProps={{
-                            ...params.InputProps,
-                            startAdornment: (
-                                <>
-                                    <InputAdornment position="start">
-                                        Active Queues: 
-                                    </InputAdornment>
-                                    {params.InputProps.startAdornment}
-                                </>
-                            ),
-                        }}
-                    />
-                );
-            }}
+            onChange={handleChange}
             getOptionLabel={(option) => `${option.name} (${option.number_of_items})`}
-            renderOption={(option, { selected }) => (
-                <>
-                    <Checkbox
-                        icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
-                        checkedIcon={<CheckBoxIcon fontSize="small" />}
-                        style={{ marginRight: 8 }}
-                        checked={selected}
-                    />
-                    {`${option.name} (${option.number_of_items})`}
-                </>
-            )}
+            renderOption={optionRenderer}
             getOptionSelected={ (option, value) => option.name === value.name }
             disableCloseOnSelect
             disableListWrap