remove profiles immediately when they're set to private

src/components/Profile/index.js

@@ -11,8 +11,6 @@ import PropTypes from 'prop-types'
 
 
 // Component imports
-import { FontAwesomeIcon } from 'components/FontAwesomeIcon'
-import { useProfiles } from 'contexts/ProfilesContext'
 import ArticleList from 'components/ArticleList'
 import PageWrapper from 'components/PageWrapper'
 import ProfileCard from 'components/ProfileCard'
@@ -29,33 +27,10 @@ const SAVE_ALERT_DURATION = 5000
 
 
 function Profile(props) {
-	const { username } = props
 	const {
-		addProfile,
-		connectProfileByUsername,
-		disconnectProfileByUsername,
-		profilesByUsername,
-	} = useProfiles()
-	const profile = profilesByUsername[username] || props.profile
-
-	useEffect(() => {
-		if (!profilesByUsername[username] && props.profile) {
-			addProfile(props.profile)
-		}
-	}, [])
-
-	useEffect(() => {
-		connectProfileByUsername(username)
-
-		return () => disconnectProfileByUsername(username)
-	}, [
-		connectProfileByUsername,
-		disconnectProfileByUsername,
-	])
-
-	if (!profile) {
-		return <div>butts</div>
-	}
+		profile,
+		username,
+	} = props
 
 	return (
 		<PageWrapper
@@ -76,14 +51,9 @@ function Profile(props) {
 	)
 }
 
-Profile.defaultProps = {
-	profile: null,
-	username: '',
-}
-
 Profile.propTypes = {
-	profile: PropTypes.object,
-	username: PropTypes.string,
+	profile: PropTypes.object.isRequired,
+	username: PropTypes.string.isRequired,
 }
 
 

src/components/ProfileCard.js

@@ -36,10 +36,6 @@ function ProfileCard(props) {
 		website,
 	} = user || {}
 
