From 560f2c5ce20a8a58a3f1d7d47bbb099307522e7c Mon Sep 17 00:00:00 2001
From: Abraham Rudolf Brahmana <abraham.rudolf@ui.ac.id>
Date: Thu, 16 Sep 2021 18:05:15 +0700
Subject: [PATCH] Add profile navigation and create boilerplate profile screen

---
 src/navigation/BottomTabNavigator.tsx         | 25 +++++++++++
 src/navigation/ProfileStackNavigator.tsx      | 40 +++++++++++++++++
 src/navigation/RootNavigator.tsx              |  1 +
 src/screens/profile/AccountSettingsScreen.tsx | 43 +++++++++++++++++++
 src/screens/profile/ChangePasswordScreen.tsx  | 31 +++++++++++++
 src/screens/profile/ProfileScreen.tsx         | 43 +++++++++++++++++++
 src/types/navigation/ProfileStack.ts          | 14 ++++++
 src/types/navigation/RootStack.ts             |  1 +
 src/types/navigation/RootTab.ts               |  2 +-
 src/types/navigation/index.tsx                |  1 +
 10 files changed, 200 insertions(+), 1 deletion(-)
 create mode 100644 src/navigation/ProfileStackNavigator.tsx
 create mode 100644 src/screens/profile/AccountSettingsScreen.tsx
 create mode 100644 src/screens/profile/ChangePasswordScreen.tsx
 create mode 100644 src/screens/profile/ProfileScreen.tsx
 create mode 100644 src/types/navigation/ProfileStack.ts

diff --git a/src/navigation/BottomTabNavigator.tsx b/src/navigation/BottomTabNavigator.tsx
index 508d82f..f4d60b1 100644
--- a/src/navigation/BottomTabNavigator.tsx
+++ b/src/navigation/BottomTabNavigator.tsx
@@ -5,6 +5,7 @@ import TabOneScreen from "../screens/TabOneScreen";
 import { FontAwesome } from "@expo/vector-icons";
 import { Pressable } from "react-native";
 import Colors from "../constants/Colors";
