From 2bf0489e96c27e44a976769656c58f3eded6c7ff Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 24 Jan 2023 19:52:27 -0500 Subject: [PATCH 1/4] Moved profileData to fetch on highest component, created profileData context, added follow count on tabs --- frontend/src/components/follow/FollowCard.js | 243 +++++++++---------- frontend/src/components/follow/Followers.js | 170 ++++++------- frontend/src/components/follow/Following.js | 166 ++++++------- frontend/src/components/ui/LeftTabs.js | 25 +- frontend/src/contexts/ProfileContext.js | 3 + frontend/src/pages/Follow.js | 72 ++++-- 6 files changed, 360 insertions(+), 319 deletions(-) create mode 100644 frontend/src/contexts/ProfileContext.js diff --git a/frontend/src/components/follow/FollowCard.js b/frontend/src/components/follow/FollowCard.js index a06f5cc..112d466 100644 --- a/frontend/src/components/follow/FollowCard.js +++ b/frontend/src/components/follow/FollowCard.js @@ -1,139 +1,138 @@ -import React, { useState, useEffect } from 'react' -import { Button, Badge } from 'react-bootstrap' -import { json, useNavigate } from 'react-router-dom' -import PfpResolver from '../PfpResolver' -import ClickableEnsAndAddress from '../ClickableEnsAndAddress' -import { apiPostFollow, apiPostUnfollow, apiGetProfile } from '../../api' -import './follow-custom.css' - +import React, { useState, useEffect, useContext } from "react"; +import { Button, Badge } from "react-bootstrap"; +import { json, useNavigate } from "react-router-dom"; +import { ProfileContext } from "../../contexts/ProfileContext"; +import PfpResolver from "../PfpResolver"; +import ClickableEnsAndAddress from "../ClickableEnsAndAddress"; +import { apiPostFollow, apiPostUnfollow, apiGetProfile } from "../../api"; +import "./follow-custom.css"; function FollowCard(props) { + // State + const [buttonMsg, setButtonMsg] = useState("Following"); + const [readMore, setReadMore] = useState(false); - const navigate = useNavigate() - const [buttonMsg, setButtonMsg] = useState('Following') - const [profileData, setProfileData] = useState({}) - const [profileDataLoading, setProfileDataLoading] = useState(false) - const [readMore, setReadMore] = useState(false) - - const handleFollow = async () => { - const resp = await apiPostFollow(props.address) - if (resp.ok) { - setButtonMsg('Following') - setProfileData({ - ...profileData, - numFollowers: profileData["numFollowers"] + 1, - followedByMe: true - }); - } - } + // Const + const { profileData, setProfileData } = useContext(ProfileContext); + const navigate = useNavigate(); - const handleUnfollow = async () => { - const resp = await apiPostUnfollow(props.address) - if (resp.ok) { - setButtonMsg('Follow') - setProfileData({ - ...profileData, - numFollowers: profileData["numFollowers"] - 1, - followedByMe: false - }); - } else if (!resp.ok) { - console.error(resp.error) - } + const handleFollow = async () => { + const resp = await apiPostFollow(props.address); + if (resp.ok) { + setButtonMsg("Following"); + setProfileData({ + ...profileData, + numFollowers: profileData["numFollowers"] + 1, + followedByMe: true, + }); } + }; - const fetchProfile = async () => { - setProfileDataLoading(true); - const resp = await apiGetProfile(props.address) - if (resp.ok) { - var data = await resp.json(); - setProfileData(data); - setProfileDataLoading(false); - } - else { - console.error(resp); - setProfileDataLoading(false); - } + const handleUnfollow = async () => { + const resp = await apiPostUnfollow(props.address); + if (resp.ok) { + setButtonMsg("Follow"); + setProfileData({ + ...profileData, + numFollowers: profileData["numFollowers"] - 1, + followedByMe: false, + }); + } else if (!resp.ok) { + console.error(resp.error); } + }; - const navigateProfile = () => { - navigate(`/${props.address}/profile`) - } + const navigateProfile = () => { + navigate(`/${props.address}/profile`); + }; - // Hover On and Off Button Text Change - const handleHoverOn = () => { - if(buttonMsg === 'Follow') return - setButtonMsg('Unfollow') - } - const handleHoverOff = () => { - if(buttonMsg === 'Follow') return - setButtonMsg('Following') - } + // Hover On and Off Button Text Change + const handleHoverOn = () => { + if (buttonMsg === "Follow") return; + setButtonMsg("Unfollow"); + }; + const handleHoverOff = () => { + if (buttonMsg === "Follow") return; + setButtonMsg("Following"); + }; - // Button Logic - const handleButtonDisplayed = () => { - if(profileData.followedByMe === true) { - return - } else { - return - } + // Button Logic + const handleButtonDisplayed = () => { + if (props.followedByMe === true) { + return ( + + ); + } else { + return ( + + ); } + }; - // shorten bio - const abbrBio = (bio) => { - if(bio.length > 200) { - if(readMore === false) { - return
- {bio.substr(0,200) + '...'} - setReadMore(true)}> read more -
- } else if (readMore === true) { - return
- {bio} -
- } - } else return bio -} - - // Fetch profile data - useEffect(() => { - - fetchProfile() - - }, []) + // shorten bio + const abbrBio = (bio) => { + if (bio.length > 200) { + if (readMore === false) { + return ( +
+ {bio.substr(0, 200) + "..."} + setReadMore(true)}> + {" "} + read more + +
+ ); + } else if (readMore === true) { + return
{bio}
; + } + } else return bio; + }; return ( -
- -
-
-
- - {props.numFollowers} {props.numFollowers === 1 ? 'follower' : 'followers'} -
-
- {handleButtonDisplayed()} -
-
-
- {props.bio &&

{abbrBio(props.bio)}

} -
-
+
+ +
+
+
+ + + {props.numFollowers}{" "} + {props.numFollowers === 1 ? "follower" : "followers"}{" "} + +
+
+ {handleButtonDisplayed()} +
+
+
+ {props.bio && ( +

{abbrBio(props.bio)}

+ )}
- - ) +
+
+ ); } -export default FollowCard +export default FollowCard; diff --git a/frontend/src/components/follow/Followers.js b/frontend/src/components/follow/Followers.js index 68b96e4..aa95e18 100644 --- a/frontend/src/components/follow/Followers.js +++ b/frontend/src/components/follow/Followers.js @@ -1,100 +1,102 @@ -import React, { useState, useEffect, useContext } from 'react' -import { useParams } from 'react-router-dom' -import { Container } from 'react-bootstrap' -import FollowNav from './FollowNav' -import FollowCard from './FollowCard' -import "./follow-custom.css" -import { apiGetFollowers, apiGetUrl } from '../../api' -import FollowPlaceholder from './FollowPlaceholder' -import FollowError from './FollowError' -import MoreFollow from './MoreFollow' - +import React, { useState, useEffect, useContext } from "react"; +import { useParams } from "react-router-dom"; +import { Container } from "react-bootstrap"; +import FollowNav from "./FollowNav"; +import FollowCard from "./FollowCard"; +import "./follow-custom.css"; +import { apiGetFollowers, apiGetUrl } from "../../api"; +import FollowPlaceholder from "./FollowPlaceholder"; +import FollowError from "./FollowError"; +import MoreFollow from "./MoreFollow"; function Followers() { - - const [followers, setFollowers] = useState([]) - const [isLoading, setIsLoading] = useState(false) - const [active, setActive] = useState(true) - const [followError, setFollowError] = useState(false) - const [followersNextPage, setFollowersNextPage] = useState(null) - const [moreFollowersLoading, setMoreFollowersLoading] = useState(false) - const [moreFollowersError, setMoreFollowersError] = useState(false) + const [followers, setFollowers] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [active, setActive] = useState(true); + const [followError, setFollowError] = useState(false); + const [followersNextPage, setFollowersNextPage] = useState(null); + const [moreFollowersLoading, setMoreFollowersLoading] = useState(false); + const [moreFollowersError, setMoreFollowersError] = useState(false); const { urlInput } = useParams(); - + const fetchFollowers = async () => { - setIsLoading(true) - const resp = await apiGetFollowers(urlInput) - if(resp.ok) { - const json = await resp.json() - setFollowers(json.results) - setFollowersNextPage(json["next"]) - setIsLoading(false) - } else if (!resp.ok) { - setIsLoading(false) - setFollowError(true) - console.log('couldnt fetch followers') - } - } + setIsLoading(true); + const resp = await apiGetFollowers(urlInput); + if (resp.ok) { + const json = await resp.json(); + setFollowers(json.results); + setFollowersNextPage(json["next"]); + setIsLoading(false); + } else if (!resp.ok) { + setIsLoading(false); + setFollowError(true); + console.log("couldnt fetch followers"); + } + }; const fetchMoreFollowers = async () => { - setMoreFollowersLoading(true) - const resp = await apiGetUrl(followersNextPage) + setMoreFollowersLoading(true); + const resp = await apiGetUrl(followersNextPage); - if(resp.ok) { - var data = await resp.json() - setFollowers(followers.concat(data["results"])) - setMoreFollowersError(false) - setMoreFollowersLoading(false) - setFollowersNextPage(data["next"]) + if (resp.ok) { + var data = await resp.json(); + setFollowers(followers.concat(data["results"])); + setMoreFollowersError(false); + setMoreFollowersLoading(false); + setFollowersNextPage(data["next"]); + } else { + setMoreFollowersError(true); + setMoreFollowersLoading(false); + console.error(resp); } - else { - setMoreFollowersError(true) - setMoreFollowersLoading(false) - console.error(resp) - } - } + }; useEffect(() => { - fetchFollowers() - - }, []) - - + fetchFollowers(); + }, []); + return ( - - {isLoading - ? - : followError - ? - : <> - {(followers === undefined || followers.length === 0) - ?

No results.

- : followers.map( (follower, index) => { - return ( - - )}) } - } + + {isLoading ? ( + + ) : followError ? ( + + ) : ( + <> + {followers === undefined || followers.length === 0 ? ( +

+ No results. +

+ ) : ( + followers.map((follower, index) => { + return ( + + ); + }) + )} + + )} - {/* More Following (pagination) */} - {followersNextPage === null - ? <> - : moreFollowersLoading === true - ? - : moreFollowersError === true - ? - : - } + {/* More Following (pagination) */} + {followersNextPage === null ? ( + <> + ) : moreFollowersLoading === true ? ( + + ) : moreFollowersError === true ? ( + + ) : ( + + )} - ) + ); } -export default Followers - +export default Followers; diff --git a/frontend/src/components/follow/Following.js b/frontend/src/components/follow/Following.js index 8f5fea5..d27b243 100644 --- a/frontend/src/components/follow/Following.js +++ b/frontend/src/components/follow/Following.js @@ -1,99 +1,101 @@ -import React, { useEffect, useState } from 'react' -import { useParams } from 'react-router-dom' -import { Container } from 'react-bootstrap'; -import FollowNav from './FollowNav' -import FollowCard from './FollowCard' -import "./follow-custom.css" -import { apiGetFollowing, apiGetUrl } from '../../api' -import FollowPlaceholder from './FollowPlaceholder'; -import FollowError from './FollowError'; -import MoreFollow from './MoreFollow'; - +import React, { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import { Container } from "react-bootstrap"; +import FollowNav from "./FollowNav"; +import FollowCard from "./FollowCard"; +import "./follow-custom.css"; +import { apiGetFollowing, apiGetUrl } from "../../api"; +import FollowPlaceholder from "./FollowPlaceholder"; +import FollowError from "./FollowError"; +import MoreFollow from "./MoreFollow"; function Following() { - const [followingList, setFollowingList] = useState([]) - const [isLoading, setIsLoading] = useState(false) - const [followingError, setFollowingError] = useState(false) - const [followingNextPage, setFollowingNextPage] = useState(null) - const [moreFollowingLoading, setMoreFollowingLoading] = useState(false) - const [moreFollowingError, setMoreFollowingError] = useState(false) + const [followingList, setFollowingList] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [followingError, setFollowingError] = useState(false); + const [followingNextPage, setFollowingNextPage] = useState(null); + const [moreFollowingLoading, setMoreFollowingLoading] = useState(false); + const [moreFollowingError, setMoreFollowingError] = useState(false); const { urlInput } = useParams(); - + const fetchFollowing = async () => { - setIsLoading(true) - const resp = await apiGetFollowing(urlInput) - if(resp.ok) { - const json = await resp.json() - setFollowingList(json.results) - setFollowingNextPage(json["next"]) - setIsLoading(false) - } else if (!resp.ok) { - setIsLoading(false) - setFollowingError(true) - console.log('couldnt fetch followingList') - } - } + setIsLoading(true); + const resp = await apiGetFollowing(urlInput); + if (resp.ok) { + const json = await resp.json(); + setFollowingList(json.results); + setFollowingNextPage(json["next"]); + setIsLoading(false); + } else if (!resp.ok) { + setIsLoading(false); + setFollowingError(true); + console.log("couldnt fetch followingList"); + } + }; const fetchMoreFollowing = async () => { - setMoreFollowingLoading(true) - const resp = await apiGetUrl(followingNextPage) + setMoreFollowingLoading(true); + const resp = await apiGetUrl(followingNextPage); - if(resp.ok) { - var data = await resp.json() - setFollowingList(followingList.concat(data["results"])) - setMoreFollowingError(false) - setMoreFollowingLoading(false) - setFollowingNextPage(data["next"]) + if (resp.ok) { + var data = await resp.json(); + setFollowingList(followingList.concat(data["results"])); + setMoreFollowingError(false); + setMoreFollowingLoading(false); + setFollowingNextPage(data["next"]); + } else { + setMoreFollowingError(true); + setMoreFollowingLoading(false); + console.error(resp); } - else { - setMoreFollowingError(true) - setMoreFollowingLoading(false) - console.error(resp) - } - } + }; useEffect(() => { - fetchFollowing() - - - }, []) - + fetchFollowing(); + }, []); return ( - - {isLoading - ? - : followingError - ? - : <> - {(followingList === undefined || followingList.length === 0) - ?

No results.

- : followingList.map( (following, index) => { - return ( - - )}) } - } + + {isLoading ? ( + + ) : followingError ? ( + + ) : ( + <> + {followingList === undefined || followingList.length === 0 ? ( +

+ No results. +

+ ) : ( + followingList.map((following, index) => { + return ( + + ); + }) + )} + + )} - {/* More Following (pagination) */} - {followingNextPage === null - ? <> - : moreFollowingLoading === true - ? - : moreFollowingError === true - ? - : - } + {/* More Following (pagination) */} + {followingNextPage === null ? ( + <> + ) : moreFollowingLoading === true ? ( + + ) : moreFollowingError === true ? ( + + ) : ( + + )} - ) + ); } - -export default Following +export default Following; diff --git a/frontend/src/components/ui/LeftTabs.js b/frontend/src/components/ui/LeftTabs.js index 26bbdd5..cb3ff87 100644 --- a/frontend/src/components/ui/LeftTabs.js +++ b/frontend/src/components/ui/LeftTabs.js @@ -1,30 +1,31 @@ -import Col from 'react-bootstrap/Col'; -import Nav from 'react-bootstrap/Nav'; -import Row from 'react-bootstrap/Row'; -import Tab from 'react-bootstrap/Tab'; +import React, { useContext } from "react"; +import { ProfileContext } from "../../contexts/ProfileContext"; +import { Col, Nav, Row, Tab } from "react-bootstrap"; function LeftTabs(props) { + const { profileData } = useContext(ProfileContext); + return ( - - {props.firstTab} - - - {props.secondTab} - + {props.firstTab} + {props.secondTab} diff --git a/frontend/src/contexts/ProfileContext.js b/frontend/src/contexts/ProfileContext.js new file mode 100644 index 0000000..eacb819 --- /dev/null +++ b/frontend/src/contexts/ProfileContext.js @@ -0,0 +1,3 @@ +import { createContext } from "react"; + +export const ProfileContext = createContext({}); diff --git a/frontend/src/pages/Follow.js b/frontend/src/pages/Follow.js index 868b5a7..3cec87c 100644 --- a/frontend/src/pages/Follow.js +++ b/frontend/src/pages/Follow.js @@ -1,25 +1,59 @@ -import React, { useState, useEffect } from 'react' -import { Container } from 'react-bootstrap' -import { useLocation } from 'react-router-dom' -import LeftTabs from '../components/ui/LeftTabs' -import Followers from '../components/follow/Followers' -import Following from '../components/follow/Following' - +import React, { useState, useEffect } from "react"; +import { Container } from "react-bootstrap"; +import { useLocation, useParams } from "react-router-dom"; +import LeftTabs from "../components/ui/LeftTabs"; +import Followers from "../components/follow/Followers"; +import Following from "../components/follow/Following"; +import FollowNav from "../components/follow/FollowNav"; +import { apiGetProfile } from "../api"; +import { ProfileContext } from "../contexts/ProfileContext"; function Follow() { + // State + const [profileData, setProfileData] = useState({}); + const [profileDataLoading, setProfileDataLoading] = useState(false); + // Const + const location = useLocation(); + const activeLeftTab = location.state?.activeLeftTab; + const { urlInput } = useParams(); + + // Fetch profile data + const fetchProfile = async () => { + setProfileDataLoading(true); + const resp = await apiGetProfile(urlInput); + if (resp.ok) { + var data = await resp.json(); + setProfileData(data); + setProfileDataLoading(false); + console.log("profileData: ", profileData); + } else { + console.error(resp); + setProfileDataLoading(false); + } + }; - const location = useLocation(); - const activeLeftTab = location.state?.activeLeftTab + // Fetch profile data on component load + useEffect(() => { + fetchProfile(); + }, []); return ( - - } - secondTab={} - activeTab={activeLeftTab ? activeLeftTab : 'first'} - /> - - ) + <> + + {profileDataLoading && profileData === {} ? ( + Loading... + ) : ( + + + } + secondTab={} + activeTab={activeLeftTab ? activeLeftTab : "first"} + /> + + )} + + + ); } -export default Follow - +export default Follow; From c86425584a798df07a5cbdf13fc04488bb1741f1 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 24 Jan 2023 20:23:02 -0500 Subject: [PATCH 2/4] Added avatar to follow page nav. removed extra code --- frontend/src/components/follow/FollowCard.js | 4 +- frontend/src/components/follow/FollowNav.js | 65 +++++++++++++------- frontend/src/components/follow/Followers.js | 9 +-- frontend/src/components/follow/Following.js | 8 +-- frontend/src/pages/Follow.js | 4 +- 5 files changed, 53 insertions(+), 37 deletions(-) diff --git a/frontend/src/components/follow/FollowCard.js b/frontend/src/components/follow/FollowCard.js index 112d466..3addc3c 100644 --- a/frontend/src/components/follow/FollowCard.js +++ b/frontend/src/components/follow/FollowCard.js @@ -1,10 +1,10 @@ import React, { useState, useEffect, useContext } from "react"; import { Button, Badge } from "react-bootstrap"; -import { json, useNavigate } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { ProfileContext } from "../../contexts/ProfileContext"; import PfpResolver from "../PfpResolver"; import ClickableEnsAndAddress from "../ClickableEnsAndAddress"; -import { apiPostFollow, apiPostUnfollow, apiGetProfile } from "../../api"; +import { apiPostFollow, apiPostUnfollow } from "../../api"; import "./follow-custom.css"; function FollowCard(props) { diff --git a/frontend/src/components/follow/FollowNav.js b/frontend/src/components/follow/FollowNav.js index 84815b5..a1c0b49 100644 --- a/frontend/src/components/follow/FollowNav.js +++ b/frontend/src/components/follow/FollowNav.js @@ -1,30 +1,51 @@ -import React, { useEffect } from 'react' -import { useNavigate, useLocation } from 'react-router-dom' -import EnsAndAddress from '../EnsAndAddress' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowLeft } from '@fortawesome/free-solid-svg-icons' -import ClickableEnsAndAddress from '../ClickableEnsAndAddress'; +import React, { useEffect, useContext } from "react"; +import { useNavigate, useLocation } from "react-router-dom"; +import { ProfileContext } from "../../contexts/ProfileContext"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; +import ClickableEnsAndAddress from "../ClickableEnsAndAddress"; +import PfpResolver from "../PfpResolver"; function FollowNav(props) { - const navigate = useNavigate() + // const + const navigate = useNavigate(); + const { profileData } = useContext(ProfileContext); const navigateProfile = () => { - navigate(`/${props.address}/profile`) - } + navigate(`/${props.address}/profile`); + }; return ( - <> -
-
- -
-
- -
-
- - ) + <> +
+
+ +
+
+ + + + +
+
+ + ); } -export default FollowNav - +export default FollowNav; diff --git a/frontend/src/components/follow/Followers.js b/frontend/src/components/follow/Followers.js index aa95e18..113fd36 100644 --- a/frontend/src/components/follow/Followers.js +++ b/frontend/src/components/follow/Followers.js @@ -1,7 +1,6 @@ import React, { useState, useEffect, useContext } from "react"; import { useParams } from "react-router-dom"; import { Container } from "react-bootstrap"; -import FollowNav from "./FollowNav"; import FollowCard from "./FollowCard"; import "./follow-custom.css"; import { apiGetFollowers, apiGetUrl } from "../../api"; @@ -9,19 +8,18 @@ import FollowPlaceholder from "./FollowPlaceholder"; import FollowError from "./FollowError"; import MoreFollow from "./MoreFollow"; -function Followers() { +function Followers({ address }) { + // state const [followers, setFollowers] = useState([]); const [isLoading, setIsLoading] = useState(false); - const [active, setActive] = useState(true); const [followError, setFollowError] = useState(false); const [followersNextPage, setFollowersNextPage] = useState(null); const [moreFollowersLoading, setMoreFollowersLoading] = useState(false); const [moreFollowersError, setMoreFollowersError] = useState(false); - const { urlInput } = useParams(); const fetchFollowers = async () => { setIsLoading(true); - const resp = await apiGetFollowers(urlInput); + const resp = await apiGetFollowers(address); if (resp.ok) { const json = await resp.json(); setFollowers(json.results); @@ -57,7 +55,6 @@ function Followers() { return ( - {isLoading ? ( ) : followError ? ( diff --git a/frontend/src/components/follow/Following.js b/frontend/src/components/follow/Following.js index d27b243..2eeb0d2 100644 --- a/frontend/src/components/follow/Following.js +++ b/frontend/src/components/follow/Following.js @@ -1,7 +1,6 @@ import React, { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import { Container } from "react-bootstrap"; -import FollowNav from "./FollowNav"; import FollowCard from "./FollowCard"; import "./follow-custom.css"; import { apiGetFollowing, apiGetUrl } from "../../api"; @@ -9,18 +8,18 @@ import FollowPlaceholder from "./FollowPlaceholder"; import FollowError from "./FollowError"; import MoreFollow from "./MoreFollow"; -function Following() { +function Following({ address }) { + // state const [followingList, setFollowingList] = useState([]); const [isLoading, setIsLoading] = useState(false); const [followingError, setFollowingError] = useState(false); const [followingNextPage, setFollowingNextPage] = useState(null); const [moreFollowingLoading, setMoreFollowingLoading] = useState(false); const [moreFollowingError, setMoreFollowingError] = useState(false); - const { urlInput } = useParams(); const fetchFollowing = async () => { setIsLoading(true); - const resp = await apiGetFollowing(urlInput); + const resp = await apiGetFollowing(address); if (resp.ok) { const json = await resp.json(); setFollowingList(json.results); @@ -56,7 +55,6 @@ function Following() { return ( - {isLoading ? ( ) : followingError ? ( diff --git a/frontend/src/pages/Follow.js b/frontend/src/pages/Follow.js index 3cec87c..d0d4f41 100644 --- a/frontend/src/pages/Follow.js +++ b/frontend/src/pages/Follow.js @@ -45,8 +45,8 @@ function Follow() { } - secondTab={} + firstTab={} + secondTab={} activeTab={activeLeftTab ? activeLeftTab : "first"} /> From 783d255f73baf7b3bd21c5ff452a2b7ecd05bce3 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 24 Jan 2023 20:28:00 -0500 Subject: [PATCH 3/4] small style changes --- frontend/src/components/follow/FollowNav.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/follow/FollowNav.js b/frontend/src/components/follow/FollowNav.js index a1c0b49..6a015e5 100644 --- a/frontend/src/components/follow/FollowNav.js +++ b/frontend/src/components/follow/FollowNav.js @@ -18,14 +18,14 @@ function FollowNav(props) { return ( <>
-
+
-
+
Date: Mon, 30 Jan 2023 15:03:10 -0500 Subject: [PATCH 4/4] remove code --- frontend/src/components/follow/FollowCard.js | 2 +- frontend/src/components/follow/FollowNav.js | 4 ++-- frontend/src/components/follow/Followers.js | 3 +-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/follow/FollowCard.js b/frontend/src/components/follow/FollowCard.js index 3addc3c..036c70a 100644 --- a/frontend/src/components/follow/FollowCard.js +++ b/frontend/src/components/follow/FollowCard.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useContext } from "react"; +import React, { useState, useContext } from "react"; import { Button, Badge } from "react-bootstrap"; import { useNavigate } from "react-router-dom"; import { ProfileContext } from "../../contexts/ProfileContext"; diff --git a/frontend/src/components/follow/FollowNav.js b/frontend/src/components/follow/FollowNav.js index 6a015e5..a61a62a 100644 --- a/frontend/src/components/follow/FollowNav.js +++ b/frontend/src/components/follow/FollowNav.js @@ -1,5 +1,5 @@ -import React, { useEffect, useContext } from "react"; -import { useNavigate, useLocation } from "react-router-dom"; +import React, { useContext } from "react"; +import { useNavigate } from "react-router-dom"; import { ProfileContext } from "../../contexts/ProfileContext"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; diff --git a/frontend/src/components/follow/Followers.js b/frontend/src/components/follow/Followers.js index 113fd36..ef55cd0 100644 --- a/frontend/src/components/follow/Followers.js +++ b/frontend/src/components/follow/Followers.js @@ -1,5 +1,4 @@ -import React, { useState, useEffect, useContext } from "react"; -import { useParams } from "react-router-dom"; +import React, { useState, useEffect } from "react"; import { Container } from "react-bootstrap"; import FollowCard from "./FollowCard"; import "./follow-custom.css";