[arcade-chat] Basic chat channels+messages flow works

apps/nostr-client/App.tsx → apps/arcade-chat/App.tsx

@@ -1,4 +1,7 @@
+import 'text-encoding-polyfill'
 import { StatusBar } from 'expo-status-bar'
+import { useEffect } from 'react'
+import { Button, View } from 'react-native'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { useArcadeRelay } from '@arcadecity/use-arcade'
 import useCachedResources from './hooks/useCachedResources'
@@ -8,15 +11,31 @@ import Navigation from './navigation'
 export const App = () => {
   const isLoadingComplete = useCachedResources()
   const colorScheme = useColorScheme()
-  useArcadeRelay()
+  const [state, actions] = useArcadeRelay()
+
+  useEffect(() => {
+    if (!state.ready) return
+    actions.initialSubscribe()
+  }, [state.ready])
 
   if (!isLoadingComplete) {
     return null
   } else {
     return (
       <SafeAreaProvider>
         <Navigation colorScheme={colorScheme} />
-        <StatusBar />
+        <StatusBar style='light' />
+        {/* <View
+          style={{
+            position: 'absolute',
+            bottom: 95,
+            left: 0,
+            right: 0,
+            flex: 1,
+            justifyContent: 'center',
+          }}>
+          <Button title='CREATE DEMO CHANNEL' onPress={actions.createDemoChannel} />
+        </View> */}
       </SafeAreaProvider>
     )
   }

apps/nostr-client/app.json → apps/arcade-chat/app.json

@@ -15,11 +15,10 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "arcade.city.mobile"
     },
     "android": {
       "adaptiveIcon": {

apps/arcade-chat/components/ChannelList.tsx

@@ -0,0 +1,25 @@
+import { Channel, useChannelsCreated } from '@arcadecity/use-arcade'
+import { FlatList, StyleSheet, Text } from 'react-native'
+import { ChannelPreview } from './ChannelPreview'
+
+export const ChannelList = () => {
+  const channels: Channel[] = useChannelsCreated()
+  return (
+    <FlatList
+      data={channels}
+      keyExtractor={keyExtractor}
+      renderItem={renderItem}
+      style={[styles.flatList, { backgroundColor: '#120B29' }]}
+    />
+  )
+}
+
+const keyExtractor = (item: Channel) => item.id
+
+const renderItem = ({ item }: { item: Channel }) => <ChannelPreview channel={item} />
+
+const styles = StyleSheet.create({
+  flatList: { flex: 1 },
+  flatListContentContainer: { flexGrow: 1 },
+  statusIndicator: { left: 0, position: 'absolute', right: 0, top: 0 },
+})

apps/arcade-chat/components/ChannelPreview.tsx

@@ -0,0 +1,17 @@
+import { Channel, setActiveChannelId } from '@arcadecity/use-arcade'
+import { useNavigation } from '@react-navigation/native'
+import { useCallback } from 'react'
+import { Text, TouchableOpacity } from 'react-native'
+
+export const ChannelPreview = ({ channel }: { channel: Channel }) => {
+  const navigation = useNavigation()
+  const navToIt = useCallback(() => {
+    setActiveChannelId(channel.id)
+    navigation.navigate('channel', { channelId: channel.id })
+  }, [channel.id])
+  return (
+    <TouchableOpacity key={channel.id} onPress={navToIt} activeOpacity={0.8}>
+      <Text style={{ color: '#EEECFB', padding: 10 }}>{channel.name}</Text>
+    </TouchableOpacity>
+  )
+}

apps/arcade-chat/components/MessageInput.tsx

@@ -0,0 +1,80 @@
+import { color, palette } from '@arcadecity/ui'
+import { Alert, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'
+import { FontAwesome } from '@expo/vector-icons'
+import { useContext, useState } from 'react'
+import { ArcadeContext, useActiveChannelId, UseArcadeRelayActions } from '@arcadecity/use-arcade'
+
+export const MessageInput = () => {
+  const [text, setText] = useState('')
+  const context = useContext(ArcadeContext)
+  const activeChannelId = useActiveChannelId()
+  const actions = context.actions as UseArcadeRelayActions
+  const submitInput = () => {
+    if (text.length < 1) {
+      Alert.alert('Message too short', 'What is that, a message for ants?')
+      return
+    }
+    if (!activeChannelId) {
+      Alert.alert('Error getting channel ID')
+      return
+    }
+    actions.sendChannelMessage(activeChannelId, text)
+  }
+  return (
+    <View style={styles.container}>
+      <View style={styles.composerContainer}>
+        <View style={styles.inputContainer}>
+          <TextInput
+            autoCorrect={false}
+            multiline
+            onChangeText={(text: string) => setText(text)}
+            spellCheck={false}
+            style={styles.inputBox}
+          />
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={submitInput}
+            style={styles.sendButtonContainer}>
+            <FontAwesome name='send' size={24} color={palette.blueBell} />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  composerContainer: {
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+    flex: 1,
+  },
+  container: {
+    backgroundColor: palette.purple,
+    borderTopWidth: 1,
+    borderTopColor: palette.portGore,
+    padding: 10,
+    height: 60,
+  },
+  inputBox: {
+    backgroundColor: color.field,
+    color: color.text,
+    flexGrow: 1,
+    fontSize: 14,
+    height: 40,
+    borderRadius: 10,
+    includeFontPadding: false,
+    padding: 10,
+    textAlignVertical: 'center',
+  },
+  inputContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingLeft: 6,
+    paddingRight: 6,
+  },
+  sendButtonContainer: {
+    marginLeft: 14,
+  },
+})

apps/arcade-chat/components/MessageList.tsx

@@ -0,0 +1,40 @@
+import { color, spacing } from '@arcadecity/ui'
+import { Message, useActiveChannelId, useChannelMessages } from '@arcadecity/use-arcade'
+import { FlatList, StyleSheet, View } from 'react-native'
+import { MessagePreview } from './message/message'
+
+export const MessageList = () => {
+  const activeChannelId = useActiveChannelId()
+  if (!activeChannelId) return <></>
+  const messages: Message[] = useChannelMessages(activeChannelId)
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={messages}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        style={[styles.flatList, { backgroundColor: '#120B29' }]}
+      />
+    </View>
+  )
+}
+
+const keyExtractor = (item: Message) => item.id
+
+const pubkey = 'd67fe59472f658c1b2dec9ffd60b86af260a2f8460b441f9a891761f87b67a5d'
+const renderItem = ({ item }: { item: Message }) => (
+  <MessagePreview message={item} preset={pubkey === item.pubkey ? 'sent' : 'received'} />
+)
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: spacing[4],
+    backgroundColor: color.background,
+    flex: 1,
+    width: '100%',
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+  flatList: { flex: 1 },
+})

