clients/web: remove User.username

clients/apps/web/src/app/(main)/backoffice/issue/[id]/page.tsx

@@ -76,7 +76,7 @@ export default function Page({ params }: { params: { id: string } }) {
             </div>
             {r.user && (
               <div>
-                <span className="underline">{r.user.username}</span> [user]
+                <span className="underline">{r.user.public_name}</span> [user]
               </div>
             )}
             {r.organization && (

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/members/ClientPage.tsx

@@ -21,7 +21,7 @@ export default function ClientPage() {
   const members = useListOrganizationMembers(org.id)
 
   const mems = members.data?.items || []
-  const sortedMembers = mems.sort((a, b) => a.name.localeCompare(b.name))
+  const sortedMembers = mems.sort((a, b) => a.email.localeCompare(b.email))
 
   return (
     <DashboardBody>
@@ -41,15 +41,15 @@ export default function ClientPage() {
           </TableHeader>
           <TableBody>
             {sortedMembers.map((m) => (
-              <TableRow key={m.github_username + m.name}>
+              <TableRow key={m.email}>
                 <TableCell className="font-medium ">
                   <div className="inline-flex items-center gap-2">
                     <Avatar
                       className="h-8 w-8"
                       avatar_url={m.avatar_url}
-                      name={m.name}
+                      name={m.email}
                     />
-                    <span className="whitespace-nowrap">{m.name}</span>
+                    <span className="whitespace-nowrap">{m.email}</span>
                   </div>
                 </TableCell>
               </TableRow>

clients/apps/web/src/app/(main)/oauth2/authorize/AuthorizePage.tsx

@@ -80,9 +80,9 @@ const AuthorizePage = ({
                 <Avatar
                   className="h-8 w-8"
                   avatar_url={sub.avatar_url}
-                  name={sub.username}
+                  name={sub.email}
                 />
-                {sub.username}
+                {sub.email}
               </div>
             </>
           )}

clients/apps/web/src/components/Accounts/AccountAssociations.tsx

@@ -14,9 +14,9 @@ const AccountAssociations: React.FC<AccountAssociationsProps> = ({
     () =>
       account.users.reduce<string[]>(
         (array, user) =>
-          array.some((value) => value === user.username)
+          array.some((value) => value === user.email)
             ? array
-            : [...array, user.username],
+            : [...array, user.email],
         account.organizations.map(({ name }) => name),
       ),
     [account],

clients/apps/web/src/components/Backoffice/RewardsPending.tsx

@@ -14,6 +14,7 @@ import {
 } from '@heroicons/react/20/solid'
 import { BackofficeReward, PledgeState, PledgeType } from '@polar-sh/sdk'
 import Link from 'next/link'
+import Avatar from 'polarkit/components/ui/atoms/avatar'
 import Button from 'polarkit/components/ui/atoms/button'
 import {
   formatCurrencyAndAmount,
@@ -274,18 +275,23 @@ const Pledges = () => {
                         </div>
                         {r.user && (
                           <>
-                            <img className="h-6 w-6" src={r.user.avatar_url} />
-                            <div className="underline">{r.user.username}</div>
+                            <Avatar
+                              avatar_url={r.user.avatar_url}
+                              name={r.user.public_name}
+                              className="h-6 w-6"
+                            />
+                            <div className="underline">
+                              {r.user.public_name}
+                            </div>
                           </>
                         )}
                         {r.organization && (
                           <>
-                            {r.organization.avatar_url && (
-                              <img
-                                className="h-6 w-6"
-                                src={r.organization.avatar_url}
-                              />
-                            )}
+                            <Avatar
+                              avatar_url={r.organization.avatar_url}
+                              name={r.organization.name}
+                              className="h-6 w-6"
+                            />
                             <div className="underline">
                               {r.organization.name}
                             </div>

clients/apps/web/src/components/Finance/ListRewards.tsx

@@ -5,6 +5,7 @@ import Icon from '@/components/Icons/Icon'
 import { githubIssueLink } from '@/utils/github'
 import { dateOrString } from '@/utils/time'
 import { PledgeState, PledgeType, Reward, RewardState } from '@polar-sh/sdk'
+import Avatar from 'polarkit/components/ui/atoms/avatar'
 import {
   formatCurrencyAndAmount,
   getCentsInDollarString,
@@ -129,28 +130,25 @@ const List = (props: {
                 {showReceiver && (
                   <td className="dark:text-polar-400 whitespace-nowrap py-3 pr-3 text-sm text-gray-500">
                     <div className="flex items-center gap-1 ">
-                      {t.user?.avatar_url && (
-                        <img
-                          src={t.user?.avatar_url}
+                      {t.user && (
+                        <Avatar
+                          avatar_url={t.user.avatar_url}
+                          name={t.user.public_name}
                           className="h-6 w-6 rounded-full"
                         />
                       )}
-                      <a
-                        href={`https://github.com/${t.user?.username}`}
-                        className="text-blue-500"
-                      >
-                        @{t.user?.username || 'Unknown'}
-                      </a>
+                      @{t.user?.public_name || 'Unknown'}
                     </div>
                   </td>
                 )}
 
                 {showBacker && (
                   <td className="dark:text-polar-400 whitespace-nowrap py-3 pr-3 text-sm text-gray-500">
                     <div className="flex items-center gap-1 ">
-                      {t.pledge.pledger?.avatar_url && (
-                        <img
-                          src={t.pledge.pledger?.avatar_url}
+                      {t.pledge.pledger && (
+                        <Avatar
+                          avatar_url={t.pledge.pledger.avatar_url}
+                          name={t.pledge.pledger.name}
                           className="h-6 w-6 rounded-full"
                         />
                       )}

clients/apps/web/src/components/Finance/SplitNotify.tsx

@@ -91,7 +91,7 @@ _If you already have a Polar account setup, you don't need to do anything._
           <div className="flex flex-row items-center gap-4">
             <Avatar
               avatar_url={props.user.avatar_url}
-              name={props.user.username}
+              name={props.user.email}
             />
             <span className="dark:text-polar-200 text-gray-500">
               Comment will be posted on your behalf to issue{' '}

clients/apps/web/src/components/Issues/IssueListItem.stories.tsx

@@ -424,17 +424,17 @@ export const SelfSummaryFundingGoal: Story = {
       {
         ...pledgePublicAPI,
         pledger: {
-          name: user.username,
-          github_username: user.username,
+          name: user.email,
+          github_username: 'test',
           avatar_url: user.avatar_url,
         },
         authed_can_admin_sender: true,
       },
       {
         ...pledgePublicAPI,
         pledger: {
-          name: user.username,
-          github_username: user.username,
+          name: user.email,
+          github_username: 'test',
           avatar_url: user.avatar_url,
         },
         authed_can_admin_sender: true,
@@ -469,8 +469,8 @@ export const SelfSummaryNoGoal: Story = {
       {
         ...pledgePublicAPI,
         pledger: {
-          name: user.username,
-          github_username: user.username,
+          name: user.email,
+          github_username: 'test',
           avatar_url: user.avatar_url,
         },
         authed_can_admin_sender: true,
@@ -488,8 +488,8 @@ export const SelfSummaryNoGoal: Story = {
       {
         ...pledgePublicAPI,
         pledger: {
-          name: user.username,
-          github_username: user.username,
+          name: user.email,
+          github_username: 'test',
           avatar_url: user.avatar_url,
         },
         authed_can_admin_sender: true,
@@ -530,8 +530,8 @@ export const OrganizationPledgeWithCreatedBy: Story = {
         },
         authed_can_admin_sender: true,
         created_by: {
-          name: user.username,
-          github_username: user.username,
+          name: user.email,
+          github_username: 'test',
           avatar_url: user.avatar_url,
         },
       },
@@ -555,8 +555,8 @@ export const OrganizationPledgeWithInvoice: Story = {
         },
         authed_can_admin_sender: true,
         created_by: {
-          name: user.username,
-          github_username: user.username,
+          name: user.email,
+          github_username: 'test',
           avatar_url: user.avatar_url,
         },
         hosted_invoice_url: 'http://example.com/',
@@ -570,8 +570,8 @@ export const OrganizationPledgeWithInvoice: Story = {
         },
         authed_can_admin_sender: true,
         created_by: {
-          name: user.username,
-          github_username: user.username,
+          name: user.email,
+          github_username: 'test',
           avatar_url: user.avatar_url,
         },
         hosted_invoice_url: 'http://example.com/',

clients/apps/web/src/components/Issues/IssuePromotionModal.tsx

@@ -1,4 +1,5 @@
 import { useAuth } from '@/hooks'
+import { usePostHog } from '@/hooks/posthog'
 import {
   useBadgeWithComment,
   useIssueAddComment,
@@ -38,7 +39,6 @@ import { ModalHeader, Modal as ModernModal } from '../Modal'
 import { useModal } from '../Modal/useModal'
 import BadgeMessageForm from './BadgeMessageForm'
 import PublicRewardsSetting from './UpfrontRewards'
-import { usePostHog } from '@/hooks/posthog'
 
 const isIssueBadged = (issue: Issue): boolean => {
   return issue.pledge_badge_currently_embedded
@@ -132,7 +132,7 @@ export const AddBadgeButton = (props: { issue: Issue }) => {
       organization_name: props.issue.repository.organization.name,
       repository_name: props.issue.repository.name,
       issue_number: props.issue.number,
-      funding_goal: amount
+      funding_goal: amount,
     })
   }
 
@@ -316,7 +316,7 @@ const PostCommentForm = (props: {
     <div className="mt-3 flex flex-1 space-x-2">
       {props.user.avatar_url && (
         <Image
-          alt={`Avatar of ${props.user.username}`}
+          alt={`Avatar of ${props.user.email}`}
           src={props.user.avatar_url}
           height={200}
           width={200}
@@ -623,9 +623,9 @@ const RewardsTab = (props: { issue: Issue; user: UserRead }) => {
                   <Avatar
                     className="h-6 w-6"
                     avatar_url={props.user.avatar_url}
-                    name={props.user.username}
+                    name={props.user.email}
                   />
-                  <div className="text-sm">@{props.user.username}</div>
+                  <div className="text-sm">{props.user.email}</div>
                 </div>
 
                 <MoneyInput

clients/apps/web/src/components/Navigation/DashboardProfileDropdown.tsx

@@ -43,7 +43,7 @@ const DashboardProfileDropdown = ({ className = '' }) => {
         avatar_url: currentOrg.avatar_url,
       } as const)
     : ({
-        name: loggedUser.username,
+        name: loggedUser.email,
         avatar_url: loggedUser.avatar_url,
       } as const)
 

clients/apps/web/src/components/Navigation/PublicProfileDropdown.tsx

@@ -60,7 +60,7 @@ const PublicProfileDropdown = ({
         >
           <Avatar
             className="h-9 w-9"
-            name={loggedUser.username}
+            name={loggedUser.email}
             avatar_url={loggedUser.avatar_url}
           />
         </div>
@@ -78,7 +78,7 @@ const PublicProfileDropdown = ({
             >
               <ListItem current={true}>
                 <Profile
-                  name={loggedUser.username}
+                  name={loggedUser.email}
                   avatar_url={loggedUser.avatar_url}
                 />
               </ListItem>

clients/apps/web/src/components/Pledge/OrganizationSelect.tsx

@@ -30,7 +30,7 @@ const OrganizationSelect = ({
   >(undefined)
 
   const canSelectOrganizations = organizations
-    .filter((o) => o.slug !== currentUser?.username)
+    .filter((o) => o.slug !== currentUser?.email)
     .filter((o) => {
       if (organizationFilter) {
         return organizationFilter(o)
@@ -91,11 +91,7 @@ const OrganizationSelect = ({
               {attributePledgeTo ? (
                 <SelectValue placeholder={`${attributePledgeTo.slug}`} />
               ) : (
-                <SelectValue
-                  placeholder={`Yourself (${
-                    currentUser?.username || currentUser?.email
-                  })`}
-                />
+                <SelectValue placeholder={`Yourself (${currentUser?.email})`} />
               )}
             </SelectTrigger>
 
@@ -113,9 +109,9 @@ const OrganizationSelect = ({
                   <div className="flex items-center space-x-2">
                     <Avatar
                       avatar_url={currentUser.avatar_url}
-                      name={currentUser.username ?? ''}
+                      name={currentUser.email}
                     />
-                    <span>{currentUser.username}</span>
+                    <span>{currentUser.email}</span>
                   </div>
                 </SelectItem>
               ) : null}

clients/apps/web/src/hooks/auth.ts

@@ -1,9 +1,9 @@
+import { usePostHog } from '@/hooks/posthog'
 import { AuthContext } from '@/providers/auth'
 import { api } from '@/utils/api'
 import { CONFIG } from '@/utils/config'
 import { Organization, UserRead } from '@polar-sh/sdk'
 import * as Sentry from '@sentry/nextjs'
-import { usePostHog } from '@/hooks/posthog'
 import { useCallback, useContext, useEffect } from 'react'
 
 export const useAuth = (): {
@@ -33,7 +33,6 @@ export const useAuth = (): {
       Sentry.setUser({
         id: currentUser.id,
         email: currentUser.email,
-        username: currentUser.username,
       })
 
       posthog.identify(currentUser)

clients/apps/web/src/hooks/posthog.ts

@@ -1,9 +1,9 @@
 'use client'
 
 import { CONFIG } from '@/utils/config'
-import { Properties, PostHog } from 'posthog-js'
-import { usePostHog as useOfficialPostHog} from 'posthog-js/react'
 import { UserRead } from '@polar-sh/sdk'
+import { PostHog, Properties } from 'posthog-js'
+import { usePostHog as useOfficialPostHog } from 'posthog-js/react'
 
 // https://posthog.com/product-engineers/5-ways-to-improve-analytics-data#suggested-naming-guide
 
@@ -52,7 +52,6 @@ type Verb =
   | 'open'
   | 'close'
 
-
 export type EventName = `${Surface}:${Category}:${Noun}:${Verb}`
 
 export interface PolarHog {
@@ -76,7 +75,6 @@ export const usePostHog = (): PolarHog => {
     const posthogId = `user:${user.id}`
     if (posthog.get_distinct_id() !== posthogId) {
       posthog.identify(posthogId, {
-        username: user.username,
         email: user.email,
       })
     }
@@ -100,6 +98,6 @@ export const usePostHog = (): PolarHog => {
     capture,
     identify,
     isFeatureEnabled,
-    logout
+    logout,
   }
 }