add comments!

src/Pages/Home.js

@@ -12,15 +12,19 @@ import API_URL from "../Constants/constants.js";
 const Home = ({isInvalid, setIsInvalid, isLoading, setIsLoading, isSubmit, setIsSubmit, }) => {
 const { register, handleSubmit } = useForm();
 
+  // submit login form, add the token to the localstorage
   const onSubmit = (data) => {
     localStorage.setItem("token", data.pkToken);
     logIn();
   };
 
   function logIn() {
+
+    // make sure the token is not set to invalid and add a funny little spinner to indicate loading
     setIsInvalid(false);
     setIsLoading(true);
-
+    
+    // then fetch the system data with the token stored in localstorage
     fetch(`${API_URL}s/`, {
       method: "GET",
       headers: {
@@ -30,6 +34,9 @@ const { register, handleSubmit } = useForm();
         ),
       },
     })
+    // put all the system data in localstorage
+    // TODO: remove this from localstorage? since we know how to pass stuff along components now
+    // then push the user to the dash!
       .then((res) => res.json())
       .then((data) => {
         localStorage.setItem("user", JSON.stringify(data));
@@ -37,6 +44,8 @@ const { register, handleSubmit } = useForm();
         setIsLoading(false);
         history.push("/pk-webs/dash");
       })
+      // remove the token and user data from localstorage if there's an error, also set the token as invalid
+      // TODO: an error doesn't mean the token is invalid, change this depending on what error is thrown
       .catch((error) => {
         console.log(error);
         setIsInvalid(true);
@@ -46,12 +55,16 @@ const { register, handleSubmit } = useForm();
       });
   }
 
+  // when the homepage loads, check if there's a token, if there is, check if it's still valid
+  // removing the dependency array causes a rerender loop, so just ignore ESlint here
   useEffect(() => {
     if (localStorage.getItem('token')) {
       checkLogIn();
     }
   }, []);
 
+  // very similar to LogIn(), only difference is that it doesn't push the user afterwards
+  // TODO: useless double code that probably could be refactored somehow
   function checkLogIn() {
     setIsInvalid(false);
     setIsLoading(true);
@@ -77,6 +90,7 @@ const { register, handleSubmit } = useForm();
 
   return (
     <>
+    {/* if the page is loading, just show the loading component */}
       {isLoading ? (
         <Loading />
       ) : (
@@ -88,6 +102,7 @@ const { register, handleSubmit } = useForm();
             </BS.Card.Title>
           </BS.Card.Header>
           <BS.Card.Body>
+            {/* if the login form has been submitted, and there's no user object, show a generic error */}
             {isSubmit && !localStorage.getItem("user") ? (
               <BS.Alert variant="danger">
                 Something went wrong, please try again.
@@ -95,12 +110,15 @@ const { register, handleSubmit } = useForm();
             ) : (
               ""
             )}
+            {/* if the inserted token is invalid, show invalid error! 
+              this also shows if the token used in checkLogIn() is invalid */}
             {isInvalid ? (
               <BS.Alert variant="danger">Invalid token.</BS.Alert>
             ) : (
               ""
             )}
-            {localStorage.getItem("user") && localStorage.getItem("token") ? (
+            { // if there's a user object in localstorage, and there's a token in localstorage, the user is logged in already
+            localStorage.getItem("user") && localStorage.getItem("token") ? (
               <>
                 <p>
                   You are logged in already, click here to continue to the dash.
@@ -113,6 +131,7 @@ const { register, handleSubmit } = useForm();
                 </BS.Button>
               </>
             ) : (
+              // otherwise, show login form
               <BS.Form onSubmit={handleSubmit(onSubmit)}>
                 <BS.Form.Row>
                   <BS.Col className="mb-1" xs={12} lg={10}>