diff --git a/react-app/src/App.js b/react-app/src/App.js index ce7850d..9fe125a 100644 --- a/react-app/src/App.js +++ b/react-app/src/App.js @@ -1,126 +1,82 @@ -import React, { useState, useEffect } from "react"; -import { BrowserRouter, Route, Switch } from "react-router-dom"; -import LoginForm from "./components/auth/LoginForm"; -import SignUpForm from "./components/auth/SignUpForm"; -import NavBar from "./components/NavBar"; -import ProtectedRoute from "./components/auth/ProtectedRoute"; -import Profile from "./components/Profile"; -import Feed from "./components/feed"; -import Post from "./components/post"; -import UserEdit from "./components/user-edit/UserEdit"; +import React, { useState, useEffect } from 'react'; +import { BrowserRouter, Route, Switch } from 'react-router-dom'; +import LoginForm from './components/auth/LoginForm'; +import SignUpForm from './components/auth/SignUpForm'; +import NavBar from './components/NavBar'; +import ProtectedRoute from './components/auth/ProtectedRoute'; +import Profile from './components/Profile'; +import Feed from './components/feed'; +import Post from './components/post'; +import UserEdit from './components/user-edit/UserEdit'; // import UploadUser from "./components/upload-post/UploadPost"; -import LandingPage from "./components/landing-page/LandingPage"; -import PostForm from "./components/upload-post/PostForm"; +import LandingPage from './components/landing-page/LandingPage'; +import PostForm from './components/upload-post/PostForm'; // import CommentForm from './components/comment/CommentForm'; -import { authenticate } from "./services/auth"; +import { authenticate } from './services/auth'; function App() { - const [authenticated, setAuthenticated] = useState(false); - const [loaded, setLoaded] = useState(false); - const [userdata, setUserdata] = useState({}); - // const [userprofile, setuserprofile] = useState(false); + const [authenticated, setAuthenticated] = useState(false); + const [loaded, setLoaded] = useState(false); + const [userdata, setUserdata] = useState({}); + // const [userprofile, setuserprofile] = useState(false); - useEffect(() => { - (async () => { - const user = await authenticate(); - // const { username } = useParams(); - // console.log("This is the user: " + username) - if (!user.errors) { - setAuthenticated(true); - setUserdata(user); - } - setLoaded(true); - })(); - }, []); + useEffect(() => { + (async () => { + const user = await authenticate(); + // const { username } = useParams(); + // console.log("This is the user: " + username) + if (!user.errors) { + setAuthenticated(true); + setUserdata(user); + } + setLoaded(true); + })(); + }, []); - if (!loaded) { - return null; - } + if (!loaded) { + return null; + } - return ( - - - - - - - - - - - - - - - - - - - - {/* - - */} - - - - - - - - - - {/* */} - - - - - - ); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* */} + + + + + + ); } export default App; diff --git a/react-app/src/components/Profile.js b/react-app/src/components/Profile.js index 8352457..53ead7f 100644 --- a/react-app/src/components/Profile.js +++ b/react-app/src/components/Profile.js @@ -1,374 +1,339 @@ -import React, { useEffect, useState } from "react"; -import { useParams } from "react-router-dom"; -import RecomendedPost from "./post/recomenedPost"; -import NumFollowers from "./NumFollowers"; -import NumFollowing from "./NumFollowing"; +import React, { useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; +import RecomendedPost from './post/recomenedPost'; +import NumFollowers from './NumFollowers'; +import NumFollowing from './NumFollowing'; function Profile(props) { - const [user, setUsers] = useState([]); - const [loaded, setLoaded] = useState(false); - const [loggedin, setLoggedin] = useState([]); - const [followingToFollow, setFollowingToFollow] = useState(false); - const [followToFollowing, setFollowToFollowing] = useState(false); - const [notFollowing, setNotFollowing] = useState(true); - const { username } = useParams(); - const userName = localStorage.getItem("IG_USERNAME"); - const following = loggedin.followingUserNames; + const [user, setUsers] = useState([]); + const [loaded, setLoaded] = useState(false); + const [loggedin, setLoggedin] = useState([]); + const [followingToFollow, setFollowingToFollow] = useState(false); + const [followToFollowing, setFollowToFollowing] = useState(false); + const [notFollowing, setNotFollowing] = useState(true); + const { username } = useParams(); + const userName = localStorage.getItem('IG_USERNAME'); + const following = loggedin.followingUserNames; - useEffect(() => { - setLoaded(false); - async function fetchData() { - const response = await fetch(`/api/users/${username}`); - const loggedInUser = await fetch(`/api/users/${userName}`); - const responseData = await response.json(); - const resData = await loggedInUser.json(); - setUsers(responseData); - setLoggedin(resData); - setLoaded(true); - } + useEffect(() => { + setLoaded(false); + async function fetchData() { + const response = await fetch(`/api/users/${username}`); + const loggedInUser = await fetch(`/api/users/${userName}`); + const responseData = await response.json(); + const resData = await loggedInUser.json(); + setUsers(responseData); + setLoggedin(resData); + setLoaded(true); + } - fetchData(); - }, [username, userName]); + fetchData(); + }, [username, userName]); - // let clickedFollowersButton = false; - // const clickedFollowers = (e) => { - // e.preventDefault(); - // const emptyDiv = window.document.querySelector(".clickable-element-userPage"); - // const followersWindow = window.document.getElementById("followersDiv"); - // if (clickedFollowersButton === false) { - // emptyDiv.style.display = "flex"; - // followersWindow.style.display = ""; - // clickedFollowersButton = true; - // } else { - // emptyDiv.style.display = "none"; - // followersWindow.style.display = "none"; - // clickedFollowersButton = false; - // e.stopPropagation(); - // return; - // } - // } + // let clickedFollowersButton = false; + // const clickedFollowers = (e) => { + // e.preventDefault(); + // const emptyDiv = window.document.querySelector(".clickable-element-userPage"); + // const followersWindow = window.document.getElementById("followersDiv"); + // if (clickedFollowersButton === false) { + // emptyDiv.style.display = "flex"; + // followersWindow.style.display = ""; + // clickedFollowersButton = true; + // } else { + // emptyDiv.style.display = "none"; + // followersWindow.style.display = "none"; + // clickedFollowersButton = false; + // e.stopPropagation(); + // return; + // } + // } - const overFollowing = () => { - const followButton = window.document.querySelector(".follow-button"); + const overFollowing = () => { + const followButton = window.document.querySelector('.follow-button'); - if (followButton === null) { - if ( - (followingToFollow === false && followToFollowing === false) || - notFollowing === false - ) { - const followingButton = window.document.querySelector( - ".following-button" - ); - followingButton.innerHTML = "Unfollow"; - } - } - }; + if (followButton === null) { + if ((followingToFollow === false && followToFollowing === false) || notFollowing === false) { + const followingButton = window.document.querySelector('.following-button'); + followingButton.innerHTML = 'Unfollow'; + } + } + }; - const leftFollowing = () => { - const followButton = window.document.querySelector(".follow-button"); - if (followButton === null) { - if ( - (followingToFollow === false && followToFollowing === false) || - notFollowing === false - ) { - const followingButton = window.document.querySelector( - ".following-button" - ); - followingButton.innerHTML = "Following"; - } - } - }; - const follow = async () => { - const followButton = window.document.querySelector(".follow-button"); - const followingButton = window.document.querySelector( - ".following-button" - ); + const leftFollowing = () => { + const followButton = window.document.querySelector('.follow-button'); + if (followButton === null) { + if ((followingToFollow === false && followToFollowing === false) || notFollowing === false) { + const followingButton = window.document.querySelector('.following-button'); + followingButton.innerHTML = 'Following'; + } + } + }; + const follow = async () => { + const followButton = window.document.querySelector('.follow-button'); + const followingButton = window.document.querySelector('.following-button'); - if (followButton === null) { - if ( - followingButton.innerHTML === "Following" || - followingButton.innerHTML === "Unfollow" - ) { - unFollow(); - setFollowingToFollow(false); - return; - } - } - if (followButton.innerHTML === "Follow") { - followButton.classList.remove("follow-button"); - followButton.classList.add("following-button"); - followButton.innerHTML = "Following"; - setFollowToFollowing(true); - setNotFollowing(false); - await fetch(`/api/users/${user.id}/follower`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - followerId: loggedin.id, - }), - }); - const response = await fetch(`/api/users/${username}`); - const result = await response.json(); - setUsers(result); - return; - } - }; - const unFollow = async () => { - const followingButton = window.document.querySelector( - ".following-button" - ); - const followButton = window.document.querySelector(".follow-button"); + if (followButton === null) { + if (followingButton.innerHTML === 'Following' || followingButton.innerHTML === 'Unfollow') { + unFollow(); + setFollowingToFollow(false); + return; + } + } + if (followButton.innerHTML === 'Follow') { + followButton.classList.remove('follow-button'); + followButton.classList.add('following-button'); + followButton.innerHTML = 'Following'; + setFollowToFollowing(true); + setNotFollowing(false); + await fetch(`/api/users/${user.id}/follower`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + followerId: loggedin.id, + }), + }); + const response = await fetch(`/api/users/${username}`); + const result = await response.json(); + setUsers(result); + return; + } + }; + const unFollow = async () => { + const followingButton = window.document.querySelector('.following-button'); + const followButton = window.document.querySelector('.follow-button'); - if (followingButton === null) { - if (followButton.innerHTML === "Follow") { - follow(); - setFollowToFollowing(false); - setFollowingToFollow(false); - return; - } - } - if ( - followingButton.innerHTML === "Unfollow" || - followingButton.innerHTML === "Following" - ) { - followingButton.classList.remove("following-button"); - followingButton.classList.add("follow-button"); - followingButton.innerHTML = "Follow"; - setFollowingToFollow(true); - await fetch(`/api/users/${user.id}/follower`, { - method: "DELETE", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - followerId: loggedin.id, - }), - }); - const response = await fetch(`/api/users/${username}`); - const result = await response.json(); - setUsers(result); - return; - } - }; + if (followingButton === null) { + if (followButton.innerHTML === 'Follow') { + follow(); + setFollowToFollowing(false); + setFollowingToFollow(false); + return; + } + } + if (followingButton.innerHTML === 'Unfollow' || followingButton.innerHTML === 'Following') { + followingButton.classList.remove('following-button'); + followingButton.classList.add('follow-button'); + followingButton.innerHTML = 'Follow'; + setFollowingToFollow(true); + await fetch(`/api/users/${user.id}/follower`, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + followerId: loggedin.id, + }), + }); + const response = await fetch(`/api/users/${username}`); + const result = await response.json(); + setUsers(result); + return; + } + }; - return ( - loaded && ( -
-
-
-
-
- - profile - -
-
-
-
-

