shellphone.app/app/screens/TabTwoScreen.tsx
2021-06-01 23:13:51 +02:00

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%",
},
});