Fakultas Ilmu Komputer UI

Commit 13fb9dbe authored by Mohammad Faraz Abisha Mirza's avatar Mohammad Faraz Abisha Mirza
Browse files

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

feat: Integrate forum create post

See merge request !168
parents 1a2c87a1 cfee406c
Pipeline #88990 passed with stage
in 11 minutes and 49 seconds
......@@ -11,7 +11,7 @@ const CreateEcosystemStackNavigator = () => {
<ForumStack.Screen
name="AddForumPost"
component={AddForumPostScreen}
options={({ route }) => ({ title: route.params.headerTitle })}
options={{ headerTitle: "" }}
/>
<ForumStack.Screen
name="ForumPostDetail"
......
......@@ -203,7 +203,7 @@ const EcosystemDetailScreen = ({
onPress={() => {
nav.navigate("Forum", {
screen: "AddForumPost",
params: { headerTitle: title, id: id },
params: { id: id },
});
}}
>
......
......@@ -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;
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