Allow for reload in caching

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

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

@@ -46,11 +46,40 @@ class AppAdmin extends React.Component {
   constructor(props) {
     super(props);
     this.setPage = this.setPage.bind(this);
-    this.state = {page: 0};
+    this.reloadSongComponent = this.reloadSongComponent.bind(this);
+    this.reloadSingersComponent = this.reloadSingersComponent.bind(this);
+    this.reloadDuetComponent = this.reloadDuetComponent.bind(this);
+    this.state = {
+      page: 0, 
+      reloadSongComponent: false, 
+      reloadSingersComponent: false, 
+      reloadDuetComponent: false, 
+    };
   }
 
   setPage(pageNum) {
-    this.setState({page: pageNum})
+    let newState = this.state;
+    newState.page = pageNum;
+    this.setState(newState);
+  }
+
+  reloadSongComponent(components) {
+    let newState = this.state;
+    newState.reloadComponents = components;
+    this.setState(newState);
+  }
+
+  reloadSingersComponent(components) {
+    let newState = this.state;
+    newState.reloadComponents = components;
+    this.setState(newState);
+  }
+
+  reloadDuetComponent(components) {
+    let newState = this.state;
+    newState.reloadDuetComponent = components;
+    console.log("I'm trying!")
+    this.setState(newState);
   }
 
   render() {
@@ -72,6 +101,9 @@ class AppAdmin extends React.Component {
     const csvURL = "/csv/"+ channelName + "/" + adminToken
     const tsvURL = "/tsv/"+ channelName + "/" + adminToken
     const setPage = this.setPage
+    const reloadDuetComponent = this.state.reloadDuetComponent
+    const reloadSongComponent = this.state.reloadSongComponent
+    const reloadSingersComponent = this.state.reloadSingersComponent
 
     function handleChange(event, newValue) {
       setPage(newValue);
@@ -95,13 +127,16 @@ class AppAdmin extends React.Component {
             </Tabs>
           </AppBar>
           <TabPanel value={page} index={0}>
-            <TopTenSongs />
+            <TopTenSongs reloadSongComponent={reloadSongComponent}
+             onReloadedChange={this.reloadSongComponent}/>
           </TabPanel>
           <TabPanel value={page} index={1}>
-            <TopTenSingers />
+            <TopTenSingers reloadSingersComponent={reloadSingersComponent}
+             onReloadedChange={this.reloadSingersComponent}/>
           </TabPanel>
           <TabPanel value={page} index={2}>
-            <DuetData />
+            <DuetData reloadDuetComponent={reloadDuetComponent} 
+             onReloadedChange={this.reloadDuetComponent}/>
           </TabPanel>
           <TabPanel value={page} index={3}>
           <Typography variant="h5" component="h2" gutterBottom>
@@ -132,7 +167,11 @@ class AppAdmin extends React.Component {
 
           </TabPanel>
           <TabPanel value={page} index={4}>
-            <CacheDeets />
+            <CacheDeets
+             onReloadSongsChange={this.reloadSongComponent}
+             onReloadSingersChange={this.reloadSingersComponent}
+             onReloadDuetChange={this.reloadDuetComponent}
+             />
           </TabPanel>
           <TabPanel value={page} index={5}>
             <BotDeets />

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Container, Typography, Button } from '@material-ui/core';
 
 const channelName = window.location.href.split("/")[4]
@@ -6,38 +6,63 @@ const adminToken = window.location.href.split("/")[5]
 const dataURL = "/cachedeets/"+ channelName + "/" + adminToken
 const forceURL = "/force/"+ channelName + "/" + adminToken
 
-function CacheDeets() {
+class CacheDeets extends React.Component {
-
+  constructor(props) {
-  function handleClick(e) {
+    super(props);
-    setCacheState({cacheData: null, loading: true })
+    this.state = {
-    fetch(forceURL).then((res) => res.json().then((data)=>{
+      cacheData: [],
-      setCacheState({cacheData: data, loading: false })
+      loading: true
-    }));
+    };
-    console.log('The link was clicked.');  
+    this.setCacheData = this.setCacheData.bind(this);
+    this.setLoading = this.setLoading.bind(this);
   }
 
- // render() {
+  setCacheData(data) {
-    const [cacheState, setCacheState] = React.useState({loading: true, cacheData: []})
+    let newState = this.state
+    newState.cacheData = data
+    this.setState(newState)
+  }
 
-    useEffect(() => {
+  setLoading(data) {
+    let newState = this.state
+    newState.loading = data
+    this.setState(newState)
+  }
+
+  componentDidMount() {
     // We should only fetch once!
-      if (cacheState.loading) {
+    if (this.state.loading) {
       let actualURL = dataURL
       if (window.location.href.split("/")[2] === "192.168.1.111:3000") {
         //Frontend dev mode only
         actualURL = "/sampleData/cache.json"
       }
       fetch(actualURL).then((res) => res.json().then((data)=>{
-          setCacheState({cacheData: data, loading: false })
+        this.setLoading(false)
+        this.setCacheData(data)
       }));
     }
-    }, [setCacheState, cacheState.loading]);
+  }
 
-    if (cacheState.loading) {
+  render() {
+    const loading = this.state.loading
+    const setLoading = this.setLoading
+    const cacheData = this.state.cacheData
+
+    function handleClick(e) {
+      setLoading(true)
+      fetch(forceURL).then((data)=>{
+        setLoading(false)
+        window.location.reload()
+      })
+      console.log('The link was clicked.');  
+    }
+
+    if (loading) {
       return <p>Sorry, still loading...</p>
     }
     
-    let dd = cacheState.cacheData
+    let dd = cacheData
 
     return (
       <Container>
@@ -51,6 +76,6 @@ function CacheDeets() {
       </Container>
     );
   }
-//}
+}
 
 export default CacheDeets;