- {user.username} -

- {username !== userName && - following.includes(`${username}`) === false ? ( -
- -
- ) : username !== userName ? ( -
- -
- ) : ( - <> - )} -
-
    -
  • - - - {user.posts.length}{" "} - - posts - -
    • -
  • - - - {" "} - - followers - -
    • -
  • - - - {" "} - - following - -
    • -
-
-

{user.bio}

-
-
-
-
- - - - - - Posts - - -
-
-
-
- {user.posts.map((p) => ( - - ))} -
-
-
-
-
- ) - ); + return ( + loaded && ( +
+
+
+
+
+ + profile + +
+
+
+
+

{user.username}

+ {username !== userName && following.includes(`${username}`) === false ? ( +
+ +
+ ) : username !== userName ? ( +
+ +
+ ) : ( + <> + )} +
+
    +
  • + + + {user.posts.length}{' '} + + posts + +
    • +
  • + + + {' '} + + followers + +
    • +
  • + + + {' '} + + following + +
    • +
+
+

{user.bio}

+
+
+
+
+ + + + + + Posts + + +
+
+
+
+ {user.posts.map(p => ( + + ))} +
+
+
+
+
+ ) + ); } export default Profile; diff --git a/react-app/src/components/UserPage.js b/react-app/src/components/UserPage.js deleted file mode 100644 index c882b34..0000000 --- a/react-app/src/components/UserPage.js +++ /dev/null @@ -1,66 +0,0 @@ -const UserPage = () => { - return ( -
-
-
-
-
- - profile-picture - -
-
-
-
-

{user.username}

-
- -

{user.bio}

-
-
-
- - - - - - Posts - - - - - - - - Likes - - -
-
-
-
-
-
- ) -} - -export default UserPage; \ No newline at end of file diff --git a/react-app/src/components/feed/feed.css b/react-app/src/components/feed/feed.css index 1850c47..728e2b7 100644 --- a/react-app/src/components/feed/feed.css +++ b/react-app/src/components/feed/feed.css @@ -1,43 +1,43 @@ body { - background-color: rgba(10, 10, 10, 0.01); + background-color: rgba(10, 10, 10, 0.01); } .posts-holder { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; } .post-user-info { - display: flex; - align-items: center; - border-bottom: 1px solid rgba(0.3, 0.3, 0.3, 0.25); - padding: 15px; + display: flex; + align-items: center; + border-bottom: 1px solid rgba(0.3, 0.3, 0.3, 0.25); + padding: 15px; } .post-profile-pic { - width: 30px; - height: 30px; - border-radius: 30px; - overflow: hidden; - padding: 3px; - margin-right: 5px; + width: 30px; + height: 30px; + border-radius: 30px; + overflow: hidden; + padding: 3px; + margin-right: 5px; } .post-comment-holder a { - color: grey; - font-weight: lighter; - font-size: medium; + color: grey; + font-weight: lighter; + font-size: medium; } .post-text { - margin-top: 5px; - margin-bottom: 5px; + margin-top: 5px; + margin-bottom: 5px; } .post-bottom-info-holder { - padding: 15px; + padding: 15px; } /* .post-comment-holder { @@ -46,75 +46,77 @@ body { } */ .post-comment-field { - margin-top: 10px; - - border: none; - width: 80%; + margin-top: 10px; + resize: none; + border: none; + width: 80%; } .one-post-holder { - display: flex; - flex-direction: column; - width: 50%; - outline: 1px solid rgba(0.3, 0.3, 0.3, 0.25); - margin-top: 10px; - margin-bottom: 10px; - background-color: white; + display: flex; + flex-direction: column; + width: 50%; + outline: 1px solid rgba(0.3, 0.3, 0.3, 0.25); + margin-top: 10px; + margin-bottom: 10px; + background-color: white; } .feed-post-img-holder { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - border-bottom: 1px solid rgba(0.3, 0.3, 0.3, 0.25); + display: flex; + justify-content: center; + align-items: center; + width: 100%; + border-bottom: 1px solid rgba(0.3, 0.3, 0.3, 0.25); } .post-likes i { - cursor: pointer; + cursor: pointer; } .comment-form { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } .fas { - color: red; - margin-bottom: 10px; - margin-right: 10px; + color: red; + margin-bottom: 10px; + margin-right: 10px; } .far { - margin-bottom: 10px; - margin-right: 10px; + margin-bottom: 10px; + margin-right: 10px; } .feed-post-img-holder img { - max-width: 100%; - max-height: 80vh; - cursor: pointer; + max-width: 100%; + max-height: 80vh; + cursor: pointer; } .comment-submit { - background-color: transparent; - border: 0px; - color: #0095f6; + background-color: transparent; + border: 0px; + color: #0095f6; } .comment-submit:hover { - cursor: pointer; + cursor: pointer; } .see-more-comments { - text-decoration: none; + text-decoration: none; } .feed-post-comment { - margin-bottom: 4px; + margin-bottom: 4px; } -.post-author-name a, .feed-post-comment a, .post-text a { - color: black; - text-decoration: none; +.post-author-name a, +.feed-post-comment a, +.post-text a { + color: black; + text-decoration: none; } diff --git a/react-app/src/components/post/post.css b/react-app/src/components/post/post.css index 0887b98..65ad64d 100644 --- a/react-app/src/components/post/post.css +++ b/react-app/src/components/post/post.css @@ -8,11 +8,11 @@ body { align-items: center; } .post-holder { - display: flex; - width: 80vw; - height: 80vh; - border: 1px solid rgba(10, 10, 10, 0.1); - background-color: white; + display: flex; + width: 80vw; + height: 80vh; + border: 1px solid rgba(10, 10, 10, 0.1); + background-color: white; } .post-follow-link { @@ -41,24 +41,24 @@ body { } .post-holder img { - max-width: 100%; - max-height: 100%; + max-width: 100%; + max-height: 100%; } .post-info-holder { - height: 100%; - width: 25%; - display: flex; - flex-direction: column; - border-left: 1px solid rgba(10, 10, 10, 0.1); + height: 100%; + width: 25%; + display: flex; + flex-direction: column; + border-left: 1px solid rgba(10, 10, 10, 0.1); } .poster-info { - display: flex; - align-items: center; - height: 40px; - width: 100%; - border-bottom: 1px solid rgba(10, 10, 10, 0.1); + display: flex; + align-items: center; + height: 40px; + width: 100%; + border-bottom: 1px solid rgba(10, 10, 10, 0.1); } .post-info-holder img { @@ -83,23 +83,24 @@ body { } .post-comment-submit { - margin-top: auto; - border-top: 1px solid rgba(10, 10, 10, 0.1); + margin-top: auto; + border-top: 1px solid rgba(10, 10, 10, 0.1); + padding: 5px; } .post-comment-submit textarea { - margin-top: 10px; - width: 100%; - border: none; + margin-top: 10px; + width: 100%; + border: none; } .post-comment-submit input { - background-color: transparent; - color: #0095f6; - border: none; - cursor: pointer; - margin-right: 10px; - margin-bottom: 10px; + background-color: transparent; + color: #0095f6; + border: none; + cursor: pointer; + margin-right: 10px; + margin-bottom: 10px; } .post-comment-submit .far { @@ -116,14 +117,14 @@ body { } .recomended-post-holder { - margin-top: 10vh; - margin-bottom: 5vh; - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - width: 80vw; - border: 1px solid rgba(10, 10, 10, .1) + margin-top: 10vh; + margin-bottom: 5vh; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + width: 80vw; + border: 1px solid rgba(10, 10, 10, 0.1); } .one-recomended-post { @@ -133,7 +134,6 @@ body { margin: 20px; outline: 1px solid rgba(10, 10, 10, 0.1); cursor: pointer; - } .rec-img-holder { @@ -175,7 +175,6 @@ body { .post-comment-text a { color: black; text-decoration: none; - } .comment-textarea { @@ -184,12 +183,20 @@ body { } .comment-submit { - background-color: transparent; - border: 0px; - color: #0095f6; - text-decoration: none; + background-color: transparent; + border: 0px; + color: #0095f6; + text-decoration: none; } .comment-submit:hover { - cursor: pointer; + cursor: pointer; +} + +.comment-submit:focus { + outline: none; +} + +.comment-submit:active { + color: #006db6; } diff --git a/react-app/src/index.css b/react-app/src/index.css index 7f8d718..bc3bad3 100644 --- a/react-app/src/index.css +++ b/react-app/src/index.css @@ -402,3 +402,7 @@ nav div { ::-webkit-scrollbar-corner { background-color: rgb(250, 229, 204); } + +.profileFollowerInfo:focus { + outline: none; +}