Fakultas Ilmu Komputer UI

Commit 1a2c87a1 authored by Abraham Rudolf Brahmana's avatar Abraham Rudolf Brahmana
Browse files

Merge branch 'detail-forum-post-screen' into 'master'

feat: create forum post detail screen

See merge request !163
parents b32a947f 52b64658
Pipeline #88988 passed with stage
in 11 minutes and 11 seconds
...@@ -13,8 +13,8 @@ import { IUser } from "../../types/firestore/User"; ...@@ -13,8 +13,8 @@ import { IUser } from "../../types/firestore/User";
type props = { type props = {
item: IThread; item: IThread;
onLike: () => void; onLike?: () => void;
onUnLike: () => void; onUnLike?: () => void;
}; };
const ForumPost = ({ item }: props) => { const ForumPost = ({ item }: props) => {
...@@ -41,79 +41,78 @@ const ForumPost = ({ item }: props) => { ...@@ -41,79 +41,78 @@ const ForumPost = ({ item }: props) => {
return ( return (
<View testID="Card"> <View testID="Card">
<TouchableOpacity onPress={() => {}} testID="Touchable"> <View style={styles.container} testID="Container">
<View style={styles.container} testID="Container"> <View style={styles.profileWrapper} testID="Profile Wrapper">
<View style={styles.cardWrapper} testID="Wrapper"> <Image
<View style={styles.profileWrapper} testID="Profile Wrapper"> style={styles.profilePic}
<Image source={{ uri: userPic }}
style={styles.profilePic} testID="Profile Picture"
source={{ uri: userPic }} />
testID="Profile Picture" <View style={styles.textWrapper} testID="Text Wrapper">
/> <Text style={styles.memberName} testID="Member Name">
<View style={styles.textWrapper} testID="Text Wrapper"> {userName}
<Text style={styles.memberName} testID="Member Name"> </Text>
{userName} <Spacer variant={"s"} />
</Text> <Text style={styles.timeStamp} testID="Time Stamp">
<Spacer variant={"s"} /> {formatDate()}
<Text style={styles.timeStamp} testID="Time Stamp"> </Text>
{/* {item.timestamp.toDate().toString()} */} </View>
{formatDate()} </View>
</Text> <Spacer variant={"l"} />
</View> <View style={styles.textWrapper} testID="Body Wrapper">
</View> <Text style={styles.title} testID="Title">
<Spacer variant={"l"} /> {item.title}
<View style={styles.textWrapper} testID="Body Wrapper"> </Text>
<Text style={styles.title} testID="Title"> <Spacer variant={"s"} />
{item.title} <Text
</Text> style={styles.description}
<Spacer variant={"s"} /> testID="Description"
<Text numberOfLines={4}
style={styles.description} ellipsizeMode="tail"
testID="Description" >
numberOfLines={4} {item.content}
ellipsizeMode="tail" </Text>
> </View>
{item.content} <Spacer variant={"l"} />
</Text> {item.pic && (
</View> <View style={styles.imageWrapper} testID="Image Wrapper">
<Image
style={styles.image}
source={{ uri: item.pic }}
testID="Image"
/>
<Spacer variant={"l"} /> <Spacer variant={"l"} />
{item.pic && ( </View>
<View style={styles.imageWrapper} testID="Image Wrapper"> )}
<Image <View style={styles.footerWrapper} testID="Fotter Wrapper">
style={styles.image} <View style={styles.iconWrapper} testID="Comment Wrapper">
source={{ uri: item.pic }} <TouchableOpacity onPress={() => {}}>
testID="Image" <MaterialIcons
/> name={"comment"}
<Spacer variant={"l"} /> style={styles.icon}
</View> size={30}
)} testID="Comment Icon"
<View style={styles.footerWrapper} testID="Fotter Wrapper"> />
<View style={styles.iconWrapper} testID="Comment Wrapper"> </TouchableOpacity>
<MaterialIcons <Text style={styles.textIcon} testID="Comment">
name={"comment"} {item.commentCount}
style={styles.icon} </Text>
size={30} </View>
testID="Comment Icon" <View style={styles.iconWrapper} testID="Upvote Wrapper">
/> <TouchableOpacity onPress={() => {}}>
<Text style={styles.textIcon} testID="Comment"> <MaterialIcons
{item.commentCount} name={"thumb-up"}
</Text> style={styles.icon}
</View> size={30}
<View style={styles.iconWrapper} testID="Upvote Wrapper"> testID="Upvote Icon"
<MaterialIcons />
name={"thumb-up"} </TouchableOpacity>
style={styles.icon} <Text style={styles.textIcon} testID="Upvote">
size={30} {item.likeCount}
testID="Upvote Icon" </Text>
/>
<Text style={styles.textIcon} testID="Upvote">
{item.likeCount}
</Text>
</View>
</View>
</View> </View>
</View> </View>
</TouchableOpacity> </View>
</View> </View>
); );
}; };
...@@ -121,15 +120,6 @@ export default ForumPost; ...@@ -121,15 +120,6 @@ export default ForumPost;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
width: "100%",
borderRadius: 8,
elevation: 4,
flexDirection: "row",
alignItems: "center",
backgroundColor: Colors.background,
},
cardWrapper: {
width: "100%",
padding: 8, padding: 8,
}, },
profileWrapper: { profileWrapper: {
...@@ -143,10 +133,9 @@ const styles = StyleSheet.create({ ...@@ -143,10 +133,9 @@ const styles = StyleSheet.create({
borderRadius: 100, borderRadius: 100,
}, },
imageWrapper: { imageWrapper: {
width: "100%", alignItems: "center",
}, },
textWrapper: { textWrapper: {
width: "100%",
marginTop: 4, marginTop: 4,
paddingLeft: 8, paddingLeft: 8,
}, },
......
...@@ -276,6 +276,14 @@ const styles = StyleSheet.create({ ...@@ -276,6 +276,14 @@ const styles = StyleSheet.create({
width: 72, width: 72,
height: 72, height: 72,
}, },
cardWrapper: {
width: "100%",
borderRadius: 8,
elevation: 4,
flexDirection: "row",
alignItems: "center",
backgroundColor: Colors.background,
},
}); });
export default EcosystemDetailScreen; export default EcosystemDetailScreen;
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from "react"; import * as React from "react";
import { StyleSheet } from "react-native"; import { StyleSheet, View, FlatList, Text, ListRenderItem } from "react-native";
import { Text, View } from "../../components/Themed";
import Colors from "../../constants/Colors"; import Colors from "../../constants/Colors";
import Spacer from "../../components/Spacer/Spacer";
import { ForumStackScreenProps } from "../../types/navigation";
import { useState } from "react";
import { Divider } from "react-native-elements";
import IconForm from "../../components/Forms/IconForm";
import Comment from "../../components/ForumPost/Comment";
import { IThreadComment } from "../../types/firestore/threadComment";
import { IThread } from "../../types/firestore/thread";
import ForumPost from "../../components/ForumPost/ForumPost";
const ForumPostDetailScreen = ({
route,
}: ForumStackScreenProps<"ForumPostDetail">) => {
const [formComment, setFormComment] = useState("");
const [listData, setListData] = useState<IThreadComment[]>([]);
const [forum, setForum] = useState<IThread>();
const handleSubmit = () => {};
const ForumPostDetailScreen = () => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View> <FlatList
<Text>Layar Post Detail Screen</Text> data={listData}
renderItem={({ item }) => {
return (
<View style={styles.commentContainer}>
<Comment item={item} />
</View>
);
}}
ItemSeparatorComponent={() => <Spacer variant={"xl"} />}
ListHeaderComponent={
<View>
<View style={styles.forumContainer}>
<ForumPost item={forum} onLike={() => {}} onUnLike={() => {}} />
</View>
<Divider orientation="vertical" width={5} />
</View>
}
ListFooterComponent={() => <Spacer variant={"xl"} />}
/>
<View style={styles.formComment}>
<IconForm
text={formComment}
setText={setFormComment}
placeholder={"Masukkan Komentar"}
type={"comment"}
onPress={handleSubmit}
/>
</View> </View>
</View> </View>
); );
...@@ -17,9 +60,29 @@ const styles = StyleSheet.create({ ...@@ -17,9 +60,29 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: Colors.background, backgroundColor: Colors.background,
paddingHorizontal: 24,
justifyContent: "center", justifyContent: "center",
}, },
forumContainer: {
flex: 1,
backgroundColor: Colors.background,
padding: 10,
justifyContent: "center",
},
commentContainer: {
flex: 1,
backgroundColor: Colors.background,
padding: 24,
justifyContent: "center",
paddingBottom: 80,
},
formComment: {
backgroundColor: Colors.background,
paddingHorizontal: 24,
paddingVertical: 16,
position: "absolute",
bottom: 0,
width: "100%",
},
}); });
export default ForumPostDetailScreen; export default ForumPostDetailScreen;
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