saving progress for the day

src/ApplicationViews.js

@@ -17,9 +17,9 @@ export const ApplicationViews = () => {
         <Route exact path="/">
             <Home />
             </Route >
-        <Route exact path = "/SelectTags">
+        <Route path = "/SelectTags/:id">
             <SelectTags />
-                <
+                
         </Route>
         <Route exact path = "/PhotosByTag">
             <PhotosByTag />

src/home/Home.js

@@ -1,6 +1,7 @@
 import React, {useState, useEffect} from "react";
 import { useHistory,useParams } from "react-router-dom";
 import { postImages, getImages } from "./HomeManager";
+ 
 
 export const Home = () => {
     const homeImages = useState([])
@@ -71,8 +72,7 @@ const defaultImageState =
  <button onClick={
      () => 
  { postImages(image, file_name)
- .then(setImage(defaultImageState))
- .then(history.push(`/SelectTags/${image.id}`))
+ .then((image) => history.push(`/SelectTags/${image.id}`))
  // 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>

src/images/MyImageManager.js

@@ -1,8 +1,32 @@
-export const getImages = () => {
-    return fetch("http://localhost:8000/images", {
-        headers:{
-            "Authorization": `Token ${localStorage.getItem("sf_token")}`
-        }
-    })
+
+export const getImageData = () => {
+    return fetch(`http://localhost:8000/images`, {
+            headers: {
+                "Authorization": `Token ${localStorage.getItem("sf_token")}`
+            }
+        })
         .then(response => response.json())
+}
+
+export const getImages = (URL) => {
+        return fetch(`http://localhost:8000/${URL}`, {
+                headers: {
+                    "Authorization": `Token ${
+                        localStorage.getItem("sf_token")
+                 }`
+                }
+            }
+        )
+            .then(response => response.json())
+        }
+  
+
+export const deleteImage = (id) => {
+    return fetch(`http://localhost:8000/images/${id}`, {
+    method:"DELETE",
+    headers:{
+        "Authorization": `Token ${localStorage.getItem("sf_token")}`
+            }
+        }
+    )
 }

src/images/MyImages.js

@@ -1,7 +1,36 @@
 import React, {useState, useEffect} from "react";
 import { useHistory,useParams } from "react-router-dom";
-import { getImages } from "./MyImageManager";
+import { getImages, getImageData, deleteImage } from "./MyImageManager";
 
 export const MyImages = () => {
     const [allImages, setAllImages] = useState([])
+    const [ imageData, setImageData] = useState([])
+    const history = useHistory()
+    let { id } = useParams();
+
+    
+
+    useEffect( 
+        () => {
+        getImageData().then(data => setImageData(data))
+     },[]
+     )
+
+
+ return(
+     <>
+     <h2> My Images</h2>
+     <div>
+     {imageData.map((image) =>{
+         return (
+             <>
+             <img src={`http://localhost:8000${image.picture}`} key={image.id} width={616} height={408} />
+             <button onClick={() => {deleteImage(image.id).then(() => getImageData().then(data => setImageData(data)))}}> Delete Image</button>
+             </>
+         )
+     }
+     )}
+     </div>
+    </>
+ )
 }

src/nav/NavBar.js

@@ -8,7 +8,7 @@ export const NavBar = () => {
         
         <ul className="navbar">
             <li className="navbar__item">
-                <Link to={ "/Home"} >Upload Images</Link>
+                <Link to={ "/"} >Upload Images</Link>
             </li>
             <li className="navbar__item">
                 <Link to={"/MyImages"}>My Images</Link>

src/profile/EditProfile.js

@@ -1,6 +1,22 @@
 import React, {useState, useEffect} from "react";
 import { useHistory,useParams } from "react-router-dom";
+import { getSmug_UserById, putSmug_User } from "./ProfileManager";
+
 
 export const EditProfile = () => {
-    
+   const { id } = useParams()
+   const history = useHistory()
+   const [ usertoedit, setusertoedit] = useState({})
+
+   useEffect( 
+    () => {
+    getSmug_UserById().then(data => setusertoedit(data))
+ },[]
+ )
+
+ return (
+     <form>
+         
+     </form>
+ )
 }

src/profile/Profile.js

@@ -1,6 +1,22 @@
 import React, {useState, useEffect} from "react";
 import { useHistory,useParams } from "react-router-dom";
+import { getSmug_UserById } from "./ProfileManager";
 
 export const Profile = () => {
-    
+    const [users, setUsers] = useState({})
+
+    useEffect( 
+        () => {
+        getSmug_UserById().then(data => setUsers(data))
+     },[]
+     )
+// How to filter a user by their uid? Not quite sure
+return (
+    <>
+    <h2>My Profile</h2>
+    <div>
+            <p></p>
+    </div>
+    </>
+)
 }

src/tags/PhotosByTag.js

@@ -1,6 +1,33 @@
 import React, {useState, useEffect} from "react";
 import { useHistory,useParams } from "react-router-dom";
+import { getImageData } from "../images/MyImageManager";
+import { getTags } from "./TagManager";
 
 export const PhotosByTag = () => {
-    
+    const [ imageData, setImageData] = useState([])
+    const [ tagdata, settagdata ] = useState([])
+
+    useEffect( 
+        () => {
+        getImageData().then(data => setImageData(data))
+     },[]
+     )
+
+     return(
+        <>
+    <div>
+     {imageData.map((image) =>{
+         return (
+             // <p> {tagdata.map((tag)=> tag.image_tag_name )} </p>
+             <>
+            
+             <img src={`http://localhost:8000${image.picture}`} key={image.id} width={616} height={408} />
+             
+             </>
+         )
+     }
+     )}
+     </div>
+     </>
+     )
 }

src/tags/SelectTags.js

@@ -1,10 +1,12 @@
 import react, {useState, useEffect, useRef} from "react"
 import { useHistory, useParams } from "react-router-dom"
-import { getTags } from "./TagManager"
+import { getTags, addTagsToImages } from "./TagManager"
 
 export const SelectTags = () => {
     const [tags, setTags] = useState([])
-    const [tagselections, setTagSelections] = useState([])
+    const [tag_selections, setTagSelections] = useState( new Array(tags.length).fill(0))
+    let { id } = useParams();
+    const tagscopy = [...tags]
     
     useEffect( 
         () => {
@@ -18,11 +20,11 @@ export const SelectTags = () => {
 
             <div>
                 
-            {tags.map((tagname) => {
+            {tagscopy.map((tagname) => {
                     return(
                         <>
-                        <input type="checkbox" name="imagetags" id= "imagetags" onChange={
-                            (e) => { }
+                        <input type="checkbox" name="imagetags" value={tagname.id} id= "imagetags" onChange={
+                            (e) => {tagname.forEach(setTagSelections(e.target.value)) }
                         } />
                         <label for="imagetags">{tagname.image_tag_name}</label>
                         </>
@@ -31,7 +33,14 @@ export const SelectTags = () => {
                 )
                 
             }
-            {/* <button onClick={(e) =}>Submit</button> */}
+            < button onClick = {
+                () => {
+                    addTagsToImages(tag_selections, {id})
+                }
+            }
+            
+            
+            >Submit</button>
          </div>
          
          </>

src/tags/TagManager.js

@@ -21,4 +21,16 @@ export const createTags = (tag) => {
             
         )
 .then(response => response.json())
+ }
+
+ export const addTagsToImages = (id, tag_selections) => {
+     return fetch(`http://localhost:8000/images/${id}`, {
+     method: "PUT",
+     headers:{
+        "Authorization": `Token ${localStorage.getItem("sf_token")}`,
+        "Content-Type": "Application/json"
+            },
+    body:JSON.stringify(tag_selections)
+        }
+    )
  }