Allow users to choose who referred them (#611)
* Allow users to choose who referred them * Refactor * Rewording * Match list styles * Match empty text styles
This commit is contained in:
parent
d78bbcb3df
commit
e712ad8289
|
@ -27,10 +27,9 @@ service cloud.firestore {
|
||||||
// only one referral allowed per user
|
// only one referral allowed per user
|
||||||
&& !("referredByUserId" in resource.data)
|
&& !("referredByUserId" in resource.data)
|
||||||
// user can't refer themselves
|
// user can't refer themselves
|
||||||
&& (resource.data.id != request.resource.data.referredByUserId)
|
&& !(resource.data.id == request.resource.data.referredByUserId);
|
||||||
// user can't refer someone who referred them quid pro quo
|
// quid pro quos enabled (only once though so nbd) - bc I can't make this work:
|
||||||
&& get(/databases/$(database)/documents/users/$(request.resource.data.referredByUserId)).referredByUserId != resource.data.id;
|
// && (get(/databases/$(database)/documents/users/$(request.resource.data.referredByUserId)).referredByUserId == resource.data.id);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
match /{somePath=**}/portfolioHistory/{portfolioHistoryId} {
|
match /{somePath=**}/portfolioHistory/{portfolioHistoryId} {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { UserIcon } from '@heroicons/react/outline'
|
import { UserIcon, XIcon } from '@heroicons/react/outline'
|
||||||
import { useUsers } from 'web/hooks/use-users'
|
import { useUsers } from 'web/hooks/use-users'
|
||||||
import { User } from 'common/user'
|
import { User } from 'common/user'
|
||||||
import { Fragment, useMemo, useState } from 'react'
|
import { Fragment, useMemo, useState } from 'react'
|
||||||
|
@ -6,13 +6,24 @@ import clsx from 'clsx'
|
||||||
import { Menu, Transition } from '@headlessui/react'
|
import { Menu, Transition } from '@headlessui/react'
|
||||||
import { Avatar } from 'web/components/avatar'
|
import { Avatar } from 'web/components/avatar'
|
||||||
import { Row } from 'web/components/layout/row'
|
import { Row } from 'web/components/layout/row'
|
||||||
|
import { UserLink } from 'web/components/user-page'
|
||||||
|
|
||||||
export function FilterSelectUsers(props: {
|
export function FilterSelectUsers(props: {
|
||||||
setSelectedUsers: (users: User[]) => void
|
setSelectedUsers: (users: User[]) => void
|
||||||
selectedUsers: User[]
|
selectedUsers: User[]
|
||||||
ignoreUserIds: string[]
|
ignoreUserIds: string[]
|
||||||
|
showSelectedUsersTitle?: boolean
|
||||||
|
selectedUsersClassName?: string
|
||||||
|
maxUsers?: number
|
||||||
}) {
|
}) {
|
||||||
const { ignoreUserIds, selectedUsers, setSelectedUsers } = props
|
const {
|
||||||
|
ignoreUserIds,
|
||||||
|
selectedUsers,
|
||||||
|
setSelectedUsers,
|
||||||
|
showSelectedUsersTitle,
|
||||||
|
selectedUsersClassName,
|
||||||
|
maxUsers,
|
||||||
|
} = props
|
||||||
const users = useUsers()
|
const users = useUsers()
|
||||||
const [query, setQuery] = useState('')
|
const [query, setQuery] = useState('')
|
||||||
const [filteredUsers, setFilteredUsers] = useState<User[]>([])
|
const [filteredUsers, setFilteredUsers] = useState<User[]>([])
|
||||||
|
@ -29,9 +40,11 @@ export function FilterSelectUsers(props: {
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
}, [beginQuerying, users, selectedUsers, ignoreUserIds, query])
|
}, [beginQuerying, users, selectedUsers, ignoreUserIds, query])
|
||||||
|
const shouldShow = maxUsers ? selectedUsers.length < maxUsers : true
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
{shouldShow && (
|
||||||
|
<>
|
||||||
<div className="relative mt-1 rounded-md">
|
<div className="relative mt-1 rounded-md">
|
||||||
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||||
<UserIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
<UserIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||||
|
@ -100,18 +113,45 @@ export function FilterSelectUsers(props: {
|
||||||
</Transition>
|
</Transition>
|
||||||
)}
|
)}
|
||||||
</Menu>
|
</Menu>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
{selectedUsers.length > 0 && (
|
{selectedUsers.length > 0 && (
|
||||||
<>
|
<>
|
||||||
<div className={'mb-2'}>Added members:</div>
|
<div className={'mb-2'}>
|
||||||
<Row className="mt-0 grid grid-cols-6 gap-2">
|
{showSelectedUsersTitle && 'Added members:'}
|
||||||
|
</div>
|
||||||
|
<Row
|
||||||
|
className={clsx(
|
||||||
|
'mt-0 grid grid-cols-6 gap-2',
|
||||||
|
selectedUsersClassName
|
||||||
|
)}
|
||||||
|
>
|
||||||
{selectedUsers.map((user: User) => (
|
{selectedUsers.map((user: User) => (
|
||||||
<div key={user.id} className="col-span-2 flex items-center">
|
<div
|
||||||
|
key={user.id}
|
||||||
|
className="col-span-2 flex flex-row items-center justify-between"
|
||||||
|
>
|
||||||
|
<Row className={'items-center'}>
|
||||||
<Avatar
|
<Avatar
|
||||||
username={user.username}
|
username={user.username}
|
||||||
avatarUrl={user.avatarUrl}
|
avatarUrl={user.avatarUrl}
|
||||||
size={'sm'}
|
size={'sm'}
|
||||||
/>
|
/>
|
||||||
<span className="ml-2">{user.name}</span>
|
<UserLink
|
||||||
|
username={user.username}
|
||||||
|
className="ml-2"
|
||||||
|
name={user.name}
|
||||||
|
/>
|
||||||
|
</Row>
|
||||||
|
<XIcon
|
||||||
|
onClick={() =>
|
||||||
|
setSelectedUsers([
|
||||||
|
...selectedUsers.filter((u) => u.id != user.id),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
className=" h-5 w-5 cursor-pointer text-gray-400"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</Row>
|
</Row>
|
||||||
|
|
|
@ -10,9 +10,11 @@ import { Row } from 'web/components/layout/row'
|
||||||
import { Avatar } from 'web/components/avatar'
|
import { Avatar } from 'web/components/avatar'
|
||||||
import { UserLink } from 'web/components/user-page'
|
import { UserLink } from 'web/components/user-page'
|
||||||
import { useReferrals } from 'web/hooks/use-referrals'
|
import { useReferrals } from 'web/hooks/use-referrals'
|
||||||
|
import { FilterSelectUsers } from 'web/components/filter-select-users'
|
||||||
|
import { getUser, updateUser } from 'web/lib/firebase/users'
|
||||||
|
|
||||||
export function ReferralsButton(props: { user: User }) {
|
export function ReferralsButton(props: { user: User; currentUser?: User }) {
|
||||||
const { user } = props
|
const { user, currentUser } = props
|
||||||
const [isOpen, setIsOpen] = useState(false)
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
const referralIds = useReferrals(user.id)
|
const referralIds = useReferrals(user.id)
|
||||||
|
|
||||||
|
@ -28,6 +30,7 @@ export function ReferralsButton(props: { user: User }) {
|
||||||
referralIds={referralIds ?? []}
|
referralIds={referralIds ?? []}
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
setIsOpen={setIsOpen}
|
setIsOpen={setIsOpen}
|
||||||
|
currentUser={currentUser}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
@ -38,8 +41,26 @@ function ReferralsDialog(props: {
|
||||||
referralIds: string[]
|
referralIds: string[]
|
||||||
isOpen: boolean
|
isOpen: boolean
|
||||||
setIsOpen: (isOpen: boolean) => void
|
setIsOpen: (isOpen: boolean) => void
|
||||||
|
currentUser?: User
|
||||||
}) {
|
}) {
|
||||||
const { user, referralIds, isOpen, setIsOpen } = props
|
const { user, referralIds, isOpen, setIsOpen, currentUser } = props
|
||||||
|
const [referredBy, setReferredBy] = useState<User[]>([])
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
|
const [errorText, setErrorText] = useState('')
|
||||||
|
|
||||||
|
const [referredByUser, setReferredByUser] = useState<User | null>()
|
||||||
|
useEffect(() => {
|
||||||
|
if (
|
||||||
|
isOpen &&
|
||||||
|
!referredByUser &&
|
||||||
|
currentUser?.referredByUserId &&
|
||||||
|
currentUser.id === user.id
|
||||||
|
) {
|
||||||
|
getUser(currentUser.referredByUserId).then((user) => {
|
||||||
|
setReferredByUser(user)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [currentUser, isOpen, referredByUser, user.id])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
prefetchUsers(referralIds)
|
prefetchUsers(referralIds)
|
||||||
|
@ -56,6 +77,75 @@ function ReferralsDialog(props: {
|
||||||
title: 'Referrals',
|
title: 'Referrals',
|
||||||
content: <ReferralsList userIds={referralIds} />,
|
content: <ReferralsList userIds={referralIds} />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Referred by',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
{user.id === currentUser?.id && !referredByUser ? (
|
||||||
|
<>
|
||||||
|
<FilterSelectUsers
|
||||||
|
setSelectedUsers={setReferredBy}
|
||||||
|
selectedUsers={referredBy}
|
||||||
|
ignoreUserIds={[currentUser.id]}
|
||||||
|
showSelectedUsersTitle={false}
|
||||||
|
selectedUsersClassName={'grid-cols-2 '}
|
||||||
|
maxUsers={1}
|
||||||
|
/>
|
||||||
|
<Row className={'mt-0 justify-end'}>
|
||||||
|
<button
|
||||||
|
className={
|
||||||
|
referredBy.length === 0
|
||||||
|
? 'hidden'
|
||||||
|
: 'btn btn-primary btn-md my-2 w-24 normal-case'
|
||||||
|
}
|
||||||
|
disabled={referredBy.length === 0 || isSubmitting}
|
||||||
|
onClick={() => {
|
||||||
|
setIsSubmitting(true)
|
||||||
|
updateUser(currentUser.id, {
|
||||||
|
referredByUserId: referredBy[0].id,
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
setErrorText('')
|
||||||
|
setIsSubmitting(false)
|
||||||
|
setReferredBy([])
|
||||||
|
setIsOpen(false)
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
setIsSubmitting(false)
|
||||||
|
setErrorText(error.message)
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</Row>
|
||||||
|
<span className={'text-warning'}>
|
||||||
|
{referredBy.length > 0 &&
|
||||||
|
'Careful: you can only set who referred you once!'}
|
||||||
|
</span>
|
||||||
|
<span className={'text-error'}>{errorText}</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="justify-center text-gray-700">
|
||||||
|
{referredByUser ? (
|
||||||
|
<Row className={'items-center gap-2 p-2'}>
|
||||||
|
<Avatar
|
||||||
|
username={referredByUser.username}
|
||||||
|
avatarUrl={referredByUser.avatarUrl}
|
||||||
|
/>
|
||||||
|
<UserLink
|
||||||
|
username={referredByUser.username}
|
||||||
|
name={referredByUser.name}
|
||||||
|
/>
|
||||||
|
</Row>
|
||||||
|
) : (
|
||||||
|
<span className={'text-gray-500'}>No one...</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
|
@ -202,7 +202,7 @@ export function UserPage(props: {
|
||||||
<Row className="gap-4">
|
<Row className="gap-4">
|
||||||
<FollowingButton user={user} />
|
<FollowingButton user={user} />
|
||||||
<FollowersButton user={user} />
|
<FollowersButton user={user} />
|
||||||
<ReferralsButton user={user} />
|
<ReferralsButton user={user} currentUser={currentUser} />
|
||||||
<GroupsButton user={user} />
|
<GroupsButton user={user} />
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
|
|
|
@ -1,41 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import { Page } from 'web/components/page'
|
|
||||||
import { UserPage } from 'web/components/user-page'
|
|
||||||
import { useUser } from 'web/hooks/use-user'
|
|
||||||
import { firebaseLogin } from 'web/lib/firebase/users'
|
|
||||||
|
|
||||||
function SignInCard() {
|
|
||||||
return (
|
|
||||||
<div className="card glass sm:card-side text-neutral-content mx-4 my-12 max-w-sm bg-green-600 shadow-xl transition-all hover:bg-green-600 hover:shadow-xl sm:mx-auto">
|
|
||||||
<div className="p-4">
|
|
||||||
<img
|
|
||||||
src="/logo-bg-white.png"
|
|
||||||
className="h-20 w-20 rounded-lg shadow-lg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="card-body max-w-md">
|
|
||||||
<h2 className="card-title font-major-mono">Welcome!</h2>
|
|
||||||
<p>Sign in to get started</p>
|
|
||||||
<div className="card-actions">
|
|
||||||
<button
|
|
||||||
className="btn glass rounded-full hover:bg-green-500"
|
|
||||||
onClick={firebaseLogin}
|
|
||||||
>
|
|
||||||
Sign in with Google
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Account() {
|
|
||||||
const user = useUser()
|
|
||||||
return user ? (
|
|
||||||
<UserPage user={user} currentUser={user} />
|
|
||||||
) : (
|
|
||||||
<Page>
|
|
||||||
<SignInCard />
|
|
||||||
</Page>
|
|
||||||
)
|
|
||||||
}
|
|
|
@ -46,7 +46,7 @@ export default function ClaimPage() {
|
||||||
if (result.data.status == 'error') {
|
if (result.data.status == 'error') {
|
||||||
throw new Error(result.data.message)
|
throw new Error(result.data.message)
|
||||||
}
|
}
|
||||||
router.push('/account?claimed-mana=yes')
|
user && router.push(`/${user.username}?claimed-mana=yes`)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e)
|
console.log(e)
|
||||||
const message =
|
const message =
|
||||||
|
|
Loading…
Reference in New Issue
Block a user