From 4959e86beeb71e735a4ce9f2590f5bf0ce37f78e Mon Sep 17 00:00:00 2001
From: Bibek <deybibek58@gmail.com>
Date: Tue, 22 Oct 2024 01:12:23 +0530
Subject: [PATCH 1/3] Add Project Page section to Account Page

---
 app/constants/routes.constants.ts |  1 +
 app/hooks/useAccountScreenItem.ts | 15 ++++++++-
 app/navigators/AppNavigator.tsx   |  1 +
 app/navigators/TabNavigator.tsx   |  8 +++--
 app/screens/ProjectsScreen.tsx    | 53 +++++++++++++++++++++++++++++++
 app/screens/index.ts              |  1 +
 6 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 app/screens/ProjectsScreen.tsx

diff --git a/app/constants/routes.constants.ts b/app/constants/routes.constants.ts
index d0fa8f7..daee1d1 100644
--- a/app/constants/routes.constants.ts
+++ b/app/constants/routes.constants.ts
@@ -24,6 +24,7 @@ export enum RouteName {
   VideoPlayer = "VideoPlayer",
   Webview = "Webview",
   Welcome = "Welcome",
+  ProjectsScreen = "Projects "
 }
 
 export const TAB_ROUTES: Array<{
diff --git a/app/hooks/useAccountScreenItem.ts b/app/hooks/useAccountScreenItem.ts
index d0059b2..4182c47 100644
--- a/app/hooks/useAccountScreenItem.ts
+++ b/app/hooks/useAccountScreenItem.ts
@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react"
 import { useNavigation } from "@react-navigation/core"
-import { InfoIcon, LogOutIcon, ShieldIcon } from "lucide-react-native"
+import { SettingsIcon, FolderCodeIcon, CircleUserIcon, InfoIcon, LogOutIcon, ShieldIcon } from "lucide-react-native"
 
 import { closeBottomSheet, openBottomSheet } from "app/utils"
 import { RouteName } from "app/constants"
@@ -18,6 +18,14 @@ export const useAccountScreenItem = () => {
     [navigation],
   )
 
+  const handleAccountDetailsPress = useCallback(() => {
+    navigation.navigate(RouteName.AccountDetails)
+  }, [])
+
+  const handleProjectsPress = useCallback(() => {
+    navigation.navigate(RouteName.ProjectsScreen)
+  }, [])
+
   const handleLogoutConfirm = useCallback(() => {
     closeBottomSheet()
     logout()
@@ -35,6 +43,11 @@ export const useAccountScreenItem = () => {
 
   const accountItems = useMemo(
     () => [
+      {
+        icon: FolderCodeIcon,
+        title: "Projects",
+        onPress: handleProjectsPress,
+      },
       {
         icon: InfoIcon,
         title: "Terms & Conditions",
diff --git a/app/navigators/AppNavigator.tsx b/app/navigators/AppNavigator.tsx
index 0bb5ac9..590f41c 100644
--- a/app/navigators/AppNavigator.tsx
+++ b/app/navigators/AppNavigator.tsx
@@ -69,6 +69,7 @@ const AppStack = observer(function AppStack() {
       <Stack.Screen name={RouteName.Storybook} component={Screens.StorybookScreen} />
       <Stack.Screen name={RouteName.VideoPlayer} component={Screens.VideoPlayerScreen} />
       <Stack.Screen name={RouteName.Webview} component={Screens.WebviewScreen} />
+      <Stack.Screen name={RouteName.ProjectsScreen} component={Screens.ProjectsScreen} />
     </Stack.Navigator>
   )
 })
diff --git a/app/navigators/TabNavigator.tsx b/app/navigators/TabNavigator.tsx
index 7802513..d59b7d7 100644
--- a/app/navigators/TabNavigator.tsx
+++ b/app/navigators/TabNavigator.tsx
@@ -16,6 +16,7 @@ export type TabParamList = {
   History: undefined
   MyCourses: undefined
   Storybook: undefined
+  ProjectsScreen: undefined
 }
 
 /**
@@ -76,7 +77,7 @@ export function TabNavigator() {
       screenOptions={{
         headerShown: false,
         tabBarHideOnKeyboard: true,
-        tabBarStyle: [$tabBar, { height: bottom + 50 }],
+        tabBarStyle: [$tabBar, { height: bottom + 65 }],
         tabBarActiveTintColor: colors.content.brand,
         tabBarInactiveTintColor: colors.content.secondary,
         tabBarLabelStyle: $tabBarLabel,
@@ -92,9 +93,10 @@ const $tabBar: ViewStyle = {
   backgroundColor: colors.background.secondary,
   borderTopColor: colors.border.default,
   borderTopWidth: 1,
+  paddingBottom: 10,
   // TODO: Can make an issue for this [#issue]
-  // borderTopRightRadius: spacing.md,
-  // borderTopLeftRadius: spacing.md,
+  //borderTopRightRadius: spacing.md,
+  //borderTopLeftRadius: spacing.md,
 }
 
 const $tabBarItem: ViewStyle = {
diff --git a/app/screens/ProjectsScreen.tsx b/app/screens/ProjectsScreen.tsx
new file mode 100644
index 0000000..36797a2
--- /dev/null
+++ b/app/screens/ProjectsScreen.tsx
@@ -0,0 +1,53 @@
+import React, { FC } from "react"
+import { observer } from "mobx-react-lite"
+import { TextStyle, ViewStyle } from "react-native"
+import { FileCodeIcon } from "lucide-react-native"
+
+import { $styles, spacing } from "app/theme"
+import { Button, EmptyPlaceholder, ListView, Screen, Text } from "app/components"
+import { TabScreenProps } from "app/navigators"
+import { ProjectCard } from "app/components/ProjectCard"
+
+interface ProjectsScreenProps extends TabScreenProps<"ProjectsScreen"> {}
+
+
+const handleAddProject = () => {
+}
+
+const renderEmptyPlaceholder = (
+  <EmptyPlaceholder
+    icon={FileCodeIcon}
+    subtext="You haven’t submitted any projects yet. Submit now to see your recent projects here."
+    text="No Projects Submitted"
+  />
+)
+
+export const ProjectsScreen: FC<ProjectsScreenProps> = observer(function ProjectsScreen() {
+  return (
+    <Screen style={$root} contentContainerStyle={$styles.flex1} safeAreaEdges={["top"]}>
+      <Text preset="heading" text="Projects" style={$heading} />
+      <Button onPress={handleAddProject} text="Add Project" style={$buttonStyle}/>
+      <ListView
+        data={[]}
+        estimatedItemSize={50}
+        ListEmptyComponent={renderEmptyPlaceholder}
+        renderItem={() => <></>}
+        showsVerticalScrollIndicator={false}
+      />
+    </Screen>
+  )
+})
+
+const $root: ViewStyle = {
+  flex: 1,
+  paddingHorizontal: spacing.md,
+}
+
+const $heading: TextStyle = {
+  marginBottom: spacing.md,
+}
+
+const $buttonStyle: TextStyle = {
+  marginBottom: spacing.md
+}
+
diff --git a/app/screens/index.ts b/app/screens/index.ts
index 6d2126d..a42037b 100644
--- a/app/screens/index.ts
+++ b/app/screens/index.ts
@@ -10,3 +10,4 @@ export * from "./Storybook/StorybookScreen"
 export * from "./VideoPlayerScreen"
 export * from "./WebviewScreen"
 export * from "./WelcomeScreen"
+export * from "./ProjectsScreen"
\ No newline at end of file

From fe7bff9c36c7e5fe85feb3fa053cc1cb7ec0ca58 Mon Sep 17 00:00:00 2001
From: Bibek Kumar Dey <135459655+bibekkd@users.noreply.github.com>
Date: Tue, 22 Oct 2024 01:33:38 +0530
Subject: [PATCH 2/3] Update TabNavigator.tsx

---
 app/navigators/TabNavigator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/navigators/TabNavigator.tsx b/app/navigators/TabNavigator.tsx
index d59b7d7..5f37b35 100644
--- a/app/navigators/TabNavigator.tsx
+++ b/app/navigators/TabNavigator.tsx
@@ -77,7 +77,7 @@ export function TabNavigator() {
       screenOptions={{
         headerShown: false,
         tabBarHideOnKeyboard: true,
-        tabBarStyle: [$tabBar, { height: bottom + 65 }],
+        tabBarStyle: [$tabBar, { height: bottom + 50 }],
         tabBarActiveTintColor: colors.content.brand,
         tabBarInactiveTintColor: colors.content.secondary,
         tabBarLabelStyle: $tabBarLabel,
@@ -93,7 +93,7 @@ const $tabBar: ViewStyle = {
   backgroundColor: colors.background.secondary,
   borderTopColor: colors.border.default,
   borderTopWidth: 1,
-  paddingBottom: 10,
+  
   // TODO: Can make an issue for this [#issue]
   //borderTopRightRadius: spacing.md,
   //borderTopLeftRadius: spacing.md,

From 462110b7edcc6b6f3d072a14fd155492510164d6 Mon Sep 17 00:00:00 2001
From: Bibek Kumar Dey <135459655+bibekkd@users.noreply.github.com>
Date: Tue, 22 Oct 2024 01:36:56 +0530
Subject: [PATCH 3/3] Update useAccountScreenItem.ts

---
 app/hooks/useAccountScreenItem.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/hooks/useAccountScreenItem.ts b/app/hooks/useAccountScreenItem.ts
index 4182c47..cdcf922 100644
--- a/app/hooks/useAccountScreenItem.ts
+++ b/app/hooks/useAccountScreenItem.ts
@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react"
 import { useNavigation } from "@react-navigation/core"
-import { SettingsIcon, FolderCodeIcon, CircleUserIcon, InfoIcon, LogOutIcon, ShieldIcon } from "lucide-react-native"
+import {FolderCodeIcon, InfoIcon, LogOutIcon, ShieldIcon } from "lucide-react-native"
 
 import { closeBottomSheet, openBottomSheet } from "app/utils"
 import { RouteName } from "app/constants"
@@ -18,10 +18,6 @@ export const useAccountScreenItem = () => {
     [navigation],
   )
 
-  const handleAccountDetailsPress = useCallback(() => {
-    navigation.navigate(RouteName.AccountDetails)
-  }, [])
-
   const handleProjectsPress = useCallback(() => {
     navigation.navigate(RouteName.ProjectsScreen)
   }, [])