From 03a0dd43d1e9ee4ebabb0b5477b7a04560ac253f Mon Sep 17 00:00:00 2001 From: xander <63683502+xander113@users.noreply.github.com> Date: Fri, 4 Mar 2022 18:11:01 -0600 Subject: [PATCH] Updated app.js --- web/resources/js/layouts/App.js | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/web/resources/js/layouts/App.js b/web/resources/js/layouts/App.js index 28c8a21..605fff8 100644 --- a/web/resources/js/layouts/App.js +++ b/web/resources/js/layouts/App.js @@ -32,22 +32,19 @@ axios.defaults.withCredentials = true var url = Config.BaseUrl.replace('http://', ''); var protocol = Config.Protocol; -/* Tell me if u don't like the way this is structured, because both ways work fine. Its just that this way is easier (for me personally) & more updated. */ - const App = () => { - const [state, setState] = useState({maintenance: false, theme: 0, banners: [], offlineFetch: false}); /* Easier way of defining constants */ - /* Defining a new constant is just like above -> [custom, setCustom] = useState({something: false}); OR useState(false) */ + const [state, setState] = useState({maintenance: false, theme: 0, banners: [], offlineFetch: false}); function updateBanners() { - axios.get(`${protocol}apis.${url}/banners/data`) /* `` <-- Using these characters instead allow you to insert variables inside the string via ${}, instead of adding '++' */ + axios.get(`${protocol}apis.${url}/banners/data`) .then((response) => { var result = []; response.data.map(function(banner){ result.push(); }); - setState({banners: result}); /* Using the useState function, you can define a custom function name for changing that constant. Use that custom name whenever you want to change that constant. I just called this one 'setState'. */ + setState({banners: result}); }); } @@ -70,29 +67,26 @@ const App = () => { }); } - useEffect(()=>{ /* useEffect = componentDidMount btw */ - /* Don't need 'var app' anymore. Functions don't need to be inside of useEffect. */ + useEffect(()=>{ updateBanners(); updateOfflineStatus(); setInterval(updateBanners, 2*60*1000 /* 2 mins */); setInterval(updateOfflineStatus, 10*60*1000 /* 10 mins */); console.log(state); - }, []); /* Adding ", []" allows the useEffect function to run only once. - The cool thing about this is that if you put a constant name inside of the brackets, ex. [state], then the useEffect function will run everytime that constant is updated. - */ + }, []); document.documentElement.classList.add(state.theme == 0 ? 'gtoria-light' : 'gtoria-dark'); document.documentElement.classList.remove(!(state.theme == 0) ? 'gtoria-light' : 'gtoria-dark'); - /* No need for the Render() function anymore. */ + return ( state.offlineFetched == true ? { - state.banners && state.banners.length >= 1 ? /* Instead of just calling the length of the array, you might want to also check if it exists at all yet. */ - state.banners /* Instead of calling 'this', since constants are global, you can just call whatever you named the constant. */ + state.banners && state.banners.length >= 1 ? + state.banners : null @@ -111,7 +105,7 @@ const App = () => { - {state.maintenance ? : null} {/* Just kind of minimized it */} + {state.maintenance ? : null}