just a few more todo items

src/OurSponsors/OurSponsors.css

@@ -42,6 +42,7 @@
 #OurSponsors h2 {
     background-color: aquamarine;
     text-align: center;
+    margin: 0px;
 }
 
 #OurSponsors h3 {

src/OurSponsors/OurSponsors.js

@@ -1,4 +1,14 @@
+import { useEffect } from 'react';
+import { useState } from 'react';
 import './OurSponsors.css'
+//can be removed later
+import fakeDelay from '../TestingTools/fakeDelay';
+
+/* 
+things to do
+    *add link to become a sponsor at top, and thank you message
+*/
+
 const OurSponsors = () => {
     /* 
     OurSponsors Page
@@ -9,13 +19,19 @@ const OurSponsors = () => {
     Develop in part by: Brock
     Contact: darkicewolf50@gmail.com
     */
-   const getSponsors = () => {
+   const [sponsorsDict, setSponsorsDict] = useState();  //variable states for the dictionary of sponsors
+
+   useEffect(() => {
+    getSponsors();  //get sponsors on startup of page
+   }, []);
+
+    const getSponsors = async () => {
         /* 
         Gets the list of sponsors from the synology drive (not implemented), converts the json file into a dictionary
         REQUIRES:
             constant html link to synology drive
         PROMISES:
-       returns Dictionary list of all our sponsors 
+        returns Dictionary list of all our sponsors in this format of json file
         Develop in part by: Brock
         Contact: darkicewolf50@gmail.com
         */
@@ -94,18 +110,27 @@ const OurSponsors = () => {
                 }
             }
         };
+        try {
+            await fakeDelay(1000);
             console.log("It ran");
-   return tempListOfSponsors;
+            let res = tempListOfSponsors;
+            setSponsorsDict(res);
+        } catch (error) {   //error checking
+            console.error('Error sending data to server:', error);
+        }
     }
-   const dictOfSponsors = getSponsors();
 
-   //to fix make each of these a function and return the proper
+
+    if (!sponsorsDict) {    //awaiting for a resposne from the backend
+            return <p>Loading...</p>
+    }
+    if(sponsorsDict) {  //maps out the dictionary and displays the content
             return (<div id='OurSponsors'>
-        {Object.keys(dictOfSponsors).map((sponsorTier) => (
+                    {Object.keys(sponsorsDict).map((sponsorTier) => (
                         <div key={sponsorTier} className={sponsorTier}>
                             <h2>{sponsorTier}</h2>
-                {Object.keys(dictOfSponsors[sponsorTier]).map((sponsorKey) => {
-                const sponsor = dictOfSponsors[sponsorTier][sponsorKey];
+                            {Object.keys(sponsorsDict[sponsorTier]).map((sponsorKey) => {
+                            const sponsor = sponsorsDict[sponsorTier][sponsorKey];
                             return (
                                 <div key={sponsorKey}>
                                 <div>
@@ -123,6 +148,7 @@ const OurSponsors = () => {
                         </div>
                     ))}
             </div>);
+    }
 
 };
 

src/TestingTools/fakeDelay.js

@@ -0,0 +1,18 @@
+
+function fakeDelay(ms) {
+  /* 
+    useful for testing allows for a fake response, allow us to see what the program does while waiting for data from the backend
+    REQUIRES:
+        time in milliseconds
+        
+        needs a line like this to run
+        await fakeDelay(5000);
+    PROMISES:
+        nothing
+    Develop in part by: Brock
+    Contact: darkicewolf50@gmial.com
+    */
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+export default fakeDelay;