Add "Project Page" section to Account Page

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<{

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 {FolderCodeIcon, InfoIcon, LogOutIcon, ShieldIcon } from "lucide-react-native"
 
 import { closeBottomSheet, openBottomSheet } from "app/utils"
 import { RouteName } from "app/constants"
@@ -18,6 +18,10 @@ export const useAccountScreenItem = () => {
     [navigation],
   )
 
+  const handleProjectsPress = useCallback(() => {
+    navigation.navigate(RouteName.ProjectsScreen)
+  }, [])
+
   const handleLogoutConfirm = useCallback(() => {
     closeBottomSheet()
     logout()
@@ -35,6 +39,11 @@ export const useAccountScreenItem = () => {
 
   const accountItems = useMemo(
     () => [
+      {
+        icon: FolderCodeIcon,
+        title: "Projects",
+        onPress: handleProjectsPress,
+      },
       {
         icon: InfoIcon,
         title: "Terms & Conditions",

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>
   )
 })

app/navigators/TabNavigator.tsx

@@ -16,6 +16,7 @@ export type TabParamList = {
   History: undefined
   MyCourses: undefined
   Storybook: undefined
+  ProjectsScreen: undefined
 }
 
 /**
@@ -92,9 +93,10 @@ const $tabBar: ViewStyle = {
   backgroundColor: colors.background.secondary,
   borderTopColor: colors.border.default,
   borderTopWidth: 1,
+
   // TODO: Can make an issue for this [#issue]
-  // borderTopRightRadius: spacing.md,
-  // borderTopLeftRadius: spacing.md,
+  //borderTopRightRadius: spacing.md,
+  //borderTopLeftRadius: spacing.md,
 }
 
 const $tabBarItem: ViewStyle = {

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
+}
+

app/screens/index.ts

@@ -10,3 +10,4 @@ export * from "./Storybook/StorybookScreen"
 export * from "./VideoPlayerScreen"
 export * from "./WebviewScreen"
 export * from "./WelcomeScreen"
+export * from "./ProjectsScreen"