Fakultas Ilmu Komputer UI

Commit 74fe6a9c authored by Ahmad Izzudin Alifyandra's avatar Ahmad Izzudin Alifyandra
Browse files

Merge branch 'forum-post-component' into 'master'

feat: Create Forum Post Component

See merge request !146
parents b164c222 5e1e1d88
Pipeline #88944 passed with stage
in 10 minutes and 57 seconds
/* eslint-disable @typescript-eslint/no-unused-vars */
import { MaterialIcons } from "@expo/vector-icons";
import React from "react";
import { Text, StyleSheet, TouchableOpacity, View, Image } from "react-native";
import Colors from "../../constants/Colors";
import Spacer from "../../components/Spacer/Spacer";
import Layout from "../../constants/Layout";
import { IThread } from "../../types/firestore/thread";
import { useNavigation } from "@react-navigation/core";
import { useEffect, useState } from "react";
import { getUser } from "../../service/firestore/user";
import { IUser } from "../../types/firestore/User";
type props = {
item: IThread;
onLike: () => void;
onUnLike: () => void;
};
const ForumPost = ({ item }: props) => {
const nav = useNavigation();
const [userName, setUserName] = useState("");
const [userPic, setUserPic] = useState("");
const [isLike, setIslike] = useState<boolean | undefined>(undefined);
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">
<TouchableOpacity onPress={() => {}} testID="Touchable">
<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">
{/* {item.timestamp.toDate().toString()} */}
{formatDate()}
</Text>
</View>
</View>
<Spacer variant={"l"} />
<View style={styles.textWrapper} testID="Body Wrapper">
<Text style={styles.title} testID="Title">
{item.title}
</Text>
<Spacer variant={"s"} />
<Text
style={styles.description}
testID="Description"
numberOfLines={4}
ellipsizeMode="tail"
>
{item.content}
</Text>
</View>
<Spacer variant={"l"} />
{item.pic && (
<View style={styles.imageWrapper} testID="Image Wrapper">
<Image
style={styles.image}
source={{ uri: item.pic }}
testID="Image"
/>
<Spacer variant={"l"} />
</View>
)}
<View style={styles.footerWrapper} testID="Fotter Wrapper">
<View style={styles.iconWrapper} testID="Comment Wrapper">
<MaterialIcons
name={"comment"}
style={styles.icon}
size={30}
testID="Comment Icon"
/>
<Text style={styles.textIcon} testID="Comment">
{item.commentCount}
</Text>
</View>
<View style={styles.iconWrapper} testID="Upvote Wrapper">
<MaterialIcons
name={"thumb-up"}
style={styles.icon}
size={30}
testID="Upvote Icon"
/>
<Text style={styles.textIcon} testID="Upvote">
{item.likeCount}
</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
</View>
);
};
export default ForumPost;
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,
},
imageWrapper: {
width: "100%",
},
textWrapper: {
width: "100%",
marginTop: 4,
paddingLeft: 8,
},
footerWrapper: {
flexDirection: "row",
flex: 1,
},
iconWrapper: {
width: "100%",
flexDirection: "row",
flex: 1,
},
memberName: {
color: Colors.text.subtitle,
fontSize: 14,
fontWeight: "bold",
},
timeStamp: {
color: Colors.text.disabled,
fontSize: 12,
},
title: {
color: Colors.text.title,
fontSize: 14,
fontWeight: "bold",
},
description: {
color: Colors.text.body,
fontSize: 14,
},
image: {
width: Layout.window.width * 0.86,
height: Layout.window.height * 0.2,
overflow: "hidden",
backgroundColor: Colors.background,
},
icon: {
color: Colors.icon.tab.inactive,
},
textIcon: {
color: Colors.text.body,
fontSize: 14,
paddingLeft: 10,
marginTop: 4,
},
});
...@@ -7,7 +7,7 @@ export type IThread = { ...@@ -7,7 +7,7 @@ export type IThread = {
userId: string; userId: string;
title: string; title: string;
content: string; content: string;
pic: string; pic?: string;
likeCount: number; likeCount: number;
commentCount: number; commentCount: number;
}; };
......
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