Fix invites used order, adjust layout (#2139)

src/state/queries/invites.ts

@@ -43,7 +43,14 @@ export function useInviteCodesQuery() {
       }
 
       const available = res.data.codes.filter(isInviteAvailable)
-      const used = res.data.codes.filter(code => !isInviteAvailable(code))
+      const used = res.data.codes
+        .filter(code => !isInviteAvailable(code))
+        .sort((a, b) => {
+          return (
+            new Date(b.uses[0].usedAt).getTime() -
+            new Date(a.uses[0].usedAt).getTime()
+          )
+        })
 
       return {
         disabled: false,

src/view/com/modals/InviteCodes.tsx

@@ -142,6 +142,7 @@ function InviteCode({
   const pal = usePalette('default')
   const invitesState = useInvitesState()
   const {setInviteCopied} = useInvitesAPI()
+  const uses = invite.uses
 
   const onPress = React.useCallback(() => {
     Clipboard.setString(invite.code)
@@ -185,7 +186,7 @@ function InviteCode({
           />
         )}
       </TouchableOpacity>
-      {invite.uses.length > 0 ? (
+      {uses.length > 0 ? (
         <View
           style={{
             flexDirection: 'column',
@@ -193,19 +194,19 @@ function InviteCode({
             paddingTop: 6,
           }}>
           <Text style={pal.text}>
-            <Trans>Used by:</Trans>
+            <Trans>Used by:</Trans>{' '}
+            {uses.map((use, i) => (
+              <Link
+                key={use.usedBy}
+                href={makeProfileLink({handle: use.usedBy, did: ''})}
+                style={{
+                  flexDirection: 'row',
+                }}>
+                <UserInfoText did={use.usedBy} style={pal.link} />
+                {i !== uses.length - 1 && <Text style={pal.text}>, </Text>}
+              </Link>
+            ))}
           </Text>
-          {invite.uses.map(use => (
-            <Link
-              key={use.usedBy}
-              href={makeProfileLink({handle: use.usedBy, did: ''})}
-              style={{
-                flexDirection: 'row',
-              }}>
-              <Text style={pal.text}>• </Text>
-              <UserInfoText did={use.usedBy} style={pal.link} />
-            </Link>
-          ))}
         </View>
       ) : null}
     </View>