rewrite finished i believe
This commit is contained in:
@ -0,0 +1,32 @@
|
||||
import React, { useState } from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { ThemedView } from '@/components/theme/Theme';
|
||||
import UserInfo from '@/components/home/UserInfo';
|
||||
import Relationship from '@/components/home/Relationship';
|
||||
|
||||
const IndexScreen = () => {
|
||||
const [pfpUrl, setPfpUrl] = useState<string | null>(null);
|
||||
const handlePfpUpdate = (newPfpUrl: string) => {
|
||||
setPfpUrl(newPfpUrl);
|
||||
};
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<UserInfo onPfpUpdate={handlePfpUpdate} />
|
||||
<Relationship pfpUrl={pfpUrl} />
|
||||
<ThemedView style={styles.footerContainer}>
|
||||
</ThemedView>
|
||||
</ThemedView>
|
||||
);
|
||||
};
|
||||
export default IndexScreen;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
},
|
||||
footerContainer: {
|
||||
flex: 1 / 3,
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
||||
|
@ -13,7 +13,7 @@ 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 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';
|
||||
@ -22,7 +22,6 @@ import {
|
||||
GCState,
|
||||
GCStateAction,
|
||||
ActionKind,
|
||||
GCMessage
|
||||
} from '@/constants/Types';
|
||||
|
||||
const tempUser: GCUser = {
|
||||
@ -71,8 +70,193 @@ const MessagesScreen = () => {
|
||||
isTyping: false,
|
||||
})
|
||||
|
||||
const onSend = useCallback((messages: GCMessage[]) => {
|
||||
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>
|
||||
)
|
||||
};
|
||||
export default MessagesScreen;
|
||||
|
||||
const ChatWrapper = () => {
|
||||
return (
|
||||
<SafeAreaProvider><MessagesScreen /></SafeAreaProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatWrapper;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
fill: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
@ -0,0 +1,25 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
import { ThemedText, ThemedView } from "@/components/theme/Theme";
|
||||
|
||||
const Settings = () => {
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<ThemedText style={styles.text}>
|
||||
Settings
|
||||
</ThemedText>
|
||||
</ThemedView>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
text: {
|
||||
fontSize: 24,
|
||||
},
|
||||
});
|
||||
|
Reference in New Issue
Block a user