put the homepage in it's own file

src/App.js

@@ -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 Home from './Pages/Home.js'
-import API_URL from "./Constants/constants.js";
 
 export default function App() {
-
+  const [isLoading, setIsLoading] = useState(false);
-  const [isLoading, setIsLoading ] = useState(false);
+  const [isSubmit, setIsSubmit] = 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 /> :
+                <Home isLoading={isLoading} setIsLoading={setIsLoading} isSubmit={isSubmit} setIsSubmit={setIsSubmit} isInvalid={isInvalid} setIsInvalid={setIsInvalid}/>
-            <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>
-          }
               </Route>
               <Route path="/pk-webs/profile">
                 <Public />

src/Pages/Home.js

@@ -0,0 +1,150 @@
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import * as fetch from 'node-fetch';
+
+import Loading from "../Components/Loading";
+import * as BS from "react-bootstrap";
+import history from "../History.js";
+import { FaLock } from "react-icons/fa";
+
+import API_URL from "../Constants/constants.js";
+
+const Home = ({isInvalid, setIsInvalid, isLoading, setIsLoading, isSubmit, setIsSubmit, }) => {
+const { register, handleSubmit } = useForm();
+
+  const onSubmit = (data) => {
+    localStorage.setItem("token", data.pkToken);
+    logIn();
+  };
+
+  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);
+      });
+  }
+
+  useEffect(() => {
+    if (localStorage.getItem('token')) {
+      checkLogIn();
+    }
+  }, []);
+
+  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 (
+    <>
+      {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>
+      )}
+    </>
+  );
+};
+
+export default Home;