added prettier and formatted code

.prettierignore

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

.prettierrc

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

package.json

@@ -35,5 +35,8 @@
       "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,31 +6,26 @@ 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 />
-            </Route >
-        <Route path = "/SelectTags/:id">
-            <SelectTags />
-                
+          <Home />
         </Route>
-        <Route exact path = "/PhotosByTag">
-            <PhotosByTag />
+        <Route path="/SelectTags/:id">
+          <SelectTags />
+        </Route>
+        <Route exact path="/PhotosByTag">
+          <PhotosByTag />
         </Route>
         <Route exact path="/Profile">
-            <Profile />
+          <Profile />
         </Route>
-        <Route exact path ="/MyImages" >
-            <MyImages />
+        <Route exact path="/MyImages">
+          <MyImages />
         </Route>
-        </main>
+      </main>
     </>
-    )
-}
+  );
+};

src/SmugFolio.js

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

src/auth/Login.js

@@ -1,68 +1,90 @@
-import React, { useRef } from "react"
-import { Link, useHistory } from "react-router-dom"
-
+import React, { useRef } from "react";
+import { Link, useHistory } from "react-router-dom";
 
 export const Login = () => {
-    const username = useRef()
-    const password = useRef()
-    const invalidDialog = useRef()
-    const history = useHistory()
+  const username = useRef();
+  const password = useRef();
+  const invalidDialog = useRef();
+  const history = useHistory();
 
-    const handleLogin = (e) => {
-        e.preventDefault()
+  const handleLogin = (e) => {
+    e.preventDefault();
 
-        return fetch("http://127.0.0.1:8000/login", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                "Accept": "application/json"
-            },
-            body: JSON.stringify({
-                username: username.current.value,
-                password: password.current.value
-            })
-        })
-            .then(res => res.json())
-            .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 {
-                    invalidDialog.current.showModal()
-                }
-            })
-    }
+    return fetch("http://127.0.0.1:8000/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({
+        username: username.current.value,
+        password: password.current.value,
+      }),
+    })
+      .then((res) => res.json())
+      .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 {
+          invalidDialog.current.showModal();
+        }
+      });
+  };
 
-    return (
-        <main className="container--login">
-            <dialog className="dialog dialog--auth" ref={invalidDialog}>
-                <div>Username or password was not valid.</div>
-                <button className="button--close" onClick={e => invalidDialog.current.close()}>Close</button>
-            </dialog>
-            <section>
-                <form className="form--login" onSubmit={handleLogin}>
-                    <h1>SmugFolio</h1>
-                    <h2>Please sign in</h2>
-                    <fieldset>
-                        <label htmlFor="inputUsername"> Username</label>
-                        <input ref={username} type="username" id="username" className="form-control" placeholder="Username" required autoFocus />
-                    </fieldset>
-                    <fieldset>
-                        <label htmlFor="inputPassword"> Password </label>
-                        <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>
-    )
-}
+  return (
+    <main className="container--login">
+      <dialog className="dialog dialog--auth" ref={invalidDialog}>
+        <div>Username or password was not valid.</div>
+        <button
+          className="button--close"
+          onClick={(e) => invalidDialog.current.close()}
+        >
+          Close
+        </button>
+      </dialog>
+      <section>
+        <form className="form--login" onSubmit={handleLogin}>
+          <h1>SmugFolio</h1>
+          <h2>Please sign in</h2>
+          <fieldset>
+            <label htmlFor="inputUsername"> Username</label>
+            <input
+              ref={username}
+              type="username"
+              id="username"
+              className="form-control"
+              placeholder="Username"
+              required
+              autoFocus
+            />
+          </fieldset>
+          <fieldset>
+            <label htmlFor="inputPassword"> Password </label>
+            <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,93 +1,143 @@
-import React, { useRef } from "react"
-import { Link, useHistory } from "react-router-dom"
-
+import React, { useRef } from "react";
+import { Link, useHistory } from "react-router-dom";
 
 export const Register = () => {
-    const firstName = useRef()
-    const lastName = useRef()
-    const username = useRef()
-    const email = useRef()
-    const password = useRef()
-    const verifyPassword = useRef()
-    const passwordDialog = useRef()
-    const history = useHistory()
+  const firstName = useRef();
+  const lastName = useRef();
+  const username = useRef();
+  const email = useRef();
+  const password = useRef();
+  const verifyPassword = useRef();
+  const passwordDialog = useRef();
+  const history = useHistory();
 
-    const handleRegister = (e) => {
-        e.preventDefault()
+  const handleRegister = (e) => {
+    e.preventDefault();
 
-        if (password.current.value === verifyPassword.current.value) {
-            const newUser = {
-                "username": username.current.value,
-                "email": email.current.value,
-                "first_name": firstName.current.value,
-                "last_name": lastName.current.value,
-                "password": password.current.value
-            }
+    if (password.current.value === verifyPassword.current.value) {
+      const newUser = {
+        username: username.current.value,
+        email: email.current.value,
+        first_name: firstName.current.value,
+        last_name: lastName.current.value,
+        password: password.current.value,
+      };
 
-            return fetch("http://127.0.0.1:8000/register", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    "Accept": "application/json"
-                },
-                body: JSON.stringify(newUser)
-            })
-                .then(res => res.json())
-                .then(res => {
-                    if ("token" in res) {
-                        localStorage.setItem("sf_token", res.token)
-                        localStorage.setItem("smug_user_id",res.smug_user)
-                        history.push("/")
-                    }
-                })
-        } else {
-            passwordDialog.current.showModal()
-        }
+      return fetch("http://127.0.0.1:8000/register", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify(newUser),
+      })
+        .then((res) => res.json())
+        .then((res) => {
+          if ("token" in res) {
+            localStorage.setItem("sf_token", res.token);
+            localStorage.setItem("smug_user_id", res.smug_user);
+            history.push("/");
+          }
+        });
+    } else {
+      passwordDialog.current.showModal();
     }
+  };
 