-	if (!user) {
-		return <div>poop</div>
-	}
-
 	return (
 		<header className="block no-pad">
 			<div className="card profile">

src/contexts/ProfilesContext.js

@@ -16,6 +16,7 @@ import PropTypes from 'prop-types'
 // Local imports
 import { firestore } from 'helpers/firebase'
 import { updateStateObjectFromSnapshot } from 'helpers/updateStateObjectFromSnapshot'
+import { useAuth } from 'contexts/AuthContext'
 // import { useAsync } from 'hooks/useAsync'
 
 
@@ -25,7 +26,6 @@ const ProfilesContext = React.createContext({
 	addProfile: () => {},
 	connectProfileByUsername: () => {},
 	disconnectProfileByUsername: () => {},
-	profiles: null,
 	profilesByID: {},
 	profilesByUsername: {},
 })
@@ -36,19 +36,18 @@ const ProfilesContext = React.createContext({
 
 const ProfilesContextProvider = props => {
 	const { children } = props
+	const { user } = useAuth
 	const {
 		current: collection,
 	} = useRef(firestore?.collection('profiles'))
 	const connections = useRef({})
-	const [profiles, setProfiles] = useState(null)
 	const [profilesByID, setProfilesByID] = useState({})
 	const [profilesByUsername, setProfilesByUsername] = useState({})
 
 	const handleSnapshot = useCallback(snapshot => {
 		setProfilesByID(updateStateObjectFromSnapshot(snapshot, 'id'))
 		setProfilesByUsername(updateStateObjectFromSnapshot(snapshot, 'username'))
 	}, [
-		setProfiles,
 		setProfilesByID,
 		setProfilesByUsername,
 	])
@@ -73,12 +72,17 @@ const ProfilesContextProvider = props => {
 
 	const connectProfileByUsername = useCallback(username => {
 		connections.current[`username:${username}`] = collection
+			.where('visibility', '!=', 'private')
 			.where('username', '==', username)
 			.onSnapshot(handleSnapshot)
 	}, [handleSnapshot])
 
 	const disconnectProfileByUsername = useCallback(username => {
-		connections.current[`username:${username}`]()
+		const unsubscribe = connections.current[`username:${username}`]
+
+		if (unsubscribe) {
+			unsubscribe()
+		}
 	}, [])
 
 	return (
@@ -87,7 +91,6 @@ const ProfilesContextProvider = props => {
 				addProfile,
 				connectProfileByUsername,
 				disconnectProfileByUsername,
-				profiles,
 				profilesByID,
 				profilesByUsername,
 			}}>

src/helpers/updateStateObjectFromSnapshot.js

@@ -10,7 +10,6 @@ export function updateStateObjectFromSnapshot(snapshot, keyToUpdate) {
 			const data = doc.data()
 			let key = null
 
-
 			if (keyToUpdate === 'id') {
 				key = doc.id
 			} else {

src/pages/profile/[username].js

@@ -1,12 +1,18 @@
 // Module imports
+import {
+	useEffect,
+	useState,
+} from 'react'
+import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
 
 
 
 
 
 // Component imports
-import { firestore } from 'helpers/firebase'
+import { useProfiles } from 'contexts/ProfilesContext'
+import PageWrapper from 'components/PageWrapper'
 import Profile from 'components/Profile'
 
 
@@ -15,9 +21,49 @@ import Profile from 'components/Profile'
 
 function ProfilePage(props) {
 	const {
-		profile,
 		username,
 	} = props
+	const {
+		addProfile,
+		connectProfileByUsername,
+		disconnectProfileByUsername,
+		profilesByUsername,
+	} = useProfiles()
+	const router = useRouter()
+	const [profileFromSSR, setProfileFromSSR] = useState(props.profile)
+	const profile = profileFromSSR || profilesByUsername[username]
+
+	useEffect(() => {
+		setProfileFromSSR(null)
+
+		if (!profilesByUsername[username] && props.profile) {
+			addProfile(props.profile)
+		}
+	}, [])
+
+	useEffect(() => {
+		connectProfileByUsername(username)
+		return () => disconnectProfileByUsername(username)
+	}, [
+		connectProfileByUsername,
+		disconnectProfileByUsername,
+	])
+
+	useEffect(() => {
+		if (profile?.visibility === 'private') {
+			router.reload()
+		}
+	}, [profile])
+
+	if (!profile) {
+		return (
+			<PageWrapper title="Profile Not Found">
+				<section className="block">
+					<p>This profile is currently unavailable, or we couldn't find a profile with that username. 😞</p>
+				</section>
+			</PageWrapper>
+		)
+	}
 
 	return (
 		<Profile
@@ -38,6 +84,7 @@ ProfilePage.propTypes = {
 
 export async function getServerSideProps(context) {
 	const { username } = context.params
+	const { firestore } = await import('helpers/firebase')
 
 	if (!username.startsWith('@')) {
 		return {
@@ -50,21 +97,23 @@ export async function getServerSideProps(context) {
 
 	const safeUsername = username.startsWith('@') ? username.substring(1) : username
 	let profile = null
-
-	const profileSnapshot = await firestore
-		.collection('profiles')
-		.where('username', '==', safeUsername)
-		.get()
-
-	profileSnapshot.forEach(doc => {
-		profile = {
-			...doc.data(),
-			id: doc.id,
-		}
-	})
-
-	if (!profile) {
-		return { notFound: true }
+	let profileSnapshot = null
+
+	try {
+		profileSnapshot = await firestore
+			.collection('profiles')
+			.where('visibility', '!=', 'private')
+			.where('username', '==', safeUsername)
+			.get()
+
+		profileSnapshot.forEach(doc => {
+			profile = {
+				...doc.data(),
+				id: doc.id,
+			}
+		})
+	} catch (error) {
+		console.log('ERROR', error)
 	}
 
 	return {
@@ -75,8 +124,4 @@ export async function getServerSideProps(context) {
 	}
 }
 
-
-
-
-
 export default ProfilePage