Fakultas Ilmu Komputer UI

Commit 2bece58b authored by Muhammad Zahran Agung Dewantoro's avatar Muhammad Zahran Agung Dewantoro Committed by Ahmad Izzudin Alifyandra
Browse files

feat: create display comment post component

parent 1abfae7b
import React from "react";
import { Text, StyleSheet, View, Image } from "react-native";
import Colors from "../../constants/Colors";
import Spacer from "../../components/Spacer/Spacer";
import { IThreadComment } from "../../types/firestore/threadComment";
import { useEffect, useState } from "react";
import { getUser } from "../../service/firestore/user";
import { IUser } from "../../types/firestore/User";
type props = {
item: IThreadComment;
};
const Comment = ({ item }: props) => {
const [userName, setUserName] = useState("");
const [userPic, setUserPic] = useState("");
useEffect(() => {
getUser(item.userId).then((res) => {
const data = res.data() as IUser;
setUserName(data.firstName + " " + data.lastName);
setUserPic(data.pic);
});
}, []);
const formatDate = () => {
const date = item.timestamp.toDate();
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `${day} - ${month} - ${year}`;
};
return (
<View testID="Card">
<View style={styles.container} testID="Container">
<View style={styles.cardWrapper} testID="Wrapper">
<View style={styles.profileWrapper} testID="Profile Wrapper">
<Image
style={styles.profilePic}
source={{ uri: userPic }}
testID="Profile Picture"
/>
<View style={styles.textWrapper} testID="Text Wrapper">
<Text style={styles.memberName} testID="Member Name">
{userName}
</Text>
<Spacer variant={"s"} />
<Text style={styles.timeStamp} testID="Time Stamp">
{formatDate()}
</Text>
</View>
</View>
<Spacer variant={"l"} />
<View style={styles.textWrapper} testID="Body Wrapper">
<Text style={styles.comment} testID="Comment">
{item.content}
</Text>
</View>
</View>
</View>
</View>
);
};
export default Comment;
const styles = StyleSheet.create({
container: {
width: "100%",
borderRadius: 8,
elevation: 4,
flexDirection: "row",
alignItems: "center",
backgroundColor: Colors.background,
},
cardWrapper: {
width: "100%",
padding: 8,
},
profileWrapper: {
width: "100%",
flexDirection: "row",
paddingTop: 8,
},
profilePic: {
width: 48,
height: 48,
borderRadius: 100,
},
textWrapper: {
width: "100%",
marginTop: 4,
paddingLeft: 8,
},
memberName: {
color: Colors.text.subtitle,
fontSize: 14,
fontWeight: "bold",
},
timeStamp: {
color: Colors.text.disabled,
fontSize: 12,
},
comment: {
color: Colors.text.body,
fontSize: 14,
},
});
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment