Implement scene invitation and membership controls

src/view/com/modals/Confirm.tsx

@@ -0,0 +1,95 @@
+import React, {useState} from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import {useStores} from '../../../state'
+import {s, colors, gradients} from '../../lib/styles'
+import {ErrorMessage} from '../util/ErrorMessage'
+
+export const snapPoints = ['50%']
+
+export function Component({
+  title,
+  message,
+  onPressConfirm,
+}: {
+  title: string
+  message: string | (() => JSX.Element)
+  onPressConfirm: () => void | Promise<void>
+}) {
+  const store = useStores()
+  const [isProcessing, setIsProcessing] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
+  const onPress = async () => {
+    setError('')
+    setIsProcessing(true)
+    try {
+      await onPressConfirm()
+      store.shell.closeModal()
+      return
+    } catch (e: any) {
+      setError(e.toString())
+      setIsProcessing(false)
+    }
+  }
+  return (
+    <View style={[s.flex1, s.pl10, s.pr10]}>
+      <Text style={styles.title}>{title}</Text>
+      {typeof message === 'string' ? (
+        <Text style={styles.description}>{message}</Text>
+      ) : (
+        message()
+      )}
+      {error ? (
+        <View style={s.mt10}>
+          <ErrorMessage message={error} />
+        </View>
+      ) : undefined}
+      {isProcessing ? (
+        <View style={[styles.btn, s.mt10]}>
+          <ActivityIndicator />
+        </View>
+      ) : (
+        <TouchableOpacity style={s.mt10} onPress={onPress}>
+          <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.f18]}>Confirm</Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 24,
+    marginBottom: 12,
+  },
+  description: {
+    textAlign: 'center',
+    fontSize: 17,
+    paddingHorizontal: 22,
+    color: colors.gray5,
+    marginBottom: 10,
+  },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 14,
+    backgroundColor: colors.gray1,
+  },
+})

src/view/com/modals/CreateScene.tsx

