58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { StyleSheet } from "react-native";
|
||
|
|
|
||
|
|
import EditScreenInfo from "../components/EditScreenInfo";
|
||
|
|
import { Text, View } from "../components/Themed";
|
||
|
|
import type { Conversation } from "../../api/src/controller/sms";
|
||
|
|
|
||
|
|
export default function TabTwoScreen() {
|
||
|
|
const [conversations, setConversations] = React.useState<Conversation>({});
|
||
|
|
const conversationsEntries = Object.entries(conversations);
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
fetch("http://192.168.1.40:3000/conversations")
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(conversations => setConversations(conversations))
|
||
|
|
.catch(error => console.error("error", error));
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<Text style={styles.title}>Tab Two</Text>
|
||
|
|
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
|
||
|
|
{conversationsEntries.map(([recipient, messages], index) => {
|
||
|
|
const lastMessage = messages[messages.length - 1];
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<View>
|
||
|
|
<Text>{recipient}</Text>
|
||
|
|
<Text>{lastMessage.content}</Text>
|
||
|
|
<Text>{new Date(lastMessage.sentAt).toDateString()}</Text>
|
||
|
|
</View>
|
||
|
|
{index + 1 < messages.length && (
|
||
|
|
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "center",
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
fontSize: 20,
|
||
|
|
fontWeight: "bold",
|
||
|
|
},
|
||
|
|
separator: {
|
||
|
|
marginVertical: 30,
|
||
|
|
height: 1,
|
||
|
|
width: "80%",
|
||
|
|
},
|
||
|
|
});
|