Merge branch 'integrate-forum-create-post' into 'master'

feat: Integrate forum create post

See merge request !168

src/navigation/ForumStackNavigator.tsx

@@ -11,7 +11,7 @@ const CreateEcosystemStackNavigator = () => {
       <ForumStack.Screen
         name="AddForumPost"
         component={AddForumPostScreen}
-        options={({ route }) => ({ title: route.params.headerTitle })}
+        options={{ headerTitle: "" }}
       />
       <ForumStack.Screen
         name="ForumPostDetail"

src/screens/ecosystem/EcosystemDetailScreen.tsx

@@ -203,7 +203,7 @@ const EcosystemDetailScreen = ({
         onPress={() => {
           nav.navigate("Forum", {
             screen: "AddForumPost",
-            params: { headerTitle: title, id: id },
+            params: { id: id },
           });
         }}
       >

src/screens/forum/AddForumPostScreen.tsx

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { useState } from "react";
 import { useNavigation } from "@react-navigation/core";
-import { StyleSheet } from "react-native";
+import { Alert, Image, StyleSheet } from "react-native";
 import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import Spacer from "../../components/Spacer/Spacer";
@@ -10,14 +10,56 @@ import PlainForm from "../../components/Forms/PlainForm";
 import SmallButton from "../../components/button/SmallButton";
 import MainButton from "../../components/button/MainButton";
 import { ForumStackScreenProps } from "../../types/navigation";
+import { createPost } from "../../service/firestore/forum/createPost";
+import { pickImage, uploadImgToFirebase } from "../../helpers/images";
+import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
+import { useUser } from "../../hooks/reduxHooks";
+import { v4 as uuidv4 } from "uuid";
+import { validateEmpty } from "../../helpers/Validators";
+import { ActivityIndicator } from "react-native-paper";
 
 const AddForumPostScreen = ({
   route,
 }: ForumStackScreenProps<"AddForumPost">) => {
-  // const { id } = route.params;
+  const { id } = route.params;
   const nav = useNavigation();
   const [forumName, setForumName] = useState("");
   const [forumContent, setForumContent] = useState("");
+  const [picture, setPicture] = useState<undefined | string>("");
+  const user = useUser();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handlePickImage = () => {
+    pickImage().then((res) => {
+      if (!res.cancelled) {
+        setPicture(undefined);
+        const { uri } = res as ImageInfo;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        const imgId: string = uuidv4() as string;
+        uploadImgToFirebase(uri, `forum/${imgId}`).then((res) => {
+          setPicture(res);
+        });
+      }
+    });
+  };
+
+  const handleCreatePost = async () => {
+    if (validateEmpty(forumName) && validateEmpty(forumContent)) {
+      setIsSubmitting(true);
+      await createPost({
+        title: forumName,
+        content: forumContent,
+        ecosystemId: id,
+        userId: user.id,
+        pic: picture,
+      });
+      setIsSubmitting(false);
+      nav.goBack();
+    } else {
+      Alert.alert("Form Tidak Lengkap", "Silahkan isi form dengan benar");
+    }
+  };
 
   return (
     <View style={styles.container}>
@@ -26,12 +68,31 @@ const AddForumPostScreen = ({
       <Text style={styles.subtitle}>Silahkan isi detail dari post anda</Text>
       <Spacer variant="xl" />
       <View style={styles.componentWrapper}>
+        <View style={styles.imageContainer}>
+          <View style={styles.previewImage}>
+            <Image
+              style={styles.image}
+              source={
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                { uri: picture }
+              }
+            />
+          </View>
+        </View>
         <View style={styles.buttonWrapper}>
-          <SmallButton
-            text={"Tambahkan Foto"}
-            colors={"primary"}
-            onPress={() => {}}
-          />
+          {picture !== undefined ? (
+            <SmallButton
+              colors="primary"
+              text={"Tambahkan Gambar"}
+              onPress={() => handlePickImage()}
+            />
+          ) : (
+            <ActivityIndicator
+              size={"large"}
+              animating={true}
+              color={Colors.button.primary.bg}
+            />
+          )}
         </View>
       </View>
       <Spacer variant="l" />
@@ -56,7 +117,19 @@ const AddForumPostScreen = ({
       </View>
       <Spacer variant="xl" />
       <Spacer variant="l" />
-      <MainButton text="Upload Post" colors="primary" onPress={() => {}} />
+      {!isSubmitting ? (
+        <MainButton
+          text="Upload Post"
+          colors="primary"
+          onPress={() => handleCreatePost()}
+        />
+      ) : (
+        <ActivityIndicator
+          size={"large"}
+          animating={true}
+          color={Colors.button.primary.bg}
+        />
+      )}
     </View>
   );
 };
@@ -83,6 +156,24 @@ const styles = StyleSheet.create({
     fontSize: 20,
     color: Colors.text.subtitle,
   },
+  image: {
+    flex: 1,
+    height: undefined,
+    width: "100%",
+  },
+  previewImage: {
+    alignItems: "center",
+    width: 100,
+    height: 100,
+    borderRadius: 100,
+    overflow: "hidden",
+    marginBottom: 8,
+  },
+  imageContainer: {
+    width: "100%",
+    alignItems: "center",
+    paddingBottom: 10,
+  },
 });
 
 export default AddForumPostScreen;