put the homepage in it's own file

This commit is contained in:
Spectralitree 2021-06-26 19:36:46 +02:00
parent d245564e2e
commit 9323985c8d
2 changed files with 159 additions and 101 deletions

View file

@ -1,101 +1,36 @@
import React, {useEffect, useState, useCallback} from 'react';
import React, { useState, useCallback} from 'react';
import { Router, Switch, Route, Redirect } from 'react-router-dom';
import * as BS from 'react-bootstrap'
import { useForm } from "react-hook-form";
import * as fetch from 'node-fetch';
import Toggle from 'react-toggle'
import useDarkMode from 'use-dark-mode';
import './App.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
import "react-toggle/style.css"
import { FaLock, FaCog, FaSun, FaMoon } from "react-icons/fa";
import { FaCog, FaSun, FaMoon } from "react-icons/fa";
import Dash from './Components/Dash.js'
import history from "./History.js";
import Loading from "./Components/Loading.js";
import Footer from './Components/Footer.js'
import Public from './Components/Public.js'
import API_URL from "./Constants/constants.js";
import Home from './Pages/Home.js'
export default function App() {
const [isLoading, setIsLoading ] = useState(false);
const [isSubmit, setIsSubmit ] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isSubmit, setIsSubmit] = useState(false);
const [isInvalid, setIsInvalid] = useState(false);
const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);
const darkMode = useDarkMode(false);
const { register, handleSubmit } = useForm();
useEffect(() => {
if (localStorage.getItem('token')) {
checkLogIn();
}
}, [])
const onSubmit = data => {
localStorage.setItem('token', data.pkToken);
logIn();
};
function logOut() {
setIsSubmit(false);
localStorage.removeItem("token");
localStorage.removeItem("user");
history.push('/pk-webs');
history.push("/pk-webs");
forceUpdate();
}
function logIn() {
setIsInvalid(false);
setIsLoading(true);
fetch(`${API_URL}s/`,{
method: 'GET',
headers: {
'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
}}).then ( res => res.json()
).then (data => {
localStorage.setItem('user', JSON.stringify(data));
setIsSubmit(true);
setIsLoading(false);
history.push("/pk-webs/dash");
})
.catch (error => {
console.log(error);
setIsInvalid(true);
localStorage.removeItem('token');
localStorage.removeItem('user');
setIsLoading(false);
})
};
function checkLogIn() {
setIsInvalid(false);
setIsLoading(true);
fetch(`${API_URL}s/`,{
method: 'GET',
headers: {
'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
}}).then ( res => res.json()
).then (data => {
localStorage.setItem('user', JSON.stringify(data));
setIsSubmit(true);
setIsLoading(false);
})
.catch (error => {
console.log(error);
setIsInvalid(true);
localStorage.removeItem('token');
localStorage.removeItem('user');
setIsLoading(false);
})
};
}
return (
<div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}`}>
@ -127,34 +62,7 @@ export default function App() {
}
</Route>
<Route exact path="/pk-webs">
{ isLoading ? <Loading /> :
<BS.Card className="mb-3 mt-3">
<BS.Card.Header className="d-flex align-items-center justify-content-between">
<BS.Card.Title><FaLock className="mr-3" />Login</BS.Card.Title>
</BS.Card.Header>
<BS.Card.Body>
{ isSubmit && !localStorage.getItem('user') ? <BS.Alert variant="danger">Something went wrong, please try again.</BS.Alert> : ""}
{ isInvalid ? <BS.Alert variant="danger">Invalid token.</BS.Alert> : "" }
{ localStorage.getItem('user') && localStorage.getItem('token') ? <><p>You are logged in already, click here to continue to the dash.</p>
<BS.Button type="primary" onClick={() => history.push('/pk-webs/dash')}>Continue to dash</BS.Button></> :
<BS.Form onSubmit={handleSubmit(onSubmit)}>
<BS.Form.Row>
<BS.Col className="mb-1" xs={12} lg={10}>
<BS.Form.Label>Enter your token here. You can get your token by using <b>"pk;token"</b>.</BS.Form.Label>
</BS.Col>
</BS.Form.Row>
<BS.Form.Row>
<BS.Col xs={12} lg={10}>
<BS.Form.Control required name="pkToken" type="text" {...register("pkToken")} placeholder="token" />
</BS.Col>
<BS.Col>
<BS.Button variant="primary" type="submit" block >Submit</BS.Button>
</BS.Col>
</BS.Form.Row>
</BS.Form> }
</BS.Card.Body>
</BS.Card>
}
<Home isLoading={isLoading} setIsLoading={setIsLoading} isSubmit={isSubmit} setIsSubmit={setIsSubmit} isInvalid={isInvalid} setIsInvalid={setIsInvalid}/>
</Route>
<Route path="/pk-webs/profile">
<Public />