From 8caaf184b97dbef5e351d761abd9d5fb070a7e5e Mon Sep 17 00:00:00 2001
From: Micah Lindley <micahincorporated@gmail.com>
Date: Wed, 20 Mar 2024 13:04:49 -0500
Subject: [PATCH] Use dedicated user avatar component

---
 .github/workflows/android-debug.yml |  5 ++-
 src/components/ActivityItem.jsx     | 20 +--------
 src/components/Comment.jsx          | 29 ++++---------
 src/components/GroupAvatar.jsx      | 18 +++++----
 src/components/Post.jsx             | 34 ++++------------
 src/components/UserAvatar.jsx       | 63 +++++++++++++++++++++++++++++
 6 files changed, 92 insertions(+), 77 deletions(-)
 create mode 100644 src/components/UserAvatar.jsx

diff --git a/.github/workflows/android-debug.yml b/.github/workflows/android-debug.yml
index af3d807..f0c66bd 100644
--- a/.github/workflows/android-debug.yml
+++ b/.github/workflows/android-debug.yml
@@ -50,13 +50,14 @@ jobs:
           echo "COMMIT_SHORT_SHA=$calculatedSha" >> $GITHUB_ENV
 
       - name: Rename APK
-        run: mv android/app/build/outputs/apk/release/app-release.apk offsides-nightly-${{ env.COMMIT_SHORT_SHA }}.apk
+        run: mv android/app/build/outputs/apk/release/app-release.apk android/app/build/outputs/apk/release/offsides-nightly-${{ env.COMMIT_SHORT_SHA }}.apk
 
       - name: Create prerelease
         uses: ncipollo/release-action@v1.14.0
         with:
           name: ${{ env.COMMIT_SHORT_SHA }} [NIGHTLY]
