Updated app.js

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 */
+	const [state, setState] = useState({maintenance: false, theme: 0, banners: [], offlineFetch: false});
-	/* Defining a new constant is just like above -> [custom, setCustom] = useState({something: false}); OR useState(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(<Banner type={banner.type} description={banner.text} dismissible={banner.dismissable} />);
 					});
-					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 */
+	useEffect(()=>{ 
-		/* Don't need 'var app' anymore. Functions don't need to be inside of 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 ?
 			<Router>
 				<Navbar maintenanceEnabled={state.maintenance} />
 				{
 					
-					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 && state.banners.length >= 1 ? 
-					state.banners /* Instead of calling 'this', since constants are global, you can just call whatever you named the constant. */
+					state.banners 
 					:
 					null
 					
@@ -111,7 +105,7 @@ const App = () => {
 								<Route exact path="/legal/dmca" component={Copyright}/>
 								<Route exact path="/legal/privacy-policy" component={Privacy}/>
 								<Route exact path="/legal/terms-of-service" component={Terms}/>
-								{state.maintenance ? <Route path="*" component={Maintenance}/> : null} {/* Just kind of minimized it */}
+								{state.maintenance ? <Route path="*" component={Maintenance}/> : null}
 								
 								<Route exact path="/" component={Home}/>