gtoriadotnet
/
GraphictoriaWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
xander 2022-03-04 05:33:38 -06:00
parent eaf42eed7e
commit 0e9943eae4
3 changed files with 11254 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11211
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

129
web/resources/js/layouts/App.js vendored
View File

@ -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 {
constructor(props) {
super(props);
this.state = {maintenance: false, theme: 0, banners: [], offlineFetched: false};
}
componentDidMount() {
var app = this; /* required for local functions since they can't access "this" */
/* 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) */
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 */);
}
render() {
document.documentElement.classList.add(this.state.theme === 0 ? 'gtoria-light' : 'gtoria-dark');
document.documentElement.classList.remove(!(this.state.theme === 0) ? 'gtoria-light' : 'gtoria-dark');
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 (
this.state.offlineFetched == true ?
state.offlineFetched == true ?
<Router>
<Navbar maintenanceEnabled={this.state.maintenance} />
<Navbar maintenanceEnabled={state.maintenance} />
{
this.state.banners.length !== 0 ?
this.state.banners
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. */
:
null
@ -99,55 +104,33 @@ class App extends React.Component {
<div className="graphictoria-nav-splitter">
</div>
{
!this.state.isError
!state.isError
?
<Switch location={location}>
<Route exact path="/legal/about-us">
<About/>
</Route>
<Route exact path="/legal/dmca">
<Copyright/>
</Route>
<Route exact path="/legal/privacy-policy">
<Privacy/>
</Route>
<Route exact path="/legal/terms-of-service">
<Terms/>
</Route>
{
this.state.maintenance ?
<Route path="*">
<Maintenance/>
</Route>
:
null
}
<Route exact path="/">
<Home/>
</Route>
<Route exact path="/login">
<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">
<Games/>
</Route>
<Route path="*">
<NotFound/>
</Route>
</Switch>
<Switch location={location}>
<Route exact path="/legal/about-us" component={About}/> {/* <- Simpler way of writing this */}
<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 */}
<Route exact path="/" component={Home}/>
<Route exact path="/login">
<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" component={Games}/>
<Route path="*" component={NotFound}/>
</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

12
web/resources/js/pages/Home.js vendored
View File

@ -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 {
componentDidMount()
{
const Home = () => {
useEffect(()=>{
SetTitle();
}
}, [])
render()
{
return (
<>
<div className="graphictoria-home">
@ -42,7 +39,6 @@ class Home extends React.Component {
</div>
</>
);
}
}
export { Home };