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";
type props = {
item: IThread;
onLike: () => void;
onUnLike: () => void;
onLike?: () => void;
onUnLike?: () => void;
};
const ForumPost = ({ item }: props) => {
......@@ -41,9 +41,7 @@ const ForumPost = ({ item }: props) => {
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}
......@@ -56,7 +54,6 @@ const ForumPost = ({ item }: props) => {
</Text>
<Spacer variant={"s"} />
<Text style={styles.timeStamp} testID="Time Stamp">
{/* {item.timestamp.toDate().toString()} */}
{formatDate()}
</Text>
</View>
......@@ -89,23 +86,27 @@ const ForumPost = ({ item }: props) => {
)}
<View style={styles.footerWrapper} testID="Fotter Wrapper">
<View style={styles.iconWrapper} testID="Comment Wrapper">
<TouchableOpacity onPress={() => {}}>
<MaterialIcons
name={"comment"}
style={styles.icon}
size={30}
testID="Comment Icon"
/>
</TouchableOpacity>
<Text style={styles.textIcon} testID="Comment">
{item.commentCount}
</Text>
</View>
<View style={styles.iconWrapper} testID="Upvote Wrapper">
<TouchableOpacity onPress={() => {}}>
<MaterialIcons
name={"thumb-up"}
style={styles.icon}
size={30}
testID="Upvote Icon"
/>
</TouchableOpacity>
<Text style={styles.textIcon} testID="Upvote">
{item.likeCount}
</Text>
......@@ -113,23 +114,12 @@ const ForumPost = ({ item }: props) => {
</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: {
......@@ -143,10 +133,9 @@ const styles = StyleSheet.create({
borderRadius: 100,
},
imageWrapper: {
width: "100%",
alignItems: "center",
},
textWrapper: {
width: "100%",
marginTop: 4,
paddingLeft: 8,
},
......
......@@ -276,6 +276,14 @@ const styles = StyleSheet.create({
width: 72,
height: 72,
},
cardWrapper: {
width: "100%",
borderRadius: 8,
elevation: 4,
flexDirection: "row",
alignItems: "center",
backgroundColor: Colors.background,
},
});
export default EcosystemDetailScreen;
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from "react";
import { StyleSheet } from "react-native";
import { Text, View } from "../../components/Themed";
import { StyleSheet, View, FlatList, Text, ListRenderItem } from "react-native";
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 (
<View style={styles.container}>
<FlatList
data={listData}
renderItem={({ item }) => {
return (
<View style={styles.commentContainer}>
<Comment item={item} />
</View>
);
}}
ItemSeparatorComponent={() => <Spacer variant={"xl"} />}
ListHeaderComponent={
<View>
<Text>Layar Post Detail Screen</Text>
<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>
);
......@@ -17,9 +60,29 @@ const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.background,
paddingHorizontal: 24,
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;
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