feat: Create Forum Post Component

src/components/ForumPost/ForumPost.tsx

+/* 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,
+  },
+});

src/types/firestore/thread.ts

@@ -7,7 +7,7 @@ export type IThread = {
   userId: string;
   title: string;
   content: string;
-  pic: string;
+  pic?: string;
   likeCount: number;
   commentCount: number;
 };