begin adding ability to fetch different datasets on home page

client/src/pages/home.js

@@ -7,10 +7,14 @@ import Loading from '../components/loading';
 import LoadingError from '../components/loadingError';
 
 import CharacterService from '../services/characterService';
+import DataButtonHolder from '../components/dataButtonHolder';
+import DataButton from '../components/dataButton';
 const characterService = new CharacterService();
 
 export default function Home() {
 
+    const models = [{name: 'Characters'}, {name: 'Quotes'}, {name: 'Episodes'}, {name: 'Seasons'}];
+
     const [characters, setCharacters] = useState([]);
     const [errorMessage, setErrorMessage] = useState(null);
 
@@ -36,6 +40,20 @@ export default function Home() {
 
     }, []);
 
+    const getDataButtons = () => {
+
+        return models.map(model => {
+            
+            return (
+                <DataButton 
+                    label={model.name}
+                />
+            );
+
+        });
+
+    }
+
     const getCharacterCards = () => {
 
         return characters.map(character => {
@@ -65,6 +83,10 @@ export default function Home() {
         <>
             <Greeting />
 
+            <DataButtonHolder>
+                {getDataButtons()}
+            </DataButtonHolder>
+
             {characters.length > 0 ?
 
                 <CardHolder>