Use sample data in dev mode, makes life easier

Signed-off-by: Martyn Ranyard <m@rtyn.berlin>

build/react-frontend/public/sampleData/cache.json

@@ -0,0 +1 @@
+{"Age":1726047740493,"AgeStr":"28 minutes ago","SongCount":1075}

build/react-frontend/public/sampleData/singers.json

@@ -0,0 +1,31 @@
+[{
+    "singerName": "Terraglotte",
+    "singCount": "40"
+},{
+    "singerName": "pepperwinkle",
+    "singCount": "30"
+},{
+    "singerName": "BatSam",
+    "singCount": "29"
+},{
+    "singerName": "ProfChumbles",
+    "singCount": "25"
+},{
+    "singerName": "FullOfEmily",
+    "singCount": "22"
+},{
+    "singerName": "Grisu_xXxx",
+    "singCount": "17"
+},{
+    "singerName": "ChantryRae",
+    "singCount": "16"
+},{
+    "singerName": "CheshieCat",
+    "singCount": "14"
+},{
+    "singerName": "karlicYO",
+    "singCount": "14"
+},{
+    "singerName": "GabiAgura",
+    "singCount": "14"
+}]

build/react-frontend/public/sampleData/songs.json

@@ -0,0 +1,31 @@
+[{
+    "songName": "Mad World",
+    "singCount": "19"
+},{
+    "songName": "Waving Through a Window",
+    "singCount": "19"
+},{
+    "songName": "Suddenly Seymour",
+    "singCount": "18"
+},{
+    "songName": "Someone You Loved",
+    "singCount": "18"
+},{
+    "songName": "Gravity",
+    "singCount": "17"
+},{
+    "songName": "Only Us",
+    "singCount": "17"
+},{
+    "songName": "Fireflies",
+    "singCount": "15"
+},{
+    "songName": "Behind Blue Eyes",
+    "singCount": "14"
+},{
+    "songName": "Hey There Delilah",
+    "singCount": "14"
+},{
+    "songName": "Poor Unfortunate Souls",
+    "singCount": "14"
+}]

build/react-frontend/src/Components/DuetData/DuetData.js

@@ -113,7 +113,12 @@ function DuetData() {
   useEffect(() => {
     // We should only fetch once!
     if (duetState.loading) {
-      fetch(dataURL).then((res) => res.json().then((data)=>{
+      let actualURL = dataURL
+      if (window.location.href.split("/")[2] === "192.168.1.111:3000") {
+        //Frontend dev mode only
+        actualURL = "/sampleData/data.json"
+      }
+      fetch(actualURL).then((res) => res.json().then((data)=>{
         setDuetState({duetData: data, loading: false })
       }));
     }

build/react-frontend/src/Components/TopTenSingers/TopTenSingers.js

@@ -102,7 +102,12 @@ function TopTenSingers() {
   useEffect(() => {
     // We should only fetch once!
     if (singerState.loading) {
-      fetch(dataURL).then((res) => res.json().then((data)=>{
+      let actualURL = dataURL
+      if (window.location.href.split("/")[2] === "192.168.1.111:3000") {
+        //Frontend dev mode only
+        actualURL = "/sampleData/singers.json"
+      }
+      fetch(actualURL).then((res) => res.json().then((data)=>{
         setSingerState({duetData: data, loading: false })
       }));
     }

build/react-frontend/src/Components/TopTenSingers/TopTenSingers.txt

@@ -0,0 +1,161 @@
+import React, { useEffect } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Paper } from '@material-ui/core';
+import PropTypes from 'prop-types';
+
+const channelName = window.location.href.split("/")[4]
+const adminToken = window.location.href.split("/")[5]
+const dataURL = "/topsingers/"+ channelName + "/" + adminToken
+const headCells = [
+  { id: 'singerName', numeric: false, disablePadding: true, label: 'Singer Name' },
+  { id: 'singCount', numeric: true, disablePadding: false, label: 'Count' },
+];
+
+function descendingComparator(a, b, orderBy) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+
+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 getComparator(order, orderBy) {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+function EnhancedTableHead(props) {
+  const { classes, order, orderBy, onRequestSort } = props;
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align={headCell.numeric ? 'right' : 'left'}
+            padding={headCell.disablePadding ? 'none' : 'default'}
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : 'asc'}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <span className={classes.visuallyHidden}>
+                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                </span>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+EnhancedTableHead.propTypes = {
+  classes: PropTypes.object.isRequired,
+  numSelected: PropTypes.number.isRequired,
+  onRequestSort: PropTypes.func.isRequired,
+  onSelectAllClick: PropTypes.func.isRequired,
+  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
+  orderBy: PropTypes.string.isRequired,
+  rowCount: PropTypes.number.isRequired,
+};
+
+
+class TopTenSingers extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+    this.state = {loading: true, duetData: []};
+  }
+  
+  setDuetState(data) {
+    this.setState(data)
+  }
+
+  render() {
+    const useStyles = makeStyles({
+      table: {
+        minWidth: 650,
+      },
+    });
+
+    const [order, setOrder] = React.useState('asc');
+    const [orderBy, setOrderBy] = React.useState('calories');
+    const classes = useStyles();
+
+    const handleRequestSort = (event, property) => {
+      const isAsc = orderBy === property && order === 'asc';
+      setOrder(isAsc ? 'desc' : 'asc');
+      setOrderBy(property);
+    };
+    useEffect(() => {
+      // We should only fetch once!
+      if (this.state.loading || this.props.triggerRefresh) {
+        fetch(dataURL).then((res) => res.json().then((data)=>{
+          this.setDuetState({duetData: data, loading: false })
+        }));
+      }
+    }, [this.setState, this.state.loading, this.props.triggerRefresh]);
+
+    if (this.state.loading) {
+      return <p>Sorry, still loading...</p>
+    }
+    
+    let dd = this.state.duetData
+
+    return (
+            <TableContainer component={Paper} 
+                order={order}
+                orderBy={orderBy}
+                onRequestSort={handleRequestSort}>
+              <Table className={classes.table} size="small" aria-label="simple table">
+                <EnhancedTableHead onRequestSort={handleRequestSort}>
+                  <TableRow>
+                    <TableCell>Song Name</TableCell>
+                    <TableCell align="right">Sings</TableCell>
+                  </TableRow>
+                </EnhancedTableHead>
+                <TableBody>
+                {stableSort(dd, getComparator(order, orderBy))
+                  .map((row, index) => {
+                    const labelId = `enhanced-table-${index}`;
+
+                    return (
+                      <TableRow key={row.singerName} >
+                        <TableCell component="th" id={labelId} scope="row" padding="none">
+                          {row.singerName}
+                        </TableCell>
+                        <TableCell align="right">{row.singCount}</TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </TableContainer>
+    );
+  }
+}
+
+export default TopTenSingers.render;

build/react-frontend/src/Components/TopTenSongs/TopTenSongs.js

@@ -103,7 +103,12 @@ function TopTenSongs() {
   useEffect(() => {
     // We should only fetch once!
     if (songState.loading) {
-      fetch(dataURL).then((res) => res.json().then((data)=>{
+      let actualURL = dataURL
+      if (window.location.href.split("/")[2] === "192.168.1.111:3000") {
+        //Frontend dev mode only
+        actualURL = "/sampleData/songs.json"
+      }
+      fetch(actualURL).then((res) => res.json().then((data)=>{
         setSongState({duetData: data, loading: false })
       }));
     }