Completed home page and nav bar

src/ApplicationViews.js

@@ -1,6 +1,10 @@
 import React from "react";
 import { Home } from "./home/Home";
 import { Route } from "react-router-dom";
+import { SelectTags } from "./tags/SelectTags";
+import { PhotosByTag } from "./tags/PhotosByTag";
+import { MyImages } from "./images/MyImages";
+import { Profile } from "./profile/Profile";
 
 
 export const ApplicationViews = () => {
@@ -12,7 +16,19 @@ export const ApplicationViews = () => {
     <main>
         <Route exact path="/">
             <Home />
-            </Route>
+            </Route >
+        <Route exact path = "/SelectTags">
+            <SelectTags />
+        </Route>
+        <Route exact path = "/PhotosByTag">
+            <PhotosByTag />
+        </Route>
+        <Route exact path="/Profile">
+            <Profile />
+        </Route>
+        <Route exact path ="/MyImages" >
+            <MyImages />
+        </Route>
         </main>
     </>
     )

src/home/Home.js

@@ -4,7 +4,7 @@ import { postImages, getImages } from "./HomeManager";
 
 export const Home = () => {
     const homeImages = useState([])
-    const history = useHistory
+    const history = useHistory()
     const[ businessImages, setbusinessImages] = useState([])
     const [image, setImage] = useState({
         album_id: 0,
@@ -67,7 +67,12 @@ const defaultImageState =
         <h1>SmugFolio</h1>
         <input label="Browse for image file to upload" type="file" id="image_upload" onChange={createImageString} />
  <input type="hidden" name="image_id" value={image.id} />
- <button onClick={(e) => { postImages(image, file_name).then(setImage(defaultImageState).then(setfile_Name("").then(resetFileNameOnUpload("No file chosen"))))
+ <button onClick={
+     () => 
+ { postImages(image, file_name)
+ .then(setImage(defaultImageState))
+ .then(history.push("/SelectTags"))
+ // code to rename the browse label. This is not working but should be done after other views are complete .then(setfile_Name("").then(resetFileNameOnUpload("No file chosen"))
      // Upload the stringified image that is stored in state
  }}>Upload</button>
  <div>

src/images/MyImages.js

@@ -0,0 +1,6 @@
+import React, {useState, useEffect} from "react";
+import { useHistory,useParams } from "react-router-dom";
+
+export const MyImages = () => {
+    
+}

src/nav/NavBar.js

@@ -5,15 +5,19 @@ import { Link, useHistory } from "react-router-dom"
 export const NavBar = () => {
     const history = useHistory()
     return (
+        
         <ul className="navbar">
             <li className="navbar__item">
-                My Images
+                <Link to={ "/Home"} >Upload Images</Link>
             </li>
             <li className="navbar__item">
-                Explore Images by Tag
+                <Link to={"/MyImages"}>My Images</Link>
             </li>
             <li className="navbar__item">
-                My Profile
+              <Link to={"/PhotosByTag"}>  Explore Images by Tag</Link>
+            </li>
+            <li className="navbar__item">
+               <Link to={"/Profile"}>My Profile</Link>
             </li>
             {
                 (localStorage.getItem("sf_token") !== null) ?

src/profile/EditProfile.js

@@ -0,0 +1,6 @@
+import React, {useState, useEffect} from "react";
+import { useHistory,useParams } from "react-router-dom";
+
+export const EditProfile = () => {
+    
+}

src/profile/Profile.js

@@ -0,0 +1,6 @@
+import React, {useState, useEffect} from "react";
+import { useHistory,useParams } from "react-router-dom";
+
+export const Profile = () => {
+    
+}

src/tags/PhotosByTag.js

@@ -0,0 +1,6 @@
+import React, {useState, useEffect} from "react";
+import { useHistory,useParams } from "react-router-dom";
+
+export const PhotosByTag = () => {
+    
+}

src/tags/SelectTags.js

@@ -0,0 +1,17 @@
+import react, {useState, useEffect} from "react"
+import { useHistory, useParams } from "react-router-dom"
+import { getTags } from "./TagManager"
+
+export const SelectTags = () => {
+    const [tags, setTags] = useState([])
+    
+    useEffect( 
+        () => {
+        getTags().then(data => setTags(data))
+     },[]
+     )
+
+     return(
+         <h2>Select Tags for Images</h2>
+     )
+}

src/tags/TagManager.js

@@ -1,4 +1,4 @@
-export const getImages = () => {
+export const getTags = () => {
     return fetch("http://localhost:8000/tags", {
         headers:{
             "Authorization": `Token ${localStorage.getItem("sf_token")}`
@@ -8,6 +8,7 @@ export const getImages = () => {
 }
 
 
+
 export const createTags = (tag) => {
     return fetch(`http://localhost:8000/events`, {
         method: "POST",