feat: add sortBy network members

About dec0dOS#120

Author: NoobTW

frontend/src/components/NetworkMembers/NetworkMembers.jsx

@@ -4,8 +4,11 @@ import {
   AccordionSummary,
   Checkbox,
   Divider,
+  FormControlLabel,
   Grid,
   IconButton,
+  Radio,
+  RadioGroup,
   TextField,
   Typography,
 } from "@material-ui/core";
@@ -29,6 +32,7 @@ function NetworkMembers({ network }) {
   const [filter, setFilter] = useState("");
   const [filterActive, setFilterActive] = useState(false);
   const [filterInactive, setFilterInactive] = useState(false);
+  const [sortBy, setSortBy] = useState("id");
 
   const fetchData = useCallback(async () => {
     try {
@@ -175,14 +179,14 @@ function NetworkMembers({ network }) {
             <RefreshIcon />
           </IconButton>
           <Grid container>
-            <Grid item sm={6}>
+            <Grid item sm={3}>
               <Typography>Search (Addr/Name)</Typography>
               <TextField
                 value={filter}
                 onChange={(e) => setFilter(e.target.value)}
               />
             </Grid>
-            <Grid item sm="auto">
+            <Grid item sm={3}>
               <Typography>Display Filter</Typography>
               <Checkbox
                 checked={filterActive}
@@ -197,6 +201,13 @@ function NetworkMembers({ network }) {
               />
               <span>Inactive</span>
             </Grid>
+            <Grid item sm={3}>
+              <Typography>Sort by</Typography>
+              <RadioGroup value={sortBy} onChange={(e) => setSortBy(e.target.value)}>
+                <FormControlLabel value="name" control={<Radio />} label="Name" />
+                <FormControlLabel value="id" control={<Radio />} label="Address" />
+              </RadioGroup>
+            </Grid>
             <Divider />
           </Grid>
           <Grid container>
@@ -212,6 +223,7 @@ function NetworkMembers({ network }) {
                       (filterInactive ? x.online === 0 : true)
                     )
                   })
+                  .sort((a, b) => a[sortBy].localeCompare(b[sortBy]))
                 }
               />
             ) : (