Merge pull request #16 from JMR-dev/jr-add-tags-to-images

Merge basic MVP front-end

package.json

@@ -8,7 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "5.3",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

src/ApplicationViews.js

@@ -17,8 +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/auth/Login.js

@@ -26,6 +26,7 @@ export const Login = () => {
             .then(res => {
                 if ("valid" in res && res.valid && "token" in res) {
                     localStorage.setItem("sf_token", res.token)
+                    localStorage.setItem("smug_user_id",res.smug_user_id)
                     history.push("/")
                 }
                 else {

src/auth/Register.js

@@ -36,6 +36,7 @@ export const Register = () => {
                 .then(res => {
                     if ("token" in res) {
                         localStorage.setItem("sf_token", res.token)
+                        localStorage.setItem("smug_user_id",res.smug_user)
                         history.push("/")
                     }
                 })

src/home/Home.js

@@ -1,9 +1,11 @@
 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 { id } = useParams()
     const history = useHistory()
     const[ businessImages, setbusinessImages] = useState([])
     const [image, setImage] = useState({
@@ -70,8 +72,7 @@ const defaultImageState =
  <button onClick={
      () => 
  { postImages(image, file_name)
- .then(setImage(defaultImageState))
- .then(history.push("/SelectTags"))
+ .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,6 +1,36 @@
 import React, {useState, useEffect} from "react";
 import { useHistory,useParams } from "react-router-dom";
+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,28 @@
 import React, {useState, useEffect} from "react";
 import { useHistory,useParams } from "react-router-dom";
+import { getSmug_UserById } from "./ProfileManager";
 
 export const Profile = () => {
-    
+    const [currentuser, setcurrentuser] = useState(localStorage.getItem("smug_user_id"))
+    const [smug_user, setsmuguser] = useState({})
+
+    useEffect( 
+        () => {
+        getSmug_UserById(currentuser).then(data => setsmuguser(data))
+     },[]
+     )
+// How to filter a user by their uid? Not quite sure
+return (
+    <>
+    <h2>My Profile</h2>
+    <div>
+            <p> Username: {smug_user.user.username}</p>
+            <p> Email: {smug_user.user.email}</p>
+            <p> Name: {smug_user.user.first_name} {smug_user.user.last_name}</p>
+            <p>{smug_user.business_owner ? "Current user is business owner" : "Current user is a standard user"}</p>
+            <p> User is staff? {smug_user.user.is_staff ? "Yes" : "No"}</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,9 +1,12 @@
-import react, {useState, useEffect} from "react"
+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 [tag_selections, setTagSelections] = useState( new Array(tags.length).fill(0))
+    let { id } = useParams();
+    const tagscopy = [...tags]
     
     useEffect( 
         () => {
@@ -11,7 +14,47 @@ export const SelectTags = () => {
      },[]
      )
 
+     const changefunction = (e) => {
+         const checkboxID = e.target.value
+         let tagselectioncopy = [...tag_selections]
+         if (tagselectioncopy.find((id) => id === checkboxID)) {
+             tagselectioncopy = tagselectioncopy.filter((id) => id !== checkboxID)
+             setTagSelections(tagselectioncopy)
+         } else {tagselectioncopy.push(checkboxID)
+            setTagSelections(tagselectioncopy)
+        }
+     }
+
      return(
-         <h2>Select Tags for Images</h2>
+         <>
+            <h2>Select Tags for Images</h2>
+
+            <div>
+                
+            {tagscopy.map((tagname) => {
+                    return(
+                        <>
+                        <input type="checkbox" name="imagetags" value={tagname.id} id= "imagetags" onChange={
+                            (e) => {changefunction(e) }
+                        } />
+                        <label for="imagetags">{tagname.image_tag_name}</label>
+                        </>
+                    )
+                }
+                )
+                
+            }
+            < button onClick = {
+                () => {
+                    const submitOBJ = {image_tags:tag_selections}
+                    addTagsToImages( submitOBJ, id)
+                }
+            }
+            
+            
+            >Submit</button>
+         </div>
+         
+         </>
      )
 }

src/tags/TagManager.js

@@ -1,5 +1,5 @@
 export const getTags = () => {
-    return fetch("http://localhost:8000/tags", {
+    return fetch("http://localhost:8000/image_tags", {
         headers:{
             "Authorization": `Token ${localStorage.getItem("sf_token")}`
         }
@@ -10,7 +10,7 @@ export const getTags = () => {
 
 
 export const createTags = (tag) => {
-    return fetch(`http://localhost:8000/events`, {
+    return fetch(`http://localhost:8000/image_tags`, {
         method: "POST",
         headers:{
             "Authorization": `Token ${localStorage.getItem("sf_token")}`,
@@ -21,4 +21,16 @@ export const createTags = (tag) => {
             
         )
 .then(response => response.json())
+ }
+
+ export const addTagsToImages = (tag_selections,id) => {
+     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)
+        }
+    )
  }