From 674c73eceda431993975d13dc47a6370e7b63d66 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 22 Apr 2021 18:43:37 -0400
Subject: added delete button

---
 src/components/messages/ChannelPreview.tsx | 112 ++++++++++++++++++++---------
 1 file changed, 78 insertions(+), 34 deletions(-)

(limited to 'src/components/messages/ChannelPreview.tsx')

diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
index 8bd3a745..6b166b55 100644
--- a/src/components/messages/ChannelPreview.tsx
+++ b/src/components/messages/ChannelPreview.tsx
@@ -1,10 +1,15 @@
 import {useNavigation} from '@react-navigation/core';
 import React, {useContext} from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
-import {TouchableOpacity} from 'react-native-gesture-handler';
+import {
+  RectButton,
+  Swipeable,
+  TouchableOpacity,
+} from 'react-native-gesture-handler';
 import {useStore} from 'react-redux';
 import {ChannelPreviewMessengerProps} from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
+import Trash from '../../assets/ionicons/trash-outline.svg';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {
   LocalAttachmentType,
@@ -38,39 +43,59 @@ const ChannelPreview: React.FC<
   const unread = channel.state.unreadCount > 0;
 
   return (
-    <TouchableOpacity
-      style={styles.container}
-      onPress={() => {
-        setChannel(channel);
-        navigation.navigate('Chat');
-      }}>
-      <View>
-        <Image
-          style={styles.avatar}
-          source={
-            member
-              ? {uri: member.user?.thumbnail_url}
-              : require('../../assets/images/avatar-placeholder.png')
-          }
-        />
-        {online && <View style={styles.online} />}
-      </View>
-      <View style={styles.content}>
-        <Text
-          style={[styles.name, unread ? styles.unread : {}]}
-          numberOfLines={1}>
-          {member?.user?.first_name} {member?.user?.last_name}
-        </Text>
-        <Text
-          style={[styles.lastMessage, unread ? styles.unread : {}]}
-          numberOfLines={1}>
-          {channel.state.messages.length > 0
-            ? channel.state.messages[channel.state.messages.length - 1].text
-            : ''}
-        </Text>
-      </View>
-      {unread && <View style={styles.purpleDot} />}
-    </TouchableOpacity>
+    <Swipeable
+      overshootLeft={false}
+      overshootRight={false}
+      renderRightActions={() => (
+        <View style={styles.swipeableContainer}>
+          <RectButton
+            style={styles.rightSwipeableButton}
+            onPress={() => {
+              channel.delete();
+            }}>
+            <Trash
+              width={normalize(25)}
+              height={normalize(25)}
+              color={'white'}
+            />
+            <Text style={styles.actionText}>Delete</Text>
+          </RectButton>
+        </View>
+      )}>
+      <TouchableOpacity
+        style={styles.container}
+        onPress={() => {
+          setChannel(channel);
+          navigation.navigate('Chat');
+        }}>
+        <View>
+          <Image
+            style={styles.avatar}
+            source={
+              member
+                ? {uri: member.user?.thumbnail_url}
+                : require('../../assets/images/avatar-placeholder.png')
+            }
+          />
+          {online && <View style={styles.online} />}
+        </View>
+        <View style={styles.content}>
+          <Text
+            style={[styles.name, unread ? styles.unread : {}]}
+            numberOfLines={1}>
+            {member?.user?.first_name} {member?.user?.last_name}
+          </Text>
+          <Text
+            style={[styles.lastMessage, unread ? styles.unread : {}]}
+            numberOfLines={1}>
+            {channel.state.messages.length > 0
+              ? channel.state.messages[channel.state.messages.length - 1].text
+              : ''}
+          </Text>
+        </View>
+        {unread && <View style={styles.purpleDot} />}
+      </TouchableOpacity>
+    </Swipeable>
   );
 };
 
@@ -128,6 +153,25 @@ const styles = StyleSheet.create({
     borderRadius: normalize(10) / 2,
     marginLeft: '5%',
   },
+  swipeableContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#C42634',
+  },
+  rightSwipeableButton: {
+    width: 72,
+    height: 62,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  actionText: {
+    color: 'white',
+    fontSize: normalize(12),
+    fontWeight: '500',
+    backgroundColor: 'transparent',
+    paddingHorizontal: '5%',
+    marginTop: '5%',
+  },
 });
 
 export default ChannelPreview;
-- 
cgit v1.2.3-70-g09d2


From 3a6024fc8282f81845df3643c1a3c7ec38746c71 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 22 Apr 2021 18:57:17 -0400
Subject: added mute/unmute

---
 src/assets/images/mute.png                 | Bin 0 -> 1560 bytes
 src/assets/images/unmute.png               | Bin 0 -> 1279 bytes
 src/components/messages/ChannelPreview.tsx |  41 ++++++++++++++++++++++-------
 3 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/images/mute.png
 create mode 100644 src/assets/images/unmute.png

(limited to 'src/components/messages/ChannelPreview.tsx')

