5c12da140d
* Copy in nav from TailwindUI * Split up nav files * Hook up sidebar options to the current page * Tweak padding * Insert a right sidebar on folds & contracts * Keep column always centered * Remove markets and folds from top navbar * Extract out sidebaricon; link to /about * Rename to "useFollowedFoldIds" * Cache followed folds in localstorage * Remove unused mobile sidebar (for now) * Remove unused code * Remove sidebar from landing page * Tweak resolution panel styling * Remove the top navbar entirely * Completely remove the old navbar * Add "more" and profile link * Rearrange sidebar ordering * Remove unused component * Add Sign In button for logged-out users * Remove extra options for signed-out users
49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import clsx from 'clsx'
|
|
import { Fold } from '../../../common/fold'
|
|
import { useFollowedFoldIds } from '../../hooks/use-fold'
|
|
import { useUser } from '../../hooks/use-user'
|
|
import { followFold, unfollowFold } from '../../lib/firebase/folds'
|
|
|
|
export function FollowFoldButton(props: { fold: Fold; className?: string }) {
|
|
const { fold, className } = props
|
|
|
|
const user = useUser()
|
|
|
|
const followedFoldIds = useFollowedFoldIds(user)
|
|
const following = followedFoldIds
|
|
? followedFoldIds.includes(fold.id)
|
|
: undefined
|
|
|
|
const onFollow = () => {
|
|
if (user) followFold(fold.id, user.id)
|
|
}
|
|
|
|
const onUnfollow = () => {
|
|
if (user) unfollowFold(fold, user)
|
|
}
|
|
|
|
if (!user || following === undefined)
|
|
return (
|
|
<button className={clsx('btn btn-sm invisible', className)}>
|
|
Follow
|
|
</button>
|
|
)
|
|
|
|
if (following) {
|
|
return (
|
|
<button
|
|
className={clsx('btn btn-outline btn-sm', className)}
|
|
onClick={onUnfollow}
|
|
>
|
|
Following
|
|
</button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button className={clsx('btn btn-sm', className)} onClick={onFollow}>
|
|
Follow
|
|
</button>
|
|
)
|
|
}
|