open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Inga/de daisy follow button (#1028)

Browse Source 
* de daisy follow button
This commit is contained in:
ingawei 2022-10-12 01:00:52 -05:00 committed by GitHub
parent a6d5d5ad15
commit b2cd6bbe03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/components/follow-button.tsx
View File

@ -5,57 +5,52 @@ import { useFollows } from 'web/hooks/use-follows'
import { useUser } from 'web/hooks/use-user' import { useUser } from 'web/hooks/use-user'
import { follow, unfollow } from 'web/lib/firebase/users' import { follow, unfollow } from 'web/lib/firebase/users'
import { withTracking } from 'web/lib/service/analytics' import { withTracking } from 'web/lib/service/analytics'
import { Button } from './button'
export function FollowButton(props: { export function FollowButton(props: {
isFollowing: boolean | undefined isFollowing: boolean | undefined
onFollow: () => void onFollow: () => void
onUnfollow: () => void onUnfollow: () => void
small?: boolean
className?: string className?: string
}) { }) {
const { isFollowing, onFollow, onUnfollow, small, className } = props const { isFollowing, onFollow, onUnfollow, className } = props
const user = useUser() const user = useUser()
const smallStyle =
'btn !btn-xs border-2 border-gray-500 bg-white normal-case text-gray-500 hover:border-gray-500 hover:bg-white hover:text-gray-500'
if (!user || isFollowing === undefined) if (!user || isFollowing === undefined)
return ( return (
<button <Button size="sm" color="gray" className={clsx(className, 'invisible')}>
className={clsx('btn btn-sm invisible', small && smallStyle, className)}
>
Follow Follow
</button> </Button>
) )
if (isFollowing) { if (isFollowing) {
return ( return (
<button <Button
className={clsx( size="sm"
'btn btn-outline btn-sm', color="gray-outline"
small && smallStyle, className={clsx('my-auto', className)}
className
)}
onClick={withTracking(onUnfollow, 'unfollow')} onClick={withTracking(onUnfollow, 'unfollow')}
> >
Following Following
</button> </Button>
) )
} }
return ( return (
<button <Button
className={clsx('btn btn-sm', small && smallStyle, className)} size="sm"
color="indigo"
className={clsx(className, 'my-auto')}
onClick={withTracking(onFollow, 'follow')} onClick={withTracking(onFollow, 'follow')}
> >
Follow Follow
</button> </Button>
) )
} }
export function UserFollowButton(props: { userId: string; small?: boolean }) { export function UserFollowButton(props: { userId: string }) {
const { userId, small } = props const { userId } = props
const user = useUser() const user = useUser()
const following = useFollows(user?.id) const following = useFollows(user?.id)
const isFollowing = following?.includes(userId) const isFollowing = following?.includes(userId)
@ -67,7 +62,6 @@ export function UserFollowButton(props: { userId: string; small?: boolean }) {
isFollowing={isFollowing} isFollowing={isFollowing}
onFollow={() => follow(user.id, userId)} onFollow={() => follow(user.id, userId)}
onUnfollow={() => unfollow(user.id, userId)} onUnfollow={() => unfollow(user.id, userId)}
small={small}
/> />
) )
} }

2
web/components/sign-in-button.tsx
View File

@ -10,7 +10,7 @@ export const SignInButton = (props: { className?: string }) => {
return ( return (
<Button <Button
size="lg" size="lg"
color="gray" color="gradient"
onClick={async () => { onClick={async () => {
// login, and then reload the page, to hit any SSR redirect (e.g. // login, and then reload the page, to hit any SSR redirect (e.g.
// redirecting from / to /home for logged in users) // redirecting from / to /home for logged in users)