diff --git a/src/assets/images/mute.png b/src/assets/images/mute.png
new file mode 100644
index 00000000..b330e259
Binary files /dev/null and b/src/assets/images/mute.png differ
diff --git a/src/assets/images/unmute.png b/src/assets/images/unmute.png
new file mode 100644
index 00000000..7fe1782d
Binary files /dev/null and b/src/assets/images/unmute.png differ
diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
index 6b166b55..f2662b6a 100644
--- a/src/components/messages/ChannelPreview.tsx
+++ b/src/components/messages/ChannelPreview.tsx
@@ -41,6 +41,10 @@ const ChannelPreview: React.FC<
   const member = getMember(channel, state);
   const online = isOnline(member?.user?.last_active);
   const unread = channel.state.unreadCount > 0;
+  const isMuted = channel.muteStatus().muted;
+  const mutedImage = isMuted
+    ? require('../../assets/images/unmute.png')
+    : require('../../assets/images/mute.png');
 
   return (
     <Swipeable
@@ -49,15 +53,20 @@ const ChannelPreview: React.FC<
       renderRightActions={() => (
         <View style={styles.swipeableContainer}>
           <RectButton
-            style={styles.rightSwipeableButton}
+            style={styles.muteButton}
             onPress={() => {
-              channel.delete();
+              channel.mute();
+              console.log(channel.muteStatus());
             }}>
-            <Trash
-              width={normalize(25)}
-              height={normalize(25)}
-              color={'white'}
-            />
+            <Image source={mutedImage} style={styles.icon} />
+            <Text style={styles.actionText}>{isMuted ? 'Unmute' : 'Mute'}</Text>
+          </RectButton>
+          <RectButton
+            style={styles.deleteButton}
+            onPress={() => {
+              channel.hide();
+            }}>
+            <Trash style={styles.icon} color={'white'} />
             <Text style={styles.actionText}>Delete</Text>
           </RectButton>
         </View>
@@ -156,13 +165,21 @@ const styles = StyleSheet.create({
   swipeableContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#C42634',
+    flexDirection: 'row',
   },
-  rightSwipeableButton: {
+  muteButton: {
     width: 72,
-    height: 62,
+    height: '100%',
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: '#C4C4C4',
+  },
+  deleteButton: {
+    width: 72,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#C42634',
   },
   actionText: {
     color: 'white',
@@ -172,6 +189,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: '5%',
     marginTop: '5%',
   },
+  icon: {
+    width: normalize(25),
+    height: normalize(25),
+  },
 });
 
 export default ChannelPreview;
-- 
cgit v1.2.3-70-g09d2


From 80237632843c123253b572f571bb6c336a4fad4e Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 22 Apr 2021 19:01:16 -0400
Subject: fixed mute toggle

---
 src/components/messages/ChannelPreview.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src/components/messages/ChannelPreview.tsx')

diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
index f2662b6a..4a0cee0b 100644
--- a/src/components/messages/ChannelPreview.tsx
+++ b/src/components/messages/ChannelPreview.tsx
@@ -55,8 +55,11 @@ const ChannelPreview: React.FC<
           <RectButton
             style={styles.muteButton}
             onPress={() => {
-              channel.mute();
-              console.log(channel.muteStatus());
+              if (isMuted) {
+                channel.unmute();
+              } else {
+                channel.mute();
+              }
             }}>
             <Image source={mutedImage} style={styles.icon} />
             <Text style={styles.actionText}>{isMuted ? 'Unmute' : 'Mute'}</Text>
-- 
cgit v1.2.3-70-g09d2


From 1c225f0dd7caaffa9501f9a86a1e1f9937b36f56 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 23 Apr 2021 16:09:58 -0400
Subject: fixed slowness

---
 src/components/messages/ChannelPreview.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components/messages/ChannelPreview.tsx')

diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
index 4a0cee0b..87b94179 100644
--- a/src/components/messages/ChannelPreview.tsx
+++ b/src/components/messages/ChannelPreview.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/core';
-import React, {useContext} from 'react';
+import React, {useContext, useState} from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
 import {
   RectButton,
@@ -41,7 +41,7 @@ const ChannelPreview: React.FC<
   const member = getMember(channel, state);
   const online = isOnline(member?.user?.last_active);
   const unread = channel.state.unreadCount > 0;
-  const isMuted = channel.muteStatus().muted;
+  const [isMuted, setIsMuted] = useState(channel.muteStatus().muted);
   const mutedImage = isMuted
     ? require('../../assets/images/unmute.png')
     : require('../../assets/images/mute.png');
@@ -60,6 +60,7 @@ const ChannelPreview: React.FC<
               } else {
                 channel.mute();
               }
+              setIsMuted(!isMuted);
             }}>
             <Image source={mutedImage} style={styles.icon} />
             <Text style={styles.actionText}>{isMuted ? 'Unmute' : 'Mute'}</Text>
-- 
cgit v1.2.3-70-g09d2