diff --git a/client/client.jsx b/client/client.jsx
index b6b08de..135b865 100644
--- a/client/client.jsx
+++ b/client/client.jsx
@@ -2,14 +2,16 @@
import 'regenerator-runtime/runtime';
import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
import App from './pages/app';
import TokenProvider from './pages/utilities/token-provider';
-ReactDOM.render(
-
-
- ,
- document.querySelector('#root')
-);
+ReactDOM
+ .createRoot(document.getElementById('root'))
+ .render(
+
+
+
+ )
+;
diff --git a/client/pages/accounts/account.jsx b/client/pages/accounts/account.jsx
index 28693d2..fb36b56 100644
--- a/client/pages/accounts/account.jsx
+++ b/client/pages/accounts/account.jsx
@@ -1,5 +1,5 @@
import React, { useEffect, useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
import ApplyToBody from '../utilities/apply-to-body';
@@ -13,7 +13,7 @@ const Account = props => {
//misplaced?
if (!authTokens.accessToken) {
- return ;
+ return ;
}
//refs
diff --git a/client/pages/accounts/login.jsx b/client/pages/accounts/login.jsx
index e455412..c8a8af2 100644
--- a/client/pages/accounts/login.jsx
+++ b/client/pages/accounts/login.jsx
@@ -1,5 +1,5 @@
import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
import ApplyToBody from '../utilities/apply-to-body';
@@ -13,7 +13,7 @@ const Login = props => {
//misplaced?
if (authTokens.accessToken) {
- return ;
+ return ;
}
//refs
@@ -40,7 +40,7 @@ const Login = props => {
if (accessToken) {
authTokens.setAccessToken(accessToken);
- props.history.push('/');
+ return ;
}
}
}>
diff --git a/client/pages/accounts/recover.jsx b/client/pages/accounts/recover.jsx
index d0d7d7f..d96015b 100644
--- a/client/pages/accounts/recover.jsx
+++ b/client/pages/accounts/recover.jsx
@@ -1,5 +1,5 @@
import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
import ApplyToBody from '../utilities/apply-to-body';
@@ -14,7 +14,7 @@ const Recover = props => {
//misplaced?
if (authTokens.accessToken) {
- return ;
+ return ;
}
//refs
diff --git a/client/pages/accounts/reset.jsx b/client/pages/accounts/reset.jsx
index 4f3e042..cb55ce1 100644
--- a/client/pages/accounts/reset.jsx
+++ b/client/pages/accounts/reset.jsx
@@ -1,5 +1,5 @@
import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
import queryString from 'query-string';
import ApplyToBody from '../utilities/apply-to-body';
@@ -15,7 +15,7 @@ const Reset = props => {
//misplaced?
if (authTokens.accessToken || !query.email || !query.token) {
- return ;
+ return ;
}
//refs
diff --git a/client/pages/accounts/signup.jsx b/client/pages/accounts/signup.jsx
index 20b4db3..d0268b9 100644
--- a/client/pages/accounts/signup.jsx
+++ b/client/pages/accounts/signup.jsx
@@ -1,5 +1,5 @@
import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
import ApplyToBody from '../utilities/apply-to-body';
@@ -15,7 +15,7 @@ const Signup = props => {
//misplaced?
if (authTokens.accessToken) {
- return ;
+ return ;
}
//refs
diff --git a/client/pages/administration/admin.jsx b/client/pages/administration/admin.jsx
index 6000848..cba4c0d 100644
--- a/client/pages/administration/admin.jsx
+++ b/client/pages/administration/admin.jsx
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
import ApplyToBody from '../utilities/apply-to-body';
@@ -14,7 +14,7 @@ const Admin = props => {
//misplaced? (admin only)
if (!authTokens.accessToken || !authTokens.getPayload().admin) {
- return ;
+ return ;
}
return (
diff --git a/client/pages/administration/mod.jsx b/client/pages/administration/mod.jsx
index 64d28ea..419393f 100644
--- a/client/pages/administration/mod.jsx
+++ b/client/pages/administration/mod.jsx
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
import ApplyToBody from '../utilities/apply-to-body';
@@ -17,7 +17,7 @@ const Mod = props => {
//misplaced? (admin only)
if (!authTokens.accessToken || !(authTokens.getPayload().admin || authTokens.getPayload().mod)) {
- return ;
+ return ;
}
return (
diff --git a/client/pages/app.jsx b/client/pages/app.jsx
index c00e927..78a35b8 100644
--- a/client/pages/app.jsx
+++ b/client/pages/app.jsx
@@ -1,11 +1,8 @@
//react
-import React, { useContext } from 'react';
-import { BrowserRouter, Switch } from 'react-router-dom';
+import React, { useContext, Suspense, lazy } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { TokenContext } from './utilities/token-provider';
-//library components
-import LazyRoute from './utilities/lazy-route';
-
//styling
import '../styles/styles.css';
@@ -13,33 +10,49 @@ import '../styles/styles.css';
import Footer from './panels/footer';
import PopupChat from './panels/popup-chat';
+//lazy wrappers
+const Homepage = lazy(() => import('./homepage'));
+const Signup = lazy(() => import('./accounts/signup'));
+const Login = lazy(() => import('./accounts/login'));
+const Account = lazy(() => import('./accounts/account'));
+const Dashboard = lazy(() => import('./dashboard'));
+const Recover = lazy(() => import('./accounts/recover'));
+const Reset = lazy(() => import('./accounts/reset'));
+const Admin = lazy(() => import('./administration/admin'));
+const Mod = lazy(() => import('./administration/mod'));
+const PrivacyPolicy = lazy(() => import('./static/privacy-policy'));
+const Credits = lazy(() => import('./static/credits'));
+const NotFound = lazy(() => import('./not-found'));
+
const App = props => {
const authTokens = useContext(TokenContext);
//default render
return (
-
- import('./homepage')} />
+
+
+ } />
- import('./accounts/signup')} />
- import('./accounts/login')} />
- import('./accounts/account')} />
- import('./dashboard')} />
+ } />
+ } />
+ } />
+ } />
- import('./accounts/recover')} />
- import('./accounts/reset')} />
+ } />
+ } />
- import('./administration/admin')} />
- import('./administration/mod')} />
+ } />
+ } />
- import('./static/privacy-policy')} />
- import('./static/credits')} />
+ } />
+ } />
- import('./not-found')} />
-
- { authTokens.accessToken ? : <>> }
-
+ } />
+
+
+ { authTokens.accessToken ? : <>> }
+
);
};
diff --git a/client/pages/dashboard.jsx b/client/pages/dashboard.jsx
index a86f396..d67dd20 100644
--- a/client/pages/dashboard.jsx
+++ b/client/pages/dashboard.jsx
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
import ApplyToBody from './utilities/apply-to-body';
@@ -13,7 +13,7 @@ const Dashboard = props => {
//misplaced?
if (!authTokens.accessToken) {
- return ;
+ return ;
}
return (
diff --git a/client/pages/homepage.jsx b/client/pages/homepage.jsx
index 6dd66f0..fcb74b2 100644
--- a/client/pages/homepage.jsx
+++ b/client/pages/homepage.jsx
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
import ApplyToBody from './utilities/apply-to-body';
@@ -13,7 +13,7 @@ const HomePage = props => {
//misplaced?
if (authTokens.accessToken) {
- return ;
+ return ;
}
return (
diff --git a/client/pages/panels/news-feed.jsx b/client/pages/panels/news-feed.jsx
index db5754c..422f2b3 100644
--- a/client/pages/panels/news-feed.jsx
+++ b/client/pages/panels/news-feed.jsx
@@ -22,7 +22,6 @@ const NewsFeed = props => {
News Feed
{articles.map((article, index) => {
- console.log(article)
return (
diff --git a/client/pages/utilities/lazy-route.jsx b/client/pages/utilities/lazy-route.jsx
deleted file mode 100644
index 85d9851..0000000
--- a/client/pages/utilities/lazy-route.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
-import loadable from '@loadable/component';
-
-const LazyRoute = props => {
- const { component, ...lazyProps } = props;
-
- const lazyComponent = loadable(component);
-
- return
-};
-
-export default LazyRoute;
diff --git a/client/template.html b/client/template.html
index 9f75814..accd7bf 100644
--- a/client/template.html
+++ b/client/template.html
@@ -22,6 +22,6 @@
-
+