Merge pull request #6 from phuongngo0320/setup

Setup p4

src/Localization/keys/index.ts

@@ -3,4 +3,10 @@ export enum LocalizationKey {
   HOME = "home",
   START = "start",
   LOADING = "loading",
+
+  // nav-related
+  TRANSACTIONS = "transactions",
+  WALLETS = "wallets",
+  BUDGETS = "budgets",
+  ADD = "add",
 }

src/Localization/languages/en.ts

@@ -5,4 +5,9 @@ export const en = {
   [LocalizationKey.HOME]: "Home",
   [LocalizationKey.START]: "Start",
   [LocalizationKey.LOADING]: "Loading",
+
+  [LocalizationKey.TRANSACTIONS]: "Log",
+  [LocalizationKey.WALLETS]: "Wallets",
+  [LocalizationKey.BUDGETS]: "Budgets",
+  [LocalizationKey.ADD]: "Add",
 };

src/Localization/languages/vi.ts

@@ -5,4 +5,9 @@ export const vi = {
   [LocalizationKey.HOME]: "Trang chủ",
   [LocalizationKey.START]: "Bắt đầu",
   [LocalizationKey.LOADING]: "Đang tải",
+
+  [LocalizationKey.TRANSACTIONS]: "Giao dịch",
+  [LocalizationKey.WALLETS]: "Ví của tôi",
+  [LocalizationKey.BUDGETS]: "Ngân sách",
+  [LocalizationKey.ADD]: "Thêm",
 };

src/Navigation/Main/index.tsx

@@ -6,6 +6,9 @@ import { AddTransactionContainer } from "@/Screens/AddTransaction";
 import { WalletsContainer } from "@/Screens/Wallets";
 import { BudgetsContainer } from "@/Screens/Budgets";
 import { createMaterialBottomTabNavigator } from "react-native-paper/react-navigation";
+import { LocalizationKey, i18n } from "@/Localization";
+import { Icon } from "react-native-paper";
+import { Icons } from "@/Theme";
 
 const Tab = createMaterialBottomTabNavigator();
 
@@ -20,35 +23,50 @@ export const MainNavigator = () => {
         name="Home"
         component={HomeContainer}
         options={{
-
+          tabBarLabel: i18n.t(LocalizationKey.HOME),
+          tabBarIcon: ({ color }) => (
+            <Icon source={Icons.HOME} size={26}  color={color}/>
+          ),
         }}
       />
       <Tab.Screen 
         name="Transactions"
         component={TransactionsContainer}
         options={{
-
+          tabBarLabel: i18n.t(LocalizationKey.TRANSACTIONS),
+          tabBarIcon: ({ color }) => (
+            <Icon source={Icons.HISTORY} size={26}  color={color}/>
+          ),
         }}
       />
       <Tab.Screen
         name="AddTransaction"
         component={AddTransactionContainer}
         options={{
-
+          tabBarLabel: i18n.t(LocalizationKey.ADD),
+          tabBarIcon: ({ color }) => (
+            <Icon source={Icons.PLUS} size={26}  color={color}/>
+          ),
         }}
       />
       <Tab.Screen
         name="Wallets"
         component={WalletsContainer}
         options={{
-
+          tabBarLabel: i18n.t(LocalizationKey.WALLETS),
+          tabBarIcon: ({ color }) => (
+            <Icon source={Icons.WALLET} size={26}  color={color}/>
+          ),
         }}
       />
       <Tab.Screen
         name="Budgets"
         component={BudgetsContainer}
         options={{
-
+          tabBarLabel: i18n.t(LocalizationKey.BUDGETS),
+          tabBarIcon: ({ color }) => (
+            <Icon source={Icons.BUDGET} size={26}  color={color}/>
+          ),
         }}
       />
     </Tab.Navigator>

src/Navigation/NavigationBar.tsx

@@ -2,17 +2,47 @@ import React, { FC } from "react";
 import { Appbar } from "react-native-paper";
 import { getHeaderTitle } from "@react-navigation/elements";
 import { NativeStackHeaderProps } from "@react-navigation/native-stack";
+import { RootScreens } from "@/Screens";
+import { Language, i18n } from "@/Localization";
 
 export const NavigationBar: FC<NativeStackHeaderProps> = ({ navigation, route, options, back }) => {
-    // const title = getHeaderTitle(options, route.name);
+    const title = getHeaderTitle(options, route.name);
+
+    if (title === RootScreens.WELCOME) {
+        return (<></>)
+    }
+
+    const isMain = title === RootScreens.MAIN;
+    const hasBack = back && !isMain;
+
+    if (!isMain) {
+        return (
+            <Appbar.Header>
+                {hasBack
+                    ? <Appbar.BackAction onPress={navigation.goBack} />
+                    : null
+                }
+                <Appbar.Content title={title == RootScreens.MAIN ? "Finwise" : title} />
+            </Appbar.Header>
+        )
+    }
 
     return (
         <Appbar.Header>
-            {/* {back 
+            {hasBack
                 ? <Appbar.BackAction onPress={navigation.goBack} />
                 : null
-            } */}
-            <Appbar.Content title="Finwise" />
+            }
+            <Appbar.Content title={title == RootScreens.MAIN ? "Finwise" : title} />
+
+            <Appbar.Action icon={ i18n.locale == Language.ENGLISH ? "alpha-e-box" : "alpha-v-box" } />
+            <Appbar.Action icon="logout" onPress={() => {
+                // TODO: logout (clear user info and disable back action)
+                navigation.navigate(RootScreens.LOGIN);
+            }} />
+            <Appbar.Action icon="cog" onPress={() => {
+                navigation.navigate(RootScreens.SETTINGS);
+            }} />
         </Appbar.Header>
     )
 }

