-
-
-
-
-
- {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/FollowNav.js b/frontend/src/components/follow/FollowNav.js
index 84815b5..a61a62a 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, { 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";
+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 68b96e4..ef55cd0 100644
--- a/frontend/src/components/follow/Followers.js
+++ b/frontend/src/components/follow/Followers.js
@@ -1,100 +1,98 @@
-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 } from "react";
+import { Container } from "react-bootstrap";
+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({ address }) {
+ // state
+ const [followers, setFollowers] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [followError, setFollowError] = useState(false);
+ const [followersNextPage, setFollowersNextPage] = useState(null);
+ const [moreFollowersLoading, setMoreFollowersLoading] = useState(false);
+ const [moreFollowersError, setMoreFollowersError] = useState(false);
-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 { 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(address);
+ 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"])
- }
- else {
- setMoreFollowersError(true)
- setMoreFollowersLoading(false)
- console.error(resp)
+ 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);
}
- }
+ };
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..2eeb0d2 100644
--- a/frontend/src/components/follow/Following.js
+++ b/frontend/src/components/follow/Following.js
@@ -1,99 +1,99 @@
-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 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({ 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);
-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 { 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(address);
+ 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"])
- }
- else {
- setMoreFollowingError(true)
- setMoreFollowingLoading(false)
- console.error(resp)
+ 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);
}
- }
+ };
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..d0d4f41 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;