just another day

This commit is contained in:
2024-10-25 16:57:25 -05:00
parent 0e46c630a6
commit e84597883b
11 changed files with 882 additions and 1401 deletions

View File

@ -1,129 +0,0 @@
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,
},
]

View File

@ -1,168 +0,0 @@
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',
},
},
]

View File

@ -1,264 +0,0 @@
import React, { useCallback, useReducer } from 'react';
import { ThemedText, ThemedView } from '@/components/theme/Theme';
import { Alert, Linking, Platform, StyleSheet } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import {
GiftedChat,
IMessage,
Send,
SendProps,
SystemMessage,
} from 'react-native-gifted-chat';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import AccessoryBar from '@/components/chat/AccessoryBar';
import CustomActions from '@/components/chat/CustomActions';
import CustomView from '@/components/chat/CustomView';
//import NavBar from '@/components/chat/NavBar';
import earlierMessages from '@/components/chat/data/earlierMessages';
import messages from '@/components/chat/data/messages';
import * as Clipboard from 'expo-clipboard';
import {
GCUser,
GCState,
GCStateAction,
ActionKind,
} from '@/constants/Types';
import {getInitialMessages, sendMessage} from '@/constants/APIs';
const tempUser: GCUser = {
_id: 1,
name: 'Developer',
};
const reducer = (state: GCState, action: GCStateAction) => {
switch (action.type) {
case ActionKind.SEND_MESSAGE: {
return {
...state,
step: state.step + 1,
messages: action.payload,
};
}
case ActionKind.LOAD_EARLIER_MESSAGES: {
return {
...state,
loadEarlier: true,
isLoadingEarlier: false,
messages: action.payload,
};
}
case ActionKind.LOAD_EARLIER_START: {
return {
...state,
isLoadingEarlier: true,
}
}
case ActionKind.SET_IS_TYPING: {
return {
...state,
isTyping: action.payload,
}
}
}
};
const MessagesScreen = () => {
//const newMessages =
const [state, dispatch] = useReducer(reducer, {
messages: messages,
step: 0,
loadEarlier: true,
isLoadingEarlier: false,
isTyping: false,
})
const onSend = useCallback((messages: any[]) => {
const sentMessages = [{ ...messages[0], sent: true, received: true }]
const newMessages = GiftedChat.append(
state.messages, sentMessages, Platform.OS !== 'web'
);
dispatch({ type: ActionKind.SEND_MESSAGE, payload: newMessages });
}, [dispatch, state.messages]);
const onLoadEarlier = useCallback(() => {
dispatch({ type: ActionKind.LOAD_EARLIER_START });
setTimeout(() => {
const newMessages = GiftedChat.prepend(
state.messages, earlierMessages() as IMessage[], Platform.OS !== 'web'
);
dispatch({ type: ActionKind.LOAD_EARLIER_MESSAGES, payload: newMessages })
}, 1500) // simulating network
}, [dispatch, state.messages]);
const parsePatterns = useCallback(() => {
return [
{
pattern: /#(\w+)/g,
style: { textDecorationLine: 'underline', color: 'darkorange' },
onPress: () => Linking.openURL('https://www.gbrown.org'),
},
]
}, []);
const onLongPressAvatar = useCallback((pressedUser: any) => {
Alert.alert(JSON.stringify(pressedUser))
}, []);
const onPressAvatar = useCallback(() => {
Alert.alert('Pressed avatar!')
}, []);
const handleLongPress = useCallback((context: unknown, currentMessage: object) => {
if (!currentMessage.text) return;
const options = [
'Copy text',
'Cancel',
]
const cancelButtonIndex = options.length - 1;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(context as any).actionSheet().showActionSheetWithOptions(
{ options, cancelButtonIndex },
(buttonIndex: number) => {
switch (buttonIndex) {
case 0:
Clipboard.setStringAsync(currentMessage.text);
break;
default: break;
}
}
)
}, []);
const onQuickReply = useCallback((replies: any[]) => {
const createdAt = new Date();
if (replies.length === 1)
onSend([
{
createdAt,
_id: Math.round(Math.random() * 1000000),
text: replies[0].title,
tempUser,
},
]);
else if (replies.length > 1)
onSend([
{
createdAt,
_id: Math.round(Math.random() * 1000000),
text: replies.map(reply => reply.title).join(', '),
tempUser,
},
]);
else console.warn('replies param is not set correctly');
}, []);
const renderQuickReplySend = useCallback(() => {
return <ThemedText>{'custom send =>'}</ThemedText>
}, []);
const setIsTyping = useCallback((isTyping: boolean) => {
dispatch({ type: ActionKind.SET_IS_TYPING, payload: isTyping });
}, [dispatch]);
const onSendFromUser = useCallback((messages: IMessage[] = []) => {
const createdAt = new Date();
const messagesToUpload = messages.map(message => ({
...message, tempUser, createdAt, id: Math.round(Math.random() * 1000000),
}));
onSend(messagesToUpload);
}, [onSend]);
const renderAccessory = useCallback(() => {
return (
<AccessoryBar
onSend={onSendFromUser}
isTyping={() => setIsTyping(!state.isTyping)}
/>
);
}, [onSendFromUser, setIsTyping, state.isTyping]);
const renderCustomActions = useCallback(
props =>
Platform.OS === 'web' ? null : (
<CustomActions {...props} onSend={onSendFromUser} />
),
[onSendFromUser]
);
const renderSystemMessage = useCallback(props => {
return (
<SystemMessage
{...props}
containerStyle={{marginBottom: 15}}
textStyle={{fontSize: 14}}
/>
);
}, []);
const renderCustomView = useCallback(props => {
return <CustomView {...props} />
}, []);
const renderSend = useCallback((props: SendProps<IMessage>) => {
return (
<Send
{...props}
containerStyle={{justifyContent: 'center', paddingHorizontal: 10}}
>
<MaterialIcons size={30} color={'tomato'} name={'send'} />
</Send>
);
}, []);
return (
<SafeAreaView style={styles.fill}>
<ThemedView style={styles.fill}>
<GiftedChat
messages={state.messages}
onSend={onSend}
loadEarlier={state.loadEarlier}
onLoadEarlier={onLoadEarlier}
isLoadingEarlier={state.isLoadingEarlier}
parsePatterns={parsePatterns}
user={tempUser}
scrollToBottom
onPressAvatar={onPressAvatar}
onLongPressAvatar={onLongPressAvatar}
onLongPress={handleLongPress}
onQuickReply={onQuickReply}
quickReplyStyle={{ borderRadius: 2 }}
quickReplyTextStyle={{
fontWeight: '200',
}}
renderQuickReplySend={renderQuickReplySend}
//renderAccessory={renderAccessory}
renderActions={renderCustomActions}
renderSystemMessage={renderSystemMessage}
renderCustomView={renderCustomView}
renderSend={renderSend}
keyboardShouldPersistTaps='never'
timeTextStyle={{
left: { color: 'red' },
right: { color: 'yellow' },
}}
isTyping={state.isTyping}
inverted={Platform.OS !== 'web'}
infiniteScroll
/>
</ThemedView>
</SafeAreaView>
)
};
const ChatWrapper = () => {
return (
<SafeAreaProvider><MessagesScreen /></SafeAreaProvider>
);
};
export default ChatWrapper;
const styles = StyleSheet.create({
fill: {
flex: 1,
},
});

View File

@ -0,0 +1,7 @@
import React, { useEffect, useState } from 'react';
import { StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
import { ThemedText, ThemedView } from '@/components/theme/Theme';
import { SafeAreaView } from 'react-native-safe-area-context';

View File

@ -92,6 +92,7 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
marginTop: 40,
},
profileContainer: {
alignItems: 'center',

View File

@ -36,7 +36,6 @@ export const sendPushNotification = async(expoPushToken: string | null, notifica
body: JSON.stringify(message),
});
const result = await response.json();
console.log('Push notification sent:', result);
} catch (error) {
console.error('Error sending push notification:', error);
Alert.alert('Error', 'Failed to send push notification.');