disabling image by tags link until complete

.prettierignore

@@ -1,3 +0,0 @@
-# Ignore artifacts:
-build
-coverage

.prettierrc

@@ -1 +0,0 @@
-{}

package.json

@@ -35,8 +35,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "prettier": "3.3.3"
   }
 }

public/index.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

src/ApplicationViews.js

@@ -6,26 +6,31 @@ import { PhotosByTag } from "./tags/PhotosByTag";
 import { MyImages } from "./images/MyImages";
 import { Profile } from "./profile/Profile";
 
+
 export const ApplicationViews = () => {
-  return (
+
+    return (
+    
     <>
-      <main>
+
+    <main>
         <Route exact path="/">
-          <Home />
+            <Home />
+            </Route >
+        <Route path = "/SelectTags/:id">
+            <SelectTags />
+                
         </Route>
-        <Route path="/SelectTags/:id">
+        <Route exact path = "/PhotosByTag">
-          <SelectTags />
+            <PhotosByTag />
-        </Route>
-        <Route exact path="/PhotosByTag">
-          <PhotosByTag />
         </Route>
         <Route exact path="/Profile">
-          <Profile />
+            <Profile />
         </Route>
-        <Route exact path="/MyImages">
+        <Route exact path ="/MyImages" >
-          <MyImages />
+            <MyImages />
         </Route>
-      </main>
+        </main>
     </>
-  );
+    )
-};
+}

src/SmugFolio.js

@@ -1,30 +1,30 @@
-import { Route, Redirect } from "react-router-dom";
+import { Route, Redirect } from "react-router-dom"
-import { ApplicationViews } from "./ApplicationViews";
+import { ApplicationViews } from "./ApplicationViews"
-import { NavBar } from "./nav/NavBar";
+import { NavBar } from "./nav/NavBar"
-import { Login } from "./auth/Login";
+import { Login } from "./auth/Login"
-import { Register } from "./auth/Register";
+import { Register } from "./auth/Register"
 export const SmugFolio = () => {
-  if (localStorage.getItem("sf_token")) {
-    return (
-      <>
-        <Route>
-          <NavBar />
-          <ApplicationViews />
-        </Route>
-      </>
-    );
-  } else {
-    return (
-      <>
-        <Redirect to="/login" />
-        <Route path="/login">
-          <Login />
-        </Route>
 
-        <Route path="/register">
+    if (localStorage.getItem("sf_token")) {
-          <Register />
+        return(
-        </Route>
+         <>
-      </>
+            <Route>
-    );
+                <NavBar />
-  }
+                <ApplicationViews />
-};
+            </Route>
+            </>
+            )
+        } else {
+            return <>
+            <Redirect to="/login" />
+    <Route path="/login">
+        <Login />
+    </Route>
+
+    <Route path="/register">
+        <Register />
+    </Route>
+    </>
+
+        }
+}

src/auth/Login.js

