expo-dev-launcher 2.4.2 → 2.4.3

package/bundle/components/AppHeader.tsx

@@ -16,6 +16,7 @@ import { useWindowDimensions } from 'react-native';
 import { SafeAreaTop } from '../components/SafeAreaTop';
 import { useBuildInfo } from '../providers/BuildInfoProvider';
 import { useUser } from '../providers/UserContextProvider';
+import { Avatar } from './Avatar';
 
 export function AppHeader({ navigation }) {
   const buildInfo = useBuildInfo();
@@ -29,7 +30,7 @@ export function AppHeader({ navigation }) {
   };
 
   const isAuthenticated = userData != null;
-  const selectedUserImage = selectedAccount?.owner?.profilePhoto ?? null;
+  const selectedUserImage = selectedAccount?.ownerUserActor?.profilePhoto ?? null;
 
   return (
     <>
@@ -69,11 +70,16 @@ export function AppHeader({ navigation }) {
               <View>
                 {isAuthenticated ? (
                   <View rounded="full" padding="small">
-                    <View height="xl" width="xl" bg="secondary" rounded="full">
-                      {selectedUserImage && (
-                        <Image size="xl" rounded="full" source={{ uri: selectedUserImage }} />
-                      )}
-                    </View>
+                    <Avatar
+                      profilePhoto={selectedUserImage}
+                      name={
+                        selectedAccount?.ownerUserActor?.fullName
+                          ? selectedAccount.ownerUserActor.fullName
+                          : selectedAccount?.name
+                      }
+                      isOrganization={selectedAccount?.ownerUserActor === null}
+                      size="xl"
+                    />
                   </View>
                 ) : (
                   <View mx="small">
@@ -84,20 +90,6 @@ export function AppHeader({ navigation }) {
                 )}
               </View>
             </Button.HighlightOnPressContainer>
-            {!selectedUserImage && (
-              <Row
-                style={{
-                  height: scale[2],
-                  flexWrap: 'wrap',
-                  maxWidth: scale[16],
-                  paddingRight: scale[2],
-                  transform: [{ translateY: -scale[2] }],
-                }}>
-                <Text numberOfLines={1} size="small" align="center" weight="medium">
-                  {selectedAccount?.name}
-                </Text>
-              </Row>
-            )}
           </View>
         </Row>
       </View>

package/bundle/components/Avatar.tsx

@@ -0,0 +1,96 @@
+import { iconSize, palette } from '@expo/styleguide-native';
+import { View, Image, scale, BuildingIcon, UserIcon } from 'expo-dev-client-components';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+type Props = {
+  name?: string;
+  profilePhoto?: string;
+  isOrganization?: boolean;
+  size?: React.ComponentProps<typeof Image>['size'];
+};
+
+export function Avatar({ profilePhoto, size = 'large', name = '', isOrganization = false }: Props) {
+  const firstLetter = name?.charAt(0).toLowerCase();
+  const viewSize = getViewSize(size);
+
+  if (isOrganization) {
+    const { backgroundColor, tintColor } = getOrganizationColor(firstLetter);
+    return (
+      <View
+        style={{
+          height: viewSize,
+          width: viewSize,
+          backgroundColor,
+        }}
+        rounded="full"
+        align="centered"
+        bg="secondary">
+        <BuildingIcon resizeMode="center" style={styles.icon} tintColor={tintColor} />
+      </View>
+    );
+  }
+
+  if (!profilePhoto || !firstLetter) {
+    return (
+      <View
+        style={{ height: viewSize, width: viewSize }}
+        rounded="full"
+        align="centered"
+        bg="secondary">
+        <UserIcon resizeMode="center" style={styles.icon} />
+      </View>
+    );
+  }
+
+  let _profilePhoto = profilePhoto;
+  if (profilePhoto.match('gravatar.com')) {
+    const defaultProfilePhoto = encodeURIComponent(
+      `https://storage.googleapis.com/expo-website-default-avatars-2023/${firstLetter}.png`
+    );
+    _profilePhoto = `${profilePhoto}&d=${defaultProfilePhoto}`;
+  }
+
+  return (
+    <View rounded="full" bg="secondary">
+      <Image rounded="full" source={{ uri: _profilePhoto }} size={size} />
+    </View>
+  );
+}
+
+function getOrganizationColor(firstLetter?: string) {
+  if (firstLetter?.match(/[a-d]/)) {
+    return { backgroundColor: palette.light.blue[200], tintColor: palette.light.blue[900] };
+  } else if (firstLetter?.match(/[e-h]/)) {
+    return { backgroundColor: palette.light.green[200], tintColor: palette.light.green[900] };
+  } else if (firstLetter?.match(/[i-l]/)) {
+    return { backgroundColor: palette.light.yellow[400], tintColor: palette.light.yellow[900] };
+  } else if (firstLetter?.match(/[m-p]/)) {
+    return { backgroundColor: palette.light.orange[200], tintColor: palette.light.orange[900] };
+  } else if (firstLetter?.match(/[q-t]/)) {
+    return { backgroundColor: palette.light.red[200], tintColor: palette.light.red[900] };
+  } else if (firstLetter?.match(/[u-z]/)) {
+    return { backgroundColor: palette.light.pink[200], tintColor: palette.light.pink[900] };
+  } else {
+    return { backgroundColor: palette.light.purple[200], tintColor: palette.light.purple[900] };
+  }
+}
+
+function getViewSize(size?: React.ComponentProps<typeof Image>['size']) {
+  switch (size) {
+    case 'tiny':
+      return scale.small;
+    case 'small':
+      return iconSize.small;
+    case 'large':
+      return iconSize.large;
+    case 'xl':
+      return scale.xl;
+    default:
+      return iconSize.large;
+  }
+}
+
+const styles = StyleSheet.create({
+  icon: { width: '45%', height: '45%' },
+});

package/bundle/functions/getUserProfileAsync.ts

@@ -5,7 +5,6 @@ import { apiClient } from '../apiClient';
 export type UserData = {
   id: string;
   appCount: number;
-  email: string;
   username: string;
   profilePhoto: string;
   accounts: UserAccount[];
@@ -15,19 +14,18 @@ export type UserData = {
 export type UserAccount = {
   id: string;
   name: string;
-  owner?: {
+  ownerUserActor?: {
     username: string;
     fullName?: string;
-    profilePhoto?: string;
+    profilePhoto: string;
   };
 };
 
 const query = gql`
   {
-    me {
+    meUserActor {
       id
       appCount
-      email
       profilePhoto
       username
       isExpoAdmin
@@ -35,7 +33,7 @@ const query = gql`
       accounts {
         id
         name
-        owner {
+        ownerUserActor {
           username
           fullName
           profilePhoto
@@ -46,5 +44,6 @@ const query = gql`
 `;
 
 export async function getUserProfileAsync() {
-  return apiClient.request(query).then((data) => data.me as UserData);
+  const data = await apiClient.request(query);
+  return data.meUserActor as UserData;
 }

package/bundle/screens/UserProfileScreen.tsx

@@ -14,6 +14,7 @@ import * as React from 'react';
 import { ActivityIndicator, ScrollView } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
+import { Avatar } from '../components/Avatar';
 import { LogoutConfirmationModal } from '../components/LogoutConfirmationModal';
 import { UserAccount, UserData } from '../functions/getUserProfileAsync';
 import { useModalStack } from '../providers/ModalStackProvider';
@@ -186,8 +187,8 @@ function UserAccountSelector({
   const orgs: UserAccount[] = [];
 
   for (const account of userData.accounts) {
-    if (account != null) {
-      if (account.owner != null) {
+    if (account) {
+      if (account.ownerUserActor) {
         accounts.push(account);
       } else {
         orgs.push(account);
@@ -213,17 +214,20 @@ function UserAccountSelector({
               roundedBottom={isLast ? 'large' : 'none'}
               roundedTop={isFirst ? 'large' : 'none'}>
               <Row align="center" py="small" px="medium" bg="default">
-                <View rounded="full" bg="secondary">
-                  <Image
-                    size="large"
-                    rounded="full"
-                    source={{ uri: account.owner?.profilePhoto }}
-                  />
-                </View>
+                <Avatar
+                  profilePhoto={account?.ownerUserActor?.profilePhoto}
+                  name={
+                    account?.ownerUserActor?.fullName
+                      ? account.ownerUserActor.fullName
+                      : account?.name
+                  }
+                  isOrganization={account?.ownerUserActor === null}
+                  size="large"
+                />
                 <Spacer.Horizontal size="small" />
 
                 <View>
-                  <Heading>{account.owner?.username ?? account.name}</Heading>
+                  <Heading>{account.ownerUserActor?.username ?? account.name}</Heading>
                 </View>
 
                 <Spacer.Vertical />