-    return (
-        <main style={{ textAlign: "center" }}>
+  return (
+    <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>
 
-            <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}>
-                <h1 className="h3 mb-3 font-weight-normal">Register an account</h1>
-                <fieldset>
-                    <label htmlFor="firstName"> First Name </label>
-                    <input ref={firstName} type="text" name="firstName" className="form-control" placeholder="First name" required autoFocus />
-                </fieldset>
-                <fieldset>
-                    <label htmlFor="lastName"> Last Name </label>
-                    <input ref={lastName} type="text" name="lastName" className="form-control" placeholder="Last name" required />
-                </fieldset>
-                <fieldset>
-                    <label htmlFor="inputUsername">Username</label>
-                    <input ref={username} type="text" name="username" className="form-control" placeholder="Username" required />
-                </fieldset>
-                <fieldset>
-                    <label htmlFor="inputEmail">Email</label>
-                    <input ref={email} type="text" 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>
-    )
-}
+      <form className="form--login" onSubmit={handleRegister}>
+        <h1 className="h3 mb-3 font-weight-normal">Register an account</h1>
+        <fieldset>
+          <label htmlFor="firstName"> First Name </label>
+          <input
+            ref={firstName}
+            type="text"
+            name="firstName"
+            className="form-control"
+            placeholder="First name"
+            required
+            autoFocus
+          />
+        </fieldset>
+        <fieldset>
+          <label htmlFor="lastName"> Last Name </label>
+          <input
+            ref={lastName}
+            type="text"
+            name="lastName"
+            className="form-control"
+            placeholder="Last name"
+            required
+          />
+        </fieldset>
+        <fieldset>
+          <label htmlFor="inputUsername">Username</label>
+          <input
+            ref={username}
+            type="text"
+            name="username"
+            className="form-control"
+            placeholder="Username"
+            required
+          />
+        </fieldset>
+        <fieldset>
+          <label htmlFor="inputEmail">Email</label>
+          <input
+            ref={email}
+            type="text"
+            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,86 +1,91 @@
-import React, {useState, useEffect} from "react";
-import { useHistory,useParams } from "react-router-dom";
+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({
-        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"
+  const homeImages = useState([]);
+  const { id } = useParams();
+  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))
-     },[]
-     )
+  useEffect(() => {
+    getImages().then((data) => setbusinessImages(data));
+  }, []);
 
+  const getBase64 = (file, callback) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => callback(reader.result));
+    reader.readAsDataURL(file);
+  };
 
-    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 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);
 
-const resetFileNameOnUpload = (default_text) => {
-    let def_text = document.getElementById("image_upload")
-    def_text.files[0].name = default_text
+      // Update a component state variable to the value of base64ImageString
+    });
+  };
 
-}
-const defaultImageState = 
-    {
-        album_id:0,
-        picture:""
-    }   
+  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
-            
-// }
+  // 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((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>
- <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>
-        </>
-    )
-}
+  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((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>
+      <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,22 +1,18 @@
 export const getImages = () => {
-    return fetch("http://localhost:8000/images", {
-        headers:{
-            "Authorization": `Token ${localStorage.getItem("sf_token")}`
-        }
-    })
-        .then(response => response.json())
-}
+  return fetch("http://localhost:8000/images", {
+    headers: {
+      Authorization: `Token ${localStorage.getItem("sf_token")}`,
+    },
+  }).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())
-    
-}
+  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/MyImageManager.js

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

src/images/MyImages.js