@@ -1,90 +1,68 @@
-import React, { useRef } from "react";
+import React, { useRef } from "react"
-import { Link, useHistory } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom"
+
 
 export const Login = () => {
-  const username = useRef();
+    const username = useRef()
-  const password = useRef();
+    const password = useRef()
-  const invalidDialog = useRef();
+    const invalidDialog = useRef()
-  const history = useHistory();
+    const history = useHistory()
 
-  const handleLogin = (e) => {
+    const handleLogin = (e) => {
-    e.preventDefault();
+        e.preventDefault()
 
-    return fetch("http://127.0.0.1:8000/login", {
+        return fetch("http://127.0.0.1:8000/login", {
-      method: "POST",
+            method: "POST",
-      headers: {
+            headers: {
-        "Content-Type": "application/json",
+                "Content-Type": "application/json",
-        Accept: "application/json",
+                "Accept": "application/json"
-      },
+            },
-      body: JSON.stringify({
+            body: JSON.stringify({
-        username: username.current.value,
+                username: username.current.value,
-        password: password.current.value,
+                password: password.current.value
-      }),
+            })
-    })
+        })
-      .then((res) => res.json())
+            .then(res => res.json())
-      .then((res) => {
+            .then(res => {
-        if ("valid" in res && res.valid && "token" in res) {
+                if ("valid" in res && res.valid && "token" in res) {
-          localStorage.setItem("sf_token", res.token);
+                    localStorage.setItem("sf_token", res.token)
-          localStorage.setItem("smug_user_id", res.smug_user_id);
+                    localStorage.setItem("smug_user_id",res.smug_user_id)
-          history.push("/");
+                    history.push("/")
-        } else {
+                }
-          invalidDialog.current.showModal();
+                else {
-        }
+                    invalidDialog.current.showModal()
-      });
+                }
-  };
+            })
+    }
 
-  return (
+    return (
-    <main className="container--login">
+        <main className="container--login">
-      <dialog className="dialog dialog--auth" ref={invalidDialog}>
+            <dialog className="dialog dialog--auth" ref={invalidDialog}>
-        <div>Username or password was not valid.</div>
+                <div>Username or password was not valid.</div>
-        <button
+                <button className="button--close" onClick={e => invalidDialog.current.close()}>Close</button>
-          className="button--close"
+            </dialog>
-          onClick={(e) => invalidDialog.current.close()}
+            <section>
-        >
+                <form className="form--login" onSubmit={handleLogin}>
-          Close
+                    <h1>SmugFolio</h1>
-        </button>
+                    <h2>Please sign in</h2>
-      </dialog>
+                    <fieldset>
-      <section>
+                        <label htmlFor="inputUsername"> Username</label>
-        <form className="form--login" onSubmit={handleLogin}>
+                        <input ref={username} type="username" id="username" className="form-control" placeholder="Username" required autoFocus />
-          <h1>SmugFolio</h1>
+                    </fieldset>
-          <h2>Please sign in</h2>
+                    <fieldset>
-          <fieldset>
+                        <label htmlFor="inputPassword"> Password </label>
-            <label htmlFor="inputUsername"> Username</label>
+                        <input ref={password} type="password" id="password" className="form-control" placeholder="Password" required />
-            <input
+                    </fieldset>
-              ref={username}
+                    <fieldset style={{
-              type="username"
+                        textAlign: "center"
-              id="username"
+                    }}>
-              className="form-control"
+                        <button className="btn btn-1 btn-sep icon-send" type="submit">Sign In</button>
-              placeholder="Username"
+                    </fieldset>
-              required
+                </form>
-              autoFocus
+            </section>
-            />
+            <section className="link--register">
-          </fieldset>
+                <Link to="/register">Register</Link>
-          <fieldset>
+            </section>
-            <label htmlFor="inputPassword"> Password </label>
+        </main>
-            <input
+    )
-              ref={password}
+}
-              type="password"
-              id="password"
-              className="form-control"
-              placeholder="Password"
-              required
-            />
-          </fieldset>
-          <fieldset
-            style={{
-              textAlign: "center",
-            }}
-          >
-            <button className="btn btn-1 btn-sep icon-send" type="submit">
-              Sign In
-            </button>
-          </fieldset>
-        </form>
-      </section>
-      <section className="link--register">
-        <Link to="/register">Register</Link>
-      </section>
-    </main>
-  );
-};

src/auth/Register.js

