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

Allow users to choose who referred them (#611)

Browse Source 
* Allow users to choose who referred them

* Refactor

* Rewording

* Match list styles

* Match empty text styles
This commit is contained in:
Ian Philips 2022-07-04 07:49:41 -06:00 committed by GitHub
parent d78bbcb3df
commit e712ad8289
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 221 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
firestore.rules
View File

@ -21,16 +21,15 @@ service cloud.firestore {
allow update: if resource.data.id == request.auth.uid
&& request.resource.data.diff(resource.data).affectedKeys()
.hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle', 'followedCategories', 'referredByContractId']);
allow update: if resource.data.id == request.auth.uid
&& request.resource.data.diff(resource.data).affectedKeys()
.hasOnly(['referredByUserId'])
// only one referral allowed per user
&& !("referredByUserId" in resource.data)
// user can't refer themselves
&& (resource.data.id != request.resource.data.referredByUserId)
// user can't refer someone who referred them quid pro quo
&& get(/databases/$(database)/documents/users/$(request.resource.data.referredByUserId)).referredByUserId != resource.data.id;
allow update: if resource.data.id == request.auth.uid
&& request.resource.data.diff(resource.data).affectedKeys()
.hasOnly(['referredByUserId'])
// only one referral allowed per user
&& !("referredByUserId" in resource.data)
// user can't refer themselves
&& !(resource.data.id == request.resource.data.referredByUserId);
// 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);
}
match /{somePath=**}/portfolioHistory/{portfolioHistoryId} {

194
web/components/filter-select-users.tsx
View File

@ -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 { User } from 'common/user'
import { Fragment, useMemo, useState } from 'react'
@ -6,13 +6,24 @@ import clsx from 'clsx'
import { Menu, Transition } from '@headlessui/react'
import { Avatar } from 'web/components/avatar'
import { Row } from 'web/components/layout/row'
import { UserLink } from 'web/components/user-page'
export function FilterSelectUsers(props: {
setSelectedUsers: (users: User[]) => void
selectedUsers: User[]
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 [query, setQuery] = useState('')
const [filteredUsers, setFilteredUsers] = useState<User[]>([])
@ -29,89 +40,118 @@ export function FilterSelectUsers(props: {
})
)
}, [beginQuerying, users, selectedUsers, ignoreUserIds, query])
const shouldShow = maxUsers ? selectedUsers.length < maxUsers : true
return (
<div>
<div className="relative mt-1 rounded-md">
<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" />
</div>
<input
type="text"
name="user name"
id="user name"
value={query}
onChange={(e) => setQuery(e.target.value)}
className="input input-bordered block w-full pl-10 focus:border-gray-300 "
placeholder="Austin Chen"
/>
</div>
<Menu
as="div"
className={clsx(
'relative inline-block w-full overflow-y-scroll text-right',
beginQuerying && 'h-36'
)}
>
{({}) => (
<Transition
show={beginQuerying}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
{shouldShow && (
<>
<div className="relative mt-1 rounded-md">
<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" />
</div>
<input
type="text"
name="user name"
id="user name"
value={query}
onChange={(e) => setQuery(e.target.value)}
className="input input-bordered block w-full pl-10 focus:border-gray-300 "
placeholder="Austin Chen"
/>
</div>
<Menu
as="div"
className={clsx(
'relative inline-block w-full overflow-y-scroll text-right',
beginQuerying && 'h-36'
)}
>
<Menu.Items
static={true}
className="absolute right-0 mt-2 w-full origin-top-right cursor-pointer divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div className="py-1">
{filteredUsers.map((user: User) => (
<Menu.Item key={user.id}>
{({ active }) => (
<span
className={clsx(
active
? 'bg-gray-100 text-gray-900'
: 'text-gray-700',
'group flex items-center px-4 py-2 text-sm'
{({}) => (
<Transition
show={beginQuerying}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
static={true}
className="absolute right-0 mt-2 w-full origin-top-right cursor-pointer divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div className="py-1">
{filteredUsers.map((user: User) => (
<Menu.Item key={user.id}>
{({ active }) => (
<span
className={clsx(
active
? 'bg-gray-100 text-gray-900'
: 'text-gray-700',
'group flex items-center px-4 py-2 text-sm'
)}
onClick={() => {
setQuery('')
setSelectedUsers([...selectedUsers, user])
}}
>
<Avatar
username={user.username}
avatarUrl={user.avatarUrl}
size={'xs'}
className={'mr-2'}
/>
{user.name}
</span>
)}
onClick={() => {
setQuery('')
setSelectedUsers([...selectedUsers, user])
}}
>
<Avatar
username={user.username}
avatarUrl={user.avatarUrl}
size={'xs'}
className={'mr-2'}
/>
{user.name}
</span>
)}
</Menu.Item>
))}
</div>
</Menu.Items>
</Transition>
)}
</Menu>
</Menu.Item>
))}
</div>
</Menu.Items>
</Transition>
)}
</Menu>
</>
)}
{selectedUsers.length > 0 && (
<>
<div className={'mb-2'}>Added members:</div>
<Row className="mt-0 grid grid-cols-6 gap-2">
<div className={'mb-2'}>
{showSelectedUsersTitle && 'Added members:'}
</div>
<Row
className={clsx(
'mt-0 grid grid-cols-6 gap-2',
selectedUsersClassName
)}
>
{selectedUsers.map((user: User) => (
<div key={user.id} className="col-span-2 flex items-center">
<Avatar
username={user.username}
avatarUrl={user.avatarUrl}
size={'sm'}
<div
key={user.id}
className="col-span-2 flex flex-row items-center justify-between"
>
<Row className={'items-center'}>
<Avatar
username={user.username}
avatarUrl={user.avatarUrl}
size={'sm'}
/>
<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"
/>
<span className="ml-2">{user.name}</span>
</div>
))}
</Row>

96
web/components/referrals-button.tsx
View File

@ -10,9 +10,11 @@ import { Row } from 'web/components/layout/row'
import { Avatar } from 'web/components/avatar'
import { UserLink } from 'web/components/user-page'
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 }) {
const { user } = props
export function ReferralsButton(props: { user: User; currentUser?: User }) {
const { user, currentUser } = props
const [isOpen, setIsOpen] = useState(false)
const referralIds = useReferrals(user.id)
@ -28,6 +30,7 @@ export function ReferralsButton(props: { user: User }) {
referralIds={referralIds ?? []}
isOpen={isOpen}
setIsOpen={setIsOpen}
currentUser={currentUser}
/>
</>
)
@ -38,8 +41,26 @@ function ReferralsDialog(props: {
referralIds: string[]
isOpen: boolean
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(() => {
prefetchUsers(referralIds)
@ -56,6 +77,75 @@ function ReferralsDialog(props: {
title: 'Referrals',
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>

2
web/components/user-page.tsx
View File

@ -202,7 +202,7 @@ export function UserPage(props: {
<Row className="gap-4">
<FollowingButton user={user} />
<FollowersButton user={user} />
<ReferralsButton user={user} />
<ReferralsButton user={user} currentUser={currentUser} />
<GroupsButton user={user} />
</Row>

41
web/pages/account.tsx
View File

@ -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>
)
}

2
web/pages/link/[slug].tsx
View File

@ -46,7 +46,7 @@ export default function ClaimPage() {
if (result.data.status == 'error') {
throw new Error(result.data.message)
}
router.push('/account?claimed-mana=yes')
user && router.push(`/${user.username}?claimed-mana=yes`)
} catch (e) {
console.log(e)
const message =