Implement scene invitation and membership controls

2022-11-10 16:30:14 -06:00
parent 28c2591e0b
commit 7d90638188
49 changed files with 2603 additions and 462 deletions
@@ -0,0 +1,96 @@
+import React, {useState} from 'react'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import * as apilib from '../../../state/lib/api'
+import {NotificationsViewItemModel} from '../../../state/models/notifications-view'
+import {ConfirmModel} from '../../../state/models/shell-ui'
+import {useStores} from '../../../state'
+import {ProfileCard} from '../profile/ProfileCard'
+import Toast from '../util/Toast'
+import {s, colors, gradients} from '../../lib/styles'
+
+export function InviteAccepter({item}: {item: NotificationsViewItemModel}) {
+  const store = useStores()
+  const [confirmationUri, setConfirmationUri] = useState<string>('')
+  const isMember =
+    confirmationUri !== '' || store.me.memberships?.isMemberOf(item.author.did)
+  const onPressAccept = async () => {
+    store.shell.openModal(
+      new ConfirmModel(
+        'Join this scene?',
+        () => (
+          <View>
+            <View style={styles.profileCardContainer}>
+              <ProfileCard
+                did={item.author.did}
+                handle={item.author.handle}
+                displayName={item.author.displayName}
+              />
+            </View>
+          </View>
+        ),
+        onPressConfirmAccept,
+      ),
+    )
+  }
+  const onPressConfirmAccept = async () => {
+    const uri = await apilib.acceptSceneInvite(store, {
+      originator: {
+        did: item.author.did,
+        declarationCid: item.author.declaration.cid,
+      },
+      assertion: {
+        uri: item.uri,
+        cid: item.cid,
+      },
+    })
+    store.me.refreshMemberships()
+    Toast.show('Invite accepted', {
+      duration: Toast.durations.LONG,
+      position: Toast.positions.TOP,
+    })
+    setConfirmationUri(uri)
+  }
+  return (
+    <View style={styles.container}>
+      {!isMember ? (
+        <TouchableOpacity onPress={onPressAccept}>
+          <LinearGradient
+            colors={[gradients.primary.start, gradients.primary.end]}
+            start={{x: 0, y: 0}}
+            end={{x: 1, y: 1}}
+            style={[styles.btn]}>
+            <Text style={[s.white, s.bold, s.f16]}>Accept Invite</Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      ) : (
+        <View style={styles.inviteAccepted}>
+          <FontAwesomeIcon icon="check" size={14} style={s.mr5} />
+          <Text style={[s.gray5, s.f15]}>Invite accepted</Text>
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  btn: {
+    borderRadius: 32,
+    paddingHorizontal: 18,
+    paddingVertical: 8,
+    backgroundColor: colors.gray1,
+  },
+  profileCardContainer: {
+    borderWidth: 1,
+    borderColor: colors.gray3,
+    borderRadius: 6,
+  },
+  inviteAccepted: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+})