Allow users to choose who referred them (#611)

* Allow users to choose who referred them

* Refactor

* Rewording

* Match list styles

* Match empty text styles

firestore.rules

@@ -27,10 +27,9 @@ service cloud.firestore {
                               // 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;
-
+                              && !(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} {

web/components/filter-select-users.tsx

@@ -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,9 +40,11 @@ export function FilterSelectUsers(props: {
         })
       )
   }, [beginQuerying, users, selectedUsers, ignoreUserIds, query])
-
+  const shouldShow = maxUsers ? selectedUsers.length < maxUsers : true
   return (
     <div>
+      {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" />
@@ -100,18 +113,45 @@ export function FilterSelectUsers(props: {
               </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">
+              <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'}
                   />
-                <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>
             ))}
           </Row>

web/components/referrals-button.tsx

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

web/components/user-page.tsx

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

web/pages/account.tsx

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

web/pages/link/[slug].tsx

@@ -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 =