From f83e5ada95a5b007a446e5319b6283a868aaf61e Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Sun, 20 Mar 2022 18:58:07 -0500 Subject: [PATCH 1/2] saving completed home view --- .gitignore | 2 ++ src/home/Home.js | 67 +++++++++++++++++++++++++++++++++++++++++ src/home/HomeManager.js | 14 +++++++++ src/nav/NavBar.js | 40 +++++++++++++++++++++--- src/tags/TagManager.js | 19 +++++++++--- 5 files changed, 133 insertions(+), 9 deletions(-) diff --git a/.gitignore b/.gitignore index 4d29575..4aabbd7 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +ProjectNotes.md* diff --git a/src/home/Home.js b/src/home/Home.js index de834c0..9f3de2d 100644 --- a/src/home/Home.js +++ b/src/home/Home.js @@ -1,13 +1,80 @@ import React, {useState, useEffect} from "react"; import { useHistory,useParams } from "react-router-dom"; +import { postImages, getImages } from "./HomeManager"; export const Home = () => { const homeImages = useState([]) const history = useHistory + const[ businessImages, setbusinessImages] = useState([]) + const [image, setImage] = useState({ + album_id: 0, + picture:"" + }) + const [file_name, setfile_Name] = useState("") + const image1URL = "http://localhost:8000/media/smugimages/20140612-_JMR1361.jpg-5bbe21e5-19b0-4aae-b238-5c8791bc0b96.jpeg" + const image2URL = "http://localhost:8000/media/smugimages/20141224-_JMR5400.jpg-b7c8b0a6-33dc-4cd3-902b-a18538eb2283.jpeg" + const image3URL = "http://localhost:8000/media/smugimages/20140609-_JMR1159.jpg-fbcfa699-9136-4cb0-8e0a-a36694554af7.jpeg" + + useEffect( + () => { + getImages().then(data => setbusinessImages(data)) + },[] + ) + + + const getBase64 = (file, callback) => { + const reader = new FileReader(); + reader.addEventListener('load', () => callback(reader.result)); + reader.readAsDataURL(file); + } + + const createImageString = (event) => { + let imageCopy = {...image} + getBase64(event.target.files[0], (base64ImageString) => + {imageCopy.picture = base64ImageString + setfile_Name(event.target.files[0].name) + setImage(imageCopy) + console.log("Base64 of file is", base64ImageString); + + // Update a component state variable to the value of base64ImageString + }); + } + +const resetFileNameOnUpload = (default_text) => { + let def_text = document.getElementById("image_upload") + def_text.files[0].name = default_text + +} +const defaultImageState = + { + album_id:0, + picture:"" + } + + // this code meant to randomize the display images. First concentrate on getting your images to display. Then worry about limiting them and randomization. +// const randomizeDisplayImages = () => { +// let count = 0 +// do ( +// for pic of businessImages +// ) +// while count <= 3 + +// } + return( <>

SmugFolio

+ + + +
+ + + +
) } \ No newline at end of file diff --git a/src/home/HomeManager.js b/src/home/HomeManager.js index 4121a29..cf64b34 100644 --- a/src/home/HomeManager.js +++ b/src/home/HomeManager.js @@ -5,4 +5,18 @@ export const getImages = () => { } }) .then(response => response.json()) +} + +export const postImages = (image, file_name) => { + return fetch(`http://localhost:8000/images?file_name=${file_name}`, { + method: "POST", + headers:{ + "Authorization": `Token ${localStorage.getItem("sf_token")}`, + "Content-Type": "application/json" + }, + body:JSON.stringify(image), + } + ) + .then(response => response.json()) + } \ No newline at end of file diff --git a/src/nav/NavBar.js b/src/nav/NavBar.js index 7a71a34..a1ad8b9 100644 --- a/src/nav/NavBar.js +++ b/src/nav/NavBar.js @@ -1,6 +1,38 @@ -import react, {useState, useEffect} from "react" -import { useHistory } from "react-router-dom" +import React from "react" +import { Link, useHistory } from "react-router-dom" + export const NavBar = () => { - -} \ No newline at end of file + const history = useHistory() + return ( + + ) +} diff --git a/src/tags/TagManager.js b/src/tags/TagManager.js index 2b077f1..75f9063 100644 --- a/src/tags/TagManager.js +++ b/src/tags/TagManager.js @@ -1,14 +1,23 @@ +export const getImages = () => { + return fetch("http://localhost:8000/tags", { + headers:{ + "Authorization": `Token ${localStorage.getItem("sf_token")}` + } + }) + .then(response => response.json()) +} - -export const createTags = (event) => { +export const createTags = (tag) => { return fetch(`http://localhost:8000/events`, { method: "POST", headers:{ "Authorization": `Token ${localStorage.getItem("sf_token")}`, "Content-Type": "Application/json" - } + }, + body:JSON.stringify(tag) } + ) - .then(response => response.json()) -} \ No newline at end of file +.then(response => response.json()) + } \ No newline at end of file -- 2.47.3 From d56456e7a2a50ae2a6f3f5ce3fabf1b5079c6d2e Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Mon, 21 Mar 2022 11:15:02 -0500 Subject: [PATCH 2/2] Completed home page and nav bar --- src/ApplicationViews.js | 18 +++++++++++++++++- src/home/Home.js | 9 +++++++-- src/images/MyImages.js | 6 ++++++ src/nav/NavBar.js | 10 +++++++--- src/profile/EditProfile.js | 6 ++++++ src/profile/Profile.js | 6 ++++++ src/tags/PhotosByTag.js | 6 ++++++ src/tags/SelectTags.js | 17 +++++++++++++++++ src/tags/TagManager.js | 3 ++- 9 files changed, 74 insertions(+), 7 deletions(-) diff --git a/src/ApplicationViews.js b/src/ApplicationViews.js index 958727f..9273003 100644 --- a/src/ApplicationViews.js +++ b/src/ApplicationViews.js @@ -1,6 +1,10 @@ import React from "react"; import { Home } from "./home/Home"; import { Route } from "react-router-dom"; +import { SelectTags } from "./tags/SelectTags"; +import { PhotosByTag } from "./tags/PhotosByTag"; +import { MyImages } from "./images/MyImages"; +import { Profile } from "./profile/Profile"; export const ApplicationViews = () => { @@ -12,7 +16,19 @@ export const ApplicationViews = () => {
- + + + + + + + + + + + + +
) diff --git a/src/home/Home.js b/src/home/Home.js index 9f3de2d..feaa4da 100644 --- a/src/home/Home.js +++ b/src/home/Home.js @@ -4,7 +4,7 @@ import { postImages, getImages } from "./HomeManager"; export const Home = () => { const homeImages = useState([]) - const history = useHistory + const history = useHistory() const[ businessImages, setbusinessImages] = useState([]) const [image, setImage] = useState({ album_id: 0, @@ -67,7 +67,12 @@ const defaultImageState =

SmugFolio

-
diff --git a/src/images/MyImages.js b/src/images/MyImages.js index e69de29..9d7c14b 100644 --- a/src/images/MyImages.js +++ b/src/images/MyImages.js @@ -0,0 +1,6 @@ +import React, {useState, useEffect} from "react"; +import { useHistory,useParams } from "react-router-dom"; + +export const MyImages = () => { + +} \ No newline at end of file diff --git a/src/nav/NavBar.js b/src/nav/NavBar.js index a1ad8b9..bf24b7e 100644 --- a/src/nav/NavBar.js +++ b/src/nav/NavBar.js @@ -5,15 +5,19 @@ import { Link, useHistory } from "react-router-dom" export const NavBar = () => { const history = useHistory() return ( +
  • - My Images + Upload Images
  • - Explore Images by Tag + My Images
  • - My Profile + Explore Images by Tag +
    • +
  • + My Profile
    • { (localStorage.getItem("sf_token") !== null) ? diff --git a/src/profile/EditProfile.js b/src/profile/EditProfile.js index e69de29..5118bbe 100644 --- a/src/profile/EditProfile.js +++ b/src/profile/EditProfile.js @@ -0,0 +1,6 @@ +import React, {useState, useEffect} from "react"; +import { useHistory,useParams } from "react-router-dom"; + +export const EditProfile = () => { + +} \ No newline at end of file diff --git a/src/profile/Profile.js b/src/profile/Profile.js index e69de29..027c5ea 100644 --- a/src/profile/Profile.js +++ b/src/profile/Profile.js @@ -0,0 +1,6 @@ +import React, {useState, useEffect} from "react"; +import { useHistory,useParams } from "react-router-dom"; + +export const Profile = () => { + +} \ No newline at end of file diff --git a/src/tags/PhotosByTag.js b/src/tags/PhotosByTag.js index e69de29..9e5aa19 100644 --- a/src/tags/PhotosByTag.js +++ b/src/tags/PhotosByTag.js @@ -0,0 +1,6 @@ +import React, {useState, useEffect} from "react"; +import { useHistory,useParams } from "react-router-dom"; + +export const PhotosByTag = () => { + +} \ No newline at end of file diff --git a/src/tags/SelectTags.js b/src/tags/SelectTags.js index e69de29..5f91570 100644 --- a/src/tags/SelectTags.js +++ b/src/tags/SelectTags.js @@ -0,0 +1,17 @@ +import react, {useState, useEffect} from "react" +import { useHistory, useParams } from "react-router-dom" +import { getTags } from "./TagManager" + +export const SelectTags = () => { + const [tags, setTags] = useState([]) + + useEffect( + () => { + getTags().then(data => setTags(data)) + },[] + ) + + return( +

    Select Tags for Images

    + ) +} \ No newline at end of file diff --git a/src/tags/TagManager.js b/src/tags/TagManager.js index 75f9063..afc05a0 100644 --- a/src/tags/TagManager.js +++ b/src/tags/TagManager.js @@ -1,4 +1,4 @@ -export const getImages = () => { +export const getTags = () => { return fetch("http://localhost:8000/tags", { headers:{ "Authorization": `Token ${localStorage.getItem("sf_token")}` @@ -8,6 +8,7 @@ export const getImages = () => { } + export const createTags = (tag) => { return fetch(`http://localhost:8000/events`, { method: "POST", -- 2.47.3