@@ -53,7 +53,7 @@ export function Component({}: {}) {
           {
             subject: {
               did: createSceneRes.data.did,
-              declarationCid: createSceneRes.data.declarationCid,
+              declarationCid: createSceneRes.data.declaration.cid,
             },
             createdAt: new Date().toISOString(),
           },

src/view/com/modals/InviteToScene.tsx

@@ -0,0 +1,238 @@
+import React, {useState, useEffect, useMemo} from 'react'
+import Toast from '../util/Toast'
+import {
+  ActivityIndicator,
+  FlatList,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {
+  TabView,
+  SceneMap,
+  Route,
+  TabBar,
+  TabBarProps,
+} from 'react-native-tab-view'
+import _omit from 'lodash.omit'
+import {AtUri} from '../../../third-party/uri'
+import {ProfileCard} from '../profile/ProfileCard'
+import {ErrorMessage} from '../util/ErrorMessage'
+import {useStores} from '../../../state'
+import * as apilib from '../../../state/lib/api'
+import {ProfileViewModel} from '../../../state/models/profile-view'
+import {SceneInviteSuggestions} from '../../../state/models/scene-invite-suggestions'
+import {FollowItem} from '../../../state/models/user-follows-view'
+import {s, colors} from '../../lib/styles'
+
+export const snapPoints = ['70%']
+
+export function Component({profileView}: {profileView: ProfileViewModel}) {
+  const store = useStores()
+  const layout = useWindowDimensions()
+  const [index, setIndex] = useState(0)
+  const tabRoutes = [
+    {key: 'suggestions', title: 'Suggestions'},
+    {key: 'pending', title: 'Pending Invites'},
+  ]
+  const [hasSetup, setHasSetup] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
+  const suggestions = useMemo(
+    () => new SceneInviteSuggestions(store, {sceneDid: profileView.did}),
+    [profileView.did],
+  )
+  const [createdInvites, setCreatedInvites] = useState<Record<string, string>>(
+    {},
+  )
+
+  useEffect(() => {
+    let aborted = false
+    if (hasSetup) {
+      return
+    }
+    suggestions.setup().then(() => {
+      if (aborted) return
+      setHasSetup(true)
+    })
+    return () => {
+      aborted = true
+    }
+  }, [profileView.did])
+
+  const onPressInvite = async (follow: FollowItem) => {
+    setError('')
+    try {
+      const assertionUri = await apilib.inviteToScene(
+        store,
+        profileView.did,
+        follow.did,
+        follow.declaration.cid,
+      )
+      setCreatedInvites({[follow.did]: assertionUri, ...createdInvites})
+      Toast.show('Invite sent', {
+        duration: Toast.durations.LONG,
+        position: Toast.positions.TOP,
+      })
+    } catch (e) {
+      setError('There was an issue with the invite. Please try again.')
+      console.error(e)
+    }
+  }
+  const onPressUndo = async (subjectDid: string, assertionUri: string) => {
+    setError('')
+    const urip = new AtUri(assertionUri)
+    try {
+      await store.api.app.bsky.graph.assertion.delete({
+        did: profileView.did,
+        rkey: urip.rkey,
+      })
+      setCreatedInvites(_omit(createdInvites, [subjectDid]))
+    } catch (e) {
+      setError('There was an issue with the invite. Please try again.')
+      console.error(e)
+    }
+  }
+
+  const renderSuggestionItem = ({item}: {item: FollowItem}) => {
+    const createdInvite = createdInvites[item.did]
+    return (
+      <ProfileCard
+        did={item.did}
+        handle={item.handle}
+        displayName={item.displayName}
+        renderButton={() =>
+          !createdInvite ? (
+            <>
+              <FontAwesomeIcon icon="user-plus" style={[s.mr5]} size={14} />
+              <Text style={[s.fw400, s.f14]}>Invite</Text>
+            </>
+          ) : (
+            <>
+              <FontAwesomeIcon icon="x" style={[s.mr5]} size={14} />
+              <Text style={[s.fw400, s.f14]}>Undo invite</Text>
+            </>
+          )
+        }
+        onPressButton={() =>
+          !createdInvite
+            ? onPressInvite(item)
+            : onPressUndo(item.did, createdInvite)
+        }
+      />
+    )
+  }
+
+  const Suggestions = () => (
+    <View style={s.flex1}>
+      {hasSetup ? (
+        <View style={s.flex1}>
+          <View style={styles.todoContainer}>
+            <Text style={styles.todoLabel}>
+              User search is still being implemented. For now, you can pick from
+              your follows below.
+            </Text>
+          </View>
+          {!suggestions.hasContent ? (
+            <Text
+              style={{
+                textAlign: 'center',
+                paddingTop: 10,
+                paddingHorizontal: 40,
+                fontWeight: 'bold',
+                color: colors.gray5,
+              }}>
+              {suggestions.myFollowsView.follows.length
+                ? 'Sorry! You dont follow anybody for us to suggest.'
+                : 'Sorry! All of the users you follow are members already.'}
+            </Text>
+          ) : (
+            <FlatList
+              data={suggestions.suggestions}
+              keyExtractor={item => item._reactKey}
+              renderItem={renderSuggestionItem}
+              style={s.flex1}
+            />
+          )}
+        </View>
+      ) : !error ? (
+        <ActivityIndicator />
+      ) : undefined}
+    </View>
+  )
+
+  const PendingInvites = () => (
+    <View>
+      <View style={styles.todoContainer}>
+        <Text style={styles.todoLabel}>
+          Pending invites are still being implemented. Check back soon!
+        </Text>
+      </View>
+    </View>
+  )
+
+  const renderScene = SceneMap({
+    suggestions: Suggestions,
+    pending: PendingInvites,
+  })
+
+  const renderTabBar = (props: TabBarProps<Route>) => (
+    <TabBar
+      {...props}
+      style={{backgroundColor: 'white'}}
+      activeColor="black"
+      inactiveColor={colors.gray5}
+      labelStyle={{textTransform: 'none'}}
+      indicatorStyle={{backgroundColor: colors.purple3}}
+    />
+  )
+
+  return (
+    <View style={s.flex1}>
+      <Text style={styles.title}>
+        Invite to {profileView.displayName || profileView.handle}
+      </Text>
+      {error !== '' ? (
+        <View style={s.p10}>
+          <ErrorMessage message={error} />
+        </View>
+      ) : undefined}
+      <TabView
+        navigationState={{index, routes: tabRoutes}}
+        renderScene={renderScene}
+        renderTabBar={renderTabBar}
+        onIndexChange={setIndex}
+        initialLayout={{width: layout.width}}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 18,
+    marginBottom: 4,
+  },
+  todoContainer: {
+    backgroundColor: colors.pink1,
+    margin: 10,
+    padding: 10,
+    borderRadius: 6,
+  },
+  todoLabel: {
+    color: colors.pink5,
+    textAlign: 'center',
+  },
+
+  tabBar: {
+    flexDirection: 'row',
+  },
+  tabItem: {
+    alignItems: 'center',
+    padding: 16,
+    flex: 1,
+  },
+})

src/view/com/modals/Modal.tsx

@@ -8,9 +8,11 @@ import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
 import * as models from '../../../state/models/shell-ui'
 
 import * as LinkActionsModal from './LinkActions'
+import * as ConfirmModal from './Confirm'
 import * as SharePostModal from './SharePost.native'
-import * as EditProfile from './EditProfile'
-import * as CreateScene from './CreateScene'
+import * as EditProfileModal from './EditProfile'
+import * as CreateSceneModal from './CreateScene'
+import * as InviteToSceneModal from './InviteToScene'
 
 const CLOSED_SNAPPOINTS = ['10%']
 
@@ -44,6 +46,13 @@ export const Modal = observer(function Modal() {
         {...(store.shell.activeModal as models.LinkActionsModel)}
       />
     )
+  } else if (store.shell.activeModal?.name === 'confirm') {
+    snapPoints = ConfirmModal.snapPoints
+    element = (
+      <ConfirmModal.Component
+        {...(store.shell.activeModal as models.ConfirmModel)}
+      />
+    )
   } else if (store.shell.activeModal?.name === 'share-post') {
     snapPoints = SharePostModal.snapPoints
     element = (
@@ -52,15 +61,22 @@ export const Modal = observer(function Modal() {
       />
     )
   } else if (store.shell.activeModal?.name === 'edit-profile') {
-    snapPoints = EditProfile.snapPoints
+    snapPoints = EditProfileModal.snapPoints
     element = (
-      <EditProfile.Component
+      <EditProfileModal.Component
         {...(store.shell.activeModal as models.EditProfileModel)}
       />
     )
   } else if (store.shell.activeModal?.name === 'create-scene') {
-    snapPoints = CreateScene.snapPoints
-    element = <CreateScene.Component />
+    snapPoints = CreateSceneModal.snapPoints
+    element = <CreateSceneModal.Component />
+  } else if (store.shell.activeModal?.name === 'invite-to-scene') {
+    snapPoints = InviteToSceneModal.snapPoints
+    element = (
+      <InviteToSceneModal.Component
+        {...(store.shell.activeModal as models.InviteToSceneModel)}
+      />
+    )
   } else {
     element = <View />
   }