@@ -1,143 +1,93 @@
-import React, { useRef } from "react";
+import React, { useRef } from "react"
-import { Link, useHistory } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom"
+
 
 export const Register = () => {
-  const firstName = useRef();
+    const firstName = useRef()
-  const lastName = useRef();
+    const lastName = useRef()
-  const username = useRef();
+    const username = useRef()
-  const email = useRef();
+    const email = useRef()
-  const password = useRef();
+    const password = useRef()
-  const verifyPassword = useRef();
+    const verifyPassword = useRef()
-  const passwordDialog = useRef();
+    const passwordDialog = useRef()
-  const history = useHistory();
+    const history = useHistory()
 
-  const handleRegister = (e) => {
+    const handleRegister = (e) => {
-    e.preventDefault();
+        e.preventDefault()
 
-    if (password.current.value === verifyPassword.current.value) {
+        if (password.current.value === verifyPassword.current.value) {
-      const newUser = {
+            const newUser = {
-        username: username.current.value,
+                "username": username.current.value,
-        email: email.current.value,
+                "email": email.current.value,
-        first_name: firstName.current.value,
+                "first_name": firstName.current.value,
-        last_name: lastName.current.value,
+                "last_name": lastName.current.value,
-        password: password.current.value,
+                "password": password.current.value
-      };
+            }
 
-      return fetch("http://127.0.0.1:8000/register", {
+            return fetch("http://127.0.0.1:8000/register", {
-        method: "POST",
+                method: "POST",
-        headers: {
+                headers: {
-          "Content-Type": "application/json",
+                    "Content-Type": "application/json",
-          Accept: "application/json",
+                    "Accept": "application/json"
-        },
+                },
-        body: JSON.stringify(newUser),
+                body: JSON.stringify(newUser)
-      })
+            })
-        .then((res) => res.json())
+                .then(res => res.json())
-        .then((res) => {
+                .then(res => {
-          if ("token" in res) {
+                    if ("token" in res) {
-            localStorage.setItem("sf_token", res.token);
+                        localStorage.setItem("sf_token", res.token)
-            localStorage.setItem("smug_user_id", res.smug_user);
+                        localStorage.setItem("smug_user_id",res.smug_user)
-            history.push("/");
+                        history.push("/")
-          }
+                    }
-        });
+                })
-    } else {
+        } else {
-      passwordDialog.current.showModal();
+            passwordDialog.current.showModal()
+        }
     }
-  };
 
-  return (
+    return (
-    <main style={{ textAlign: "center" }}>
+        <main style={{ textAlign: "center" }}>
-      <dialog className="dialog dialog--password" ref={passwordDialog}>
-        <div>Passwords do not match</div>
-        <button
-          className="button--close"
-          onClick={(e) => passwordDialog.current.close()}
-        >
-          Close
-        </button>
-      </dialog>
 
-      <form className="form--login" onSubmit={handleRegister}>
+            <dialog className="dialog dialog--password" ref={passwordDialog}>
-        <h1 className="h3 mb-3 font-weight-normal">Register an account</h1>
+                <div>Passwords do not match</div>
-        <fieldset>
+                <button className="button--close" onClick={e => passwordDialog.current.close()}>Close</button>
-          <label htmlFor="firstName"> First Name </label>
+            </dialog>
-          <input
+
-            ref={firstName}
+            <form className="form--login" onSubmit={handleRegister}>
-            type="text"
+                <h1 className="h3 mb-3 font-weight-normal">Register an account</h1>
-            name="firstName"
+                <fieldset>
-            className="form-control"
+                    <label htmlFor="firstName"> First Name </label>
-            placeholder="First name"
+                    <input ref={firstName} type="text" name="firstName" className="form-control" placeholder="First name" required autoFocus />
-            required
+                </fieldset>
-            autoFocus
+                <fieldset>
-          />
+                    <label htmlFor="lastName"> Last Name </label>
-        </fieldset>
+                    <input ref={lastName} type="text" name="lastName" className="form-control" placeholder="Last name" required />
-        <fieldset>
+                </fieldset>
-          <label htmlFor="lastName"> Last Name </label>
+                <fieldset>
-          <input
+                    <label htmlFor="inputUsername">Username</label>
-            ref={lastName}
+                    <input ref={username} type="text" name="username" className="form-control" placeholder="Username" required />
-            type="text"
+                </fieldset>
-            name="lastName"
+                <fieldset>
-            className="form-control"
+                    <label htmlFor="inputEmail">Email</label>
-            placeholder="Last name"
+                    <input ref={email} type="text" name="email" className="form-control" placeholder="Email" required />
-            required
+                </fieldset>
-          />
+                <fieldset>
-        </fieldset>
+                    <label htmlFor="inputPassword"> Password </label>
-        <fieldset>
+                    <input ref={password} type="password" name="password" className="form-control" placeholder="Password" required />
-          <label htmlFor="inputUsername">Username</label>
+                </fieldset>
-          <input
+                <fieldset>
-            ref={username}
+                    <label htmlFor="verifyPassword"> Verify Password </label>
-            type="text"
+                    <input ref={verifyPassword} type="password" name="verifyPassword" className="form-control" placeholder="Verify password" required />
-            name="username"
+                </fieldset>
-            className="form-control"
+                <fieldset style={{
-            placeholder="Username"
+                    textAlign: "center"
-            required
+                }}>
-          />
+                    <button className="btn btn-1 btn-sep icon-send" type="submit">Register</button>
-        </fieldset>
+                </fieldset>
-        <fieldset>
+            </form>
-          <label htmlFor="inputEmail">Email</label>
+            <section className="link--register">
-          <input
+                Already registered? <Link to="/login">Login</Link>
-            ref={email}
+            </section>
-            type="text"
+        </main>
-            name="email"
+    )
-            className="form-control"
+}
-            placeholder="Email"
-            required
-          />
-        </fieldset>
-        <fieldset>
-          <label htmlFor="inputPassword"> Password </label>
-          <input
-            ref={password}
-            type="password"
-            name="password"
-            className="form-control"
-            placeholder="Password"
-            required
-          />
-        </fieldset>
-        <fieldset>
-          <label htmlFor="verifyPassword"> Verify Password </label>
-          <input
-            ref={verifyPassword}
-            type="password"
-            name="verifyPassword"
-            className="form-control"
-            placeholder="Verify password"
-            required
-          />
-        </fieldset>
-        <fieldset
-          style={{
-            textAlign: "center",
-          }}
-        >
-          <button className="btn btn-1 btn-sep icon-send" type="submit">
-            Register
-          </button>
-        </fieldset>
-      </form>
-      <section className="link--register">
-        Already registered? <Link to="/login">Login</Link>
-      </section>
-    </main>
-  );
-};