+import ProfileStackNavigator from "./ProfileStackNavigator";
 
 /**
  * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
@@ -43,6 +44,30 @@ const BottomTabNavigator = () => {
           ),
         })}
       />
+      <BottomTab.Screen
+        name="Profile"
+        component={ProfileStackNavigator}
+        options={({ navigation }: RootTabScreenProps<"Profile">) => ({
+          title: "Profile",
+          headerShown: false,
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          headerRight: () => (
+            <Pressable
+              onPress={() => null}
+              style={({ pressed }) => ({
+                opacity: pressed ? 0.5 : 1,
+              })}
+            >
+              <FontAwesome
+                name="info-circle"
+                size={25}
+                color={Colors.text.title} //TODO ganti warna
+                style={{ marginRight: 15 }}
+              />
+            </Pressable>
+          ),
+        })}
+      />
     </BottomTab.Navigator>
   );
 };
diff --git a/src/navigation/ProfileStackNavigator.tsx b/src/navigation/ProfileStackNavigator.tsx
new file mode 100644
index 0000000..e4ea33d
--- /dev/null
+++ b/src/navigation/ProfileStackNavigator.tsx
@@ -0,0 +1,40 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React from "react";
+import { StyleSheet } from "react-native";
+import AccountSettingsScreen from "../screens/profile/AccountSettingsScreen";
+import ChangePasswordScreen from "../screens/profile/ChangePasswordScreen";
+import ProfileScreen from "../screens/profile/ProfileScreen";
+import { ProfileStackParamList } from "../types/navigation/ProfileStack";
+
+const ProfileStack = createNativeStackNavigator<ProfileStackParamList>();
+
+const AuthStackNavigator = () => {
+  return (
+    <ProfileStack.Navigator initialRouteName="ProfileScreen">
+      <ProfileStack.Screen
+        name="ProfileScreen"
+        component={ProfileScreen}
+        // options={{ headerShown: false }}
+      />
+      <ProfileStack.Screen
+        name="AccountSettings"
+        component={AccountSettingsScreen}
+        options={{ title: "Pengaturan Akun"}}
+      />
+      <ProfileStack.Screen
+        name="ChangePassword"
+        component={ChangePasswordScreen}
+        options={{ title: "Change Password"}}
+      />
+      
+    </ProfileStack.Navigator>
+  );
+};
+
+// const styles = StyleSheet.create({
+//   header: {
+//     shadow
+//   }
+// })
+
+export default AuthStackNavigator;
diff --git a/src/navigation/RootNavigator.tsx b/src/navigation/RootNavigator.tsx
index 97ed412..221ec51 100644
--- a/src/navigation/RootNavigator.tsx
+++ b/src/navigation/RootNavigator.tsx
@@ -3,6 +3,7 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import BottomTabNavigator from "./BottomTabNavigator";
 import { RootStackParamList } from "../types/navigation";
 import AuthStackNavigator from "./AuthStackNavigator";
+import ProfileStackNavigator from "./ProfileStackNavigator";
 
 /**
  * A root stack navigator is often used for displaying modals on top of all other content.
diff --git a/src/screens/profile/AccountSettingsScreen.tsx b/src/screens/profile/AccountSettingsScreen.tsx
new file mode 100644
index 0000000..b2bf01d
--- /dev/null
+++ b/src/screens/profile/AccountSettingsScreen.tsx
@@ -0,0 +1,43 @@
+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { Button, StyleSheet } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+import { RootTabScreenProps } from "../../types/navigation";
+
+export default function AccountSettingsScreen({
+  navigation,
+}: RootTabScreenProps<"Profile">) {
+  const nav = useNavigation();
+  return (
+    <View style={styles.container}>
+      {/* <TouchableOpacity onPress={() => nav.navigate("ChangePassword")}>
+        <Text>Ganti Password</Text>
+      </TouchableOpacity> */}
+      <Button 
+        onPress={() => nav.navigate("ChangePassword")}
+        title="Change Password" 
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Colors.background,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: "80%",
+  },
+});
diff --git a/src/screens/profile/ChangePasswordScreen.tsx b/src/screens/profile/ChangePasswordScreen.tsx
new file mode 100644
index 0000000..570f0bb
--- /dev/null
+++ b/src/screens/profile/ChangePasswordScreen.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import Colors from '../../constants/Colors';
+
+const ChangePasswordScreen = ({navigation}) => {
+  return (
+    <View style={styles.container}>
+      <Text>gantis</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Colors.background,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: "80%",
+  },
+});
+
+export default ChangePasswordScreen
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
new file mode 100644
index 0000000..6226afe
--- /dev/null
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -0,0 +1,43 @@
+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { Button, StyleSheet } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+import { RootTabScreenProps } from "../../types/navigation";
+
+export default function ProfileScreen({
+  navigation,
+}: RootTabScreenProps<"Profile">) {
+  const nav = useNavigation();
+  return (
+    <View style={styles.container}>
+      {/* <TouchableOpacity onPress={() => nav.navigate("ChangePassword")}>
+        <Text>Ganti Password</Text>
+      </TouchableOpacity> */}
+      <Button 
+        onPress={() => nav.navigate("AccountSettings")}
+        title="Pengaturan Akun" 
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Colors.background,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: "80%",
+  },
+});
diff --git a/src/types/navigation/ProfileStack.ts b/src/types/navigation/ProfileStack.ts
new file mode 100644
index 0000000..590a74f
--- /dev/null
+++ b/src/types/navigation/ProfileStack.ts
@@ -0,0 +1,14 @@
+/**
+ * Learn more about using TypeScript with React Navigation:
+ * https://reactnavigation.org/docs/typescript/
+ */
+ import { NativeStackScreenProps } from "@react-navigation/native-stack";
+
+ export type ProfileStackParamList = {
+   ChangePassword: undefined;
+   TabTwoScreen: undefined;
+ };
+ 
+ export type ProfileStackScreenProps<Screen extends keyof ProfileStackParamList> =
+   NativeStackScreenProps<ProfileStackParamList, Screen>;
+ 
\ No newline at end of file
diff --git a/src/types/navigation/RootStack.ts b/src/types/navigation/RootStack.ts
index 1dd8560..d424597 100644
--- a/src/types/navigation/RootStack.ts
+++ b/src/types/navigation/RootStack.ts
@@ -10,6 +10,7 @@ import { RootTabParamList } from "./RootTab";
 export type RootStackParamList = {
   MainTab: NavigatorScreenParams<RootTabParamList> | undefined;
   Auth: undefined;
+  Profile: undefined;
   Modal: undefined;
   NotFound: undefined;
 };
diff --git a/src/types/navigation/RootTab.ts b/src/types/navigation/RootTab.ts
index eeb4851..abcedf4 100644
--- a/src/types/navigation/RootTab.ts
+++ b/src/types/navigation/RootTab.ts
@@ -8,7 +8,7 @@ import { RootStackParamList } from ".";
 
 export type RootTabParamList = {
   TabOne: undefined;
-  TabTwo: undefined;
+  Profile: undefined;
 };
 
 export type RootTabScreenProps<Screen extends keyof RootTabParamList> =
diff --git a/src/types/navigation/index.tsx b/src/types/navigation/index.tsx
index f171b62..38ecb8d 100644
--- a/src/types/navigation/index.tsx
+++ b/src/types/navigation/index.tsx
@@ -9,3 +9,4 @@ declare global {
 export * from "./RootStack";
 export * from "./RootTab";
 export * from "./AuthStack";
+export * from "./ProfileStack";
-- 
GitLab