-          artifacts: offsides-${{ env.COMMIT_SHORT_SHA }}-nightly.apk
+          artifacts: android/app/build/outputs/apk/release/offsides-nightly-${{ env.COMMIT_SHORT_SHA }}.apk
+          artifactContentType: application/vnd.android.package-archive
           body: This is a release created automatically from commit ${{ github.sha }}.  It has not been tested - do not use if you are not prepared for bugs and glitches.  Instead, try the [latest versioned release](https://github.com/micahlt/offsides/releases/latest).
           prerelease: true
           allowUpdates: true
diff --git a/src/components/ActivityItem.jsx b/src/components/ActivityItem.jsx
index 5eb68e9..b5521e6 100644
--- a/src/components/ActivityItem.jsx
+++ b/src/components/ActivityItem.jsx
@@ -11,6 +11,7 @@ import {
 } from 'react-native-paper';
 import timesago from 'timesago';
 import { AppContext } from '../App';
+import UserAvatar from './UserAvatar';
 
 function ActivityItem({ activity }) {
   const {
@@ -112,24 +113,7 @@ function ActivityItem({ activity }) {
             <Text variant="bodySmall">{timesago(activity.timestamp)}</Text>
           </View>
           <View style={{ flexDirection: 'row' }}>
-            {activity.conversation_icon ? (
-              <Avatar.Text
-                size={46}
-                label={String(activity.conversation_icon?.emoji || '‼️')}
-                color="white"
-                style={{
-                  backgroundColor:
-                    activity.conversation_icon?.color || colors.primary,
-                  borderRadius: 10,
-                }}
-              />
-            ) : (
-              <Avatar.Text
-                size={46}
-                label={activity.username.length < 3 ? activity.username : '💬'}
-                style={{ borderRadius: 10 }}
-              />
-            )}
+            <UserAvatar conversationIcon={activity.conversation_icon} />
             <Text
               variant="bodyMedium"
               style={{ marginLeft: 10, color: colors.secondary }}>
diff --git a/src/components/Comment.jsx b/src/components/Comment.jsx
index 6f1d583..b4429df 100644
--- a/src/components/Comment.jsx
+++ b/src/components/Comment.jsx
@@ -12,6 +12,7 @@ import {
 import timesago from 'timesago';
 import { AppContext } from '../App';
 import AutoImage from './AutoImage';
+import UserAvatar from './UserAvatar.jsx';
 
 const BORDER_RADIUS = 10;
 
@@ -69,28 +70,12 @@ function Comment({ comment, nav }) {
       mode="contained">
       <Card.Content>
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          {comment?.identity?.conversation_icon ? (
-            <Avatar.Text
-              size={46}
-              label={String(
-                comment?.identity?.conversation_icon?.emoji || '‼️',
-              )}
-              color="white"
-              style={{
-                backgroundColor:
-                  comment.identity?.conversation_icon?.color || colors.primary,
-                borderRadius: BORDER_RADIUS,
-              }}
-            />
-          ) : (
-            <Avatar.Text
-              size={46}
-              label={
-                comment.identity.name.length < 3 ? comment.identity.name : '💬'
-              }
-              style={{ borderRadius: BORDER_RADIUS }}
-            />
-          )}
+          <UserAvatar
+            group={comment.group}
+            conversationIcon={comment?.identity?.conversation_icon}
+            size={46}
+            borderRadius={BORDER_RADIUS}
+          />
           {comment.reply_comment_alias && (
             <Text
               variant="titleMedium"
diff --git a/src/components/GroupAvatar.jsx b/src/components/GroupAvatar.jsx
index fb08e36..f5b9c99 100644
--- a/src/components/GroupAvatar.jsx
+++ b/src/components/GroupAvatar.jsx
@@ -6,10 +6,12 @@ function GroupAvatar({
   groupName,
   groupImage,
   groupColor,
-  onPress = () => {},
-  onLongPress = () => {},
+  onPress,
+  onLongPress,
   borderRadius = 12,
   style = {},
+  size = 45,
+  clickableByDefault = true,
 }) {
   const { colors } = useTheme();
   const ComponentOption = React.useCallback(() => {
@@ -17,7 +19,7 @@ function GroupAvatar({
       return (
         <Avatar.Icon
           icon="home"
-          size={45}
+          size={size}
           style={{
             borderRadius: borderRadius,
             backgroundColor: groupColor || colors.primaryContainer,
@@ -28,8 +30,8 @@ function GroupAvatar({
       return (
         <Image
           style={{
-            height: 45,
-            width: 45,
+            height: size,
+            width: size,
             borderRadius: borderRadius,
           }}
           source={{ uri: groupImage }}
@@ -38,7 +40,7 @@ function GroupAvatar({
     } else {
       return (
         <Avatar.Text
-          size={45}
+          size={size}
           label={groupName.length < 3 ? groupName : groupName.substring(0, 2)}
           style={{
             borderRadius: borderRadius,
@@ -50,8 +52,8 @@ function GroupAvatar({
   }, [groupName]);
   return (
     <TouchableRipple
-      onPress={onPress}
-      onLongPress={onLongPress}
+      onPress={clickableByDefault ? onPress : null}
+      onLongPress={clickableByDefault ? onLongPress : null}
       style={{ borderRadius: borderRadius, ...style }}
       borderless={true}>
       <ComponentOption />
diff --git a/src/components/Post.jsx b/src/components/Post.jsx
index c2ebddb..d7d4988 100644
--- a/src/components/Post.jsx
+++ b/src/components/Post.jsx
@@ -5,8 +5,8 @@ import timesago from 'timesago';
 import { AppContext } from '../App';
 import AutoImage from './AutoImage';
 import GroupAvatar from './GroupAvatar';
-import Video from 'react-native-video';
 import AutoVideo from './AutoVideo';
+import UserAvatar from './UserAvatar';
 
 const BORDER_RADIUS = 12;
 
@@ -65,32 +65,12 @@ function Post({ post, nav, commentView = false, repost = false }) {
       style={repost ? { marginBottom: 10 } : {}}>
       <Card.Content>
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          {post?.identity?.conversation_icon ? (
-            <Avatar.Text
-              size={46}
-              label={String(post?.identity?.conversation_icon?.emoji || '‼️')}
-              color="white"
-              style={{
-                backgroundColor:
-                  post.identity?.conversation_icon?.color || colors.primary,
-                borderRadius: BORDER_RADIUS,
-              }}
-            />
-          ) : (
-            <GroupAvatar
-              groupColor={post.group.color}
-              groupImage={post.group.icon_url}
-              groupName={post.group.name}
-              onPress={() =>
-                nav.navigate('Home', {
-                  groupID: post.group.id,
-                  groupColor: post.group.color,
-                  groupImage: post.group.icon_url,
-                  groupName: post.group.name,
-                })
-              }
-            />
-          )}
+          <UserAvatar
+            group={post.group}
+            conversationIcon={post?.identity?.conversation_icon}
+            size={46}
+            borderRadius={BORDER_RADIUS}
+          />
           <View
             style={{
               justifyContent: 'center',
diff --git a/src/components/UserAvatar.jsx b/src/components/UserAvatar.jsx
new file mode 100644
index 0000000..45d8ad9
--- /dev/null
+++ b/src/components/UserAvatar.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Avatar, Badge, useTheme } from 'react-native-paper';
+import GroupAvatar from './GroupAvatar';
+import { useNavigation } from '@react-navigation/native';
+
+function UserAvatar({ conversationIcon, group, size = 45, borderRadius = 12 }) {
+  const nav = useNavigation();
+  const { colors } = useTheme();
+  return React.useCallback(
+    <>
+      {conversationIcon?.emoji ? (
+        <>
+          <Avatar.Text
+            size={size}
+            label={String(conversationIcon.emoji)}
+            color="white"
+            style={{
+              backgroundColor: conversationIcon.color || colors.primary,
+              borderRadius: borderRadius,
+            }}></Avatar.Text>
+          <GroupAvatar
+            groupColor={group.color}
+            groupImage={group.icon_url}
+            groupName={group.name}
+            onPress={() =>
+              nav.navigate('Home', {
+                groupID: group.id,
+                groupColor: group.color,
+                groupImage: group.icon_url,
+                groupName: group.name,
+              })
+            }
+            style={{
+              position: 'absolute',
+              bottom: 5 - size / 5,
+              left: size - 5 - size / 5,
+              overflow: 'hidden',
+            }}
+            size={20}
+            borderRadius={borderRadius / 2}
+          />
+        </>
+      ) : (
+        <GroupAvatar
+          groupColor={group.color}
+          groupImage={group.icon_url}
+          groupName={group.name}
+          onPress={() =>
+            nav.navigate('Home', {
+              groupID: group.id,
+              groupColor: group.color,
+              groupImage: group.icon_url,
+              groupName: group.name,
+            })
+          }
+        />
+      )}
+    </>,
+    [],
+  );
+}
+
+export default UserAvatar;