src/home/Home.js

@@ -1,91 +1,86 @@
-import React, { useState, useEffect } from "react";
+import React, {useState, useEffect} from "react";
-import { useHistory, useParams } from "react-router-dom";
+import { useHistory,useParams } from "react-router-dom";
 import { postImages, getImages } from "./HomeManager";
+ 
 
 export const Home = () => {
-  const homeImages = useState([]);
+    const homeImages = useState([])
-  const { id } = useParams();
+    const { id } = useParams()
-  const history = useHistory();
+    const history = useHistory()
-  const [businessImages, setbusinessImages] = useState([]);
+    const[ businessImages, setbusinessImages] = useState([])
-  const [image, setImage] = useState({
+    const [image, setImage] = useState({
-    album_id: 0,
+        album_id: 0,
-    picture: "",
+        picture:""
-  });
+    })
-  const [file_name, setfile_Name] = useState("");
+    const [file_name, setfile_Name] = useState("")
-  const image1URL =
+    const image1URL = "http://localhost:8000/media/smugimages/20140612-_JMR1361.jpg-5bbe21e5-19b0-4aae-b238-5c8791bc0b96.jpeg"
-    "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 image2URL =
+    const image3URL = "http://localhost:8000/media/smugimages/20140609-_JMR1159.jpg-fbcfa699-9136-4cb0-8e0a-a36694554af7.jpeg"
-    "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(() => {
+    useEffect( 
-    getImages().then((data) => setbusinessImages(data));
+        () => {
-  }, []);
+        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) => {
+    const getBase64 = (file, callback) => {
-    let imageCopy = { ...image };
+        const reader = new FileReader();
-    getBase64(event.target.files[0], (base64ImageString) => {
+        reader.addEventListener('load', () => callback(reader.result));
-      imageCopy.picture = base64ImageString;
+        reader.readAsDataURL(file);
-      setfile_Name(event.target.files[0].name);
+    }
-      setImage(imageCopy);
+    
-      console.log("Base64 of file is", base64ImageString);
+    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
+        });
+    }
 
