Fancy wifi Table and Camera Load widget (Challenge)

frontend/routes/Wifi.jsx

@@ -1,5 +1,22 @@
-import * as React from 'react';
+import React from 'react';
+import { useState } from 'react';
 import { exec_table, exec } from '../util/exec';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import PropTypes from 'prop-types';
+import { lighten, makeStyles } from '@material-ui/core/styles';
+import TableSortLabel from '@material-ui/core/TableSortLabel';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import { green, orange } from '@material-ui/core/colors';
+import Skeleton from '@material-ui/lab/Skeleton';
+import { Box } from '@material-ui/core';
+import { isNullishCoalesce } from 'typescript';
 
 export const title = 'Wifi Configuration';
 export const route = '/wifi';
@@ -12,42 +29,235 @@ export class Component extends React.Component {
       wifi_networks: [],
       last_refresh: '',
     };
+
     setInterval(() => {
-      exec_table('nmcli dev wifi').then(result => this.setState({ wifi_networks: result }));
-      exec('date').then(result => this.setState({ last_refresh: result }));
+      exec_table('nmcli dev wifi').then(result => {
+        if (!result) return;
+
+        this.setState({
+          wifi_networks: result,
+        });
+      });
+      exec('date').then(result => {
+        this.setState({
+          last_refresh: result,
+        });
+      });
     }, 1000);
   }
 
   render() {
     return (
       <div>
-        <Table data={this.state.wifi_networks} />
+        <EnhancedTable rows={this.state.wifi_networks} />
       </div>
     );
   }
 }
 
-function Table(props) {
-  const { data } = props;
-  if (data.length === 0) return <table />;
+
+// Meta-Data
+
+const in_use = 'IN-USE';
+const first_column = 'IN-USE';
+const active_color = orange[50];
+const headCells = {
+  'IN-USE': { numeric: false, disablePadding: true, label: 'Connected' },
+  BSSID: { numeric: false, disablePadding: false, label: 'BSSID' },
+  SSID: { numeric: false, disablePadding: false, label: 'SSID' },
+  MODE: { numeric: false, disablePadding: false, label: 'Mode' },
+  CHAN: { numeric: true, disablePadding: false, label: 'Channel' },
+  RATE: { numeric: true, disablePadding: false, label: 'Rate' },
+  SIGNAL: { numeric: true, disablePadding: false, label: 'Signal' },
+  BARS: { numeric: false, disablePadding: false, label: 'Bars' },
+  SECURITY: { numeric: false, disablePadding: false, label: 'Security' },
+};
+
+// Meta-Data 
+
+
+function EnhancedTableHead(props) {
+  const { classes, order, orderBy, onRequestSort } = props;
+  const createSortHandler = property => event => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        {Object.keys(headCells).map(function(key) {
+          return (
+            <TableCell
+              key={key}
+              align='center'
+              padding={headCells[key].disablePadding ? 'none' : 'default'}
+              sortDirection={orderBy === key ? order : false}
+            >
+              <TableSortLabel
+                active={orderBy === key}
+                direction={orderBy === key ? order : 'asc'}
+                onClick={createSortHandler(key)}
+              >
+                <b>{headCells[key].label}</b>
+                {orderBy === key ? (
+                  <span className={classes.visuallyHidden}>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </span>
+                ) : null}
+              </TableSortLabel>
+            </TableCell>
+          );
+        })}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+EnhancedTableHead.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onRequestSort: PropTypes.func.isRequired,
+  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
+  orderBy: PropTypes.string.isRequired,
+};
+
+const useToolbarStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+  highlight:
+    theme.palette.type === 'light'
+      ? {
+          color: theme.palette.secondary.main,
+          backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+        }
+      : {
+          color: theme.palette.text.primary,
+          backgroundColor: theme.palette.secondary.dark,
+        },
+  title: {
+    flex: '1 1 100%',
+  },
+}));
+
+const EnhancedTableToolbar = () => {
+  const classes = useToolbarStyles();
+  return (
+    <Box>
+    <Toolbar>
+      <Typography className={classes.title} variant="h6" id="tableTitle" component="span">
+      Active Wifi Networks
+      </Typography>      
+    </Toolbar>
+
+    </Box>
+
+  );
+};
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: '90%',
+    margin: theme.spacing(2),
+  },
+  paper: {
+    width: '100%',
+    padding: theme.spacing(2),
+    marginBottom: theme.spacing(1),
+  },
+  table: {
+    minWidth: 550,
+  },
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1,
+  },
+}));
+
+function descendingComparator(a, b, orderBy) {
+  if (headCells[orderBy].numeric) {
+    return parseInt(b[orderBy]) < parseInt(a[orderBy]) ? -1 : parseInt(b[orderBy]) > parseInt(a[orderBy]);
+  } else {
+    return a[orderBy] < b[orderBy] ? -1 : a[orderBy] > b[orderBy];
+  }
+}
+
+function getComparator(order, orderBy) {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+function stableSort(array, comparator) {
+  const stabilizedThis = array.map((el, index) => [el, index]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) return order;
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map(el => el[0]);
+}
+
+function EnhancedTable(props) {
+  const classes = useStyles();
+  const [order, setOrder] = useState('asc');
+  const [orderBy, setOrderBy] = useState(first_column);
+  const { rows } = props;
+
+  const handleRequestSort = (event, property) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
+
   return (
-    <table>
-      <thead>
-        <tr>
-          {Object.keys(data[0]).map(s => (
-            <th key={s}>{s}</th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {data.map((row, i) => (
-          <tr key={i}>
-            {Object.values(row).map((s, i) => (
-              <td key={i}>{s}</td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
+    <div className={classes.root}>
+      <Paper className={classes.paper}>
+        <EnhancedTableToolbar />
+        <TableContainer>
+          <Table className={classes.table} aria-labelledby="tableTitle" aria-label="enhanced table">
+            <EnhancedTableHead
+              classes={classes}
+              order={order}
+              orderBy={orderBy}
+              onRequestSort={handleRequestSort}
+            />
+            <TableBody>
+              {stableSort(rows, getComparator(order, orderBy)).map((row, index) => {
+                return (
+                  <TableRow
+                    hover
+                    tabIndex={-1}
+                    key={index}
+                    style={{
+                      background: row[in_use].length > 0 ? active_color : null,
+                    }}
+                  >
+                    {Object.keys(headCells).map(function(key) {
+                      return (
+                        <TableCell key={key} align='center' >
+                          {key==in_use? (row[key].length>0?
+                          <Skeleton variant="circle" width={10} height={10} style={{
+                            background : green.A200,
+                            alignContent: 'center',
+                            padding: 0,
+                          }} /> : null) : row[key]}
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Paper>
+    </div>
   );
 }

package.json

@@ -14,23 +14,24 @@
     "last 10 Firefox versions"
   ],
   "dependencies": {
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "express": "~4.17.1",
     "socketio": "^1.0.0"
   },
   "devDependencies": {
-    "@material-ui/core": "^4.8.0",
+    "@material-ui/core": "^4.9.10",
     "@material-ui/icons": "^4.5.1",
     "@reduxjs/toolkit": "^1.1.0",
-    "@types/react": "^16.9.17",
+    "@types/react": "^16.8.6 || ^17.0.0",
     "@types/react-dom": "^16.9.4",
     "@types/react-router-dom": "^5.1.3",
     "js-yaml": "^3.13.1",
     "markdown-to-jsx": "^6.11.4",
     "morgan": "~1.9.1",
     "parcel": "^1.12.4",
     "prettier": "^1.19.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
     "redux": "^4.0.4",