Merge pull request #15 from JMR-dev/jr-home-and-nav-bar

Completed h
ome page and nav bar

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+ProjectNotes.md*

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

@@ -1,13 +1,85 @@
 import React, {useState, useEffect} from "react";
 import { useHistory,useParams } from "react-router-dom";
+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,
+        picture:""
+    })
+    const [file_name, setfile_Name] = useState("")
+    const image1URL = "http://localhost:8000/media/smugimages/20140612-_JMR1361.jpg-5bbe21e5-19b0-4aae-b238-5c8791bc0b96.jpeg"
+    const image2URL = "http://localhost:8000/media/smugimages/20141224-_JMR5400.jpg-b7c8b0a6-33dc-4cd3-902b-a18538eb2283.jpeg"
+    const image3URL = "http://localhost:8000/media/smugimages/20140609-_JMR1159.jpg-fbcfa699-9136-4cb0-8e0a-a36694554af7.jpeg"
+
+    useEffect( 
+        () => {
+        getImages().then(data => setbusinessImages(data))
+     },[]
+     )
+
+
+    const getBase64 = (file, callback) => {
+        const reader = new FileReader();
+        reader.addEventListener('load', () => callback(reader.result));
+        reader.readAsDataURL(file);
+    }
+    
+    const createImageString = (event) => {
+        let imageCopy = {...image}
+        getBase64(event.target.files[0], (base64ImageString) => 
+        {imageCopy.picture = base64ImageString
+         setfile_Name(event.target.files[0].name)
+            setImage(imageCopy)
+            console.log("Base64 of file is", base64ImageString);
+    
+            // Update a component state variable to the value of base64ImageString
+        });
+    }
+
+const resetFileNameOnUpload = (default_text) => {
+    let def_text = document.getElementById("image_upload")
+    def_text.files[0].name = default_text
+
+}
+const defaultImageState = 
+    {
+        album_id:0,
+        picture:""
+    }   
+
+    // this code meant to randomize the display images. First concentrate on getting your images to display. Then worry about limiting them and randomization.
+// const randomizeDisplayImages = () => {
+//     let count = 0
+//     do (
+//          for pic of businessImages       
+//         )
+//         while count <= 3
+            
+// }
+
 
     return(
         <>
         <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={
+     () => 
+ { 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>
+ <img src={image1URL} width={616} height={408} ></img>
+ <img src={image2URL} width={616} height={408} ></img>
+ <img src={image3URL} width={616} height={408} ></img>
+ </div>
         </>
     )
 }

src/home/HomeManager.js

@@ -5,4 +5,18 @@ export const getImages = () => {
         }
     })
         .then(response => response.json())
+}
+
+export const postImages = (image, file_name) => {
+        return fetch(`http://localhost:8000/images?file_name=${file_name}`, {
+            method: "POST",
+            headers:{
+                "Authorization": `Token ${localStorage.getItem("sf_token")}`,
+                "Content-Type": "application/json"
+                    },
+            body:JSON.stringify(image),
+                }
+            )
+            .then(response => response.json())
+    
 }

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

@@ -1,6 +1,42 @@
-import react, {useState, useEffect} from "react"
-import { useHistory } from "react-router-dom"
+import React from "react"
+import { Link, useHistory } from "react-router-dom"
+
 
 export const NavBar = () => {
-    
-}
+    const history = useHistory()
+    return (
+        
+        <ul className="navbar">
+            <li className="navbar__item">
+                <Link to={ "/Home"} >Upload Images</Link>
+            </li>
+            <li className="navbar__item">
+                <Link to={"/MyImages"}>My Images</Link>
+            </li>
+            <li className="navbar__item">
+              <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) ?
+                    <li className="nav-item">
+                        <button className="nav-link fakeLink"
+                            onClick={() => {
+                                localStorage.removeItem("sf_token")
+                                history.push({ pathname: "/login" })
+                            }}
+                        >Logout</button>
+                    </li> :
+                    <>
+                        <li className="nav-item">
+                            <Link className="nav-link" to="/login">Login</Link>
+                        </li>
+                        <li className="nav-item">
+                            <Link className="nav-link" to="/register">Register</Link>
+                        </li>
+                    </>
+            }        </ul>
+    )
+}

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,14 +1,24 @@
+export const getTags = () => {
+    return fetch("http://localhost:8000/tags", {
+        headers:{
+            "Authorization": `Token ${localStorage.getItem("sf_token")}`
+        }
+    })
+        .then(response => response.json())
+}
 
 
 
-export const createTags = (event) => {
+export const createTags = (tag) => {
     return fetch(`http://localhost:8000/events`, {
         method: "POST",
         headers:{
             "Authorization": `Token ${localStorage.getItem("sf_token")}`,
             "Content-Type": "Application/json"
-                }
+                },
+        body:JSON.stringify(tag)
             }
+            
         )
-        .then(response => response.json())
-}
+.then(response => response.json())
+ }