Use dedicated user avatar component

micahlt · Mar 20, 2024 · 8caaf18 · 8caaf18
1 parent e311099
commit 8caaf18
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 77 deletions.
diff --git 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/[email protected]
  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
@@ -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
@@ -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
@@ -6,18 +6,20 @@ function GroupAvatar({
  groupName,
  groupImage,
  groupColor,
- onPress = () => {},
- onLongPress = () => {},
+ onPress,
+ onLongPress,
  borderRadius = 12,
  style = {},
+ size = 45,
+ clickableByDefault = true,
 }) {
  const { colors } = useTheme();
  const ComponentOption = React.useCallback(() => {
  if (groupName == 'Home') {
  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
@@ -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
@@ -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;