Changed react structure

Kind of changed the way your react file was structured; Not a huge change, but now it's more updated. Did it to just App.js & Home.js for now.

web/resources/js/layouts/App.js

@@ -1,5 +1,7 @@
 import axios from 'axios';
 import React from 'react';
+import { useState, useEffect } from "react";
+import ReactDOM from "react-dom";
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { PageTransition } from '@steveeeie/react-page-transition';
 
@@ -30,43 +32,44 @@ axios.defaults.withCredentials = true
 var url = Config.BaseUrl.replace('http://', '');
 var protocol = Config.Protocol;
 
-class App extends React.Component {
+/* 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. */
-	constructor(props) {
-		super(props);
-		this.state = {maintenance: false, theme: 0, banners: [], offlineFetched: false};
-	}
 
-	componentDidMount() {
+const App = () => {
-		var app = this; /* required for local functions since they can't access "this" */
+
+	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) */
+
+	useEffect(()=>{ /* useEffect = componentDidMount btw */
+		/* Don't need 'var app' anymore. */
 		
 		function updateBanners()
 		{
-			axios.get(protocol + 'apis.' + url + '/banners/data')
+			axios.get(`${protocol}apis.${url}/banners/data`) /* `` <-- Using these characters instead allow you to insert variables inside the string via ${}, instead of adding '++' */
 				.then((response) => {
 					var result = [];
 					response.data.map(function(banner){
 						result.push(<Banner type={banner.type} description={banner.text} dismissible={banner.dismissable} />);
 					});
-					app.setState({banners: result});
+					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'. */
 				});
 		}
 		
 		function updateOfflineStatus()
 		{
-			axios.get(protocol + 'apis.' + url + '/')
+			axios.get(`${protocol}apis.${url}/`)
 				.then((response) => {
-					if(app.state.maintenance == true)
+					if(state.maintenance == true)
 						window.location.reload();
 				})
 				.catch((error) => {
 					if (error.response)
 					{
 						if(error.response.status == 503)
-							app.setState({maintenance: true, theme: 1});
+							setState({maintenance: true, theme: 1});
 					}
 				})
 				.finally(() => {
-					app.setState({offlineFetched: true});
+					setState({offlineFetched: true});
 				});
 		}
 		
@@ -74,20 +77,22 @@ class App extends React.Component {
 		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. 
-	render() {
+	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(this.state.theme === 0 ? 'gtoria-light' : 'gtoria-dark');
+	*/
-		document.documentElement.classList.remove(!(this.state.theme === 0) ? 'gtoria-light' : 'gtoria-dark');
 
+	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 (
-			this.state.offlineFetched == true ?
+			state.offlineFetched == true ?
 			<Router>
-				<Navbar maintenanceEnabled={this.state.maintenance} />
+				<Navbar maintenanceEnabled={state.maintenance} />
 				{
 					
-					this.state.banners.length !== 0 ?
+					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. */
-					this.state.banners
+					state.banners /* Instead of calling 'this', since constants are global, you can just call whatever you named the constant. */
 					:
 					null
 					
@@ -99,55 +104,33 @@ class App extends React.Component {
 							<div className="graphictoria-nav-splitter">
 							</div>
 							{
-								!this.state.isError
+								!state.isError
 								?
-									<Switch location={location}>
+								<Switch location={location}>
-										<Route exact path="/legal/about-us">
+								<Route exact path="/legal/about-us" component={About}/> {/* <- Simpler way of writing this */}
-											<About/>
+								<Route exact path="/legal/dmca" component={Copyright}/>
-										</Route>
+								<Route exact path="/legal/privacy-policy" component={Privacy}/>
-										<Route exact path="/legal/dmca">
+								<Route exact path="/legal/terms-of-service" component={Terms}/>
-											<Copyright/>
+								{state.maintenance ? <Route path="*" component={Maintenance}/> : null} {/* Just kind of minimized it */}
-										</Route>
-										<Route exact path="/legal/privacy-policy">
-											<Privacy/>
-										</Route>
-										<Route exact path="/legal/terms-of-service">
-											<Terms/>
-										</Route>
 								
-										{
+								<Route exact path="/" component={Home}/>
-											this.state.maintenance ?
-											<Route path="*">
-												<Maintenance/>
-											</Route>
-											:
-											null
-										}
 								
-										<Route exact path="/">
+								<Route exact path="/login">
-											<Home/>
+									<Auth location={location.pathname}/>
-										</Route>
+								</Route>
+								<Route exact path="/register">
+									<Auth location={location.pathname}/>
+								</Route>
+								<Route exact path="/passwordreset">
+									<Auth location={location.pathname}/>
+								</Route>
 								
-										<Route exact path="/login">
+								<Route exact path="/games" component={Games}/>
-											<Auth location={location.pathname}/>
-										</Route>
-										<Route exact path="/register">
-											<Auth location={location.pathname}/>
-										</Route>
-										<Route exact path="/passwordreset">
-											<Auth location={location.pathname}/>
-										</Route>
 								
-										<Route exact path="/games">
+								<Route path="*" component={NotFound}/>
-											<Games/>
+							</Switch>
-										</Route>
-										
-										<Route path="*">
-											<NotFound/>
-										</Route>
-									</Switch>
 								:
-									<InternalServerError stackTrace={this.state.stack}/>
+									<InternalServerError stackTrace={state.stack}/>
 							}
 							<div className="graphictoria-nav-splitter">
 							</div>
@@ -161,7 +144,9 @@ class App extends React.Component {
 				<Loader />
 			</div>
 		);
-	}
+
 }
 
+
+
 export default App

web/resources/js/pages/Home.js

@@ -1,21 +1,18 @@
 // © XlXi 2021
 // Graphictoria 5
 
-import React from "react";
+import React, { useEffect } from "react";
 import { Link } from "react-router-dom";
 
 import SetTitle from "../Helpers/Title.js";
 
 import SocialCard from "../Components/Landing/SocialCard.js";
 
-class Home extends React.Component {
+const Home = () => {
-	componentDidMount()
+	useEffect(()=>{
-	{
 		SetTitle();
-	}
+	}, [])
 	
-	render()
-	{
 		return (
 			<>
 				<div className="graphictoria-home">
@@ -42,7 +39,6 @@ class Home extends React.Component {
 				</div>
 			</>
 		);
-	}
 }
 
 export { Home };