@@ -1,36 +1,44 @@
-import React, {useState, useEffect} from "react";
-import { useHistory,useParams } from "react-router-dom";
+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();
+  const [allImages, setAllImages] = useState([]);
+  const [imageData, setImageData] = useState([]);
+  const history = useHistory();
+  let { id } = useParams();
 
-    
+  useEffect(() => {
+    getImageData().then((data) => setImageData(data));
+  }, []);
 
-    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>
+  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/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "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 ReactDOM from 'react-dom';
-import './index.css';
-import reportWebVitals from './reportWebVitals';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { SmugFolio } from './SmugFolio';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter as Router } from "react-router-dom";
+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,42 +1,48 @@
-import React from "react"
-import { Link, 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={ "/"} >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>
-    )
-}
+  const history = useHistory();
+  return (
+    <ul className="navbar">
+      <li className="navbar__item">
+        <Link to={"/"}>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

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

src/profile/Profile.js

@@ -1,28 +1,34 @@
-import React, {useState, useEffect} from "react";
-import { useHistory,useParams } from "react-router-dom";
+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({})
+  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 (
+  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>
+      <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/profile/ProfileManager.js

@@ -1,22 +1,18 @@
 export const getSmug_UserById = (id) => {
-    return fetch(`http://localhost:8000/smug_users/${id}`, {
-        headers:{
-            "Authorization": `Token ${localStorage.getItem("sf_token")}`
-        }
-    })
-        .then(response => response.json())
-}
+  return fetch(`http://localhost:8000/smug_users/${id}`, {
+    headers: {
+      Authorization: `Token ${localStorage.getItem("sf_token")}`,
+    },
+  }).then((response) => response.json());
+};
 
 export const putSmug_User = (editedProfile) => {
-    return fetch(`http://localhost:8000/games/${editedProfile.id}`, {
-        method: "PUT",
-        body: JSON.stringify(
-            editedProfile 
-        ),
-        headers:{
-            "Authorization": `Token ${localStorage.getItem("sf_token")}`,
-            "Content-Type": "Application/json"
-            }
-        }
-    )
-}
+  return fetch(`http://localhost:8000/games/${editedProfile.id}`, {
+    method: "PUT",
+    body: JSON.stringify(editedProfile),
+    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 { useHistory,useParams } from "react-router-dom";
+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([])
+  const [imageData, setImageData] = useState([]);
+  const [tagdata, settagdata] = useState([]);
 
-    useEffect( 
-        () => {
-        getImageData().then(data => setImageData(data))
-     },[]
-     )
+  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>
-     </>
-     )
-}
+  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,60 +1,61 @@
-import react, {useState, useEffect, useRef} from "react"
-import { useHistory, useParams } from "react-router-dom"
-import { getTags, addTagsToImages } from "./TagManager"
+import react, { useState, useEffect, useRef } from "react";
+import { useHistory, useParams } from "react-router-dom";
+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( 
-        () => {
-        getTags().then(data => setTags(data))
-     },[]
-     )
+  const [tags, setTags] = useState([]);
+  const [tag_selections, setTagSelections] = useState(
+    new Array(tags.length).fill(0),
+  );
+  let { id } = useParams();
+  const tagscopy = [...tags];
 
-     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)
-        }
-     }
+  useEffect(() => {
+    getTags().then((data) => setTags(data));
+  }, []);
 
-     return(
-         <>
-            <h2>Select Tags for Images</h2>
+  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);
+    }
+  };
 
-            <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>
-         
-         </>
-     )
-}
+  return (
+    <>
+      <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,36 +1,29 @@
 export const getTags = () => {
-    return fetch("http://localhost:8000/image_tags", {
-        headers:{
-            "Authorization": `Token ${localStorage.getItem("sf_token")}`
-        }
-    })
-        .then(response => response.json())
-}
-
-
+  return fetch("http://localhost:8000/image_tags", {
+    headers: {
+      Authorization: `Token ${localStorage.getItem("sf_token")}`,
+    },
+  }).then((response) => response.json());
+};
 
 export const createTags = (tag) => {
-    return fetch(`http://localhost:8000/image_tags`, {
-        method: "POST",
-        headers:{
-            "Authorization": `Token ${localStorage.getItem("sf_token")}`,
-            "Content-Type": "Application/json"
-                },
-        body:JSON.stringify(tag)
-            }
-            
-        )
-.then(response => response.json())
- }
+  return fetch(`http://localhost:8000/image_tags`, {
+    method: "POST",
+    headers: {
+      Authorization: `Token ${localStorage.getItem("sf_token")}`,
+      "Content-Type": "Application/json",
+    },
+    body: JSON.stringify(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)
-        }
-    )
- }
+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),
+  });
+};