chore: added project name to drawer

digidem · May 5, 2024 · e52aee0 · e52aee0
1 parent 9b1a998
commit e52aee0
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 17 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -79,6 +79,12 @@
   "Navigation.Drawer.createOrJoinDesc": {
     "message": "Create a new project or join existing one"
   },
+  "Navigation.Drawer.createOrJoinToSync": {
+    "message": "Create or Join a Project to sync with other devices"
+  },
+  "Navigation.Drawer.projName": {
+    "message": "Project {projectName}"
+  },
   "Navigation.Drawer.projectSettings": {
     "message": "Project Settings"
   },

diff --git a/src/frontend/AppNavigator.tsx b/src/frontend/AppNavigator.tsx
@@ -5,7 +5,6 @@ import {useDeviceInfo} from './hooks/server/deviceInfo';
 import {Loading} from './sharedComponents/Loading';
 import {usePrefetchLastKnownLocation} from './hooks/useLastSavedLocation';
 import {initializeInviteListener} from './initializeInviteListener';
-import {ProjectInviteBottomSheet} from './sharedComponents/ProjectInviteBottomSheet';
 import {DrawerNavigator} from './Navigation/Drawer';
 
 // Note that this does the same things as the strange syntax found in
@@ -23,9 +22,5 @@ export const AppNavigator = ({permissionAsked}: {permissionAsked: boolean}) => {
     return <Loading />;
   }
 
-  return (
-    <React.Fragment>
-      <DrawerNavigator permissionAsked={permissionAsked} />
-    </React.Fragment>
-  );
+  return <DrawerNavigator permissionAsked={permissionAsked} />;
 };
diff --git a/src/frontend/Navigation/Drawer.tsx b/src/frontend/Navigation/Drawer.tsx
@@ -5,7 +5,7 @@ import {
   DrawerContentScrollView,
 } from '@react-navigation/drawer';
 import {AppStackList, RootStackNavigator} from './Stack';
-import {FormattedMessage, defineMessages} from 'react-intl';
+import {FormattedMessage, defineMessages, useIntl} from 'react-intl';
 import {
   List,
   ListItem,
@@ -18,6 +18,10 @@ import {NavigatorScreenParams} from '@react-navigation/native';
 import {IconButton} from '../sharedComponents/IconButton';
 import {useDeviceInfo} from '../hooks/server/deviceInfo';
 import BootSplash from 'react-native-bootsplash';
+import {View} from 'react-native';
+import {Text} from '../sharedComponents/Text';
+import {LIGHT_GREY} from '../lib/styles';
+import {useProjectSettings} from '../hooks/server/projects';
 
 const m = defineMessages({
   settingsTitle: {
@@ -61,6 +65,14 @@ const m = defineMessages({
     defaultMessage: 'Language, Security, Coordinates',
     description: 'list of avaialable app settings',
   },
+  projName: {
+    id: 'Navigation.Drawer.projName',
+    defaultMessage: 'Project {projectName}',
+  },
+  createOrJoinToSync: {
+    id: 'Navigation.Drawer.createOrJoinToSync',
+    defaultMessage: 'Create or Join a Project to sync with other devices',
+  },
 });
 
 export type DrawerScreens = {
@@ -75,13 +87,17 @@ export const DrawerNavigator = ({
   permissionAsked: boolean;
 }) => {
   const deviceInfo = useDeviceInfo();
-
   if (permissionAsked && !deviceInfo.isPending) {
     BootSplash.hide();
   }
+
   return (
     <Drawer.Navigator
-      screenOptions={{drawerPosition: 'right', headerShown: false}}
+      screenOptions={{
+        drawerPosition: 'right',
+        headerShown: false,
+        swipeEnabled: false,
+      }}
       drawerContent={DrawerContent}
       initialRouteName="DrawerHome">
       <Drawer.Screen name="DrawerHome" component={RootStackNavigator} />
@@ -91,11 +107,37 @@ export const DrawerNavigator = ({
 
 const DrawerContent = ({navigation}: DrawerContentComponentProps) => {
   const {navigate} = navigation;
+  const {formatMessage} = useIntl();
+  const {data} = useProjectSettings();
   return (
-    <DrawerContentScrollView>
-      <IconButton onPress={navigation.closeDrawer}>
-        <MaterialIcon style={{alignSelf: 'flex-end'}} name="menu" size={32} />
-      </IconButton>
+    <DrawerContentScrollView style={{}}>
+      {/* There is a gap at the top which is not accounted for by padding or margin . This was the most elegant way to cover it up */}
+      <View
+        style={{
+          backgroundColor: LIGHT_GREY,
+          top: 0,
+          right: 0,
+          width: '100%',
+          position: 'absolute',
+          height: 5,
+        }}
+      />
+      <View
+        style={{
+          backgroundColor: LIGHT_GREY,
+          paddingBottom: 40,
+        }}>
+        <IconButton
+          style={{alignSelf: 'flex-end'}}
+          onPress={navigation.closeDrawer}>
+          <MaterialIcon name="menu" size={32} />
+        </IconButton>
+        <Text style={{alignSelf: 'center', textAlign: 'center'}}>
+          {data?.name
+            ? formatMessage(m.projName, {projectName: data.name})
+            : formatMessage(m.createOrJoinToSync)}
+        </Text>
+      </View>
       <List>
         <ListItem
           onPress={() => {

diff --git a/src/frontend/hooks/server/projects.ts b/src/frontend/hooks/server/projects.ts
@@ -27,15 +27,16 @@ export function useCreateProject() {
   const api = useApi();
   const queryClient = useQueryClient();
   const updateProject = useUpdateActiveProjectId();
-
   return useMutation({
     mutationKey: ['createProject'],
     mutationFn: async (name: string) => {
       return await api.createProject({name});
     },
     onSuccess: async data => {
       updateProject(data);
-      return await queryClient.invalidateQueries({queryKey: ['projects']});
+      queryClient.invalidateQueries({
+        queryKey: ['projectSettings'],
+      });
     },
   });
 }
@@ -55,8 +56,8 @@ export function useProjectSettings() {
 
   return useQuery({
     queryKey: ['projectSettings'],
-    queryFn: () => {
-      return project.$getProjectSettings();
+    queryFn: async () => {
+      return await project.$getProjectSettings();
     },
   });
 }