-      // 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 resetFileNameOnUpload = (default_text) => {
+}
-    let def_text = document.getElementById("image_upload");
+const defaultImageState = 
-    def_text.files[0].name = default_text;
+    {
-  };
+        album_id:0,
-  const defaultImageState = {
+        picture:""
-    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.
+    // 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 = () => {
+// const randomizeDisplayImages = () => {
-  //     let count = 0
+//     let count = 0
-  //     do (
+//     do (
-  //          for pic of businessImages
+//          for pic of businessImages       
-  //         )
+//         )
-  //         while count <= 3
+//         while count <= 3
+            
+// }
 
-  // }
 
-  return (
+    return(
-    <>
+        <>
-      <h1>SmugFolio</h1>
+        <h1>SmugFolio</h1>
-      <input
+        <input label="Browse for image file to upload" type="file" id="image_upload" onChange={createImageString} />
-        label="Browse for image file to upload"
+ <input type="hidden" name="image_id" value={image.id} />
-        type="file"
+ <button onClick={
-        id="image_upload"
+     () => 
-        onChange={createImageString}
+ { postImages(image, file_name)
-      />
+ .then((image) => history.push(`/SelectTags/${image.id}`))
-      <input type="hidden" name="image_id" value={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"))
-      <button
+     // Upload the stringified image that is stored in state
-        onClick={() => {
+ }}>Upload</button>
-          postImages(image, file_name).then((image) =>
+ <div>
-            history.push(`/SelectTags/${image.id}`),
+ <img src={image1URL} width={616} height={408} ></img>
-          );
+ <img src={image2URL} width={616} height={408} ></img>
-          // 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"))
+ <img src={image3URL} width={616} height={408} ></img>
-          // Upload the stringified image that is stored in state
+ </div>
-        }}
+        </>
-      >
+    )
-        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

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

src/images/MyImageManager.js

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

src/images/MyImages.js

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

src/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }

src/index.js

@@ -1,17 +1,17 @@
-import React from "react";
+import React from 'react';
-import ReactDOM from "react-dom";
+import ReactDOM from 'react-dom';
-import "./index.css";
+import './index.css';
-import reportWebVitals from "./reportWebVitals";
+import reportWebVitals from './reportWebVitals';
-import { BrowserRouter as Router } from "react-router-dom";
+import { BrowserRouter as Router } from 'react-router-dom';
-import { SmugFolio } from "./SmugFolio";
+import { SmugFolio } from './SmugFolio';
 
 ReactDOM.render(
   <React.StrictMode>
     <Router>
-      <SmugFolio />
+      <SmugFolio/>
     </Router>
   </React.StrictMode>,
-  document.getElementById("root"),
+  document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function

src/nav/NavBar.js

@@ -1,48 +1,42 @@
-import React from "react";
+import React from "react"
-import { Link, useHistory } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom"
+
 
 export const NavBar = () => {
-  const history = useHistory();
+    const history = useHistory()
-  return (
+    return (
-    <ul className="navbar">
+        
-      <li className="navbar__item">
+        <ul className="navbar">
-        <Link to={"/"}>Upload Images</Link>
+            <li className="navbar__item">
-      </li>
+                <Link to={ "/"} >Upload Images</Link>
-      <li className="navbar__item">
+            </li>
-        <Link to={"/MyImages"}>My Images</Link>
+            <li className="navbar__item">
-      </li>
+                <Link to={"/MyImages"}>My Images</Link>
-      <li className="navbar__item">
+            </li>
-        <Link to={"/PhotosByTag"}> Explore Images by Tag</Link>
+            {/* <li className="navbar__item">
-      </li>
+              <Link to={"/PhotosByTag"}>  Explore Images by Tag</Link>
-      <li className="navbar__item">
+            </li> */}
-        <Link to={"/Profile"}>My Profile</Link>
+            <li className="navbar__item">
-      </li>
+               <Link to={"/Profile"}>My Profile</Link>
-      {localStorage.getItem("sf_token") !== null ? (
+            </li>
-        <li className="nav-item">
+            {
-          <button
+                (localStorage.getItem("sf_token") !== null) ?
-            className="nav-link fakeLink"
+                    <li className="nav-item">
-            onClick={() => {
+                        <button className="nav-link fakeLink"
-              localStorage.removeItem("sf_token");
+                            onClick={() => {
-              history.push({ pathname: "/login" });
+                                localStorage.removeItem("sf_token")
-            }}
+                                history.push({ pathname: "/login" })
-          >
+                            }}
-            Logout
+                        >Logout</button>
-          </button>
+                    </li> :
-        </li>
+                    <>
-      ) : (
+                        <li className="nav-item">
-        <>
+                            <Link className="nav-link" to="/login">Login</Link>
-          <li className="nav-item">
+                        </li>
-            <Link className="nav-link" to="/login">
+                        <li className="nav-item">
-              Login
+                            <Link className="nav-link" to="/register">Register</Link>
-            </Link>
+                        </li>
-          </li>
+                    </>
-          <li className="nav-item">
+            }        </ul>
-            <Link className="nav-link" to="/register">
+    )
-              Register
+}
-            </Link>
-          </li>
-        </>
-      )}{" "}
-    </ul>
-  );
-};

src/profile/EditProfile.js

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

src/profile/Profile.js

@@ -1,34 +1,28 @@
-import React, { useState, useEffect } from "react";
+import React, {useState, useEffect} from "react";
-import { useHistory, useParams } from "react-router-dom";
+import { useHistory,useParams } from "react-router-dom";
 import { getSmug_UserById } from "./ProfileManager";
 
 export const Profile = () => {
-  const [currentuser, setcurrentuser] = useState(
+    const [currentuser, setcurrentuser] = useState(localStorage.getItem("smug_user_id"))
-    localStorage.getItem("smug_user_id"),
+    const [smug_user, setsmuguser] = useState({})
-  );
-  const [smug_user, setsmuguser] = useState({});
 
-  useEffect(() => {
+    useEffect( 
-    getSmug_UserById(currentuser).then((data) => setsmuguser(data));
+        () => {
-  }, []);
+        getSmug_UserById(currentuser).then(data => setsmuguser(data))
-  // How to filter a user by their uid? Not quite sure
+     },[]
-  return (
+     )
+// How to filter a user by their uid? Not quite sure
+return (
     <>
-      <h2>My Profile</h2>
+    <h2>My Profile</h2>
-      <div>
+    <div>
-        <p> Username: {smug_user.user.username}</p>
+            <p> Username: {smug_user.user.username}</p>
-        <p> Email: {smug_user.user.email}</p>
+            <p> Email: {smug_user.user.email}</p>
-        <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>
-          Name: {smug_user.user.first_name} {smug_user.user.last_name}
+            <p> User is staff? {smug_user.user.is_staff ? "Yes" : "No"}</p>
-        </p>
+
-        <p>
+    </div>
-          {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/profile/ProfileManager.js

@@ -1,18 +1,22 @@
 export const getSmug_UserById = (id) => {
-  return fetch(`http://localhost:8000/smug_users/${id}`, {
+    return fetch(`http://localhost:8000/smug_users/${id}`, {
-    headers: {
+        headers:{
-      Authorization: `Token ${localStorage.getItem("sf_token")}`,
+            "Authorization": `Token ${localStorage.getItem("sf_token")}`
-    },
+        }
-  }).then((response) => response.json());
+    })
-};
+        .then(response => response.json())
+}
 
 export const putSmug_User = (editedProfile) => {
-  return fetch(`http://localhost:8000/games/${editedProfile.id}`, {
+    return fetch(`http://localhost:8000/games/${editedProfile.id}`, {
-    method: "PUT",
+        method: "PUT",
-    body: JSON.stringify(editedProfile),
+        body: JSON.stringify(
-    headers: {
+            editedProfile 
-      Authorization: `Token ${localStorage.getItem("sf_token")}`,
+        ),
-      "Content-Type": "Application/json",
+        headers:{
-    },
+            "Authorization": `Token ${localStorage.getItem("sf_token")}`,
-  });
+            "Content-Type": "Application/json"
-};
+            }
+        }
+    )
+}

src/reportWebVitals.js

@@ -1,6 +1,6 @@
-const reportWebVitals = (onPerfEntry) => {
+const reportWebVitals = onPerfEntry => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);

src/setupTests.js

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';

src/tags/PhotosByTag.js

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

src/tags/SelectTags.js

@@ -1,61 +1,60 @@
-import react, { useState, useEffect, useRef } from "react";
+import react, {useState, useEffect, useRef} from "react"
-import { useHistory, useParams } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom"
-import { getTags, addTagsToImages } from "./TagManager";
+import { getTags, addTagsToImages } from "./TagManager"
 
 export const SelectTags = () => {
-  const [tags, setTags] = useState([]);
+    const [tags, setTags] = useState([])
-  const [tag_selections, setTagSelections] = useState(
+    const [tag_selections, setTagSelections] = useState( new Array(tags.length).fill(0))
-    new Array(tags.length).fill(0),
+    let { id } = useParams();
-  );
+    const tagscopy = [...tags]
-  let { id } = useParams();
+    
-  const tagscopy = [...tags];
+    useEffect( 
+        () => {
+        getTags().then(data => setTags(data))
+     },[]
+     )
 
-  useEffect(() => {
+     const changefunction = (e) => {
-    getTags().then((data) => setTags(data));
+         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)
+        }
+     }
 
-  const changefunction = (e) => {
+     return(
-    const checkboxID = e.target.value;
+         <>
-    let tagselectioncopy = [...tag_selections];
+            <h2>Select Tags for Images</h2>
-    if (tagselectioncopy.find((id) => id === checkboxID)) {
-      tagselectioncopy = tagselectioncopy.filter((id) => id !== checkboxID);
-      setTagSelections(tagselectioncopy);
-    } else {
-      tagselectioncopy.push(checkboxID);
-      setTagSelections(tagselectioncopy);
-    }
-  };
 
-  return (
+            <div>
-    <>
+                
-      <h2>Select Tags for Images</h2>
+            {tagscopy.map((tagname) => {
-
+                    return(
-      <div>
+                        <>
-        {tagscopy.map((tagname) => {
+                        <input type="checkbox" name="imagetags" value={tagname.id} id= "imagetags" onChange={
-          return (
+                            (e) => {changefunction(e) }
-            <>
+                        } />
-              <input
+                        <label for="imagetags">{tagname.image_tag_name}</label>
-                type="checkbox"
+                        </>
-                name="imagetags"
+                    )
-                value={tagname.id}
+                }
-                id="imagetags"
+                )
-                onChange={(e) => {
+                
-                  changefunction(e);
+            }
-                }}
+            < button onClick = {
-              />
+                () => {
-              <label for="imagetags">{tagname.image_tag_name}</label>
+                    const submitOBJ = {image_tags:tag_selections}
-            </>
+                    addTagsToImages( submitOBJ, id)
-          );
+                }
-        })}
+            }
-        <button
+            
-          onClick={() => {
+            
-            const submitOBJ = { image_tags: tag_selections };
+            >Submit</button>
-            addTagsToImages(submitOBJ, id);
+         </div>
-          }}
+         
-        >
+         </>
-          Submit
+     )
-        </button>
+}
-      </div>
-    </>
-  );
-};

src/tags/TagManager.js

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