apps/arcade-chat/components/MessagePreview.tsx

@@ -0,0 +1,12 @@
+import { Message } from '@arcadecity/use-arcade'
+import { Text, TouchableOpacity } from 'react-native'
+
+export const MessagePreview = ({ message }: { message: Message }) => {
+  return (
+    <TouchableOpacity key={message.id} activeOpacity={0.8}>
+      <Text style={{ color: '#EEECFB', padding: 10 }}>{message.text}</Text>
+      <Text style={{ color: '#EEECFB', padding: 10 }}>{message.created_at}</Text>
+      <Text style={{ color: '#EEECFB', padding: 10 }}>{message.pubkey}</Text>
+    </TouchableOpacity>
+  )
+}

apps/arcade-chat/components/message/index.ts

@@ -0,0 +1 @@
+export * from './message'

apps/arcade-chat/components/message/message.presets.ts

@@ -0,0 +1,104 @@
+import { Platform, ViewStyle, TextStyle } from 'react-native'
+import { color, spacing, typography } from '@arcadecity/ui'
+
+const STATUS_ROW = {
+  marginVertical: spacing[2],
+  marginLeft: spacing[2],
+  flexDirection: 'row',
+}
+
+const BASE_MESSAGE = {
+  container: {
+    flexDirection: 'row',
+    marginTop: 20,
+  } as ViewStyle,
+  avatarContainer: {
+    alignSelf: 'flex-end',
+  } as ViewStyle,
+  textBubble: {
+    flex: 1,
+    borderTopLeftRadius: 30,
+    borderBottomLeftRadius: 30,
+    borderTopRightRadius: 30,
+    backgroundColor: color.palette.moonRaker,
+    paddingHorizontal: spacing[2],
+    marginRight: spacing[4],
+    ...Platform.select({
+      ios: {
+        shadowColor: color.palette.black,
+        shadowOffset: {
+          width: 0,
+          height: 2,
+        },
+        shadowOpacity: 0.5,
+        shadowRadius: 4,
+      },
+      // android: {  TODO: Figure out why this causes typescript error
+      //   elevation: 5,
+      // },
+    }),
+  } as ViewStyle,
+  textContent: {
+    marginHorizontal: spacing[4],
+    marginVertical: spacing[4],
+    color: color.palette.minsk,
+    fontFamily: typography.primary,
+  } as TextStyle,
+  date: {
+    ...STATUS_ROW,
+  } as ViewStyle,
+  dateText: {
+    fontSize: 11,
+    color: color.palette.blueBell,
+    fontFamily: typography.primary,
+  } as TextStyle,
+  error: {
+    ...STATUS_ROW,
+  } as ViewStyle,
+  errorText: {
+    fontSize: 12,
+    color: color.error,
+    fontFamily: typography.primary,
+  } as TextStyle,
+  errorIcon: {
+    marginRight: spacing[1],
+    alignSelf: 'center',
+  },
+}
+
+export const messagePresets = {
+  sent: BASE_MESSAGE,
+  received: {
+    ...BASE_MESSAGE,
+    container: {
+      flexDirection: 'row-reverse',
+      marginTop: 20,
+    } as ViewStyle,
+    textBubble: {
+      ...BASE_MESSAGE.textBubble,
+      marginRight: 0,
+      marginLeft: spacing[4],
+      borderBottomRightRadius: 30,
+      borderBottomLeftRadius: 0,
+      backgroundColor: color.palette.electricIndigo,
+    } as ViewStyle,
+    textContent: {
+      ...BASE_MESSAGE.textContent,
+      color: color.palette.moonRaker,
+    } as TextStyle,
+    date: {
+      ...BASE_MESSAGE.date,
+      justifyContent: 'flex-end',
+      marginRight: spacing[2],
+    } as ViewStyle,
+    error: {
+      ...BASE_MESSAGE.error,
+      justifyContent: 'flex-end',
+      marginRight: spacing[2],
+    } as ViewStyle,
+  },
+}
+/**
+ * A list of preset names.
+ */
+export type MessagePresetNames = keyof typeof messagePresets