refactor: move special channel icons to their own component

upryzing · Jul 11, 2024 · 4257d33 · 4257d33
1 parent 2a035d5
commit 4257d33
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 54 deletions.
diff --git a/src/components/common/atoms/ChannelButton.tsx b/src/components/common/atoms/ChannelButton.tsx
@@ -4,6 +4,7 @@ import {observer} from 'mobx-react-lite';
 import {Channel} from 'revolt.js';
 
 import {ChannelIcon} from '@rvmob/components/navigation/ChannelIcon';
+import {SpecialChannelIcon} from '@rvmob/components/navigation/SpecialChannelIcon';
 import {MiniProfile} from '@rvmob/Profile';
 import {currentTheme, styles} from '@rvmob/Theme';
 import {Text} from '@rvmob/components/common/atoms/Text';
@@ -70,9 +71,11 @@ export const ChannelButton = observer(
         ) : (
           <>
             <View style={styles.iconContainer}>
-              <ChannelIcon
-                channel={{type: 'channel', channel: channel as Channel}}
-              />
+              {channel instanceof Channel ? (
+                <ChannelIcon channel={channel} />
+              ) : (
+                <SpecialChannelIcon channel={channel} />
+              )}
             </View>
             <Text style={{flex: 1, fontWeight: 'bold', color, fontSize: 15}}>
               {channel instanceof Channel ? channel.name ?? channel : channel}

diff --git a/src/components/common/settings/sections/server/ChannelSettingsSection.tsx b/src/components/common/settings/sections/server/ChannelSettingsSection.tsx
@@ -207,10 +207,7 @@ export const ChannelSettingsSection = observer(
                       setSection({section: 'channels', subsection: c._id});
                     }}>
                     <View style={{marginEnd: 8}}>
-                      <ChannelIcon
-                        channel={{type: 'channel', channel: c}}
-                        showUnread={false}
-                      />
+                      <ChannelIcon channel={c} showUnread={false} />
                     </View>
                     <View style={{flex: 1}}>
                       <View>

diff --git a/src/components/navigation/ChannelIcon.tsx b/src/components/navigation/ChannelIcon.tsx
@@ -7,58 +7,35 @@ import {Image} from '@rvmob/crossplat/Image';
 import {DEFAULT_MAX_SIDE} from '@rvmob/lib/consts';
 import {currentTheme} from '@rvmob/Theme';
 
