From d56456e7a2a50ae2a6f3f5ce3fabf1b5079c6d2e Mon Sep 17 00:00:00 2001
From: bytesparallel <jason.ross841@gmail.com>
Date: Mon, 21 Mar 2022 11:15:02 -0500
Subject: [PATCH] Completed home page  and nav bar

---
 src/ApplicationViews.js    | 18 +++++++++++++++++-
 src/home/Home.js           |  9 +++++++--
 src/images/MyImages.js     |  6 ++++++
 src/nav/NavBar.js          | 10 +++++++---
 src/profile/EditProfile.js |  6 ++++++
 src/profile/Profile.js     |  6 ++++++
 src/tags/PhotosByTag.js    |  6 ++++++
 src/tags/SelectTags.js     | 17 +++++++++++++++++
 src/tags/TagManager.js     |  3 ++-
 9 files changed, 74 insertions(+), 7 deletions(-)

diff --git a/src/ApplicationViews.js b/src/ApplicationViews.js
index 958727f..9273003 100644
--- a/src/ApplicationViews.js
+++ b/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>
     </>
     )
diff --git a/src/home/Home.js b/src/home/Home.js
index 9f3de2d..feaa4da 100644
--- a/src/home/Home.js
+++ b/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>
diff --git a/src/images/MyImages.js b/src/images/MyImages.js
index e69de29..9d7c14b 100644
--- a/src/images/MyImages.js
+++ b/src/images/MyImages.js
@@ -0,0 +1,6 @@
+import React, {useState, useEffect} from "react";
+import { useHistory,useParams } from "react-router-dom";
+
+export const MyImages = () => {
+    
+}
\ No newline at end of file
diff --git a/src/nav/NavBar.js b/src/nav/NavBar.js
index a1ad8b9..bf24b7e 100644
--- a/src/nav/NavBar.js
+++ b/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) ?
diff --git a/src/profile/EditProfile.js b/src/profile/EditProfile.js
index e69de29..5118bbe 100644
--- a/src/profile/EditProfile.js
+++ b/src/profile/EditProfile.js
@@ -0,0 +1,6 @@
+import React, {useState, useEffect} from "react";
+import { useHistory,useParams } from "react-router-dom";
+
+export const EditProfile = () => {
+    
+}
\ No newline at end of file
diff --git a/src/profile/Profile.js b/src/profile/Profile.js
index e69de29..027c5ea 100644
--- a/src/profile/Profile.js
+++ b/src/profile/Profile.js
@@ -0,0 +1,6 @@
+import React, {useState, useEffect} from "react";
+import { useHistory,useParams } from "react-router-dom";
+
+export const Profile = () => {
+    
+}
\ No newline at end of file
diff --git a/src/tags/PhotosByTag.js b/src/tags/PhotosByTag.js
index e69de29..9e5aa19 100644
--- a/src/tags/PhotosByTag.js
+++ b/src/tags/PhotosByTag.js
@@ -0,0 +1,6 @@
+import React, {useState, useEffect} from "react";
+import { useHistory,useParams } from "react-router-dom";
+
+export const PhotosByTag = () => {
+    
+}
\ No newline at end of file
diff --git a/src/tags/SelectTags.js b/src/tags/SelectTags.js
index e69de29..5f91570 100644
--- a/src/tags/SelectTags.js
+++ b/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>
+     )
+}
\ No newline at end of file
diff --git a/src/tags/TagManager.js b/src/tags/TagManager.js
index 75f9063..afc05a0 100644
--- a/src/tags/TagManager.js
+++ b/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",