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

feat: Create Add Forum Post Screen

See merge request !158

src/navigation/ForumStackNavigator.tsx

+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React from "react";
+import { AddForumPostScreen, ForumPostDetailScreen } from "../screens/forum";
+import { ForumStackParamList } from "../types/navigation/ForumStack";
+
+const ForumStack = createNativeStackNavigator<ForumStackParamList>();
+
+const CreateEcosystemStackNavigator = () => {
+  return (
+    <ForumStack.Navigator initialRouteName="AddForumPost">
+      <ForumStack.Screen
+        name="AddForumPost"
+        component={AddForumPostScreen}
+        options={{ title: "" }}
+      />
+      <ForumStack.Screen
+        name="ForumPostDetail"
+        component={ForumPostDetailScreen}
+        options={{ title: "Post" }}
+      />
+    </ForumStack.Navigator>
+  );
+};
+
+export default CreateEcosystemStackNavigator;

src/navigation/RootNavigator.tsx

@@ -3,6 +3,7 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import BottomTabNavigator from "./BottomTabNavigator";
 import CreateEcosystemStackNavigator from "./CreateEcosystemStackNavigator";
 import UpdateEcosystemStackNavigator from "./UpdateEcosystemStackNavigator";
+import ForumStackNavigator from "./ForumStackNavigator";
 import { RootStackParamList } from "../types/navigation";
 import AuthStackNavigator from "./AuthStackNavigator";
 import SuccessChangePasswordScreen from "../screens/SuccessChangePasswordScreen";
@@ -95,6 +96,13 @@ const RootNavigator = () => {
           options={{ headerShown: false }}
         />
       )}
+      {user.id !== "" && (
+        <RootStack.Screen
+          name="Forum"
+          component={ForumStackNavigator}
+          options={{ headerShown: false }}
+        />
+      )}
     </RootStack.Navigator>
   ) : (
     <RootStack.Navigator>

src/screens/forum/AddForumPostScreen.tsx

+/* eslint-disable @typescript-eslint/no-unused-vars */
+import * as React from "react";
+import { useState } from "react";
+import { useNavigation } from "@react-navigation/core";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+import Spacer from "../../components/Spacer/Spacer";
+import PlainForm from "../../components/Forms/PlainForm";
+import SmallButton from "../../components/button/SmallButton";
+import MainButton from "../../components/button/MainButton";
+import { ForumStackScreenProps } from "../../types/navigation";
+
+const AddForumPostScreen = ({
+  route,
+}: ForumStackScreenProps<"AddForumPost">) => {
+  // const { id } = route.params;
+  const nav = useNavigation();
+  const [forumName, setForumName] = useState("");
+  const [forumContent, setForumContent] = useState("");
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Buat Post Forum</Text>
+      <Spacer variant="xl" />
+      <Text style={styles.subtitle}>Silahkan isi detail dari post anda</Text>
+      <Spacer variant="xl" />
+      <View style={styles.componentWrapper}>
+        <View style={styles.buttonWrapper}>
+          <SmallButton
+            text={"Tambahkan Foto"}
+            colors={"primary"}
+            onPress={() => {}}
+          />
+        </View>
+      </View>
+      <Spacer variant="l" />
+      <View style={styles.componentWrapper}>
+        <PlainForm
+          formTitle="Judul Post"
+          placeholder="Masukkan Judul Post"
+          text={forumName}
+          setText={setForumName}
+          errorMessage="Silahkan masukkan judul post"
+        />
+      </View>
+      <Spacer variant="xl" />
+      <View style={styles.componentWrapper}>
+        <PlainForm
+          formTitle="Isi Post"
+          placeholder="Masukkan Isi Post"
+          text={forumContent}
+          setText={setForumContent}
+          errorMessage="Silahkan masukkan isi post"
+        />
+      </View>
+      <Spacer variant="xl" />
+      <Spacer variant="l" />
+      <MainButton text="Upload Post" colors="primary" onPress={() => {}} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    padding: 24,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "500",
+    color: Colors.text.title,
+  },
+  componentWrapper: {
+    width: "100%",
+  },
+  buttonWrapper: {
+    width: "100%",
+    alignItems: "center",
+  },
+  subtitle: {
+    fontSize: 20,
+    color: Colors.text.subtitle,
+  },
+});
+
+export default AddForumPostScreen;

src/screens/forum/ForumPostDetailScreen.tsx

+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+
+const ForumPostDetailScreen = () => {
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Layar Post Detail Screen</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+});
+
+export default ForumPostDetailScreen;

src/screens/forum/index.ts

+import AddForumPostScreen from "./AddForumPostScreen";
+import ForumPostDetailScreen from "./ForumPostDetailScreen";
+
+export { AddForumPostScreen, ForumPostDetailScreen };

src/types/navigation/ForumStack.ts

+/**
+ * Learn more about using TypeScript with React Navigation:
+ * https://reactnavigation.org/docs/typescript/
+ */
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
+
+export type ForumStackParamList = {
+  AddForumPost: {
+    headerTitle?: string;
+    id?: string;
+    name?: string;
+    forGroup?: string;
+    fromScreen?: string;
+  };
+  ForumPostDetail: {
+    headerTitle?: string;
+    id?: string;
+    title?: string;
+    content?: string;
+    image?: string;
+    comment?: string;
+    upvote?: string;
+    creatorId?: string;
+  };
+};
+
+export type ForumStackScreenProps<Screen extends keyof ForumStackParamList> =
+  NativeStackScreenProps<ForumStackParamList, Screen>;

src/types/navigation/RootStack.ts

@@ -11,6 +11,7 @@ import {
   ProfileStackParamList,
   CreateEcosystemStackParamList,
   UpdateEcosystemStackParamList,
+  ForumStackParamList,
 } from ".";
 import { RootTabParamList } from "./RootTab";
 
@@ -24,6 +25,7 @@ export type RootStackParamList = {
   SuccessChangePassword: undefined;
   CreateEcosystem: NavigatorScreenParams<CreateEcosystemStackParamList>;
   UpdateEcosystem: NavigatorScreenParams<UpdateEcosystemStackParamList>;
+  Forum: NavigatorScreenParams<ForumStackParamList>;
 };
 
 export type RootStackScreenProps<Screen extends keyof RootStackParamList> =

src/types/navigation/index.tsx

@@ -13,3 +13,4 @@ export * from "./ProfileStack";
 export * from "./EcosystemStack";
 export * from "./CreateEcosystemStack";
 export * from "./UpdateEcosystemStack";
+export * from "./ForumStack";