src/Navigation/index.tsx

@@ -7,11 +7,15 @@ import { WelcomeContainer } from "@/Screens/Welcome";
 import { RootScreens } from "@/Screens";
 import { SettingsContainer } from "@/Screens/Settings";
 import { NavigationBar } from "./NavigationBar";
+import { LoginContainer } from "@/Screens/Login";
+import { SignupContainer } from "@/Screens/Signup";
 
 export type RootStackParamList = {
   [RootScreens.MAIN]: undefined;
   [RootScreens.WELCOME]: undefined;
   [RootScreens.SETTINGS]: undefined;
+  [RootScreens.LOGIN]: undefined;
+  [RootScreens.SIGNUP]: undefined;
 };
 
 const RootStack = createNativeStackNavigator<RootStackParamList>();
@@ -38,6 +42,14 @@ const ApplicationNavigator = () => {
           name={RootScreens.SETTINGS}
           component={SettingsContainer}
         />
+        <RootStack.Screen
+          name={RootScreens.LOGIN}
+          component={LoginContainer}
+        />
+        <RootStack.Screen
+          name={RootScreens.SIGNUP}
+          component={SignupContainer}
+        />
       </RootStack.Navigator>
     </NavigationContainer>
   );

src/Screens/Login/LoginContainer.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const LoginContainer = () => {
+    return (
+        <>
+        </>
+    )
+}

src/Screens/Login/index.ts

@@ -0,0 +1 @@
+export * from "./LoginContainer";

src/Screens/PasswordChange/PasswordChangeContainer.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const PasswordChangeContainer = () => {
+    return (
+        <>
+        </>
+    )
+}

src/Screens/PasswordChange/index.ts

@@ -0,0 +1 @@
+export * from "./PasswordChangeContainer";

src/Screens/Signup/SignupContainer.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const SignupContainer = () => {
+    return (
+        <>
+        </>
+    )
+}

src/Screens/Signup/index.ts

@@ -0,0 +1 @@
+export * from "./SignupContainer";

src/Screens/index.ts

@@ -1,5 +1,7 @@
 export enum RootScreens {
   MAIN = "Main",
   WELCOME = "Welcome",
-  SETTINGS = "Settings"
+  SETTINGS = "Settings",
+  LOGIN = "Login",
+  SIGNUP = "Signup",
 }

src/Theme/Variables.ts

@@ -48,6 +48,8 @@ export enum Icons{
 	ARROW_RIGHT = "arrow-right",
 	HOME = "home-outline",
 	HISTORY = "calendar-month",
+	WALLET = "wallet-outline",
+	BUDGET = "briefcase-outline",
 	ACCOUNT = "account-circle-outline",
 	PLUS = "plus-circle",
 	LOCATION = "map-marker",

src/Theme/index.ts

@@ -0,0 +1 @@
+export * from "./Variables";