GraphictoriaWeb/web/resources/js/layouts/App.js

152 lines
4.5 KiB
JavaScript

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';
import Config from '../config.js';
import Navbar from '../components/Navbar.js';
import Banner from '../components/Banner.js';
import Footer from '../components/Footer.js';
import Loader from '../Components/Loader.js';
import { Home } from '../Pages/Home.js';
import { Auth } from '../Pages/Auth.js';
import { NotFound, InternalServerError } from '../Pages/Errors.js';
import { Maintenance } from '../Pages/Maintenance.js';
import { Games } from '../Pages/Games.js';
import { About } from '../Pages/Legal/About.js';
import { Copyright } from '../Pages/Legal/Copyright.js';
import { Privacy } from '../Pages/Legal/Privacy.js';
import { Terms } from '../Pages/Legal/Terms.js';
import { getCookie } from '../helpers/utils.js';
axios.defaults.withCredentials = true
var url = Config.BaseUrl.replace('http://', '');
var protocol = Config.Protocol;
const App = () => {
const [state, setState] = useState({maintenance: false, theme: 0, banners: [], offlineFetch: false, loading: true});
const [user, setUser] = useState([]);
function updateBanners()
{
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});
});
}
function fetchUser() {
const body = new FormData();
body.append('token', encodeURIComponent(getCookie(`gtok`)));
axios.post(`${protocol}apis.${url}/fetch/user`, body).then((res)=>{
setUser(res.data.data);
});
return new Promise(async (resolve, reject)=>{
resolve("good");
});
}
function updateOfflineStatus()
{
axios.get(`${protocol}apis.${url}/`)
.then((response) => {
if(state.maintenance == true)
window.location.reload();
})
.catch((error) => {
if (error.response)
{
if(error.response.status == 503)
setState({maintenance: true, theme: 1});
}
})
.finally(() => {
setState({offlineFetched: true});
});
}
useEffect(async ()=>{
await fetchUser();
updateBanners();
updateOfflineStatus();
setInterval(updateBanners, 2*60*1000 /* 2 mins */);
setInterval(updateOfflineStatus, 10*60*1000 /* 10 mins */);
setState({loading: true});
}, []);
document.documentElement.classList.add(state.theme == 0 ? 'gtoria-light' : 'gtoria-dark');
document.documentElement.classList.remove(!(state.theme == 0) ? 'gtoria-light' : 'gtoria-dark');
return (
!state.loading?
<Router>
<Navbar maintenanceEnabled={state.maintenance} />
{state.banners && state.banners.length >= 1 ? state.banners : null}
<Route render={({ location }) => {
return (
<PageTransition preset="slide" enterAnimation="scaleUp" exitAnimation="scaleDown" transitionKey={location.pathname}>
<div className="graphictoria-nav-splitter">
</div>
{
!state.isError
?
<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}
<Route exact path="/" component={Home}/>
<Route exact path="/login">
<Auth location={user && user.id? null : location.pathname}/>
</Route>
<Route exact path="/register">
<Auth location={user? null : location.pathname}/>
</Route>
<Route exact path="/passwordreset">
<Auth location={user? null : location.pathname}/>
</Route>
<Route exact path="/games" component={Games}/>
<Route path="*" component={NotFound}/>
</Switch>
:
<InternalServerError stackTrace={state.stack}/>
}
<div className="graphictoria-nav-splitter">
</div>
<Footer/>
</PageTransition>
);
}}/>
</Router>
:
<div className="gtoria-loader-center">
<Loader />
</div>
);
}
export default App