From 130032dc80161e4ff17b39b76269b36d0842c68a Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Thu, 9 Jan 2025 20:14:35 -0800
Subject: [PATCH] updating channel membership

---
 .../mobile/src/details/Details.styled.ts      | 84 +++++++++++++++-
 app/client/mobile/src/details/Details.tsx     | 95 ++++++++++++++++---
 2 files changed, 166 insertions(+), 13 deletions(-)

diff --git a/app/client/mobile/src/details/Details.styled.ts b/app/client/mobile/src/details/Details.styled.ts
index 1e103107..302842c0 100644
--- a/app/client/mobile/src/details/Details.styled.ts
+++ b/app/client/mobile/src/details/Details.styled.ts
@@ -67,10 +67,17 @@ export const styles = StyleSheet.create({
     fontSize: 16,
     paddingLeft: 8,
   },
-  itemSubject: {
+  itemHeader: {
     fontSize: 22,
     paddingLeft: 8,
   },
+  guestSubject: {
+    paddingBottom: 8,
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingRight: 4,
+  },
   subject: {
     width: '100%',
     height: 52,
@@ -79,6 +86,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     paddingRight: 4,
     marginTop: 16,
+    marginBottom: 16,
     borderRadius: 8,
   },
   input: {
@@ -137,7 +145,81 @@ export const styles = StyleSheet.create({
     paddingTop: 8,
     paddingLeft: 16,
     paddingRight: 16,
+    height: 48,
     width: '100%',
     borderBottomWidth: 1,
   },
+  blur: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  memberModal: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  memberSurface: {
+    width: '80%',
+    maxWidth: 400,
+  },
+  modalHeader: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    alignItems: 'center',
+  },
+  modalTitle: {
+    flexGrow: 1,
+    paddingLeft: 16,
+    fontSize: 20,
+  },
+  modalClose: {
+    backgroundColor: 'transparent',
+  },
+  modalMembers: {
+    minHeight: 128,
+    maxHeight: 256,
+    width: '100%',
+  },
+  modalArea: {
+    marginLeft: 16,
+    marginRight: 16,
+    borderRadius: 4,
+  },
+  modalButtons: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  modalButton: {
+    borderRadius: 4,
+    margin: 16,
+  },
+  noContacts: {
+    width: '100%',
+    height: 128,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  noContactsLabel: {
+    color: Colors.placeholder,
+    fontSize: 20,
+  },
+  memberSwitch: {
+    transform: [{scaleX: 0.7}, {scaleY: 0.7}],
+  },
+  error: {
+    flexGrow: 1,
+    paddingLeft: 32,
+    color: Colors.offsync,
+  },
 });
diff --git a/app/client/mobile/src/details/Details.tsx b/app/client/mobile/src/details/Details.tsx
index 57f8965c..ce772753 100644
--- a/app/client/mobile/src/details/Details.tsx
+++ b/app/client/mobile/src/details/Details.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
-import { SafeAreaView, ScrollView, View } from 'react-native';
-import {useTheme, Surface, Icon, Divider, IconButton, Text, TextInput} from 'react-native-paper';
+import { SafeAreaView, Modal, ScrollView, View } from 'react-native';
+import {useTheme, Switch, Surface, Icon, Divider, Button, IconButton, Text, TextInput} from 'react-native-paper';
 import {styles} from './Details.styled';
 import {useDetails} from './useDetails.hook';
 import { Confirm } from '../confirm/Confirm';
 import { Card } from '../card/Card';
+import {BlurView} from '@react-native-community/blur';
 
 export function Details({close, closeAll}: {close: ()=>void, closeAll: ()=>void}) {
   const { state, actions } = useDetails();
@@ -16,9 +17,13 @@ export function Details({close, closeAll}: {close: ()=>void, closeAll: ()=>void}
   const [busy, setBusy] = useState(false);
   const [confirmParams, setConfirmParams] = useState({});
   const [confirm, setConfirm] = useState(false);
+  const [memberModal, setMemberModal] = useState(false);
+  const [error, setError] = useState(false);
   const theme = useTheme();
 
-  const members = () => {
+  const membership = () => {
+    setError(false);
+    setMemberModal(true);
   }
 
   const remove = () => {
@@ -126,10 +131,45 @@ export function Details({close, closeAll}: {close: ()=>void, closeAll: ()=>void}
   }
 
   const cards = state.channelCards.map((card, index) => (
-      <Card containerStyle={styles.card} key={index} imageUrl={card.imageUrl} name={card.name} placeholder={state.strings.name}
+      <Card containerStyle={{...styles.card, borderColor: theme.colors.outlineVariant }} key={index} imageUrl={card.imageUrl} name={card.name} placeholder={state.strings.name}
         handle={card.handle} node={card.node} actions={[]} />
   ))
 
+  const members = state.cards.filter(card => {
+    if (state.detail && state.detail.members.find(member => member.guid === card.guid)) {
+      return true;
+    } else if(state.sealed && !card.sealable) {
+      return false;
+    } else {
+      return true;
+    }
+  }).map((card, index) => {
+    const enable = !state.detail ? [] : [
+      <Switch
+        key="enable"
+        style={styles.memberSwitch}
+        value={Boolean(state.detail.members.find(member => member.guid === card.guid))}
+        onValueChange={async (flag) => {
+          try {
+            setError(false);
+            if (flag) {
+              await actions.setMember(card.cardId);
+            } else {
+              await actions.clearMember(card.cardId);
+            }
+          } catch (err) {
+            console.log(err);
+            setError(true);
+          }
+        }}
+      />
+    ];
+
+    return (
+      <Card containerStyle={{ ...styles.card, borderColor: theme.colors.outlineVariant }} key={index} imageUrl={card.imageUrl} name={card.name} placeholder={state.strings.name} handle={card.handle} node={card.node} actions={enable} />
+    )
+  });
+
   return (
     <View style={styles.details}>
       <SafeAreaView style={styles.header}>
@@ -176,36 +216,36 @@ export function Details({close, closeAll}: {close: ()=>void, closeAll: ()=>void}
             </Surface>
           )}
           { !state.host && !state.locked && (
-            <View style={styles.item}>
-              <IconButton style={styles.icon} size={28} icon="label-outline" />
+            <View style={styles.guestSubject}>
+              <Icon size={28} source="label-outline" />
               <Text style={styles.itemHeader}>{ state.subject }</Text>
             </View>
           )}
           <View style={styles.item}>
-            <Icon source="calendar-month-outline" size={22} />
+            <Icon source="calendar-month-outline" size={20} />
             <Text style={styles.itemLabel}>{ state.created }</Text>
           </View>
           { state.host && (
             <View style={styles.item}>
-              <Icon source="home-outline" size={22} />
+              <Icon source="home-outline" size={20} />
               <Text style={styles.itemLabel}>{ state.strings.channelHost }</Text>
             </View>
           )}
           { !state.host && (
             <View style={styles.item}>
-              <Icon source="server" size={22} />
+              <Icon source="server" size={20} />
               <Text style={styles.itemLabel}>{ state.strings.channelGuest }</Text>
             </View>
           )}
           { state.sealed && (
             <View style={styles.item}>
-              <Icon source="shield-outline" size={22} />
+              <Icon source="shield-outline" size={20} />
               <Text style={styles.itemLabel}>{ state.strings.sealed }</Text>
             </View>
           )}
           { !state.sealed && (
             <View style={styles.item}>
-              <Icon source="shield-off-outline" size={22} />
+              <Icon source="shield-off-outline" size={20} />
               <Text style={styles.itemLabel}>{ state.strings.notSealed }</Text>
             </View>
           )}
@@ -273,7 +313,7 @@ export function Details({close, closeAll}: {close: ()=>void, closeAll: ()=>void}
               mode="contained"
               icon="account-cog-outline"
               size={32}
-              onPress={members}
+              onPress={membership}
             />
             <Text style={styles.actionLabel}>{state.strings.members}</Text>
           </View>
@@ -296,6 +336,37 @@ export function Details({close, closeAll}: {close: ()=>void, closeAll: ()=>void}
         )}
       </ScrollView>
       <Confirm show={confirm} busy={busy} params={confirmParams} />
+      <Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={memberModal} onRequestClose={() => setMemberModal(false)}>
+        <View style={styles.memberModal}>
+          <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
+          <Surface elevation={5} mode="flat" style={styles.memberSurface}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>{state.strings.editMembership}</Text>
+              <IconButton style={styles.modalClose} icon="close" size={24} onPress={() => setMemberModal(false)} />
+            </View>
+              <Surface eleveation={2} style={styles.modalArea}>
+                { members.length === 0 && (
+                  <View style={styles.noContacts}>
+                    <Text style={styles.noContactsLabel}>{ state.strings.noContacts }</Text>
+                  </View>
+                )}
+                { members.length > 0 && (
+                  <ScrollView style={styles.modalMembers}>
+                    { members }
+                  </ScrollView>
+                )}
+              </Surface>
+            <View style={styles.modalButtons}>
+              { error && (
+                <Text style={styles.error}>{ state.strings.operationFailed }</Text>
+              )}
+              <Button style={styles.modalButton} compact={true} mode="outlined" onPress={() => setMemberModal(false)}>
+                {state.strings.close}
+              </Button>
+            </View>
+          </Surface>
+        </View>
+      </Modal>
     </View>
   )
 }