-interface CIChannel {
-  type: 'channel';
-  channel: Channel;
-}
-
-interface SpecialCIChannel {
-  type: 'special';
-  channel: 'Home' | 'Friends' | 'Saved Notes' | 'Discover' | 'Debug';
-}
-
 export const ChannelIcon = ({
   channel,
   showUnread = true,
 }: {
-  channel: CIChannel | SpecialCIChannel;
+  channel: Channel;
   showUnread?: boolean;
 }) => {
   let color =
-    channel.type === 'channel' && showUnread && channel.channel.unread
+    showUnread && channel.unread
       ? currentTheme.foregroundPrimary
       : currentTheme.foregroundSecondary;
   let radius =
-    channel.type === 'channel' &&
-    (channel.channel.channel_type === 'DirectMessage' ||
-      channel.channel.channel_type === 'Group')
+    channel.channel_type === 'DirectMessage' || 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 === 'Discover' ? (
-    <MaterialCommunityIcon name="compass" size={24} color={color} />
-  ) : channel.channel === 'Debug' ? (
-    <MaterialIcon name="bug-report" size={24} color={color} />
-  ) : channel.channel.generateIconURL && channel.channel.generateIconURL() ? (
+  return channel.generateIconURL && channel.generateIconURL() ? (
     <Image
       source={{
-        uri:
-          channel.channel.generateIconURL() + '?max_side=' + DEFAULT_MAX_SIDE,
+        uri: channel.generateIconURL() + '?max_side=' + DEFAULT_MAX_SIDE,
       }}
       style={{
         width: 24,
         height: 24,
         borderRadius: radius,
       }}
     />
-  ) : channel.channel.channel_type === 'DirectMessage' ? (
+  ) : channel.channel_type === 'DirectMessage' ? (
     <MaterialCommunityIcon name="at" size={24} color={color} />
-  ) : channel.channel.channel_type === 'VoiceChannel' ? (
+  ) : 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/SpecialChannelIcon.tsx b/src/components/navigation/SpecialChannelIcon.tsx
@@ -0,0 +1,29 @@
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import {currentTheme} from '@rvmob/Theme';
+
+type SpecialCIChannel =
+  | 'Home'
+  | 'Friends'
+  | 'Saved Notes'
+  | 'Discover'
+  | 'Debug';
+
+export const SpecialChannelIcon = ({channel}: {channel: SpecialCIChannel}) => {
+  let color = currentTheme.foregroundSecondary;
+  switch (channel) {
+    case 'Home':
+      return <MaterialIcon name="home" size={24} color={color} />;
+    case 'Friends':
+      return <MaterialIcon name="group" size={24} color={color} />;
+    case 'Saved Notes':
+      return <MaterialIcon name="sticky-note-2" size={24} color={color} />;
+    case 'Discover':
+      return <MaterialCommunityIcon name="compass" size={24} color={color} />;
+    case 'Debug':
+      return <MaterialIcon name="bug-report" size={24} color={color} />;
+    default:
+      return <></>;
+  }
+};
diff --git a/src/components/pages/FriendsPage.tsx b/src/components/pages/FriendsPage.tsx
@@ -8,7 +8,7 @@ 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 {SpecialChannelIcon} from '@rvmob/components/navigation/SpecialChannelIcon';
 import {Button, Text} from '@rvmob/components/common/atoms';
 
 type DisplayStates = {
@@ -114,7 +114,7 @@ export const FriendsPage = observer(() => {
     <View style={styles.flex}>
       <ChannelHeader>
         <View style={styles.iconContainer}>
-          <ChannelIcon channel={{type: 'special', channel: 'Friends'}} />
+          <SpecialChannelIcon channel={'Friends'} />
         </View>
         <Text style={styles.channelName}>Friends</Text>
       </ChannelHeader>

diff --git a/src/components/pages/HomePage.tsx b/src/components/pages/HomePage.tsx
@@ -11,8 +11,8 @@ import {
 import {openUrl} from '@rvmob/lib/utils';
 import {styles} from '@rvmob/Theme';
 import {Avatar, Button, Text, Username} from '@rvmob/components/common/atoms';
-import {ChannelIcon} from '@rvmob/components/navigation/ChannelIcon';
 import {ChannelHeader} from '@rvmob/components/navigation/ChannelHeader';
+import {SpecialChannelIcon} from '@rvmob/components/navigation/SpecialChannelIcon';
 
 export const HomePage = observer(() => {
   const {t} = useTranslation();
@@ -49,7 +49,7 @@ export const HomePage = observer(() => {
     <>
       <ChannelHeader>
         <View style={styles.iconContainer}>
-          <ChannelIcon channel={{type: 'special', channel: 'Home'}} />
+          <SpecialChannelIcon channel={'Home'} />
         </View>
         <Text style={styles.channelName}>Home</Text>
       </ChannelHeader>

diff --git a/src/components/views/ChannelView.tsx b/src/components/views/ChannelView.tsx
@@ -19,6 +19,7 @@ import {FriendsPage} from '@rvmob/components/pages/FriendsPage';
 import {HomePage} from '@rvmob/components/pages/HomePage';
 import {VoiceChannel} from '@rvmob/components/pages/VoiceChannel';
 import {DiscoverPage} from '@rvmob/pages/discover/DiscoverPage';
+import {SpecialChannelIcon} from '../navigation/SpecialChannelIcon';
 
 function MessageViewErrorMessage({
   error,
@@ -70,7 +71,7 @@ export const ChannelView = observer(
             <View style={styles.flex}>
               <ChannelHeader>
                 <View style={styles.iconContainer}>
-                  <ChannelIcon channel={{type: 'special', channel: 'Debug'}} />
+                  <SpecialChannelIcon channel={'Debug'} />
                 </View>
                 <Text style={styles.channelName}>Debug Menu</Text>
               </ChannelHeader>
@@ -93,16 +94,11 @@ export const ChannelView = observer(
             <View style={styles.flex}>
               <ChannelHeader>
                 <View style={styles.iconContainer}>
-                  <ChannelIcon
-                    channel={
-                      channel.channel_type === 'SavedMessages'
-                        ? {type: 'special', channel: 'Saved Notes'}
-                        : {
-                            type: 'channel',
-                            channel: channel,
-                          }
-                    }
-                  />
+                  {channel.channel_type === 'SavedMessages' ? (
+                    <SpecialChannelIcon channel={'Saved Notes'} />
+                  ) : (
+                    <ChannelIcon channel={channel} />
+                  )}
                 </View>
                 <Text
                   style={{

diff --git a/src/pages/discover/DiscoverPage.tsx b/src/pages/discover/DiscoverPage.tsx
@@ -8,7 +8,7 @@ import {app, client} from '@rvmob/Generic';
 import {currentTheme, styles} from '@rvmob/Theme';
 import {Button, Text} from '@rvmob/components/common/atoms';
 import {ChannelHeader} from '@rvmob/components/navigation/ChannelHeader';
-import {ChannelIcon} from '@rvmob/components/navigation/ChannelIcon';
+import {SpecialChannelIcon} from '@rvmob/components/navigation/SpecialChannelIcon';
 
 const parser = new DOMParser({
   errorHandler: (level, message) => {
@@ -76,7 +76,7 @@ export const DiscoverPage = () => {
     <View style={{flex: 1}}>
       <ChannelHeader>
         <View style={styles.iconContainer}>
-          <ChannelIcon channel={{type: 'special', channel: 'Discover'}} />
+          <SpecialChannelIcon channel={'Discover'} />
         </View>
         <Text style={styles.channelName}>
           {t(`app.discover.header_${tab}`)}