Definitely going to need to work on the types here

2024-10-16 08:02:39 -05:00
parent 701315011b
commit c2858198ca
8 changed files with 538 additions and 0 deletions
--- a/components/chat/CustomView.tsx
+++ b/components/chat/CustomView.tsx
@ -0,0 +1,83 @@
+import React, { useCallback } from 'react';
+import * as Linking from 'expo-linking';
+import {
+  Platform,
+  StyleSheet,
+  StyleProp,
+  ViewStyle
+} from 'react-native';
+import { ThemedText, ThemedView } from '@/components/theme/Theme';
+import MapView from 'react-native-maps';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+type Props = {
+  currentMessage: any;
+  containerStyle?: StyleProp<ViewStyle>;
+  mapViewStyle?: StyleProp<ViewStyle>;
+};
+
+const CustomView = ({ currentMessage, containerStyle, mapViewStyle }: Props) => {
+  const openMapAsync = useCallback(async () => {
+    if (Platform.OS === 'web') {
+      alert('Opening the map is not supported.');
+      return;
+    }
+    const {location = {} } = currentMessage;
+    const url = Platform.select({
+      ios: `http://maps.apple.com/?ll=${location.latitude},${location.longitude}`,
+      default: `http://maps.google.com/?q=${location.latitude},${location.longitude}`,
+    });
+    try {
+      const supported = await Linking.canOpenURL(url);
+      if (supported) return Linking.openURL(url);
+      else alert('Opening the map is not supported.');
+    } catch (error) {
+      console.log('Could not open link!', error.message);
+      alert(error.message);
+    }
+  }, [currentMessage]);
+
+  if (currentMessage.location) {
+    return (
+      <TouchableOpacity
+        style={[styles.container, containerStyle]}
+        onPress={openMapAsync}
+      >
+        {Platform.OS !== 'web'
+          ? (
+            <MapView
+              style={[styles.mapView, mapViewStyle]}
+              region={{
+                latitude: currentMessage.location.latitude,
+                longitude: currentMessage.location.longitude,
+                latitudeDelta: 0.0922,
+                longitudeDelta: 0.0421,
+              }}
+              scrollEnabled={false}
+              zoomEnabled={false}
+            />
+          )
+          : (
+            <ThemedView style={{ padding: 15 }}>
+              <ThemedText style={{ color: 'tomato', fontWeight: 'bold' }}>
+                Map not in web yet, sorry!
+              </ThemedText>
+            </ThemedView>
+          )}
+      </TouchableOpacity>
+    );
+  }
+  return null;
+};
+export default CustomView;
+
+const styles = StyleSheet.create({
+  container: {
+  },
+  mapView: {
+    width: 150,
+    height: 100,
+    borderRadius: 13,
+    margin: 3,
+  },
+});
--- a/components/chat/NavBar.tsx
+++ b/components/chat/NavBar.tsx
@ -0,0 +1,20 @@
+import React from 'react';
+import { ThemedText, ThemedView } from '../theme/Theme';
+import { Platform, StyleSheet } from 'react-native';
+
+const NavBar = () => {
+  if (Platform.OS === 'web') return null;
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedText>💬 Chat{'\n'}</ThemedText>
+    </ThemedView>
+  );
+};
+export default NavBar;
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingTop: 10,
+  },
+});
--- a/components/chat/data/earlierMessages.js
+++ b/components/chat/data/earlierMessages.js
@ -0,0 +1,129 @@
+export default () => [
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text:
+      'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text:
+      'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text:
+      'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text:
+      'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'This is a system message.',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    system: true,
+  },
+]
--- a/components/chat/data/messages.js
+++ b/components/chat/data/messages.js
@ -0,0 +1,168 @@
+export default [
+  {
+    _id: 9,
+    text: '#awesome 3',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 8,
+    text: '#awesome 2',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 7,
+    text: '#awesome',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 6,
+    text: 'Paris',
+    createdAt: new Date(),
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+    image:
+      'https://www.xtrafondos.com/wallpapers/torre-eiffel-en-paris-415.jpg',
+    sent: true,
+    received: true,
+  },
+  {
+    _id: 5,
+    text: 'Send me a picture!',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 4,
+    text: '',
+    createdAt: new Date(),
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+    sent: true,
+    received: true,
+    location: {
+      latitude: 48.864601,
+      longitude: 2.398704,
+    },
+  },
+  {
+    _id: 3,
+    text: 'Where are you?',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 2,
+    text: 'Yes, and I use #GiftedChat!',
+    createdAt: new Date(),
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+    sent: true,
+    received: true,
+  },
+  {
+    _id: 1,
+    text: 'Are you building a chat app?',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 10,
+    text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
+    createdAt: new Date(),
+    quickReplies: {
+      type: 'radio', // or 'checkbox',
+      keepIt: true,
+      values: [
+        {
+          title: '😋 Yes',
+          value: 'yes',
+        },
+        {
+          title:
+            '📷 Yes, let me show you with a picture! Again let me show you with a picture!',
+          value: 'yes_picture',
+        },
+        {
+          title: '😞 Nope. What?',
+          value: 'no',
+        },
+      ],
+    },
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
+  {
+    _id: 20,
+    text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
+    createdAt: new Date(),
+    quickReplies: {
+      type: 'checkbox', // or 'checkbox',
+      values: [
+        {
+          title: 'Yes',
+          value: 'yes',
+        },
+        {
+          title: 'Yes, let me show you with a picture!',
+          value: 'yes_picture',
+        },
+        {
+          title: 'Nope. What?',
+          value: 'no',
+        },
+      ],
+    },
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
+  {
+    _id: 30,
+    createdAt: new Date(),
+    video: 'https://media.giphy.com/media/3o6ZthZjk09Xx4ktZ6/giphy.mp4',
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
+  {
+    _id: 31,
+    createdAt: new Date(),
+    audio:
+      'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3',
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
+]