refactor: move ChannelIcon to its own file

revoltchat · Nov 10, 2023 · 69b6022 · 69b6022
1 parent 70e533a
commit 69b6022
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 97 deletions.
diff --git a/src/Generic.tsx b/src/Generic.tsx
@@ -3,14 +3,12 @@ import {Linking, View} from 'react-native';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import FastImage from 'react-native-fast-image';
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import {API, Channel, Client, Message, Server} from 'revolt.js';
 
 import {setLanguage} from '../i18n/i18n';
 import {languages} from '../i18n/languages';
-import {currentTheme, setTheme, themes} from './Theme';
+import {setTheme, themes} from './Theme';
 import {
  DEFAULT_API_URL,
  DEFAULT_MAX_SIDE,
@@ -475,62 +473,6 @@ export const GeneralAvatar = ({
  );
 };
 
-interface CIChannel {
- type: 'channel';
- channel: Channel;
-}
-
-interface SpecialCIChannel {
- type: 'special';
- channel: 'Home' | 'Friends' | 'Saved Notes' | 'Debug';
-}
-
-export const ChannelIcon = ({
- channel,
- showUnread = true,
-}: {
- channel: CIChannel | SpecialCIChannel;
- showUnread?: boolean;
-}) => {
- let color =
- channel.type === 'channel' && showUnread && channel.channel.unread
- ? currentTheme.foregroundPrimary
- : currentTheme.foregroundSecondary;
- let radius =
- channel.type === 'channel' &&
- (channel.channel.channel_type === 'DirectMessage' ||
- channel.channel.channel_type === 'Group')
- ? 10000
- : 0;
- return channel.channel === 'Home' ? (
- <MaterialIcon name="home" size={24} color={color} />
- ) : channel.channel === 'Friends' ? (
- <MaterialIcon name="group" size={24} color={color} />
- ) : channel.channel === 'Saved Notes' ? (
- <MaterialIcon name="sticky-note-2" size={24} color={color} />
- ) : channel.channel === 'Debug' ? (
- <MaterialIcon name="bug-report" size={24} color={color} />
- ) : channel.channel.generateIconURL && channel.channel.generateIconURL() ? (
- <Image
- source={{
- uri:
- channel.channel.generateIconURL() + '?max_side=' + DEFAULT_MAX_SIDE,
- }}
- style={{
- width: 24,
- height: 24,
- borderRadius: radius,
- }}
- />
- ) : channel.channel.channel_type === 'DirectMessage' ? (
- <MaterialCommunityIcon name="at" size={24} color={color} />
- ) : channel.channel.channel_type === 'VoiceChannel' ? (
- <MaterialIcon name="volume-up" size={24} color={color} />
- ) : (
- <MaterialIcon name="tag" size={24} color={color} />
- );
-};
-
 export var selectedRemark =
  LOADING_SCREEN_REMARKS[
  Math.floor(Math.random() * LOADING_SCREEN_REMARKS.length)

diff --git a/src/components/common/atoms/ChannelButton.tsx b/src/components/common/atoms/ChannelButton.tsx
@@ -4,13 +4,13 @@ import {observer} from 'mobx-react-lite';
 
 import {Channel} from 'revolt.js';
 
-import {ChannelIcon} from '../../../Generic';
-import {MiniProfile} from '../../../Profile';
-import {currentTheme, styles} from '../../../Theme';
+import {ChannelIcon} from '@rvmob/components/navigation/ChannelIcon';
+import {MiniProfile} from '@rvmob/Profile';
+import {currentTheme, styles} from '@rvmob/Theme';
 import {Text} from './Text';
 
 type ChannelButtonProps = {
- channel: Channel;
+ channel: Channel | 'Home' | 'Friends' | 'Saved Notes' | 'Debug';
  onPress?: any;
  onLongPress?: any;
  delayLongPress?: number;
@@ -28,17 +28,18 @@ export const ChannelButton = observer(
  showUnread = true,
  }: ChannelButtonProps) => {
  let color =
- showUnread && channel.unread
+ showUnread && channel instanceof Channel && channel.unread
  ? currentTheme.foregroundPrimary
  : currentTheme.foregroundTertiary;
- let pings = channel.mentions?.length;
+ let pings = channel instanceof Channel ? channel.mentions?.length : 0;
  let classes = [styles.channelButton];
  if (selected) {
  classes.push(styles.channelButtonSelected);
  }
  if (
- channel.channel_type === 'DirectMessage' ||
- channel.channel_type === 'Group'
+ channel instanceof Channel &&
+ (channel.channel_type === 'DirectMessage' ||
+ channel.channel_type === 'Group')
  ) {
  classes.push({padding: 6});
  } else {
@@ -49,9 +50,14 @@ export const ChannelButton = observer(
  onPress={() => onPress()}
  onLongPress={() => onLongPress()}
  delayLongPress={delayLongPress}
- key={`${channel._id} `}
+ key={
+ channel instanceof Channel
+ ? channel._id
+ : `channel-special-${channel}`
+ }
  style={classes}>
- {channel.channel_type === 'DirectMessage' ? (
+ {channel instanceof Channel &&
+ channel.channel_type === 'DirectMessage' ? (
  <View
  style={{
  flexDirection: 'row',
@@ -60,17 +66,19 @@ export const ChannelButton = observer(
  }}>
  <MiniProfile user={channel.recipient} color={color} />
  </View>
- ) : channel.channel_type === 'Group' ? (
+ ) : channel instanceof Channel && channel.channel_type === 'Group' ? (
  <MiniProfile channel={channel} color={color} />
  ) : (
  <>
  <View style={styles.iconContainer}>
- <ChannelIcon channel={{type: 'channel', channel: channel}} />
+ <ChannelIcon
+ channel={{type: 'channel', channel: channel as Channel}}
+ />
  </View>
  <Text style={{flex: 1, fontWeight: 'bold', color, fontSize: 15}}>
- {channel.name || channel}
+ {channel instanceof Channel ? channel.name ?? channel : channel}
  </Text>
- {showUnread && channel.mentions?.length > 0 ? (
+ {showUnread && channel instanceof Channel && pings > 0 ? (
  <View
  style={{
  width: 20,
@@ -87,7 +95,7 @@ export const ChannelButton = observer(
  {pings > 9 ? '9+' : pings}
  </Text>
  </View>
- ) : showUnread && channel.unread ? (
+ ) : showUnread && channel instanceof Channel && channel.unread ? (
  <View
  style={{
  width: 12,

diff --git a/src/components/navigation/ChannelIcon.tsx b/src/components/navigation/ChannelIcon.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+import FastImage from 'react-native-fast-image';
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import {Channel} from 'revolt.js';
+
+import {DEFAULT_MAX_SIDE} from '@rvmob/lib/consts';
+import {currentTheme} from '@rvmob/Theme';
+
+const Image = FastImage;
+
+interface CIChannel {
+ type: 'channel';
+ channel: Channel;
+}
+
+interface SpecialCIChannel {
+ type: 'special';
+ channel: 'Home' | 'Friends' | 'Saved Notes' | 'Debug';
+}
+
+export const ChannelIcon = ({
+ channel,
+ showUnread = true,
+}: {
+ channel: CIChannel | SpecialCIChannel;
+ showUnread?: boolean;
+}) => {
+ let color =
+ channel.type === 'channel' && showUnread && channel.channel.unread
+ ? currentTheme.foregroundPrimary
+ : currentTheme.foregroundSecondary;
+ let radius =
+ channel.type === 'channel' &&
+ (channel.channel.channel_type === 'DirectMessage' ||
+ channel.channel.channel_type === 'Group')
+ ? 10000
+ : 0;
+ return channel.channel === 'Home' ? (
+ <MaterialIcon name="home" size={24} color={color} />
+ ) : channel.channel === 'Friends' ? (
+ <MaterialIcon name="group" size={24} color={color} />
+ ) : channel.channel === 'Saved Notes' ? (
+ <MaterialIcon name="sticky-note-2" size={24} color={color} />
+ ) : channel.channel === 'Debug' ? (
+ <MaterialIcon name="bug-report" size={24} color={color} />
+ ) : channel.channel.generateIconURL && channel.channel.generateIconURL() ? (
+ <Image
+ source={{
+ uri:
+ channel.channel.generateIconURL() + '?max_side=' + DEFAULT_MAX_SIDE,
+ }}
+ style={{
+ width: 24,
+ height: 24,
+ borderRadius: radius,
+ }}
+ />
+ ) : channel.channel.channel_type === 'DirectMessage' ? (
+ <MaterialCommunityIcon name="at" size={24} color={color} />
+ ) : channel.channel.channel_type === 'VoiceChannel' ? (
+ <MaterialIcon name="volume-up" size={24} color={color} />
+ ) : (
+ <MaterialIcon name="tag" size={24} color={color} />
+ );
+};
diff --git a/src/components/navigation/ChannelList.tsx b/src/components/navigation/ChannelList.tsx
@@ -15,6 +15,10 @@ const Image = FastImage;
 type ChannelListProps = {
  onChannelClick: Function;
  currentChannel: Channel;
+ currentServer: Server | null;
+};
+
+type ServerChannelListProps = ChannelListProps & {
  currentServer: Server;
 };
 
@@ -65,7 +69,7 @@ const ServerChannelListCategory = observer(
  },
 );
 
-const ServerChannelList = observer((props: ChannelListProps) => {
+const ServerChannelList = observer((props: ServerChannelListProps) => {
  const [processedChannels, setProcessedChannels] = React.useState(
  [] as string[],
  );
@@ -194,7 +198,7 @@ export const ChannelList = observer((props: ChannelListProps) => {
  }}
  key={'friends'}
  channel={'Friends'}
- selected={props.currentChannel === 'friends'}
+ selected={(props.currentChannel as Channel | string) === 'friends'}
  />
 
  <ChannelButton
@@ -214,7 +218,7 @@ export const ChannelList = observer((props: ChannelListProps) => {
  }}
  key={'debugChannel'}
  channel={'Debug'}
- selected={props.currentChannel === 'debug'}
+ selected={(props.currentChannel as Channel | string) === 'debug'}
  />
  ) : null}
 

diff --git a/src/components/pages/FriendsPage.tsx b/src/components/pages/FriendsPage.tsx
@@ -4,11 +4,12 @@ import {observer} from 'mobx-react-lite';
 
 import {User} from 'revolt.js';
 
-import {app, client, ChannelIcon} from '../../Generic';
-import {MiniProfile} from '../../Profile';
-import {styles} from '../../Theme';
-import {ChannelHeader} from '../navigation/ChannelHeader';
-import {Button, Text} from '../common/atoms';
+import {app, client} from '@rvmob/Generic';
+import {MiniProfile} from '@rvmob/Profile';
+import {styles} from '@rvmob/Theme';
+import {ChannelHeader} from '@rvmob/components/navigation/ChannelHeader';
+import {ChannelIcon} from '@rvmob/components/navigation/ChannelIcon';
+import {Button, Text} from '@rvmob/components/common/atoms';
 
 type DisplayStates = {
  onlineFriends: boolean;

diff --git a/src/components/pages/HomePage.tsx b/src/components/pages/HomePage.tsx
@@ -3,16 +3,17 @@ import {useTranslation} from 'react-i18next';
 import {TouchableOpacity, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
-import {app, ChannelIcon, client, openUrl} from '../../Generic';
-import {Avatar} from '../../Profile';
+import {app, client, openUrl} from '@rvmob/Generic';
+import {Avatar} from '@rvmob/Profile';
 import {
  SPECIAL_DATES,
  SPECIAL_DATE_OBJECTS,
  SPECIAL_SERVERS,
-} from '../../lib/consts';
-import {styles} from '../../Theme';
-import {ChannelHeader} from '../navigation/ChannelHeader';
-import {Button, Text, Username} from '../common/atoms';
+} from '@rvmob/lib/consts';
+import {styles} from '@rvmob/Theme';
+import {Button, Text, Username} from '@rvmob/components/common/atoms';
+import {ChannelIcon} from '@rvmob/components/navigation/ChannelIcon';
+import {ChannelHeader} from '@rvmob/components/navigation/ChannelHeader';
 
 export const HomePage = observer(() => {
  const {t} = useTranslation();

diff --git a/src/components/views/ChannelView.tsx b/src/components/views/ChannelView.tsx
@@ -7,15 +7,16 @@ import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
 import {Channel} from 'revolt.js';
 
-import {app, ChannelIcon} from '../../Generic';
-import {Messages} from '../../LegacyMessageView';
-import {NewMessageView} from '../../MessageView';
-import {MessageBox} from '../../MessageBox';
-import {currentTheme, styles} from '../../Theme';
-import {FriendsPage} from '../pages/FriendsPage';
-import {HomePage} from '../pages/HomePage';
-import {ChannelHeader} from '../navigation/ChannelHeader';
-import {Button, Text} from '../common/atoms';
+import {app} from '@rvmob/Generic';
+import {Messages} from '@rvmob/LegacyMessageView';
+import {NewMessageView} from '@rvmob/MessageView';
+import {MessageBox} from '@rvmob/MessageBox';
+import {currentTheme, styles} from '@rvmob/Theme';
+import {Button, Text} from '@rvmob/components/common/atoms';
+import {ChannelIcon} from '@rvmob/components/navigation/ChannelIcon';
+import {ChannelHeader} from '@rvmob/components/navigation/ChannelHeader';
+import {FriendsPage} from '@rvmob/components/pages/FriendsPage';
+import {HomePage} from '@rvmob/components/pages/HomePage';
 
 function MessageViewErrorMessage({
  error,