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

feat: create forum post detail screen

See merge request !163

src/components/ForumPost/ForumPost.tsx

@@ -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,79 +41,78 @@ 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}
-                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>
+      <View style={styles.container} testID="Container">
+        <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.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"} />
-            {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 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>
           </View>
         </View>
-      </TouchableOpacity>
+      </View>
     </View>
   );
 };
@@ -121,15 +120,6 @@ 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,
   },

src/screens/ecosystem/EcosystemDetailScreen.tsx

@@ -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;

src/screens/forum/ForumPostDetailScreen.tsx

+/* 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}>
-      <View>
-        <Text>Layar Post Detail Screen</Text>
+      <FlatList
+        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>
   );
@@ -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;