Feature/single file screen (#83)

* feat(view-files-complete): view files compelte * feat(files): updating files * fix(files): files overlapping * fix(files): routes updated * feat(view-files): view files in a bigger screen Co-authored-by: Matt McCoy <[email protected]> Co-authored-by: Matt McCoy <[email protected]>
GenerateNU · Apr 19, 2024 · 1dcca45 · 1dcca45
1 parent fdb697a
commit 1dcca45
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 9 deletions.
diff --git a/client/components/file_management/FileTile.tsx b/client/components/file_management/FileTile.tsx
@@ -1,17 +1,24 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
+import { useNavigation } from '@react-navigation/native';
 import { WebView } from 'react-native-webview';
 
+import { AppStackNavigation } from '../../navigation/types';
+
 interface FileTileProps {
   name: string;
   label: string;
   url: string;
 }
 
 export function FileTile({ name, label, url }: FileTileProps): JSX.Element {
+  const navigation = useNavigation<AppStackNavigation>();
   return (
-    <View className="mx-5 my-3 bg-carewallet-white">
+    <View
+      className="mx-5 my-3 bg-carewallet-white"
+      onTouchEnd={() => navigation.navigate('SingleFile', { url, name, label })}
+    >
       <View className="flex-1 flex-row rounded-md border border-carewallet-gray p-4">
         <View className="mr-4 h-[7vh] w-[7vh]">
           <WebView

diff --git a/client/components/file_management/Header.tsx b/client/components/file_management/Header.tsx
@@ -11,19 +11,17 @@ export function Header() {
   return (
     <SafeAreaView className="bg-carewallet-white/80">
       <View className="carewallet-manrope-bold flex flex-row items-center justify-between border-b border-carewallet-lightgray bg-carewallet-white pb-4">
-        <View className="pl-1">
+        <View className="pl-3">
           <BackButton />
         </View>
         <Text className="mx-auto font-carewallet-manrope-bold text-xl text-carewallet-blue">
           View Files
         </Text>
-        <View className="">
-          <View
-            className="right-3 h-12 w-12 items-center justify-center rounded-xl bg-carewallet-blue font-carewallet-manrope"
-            onTouchEnd={() => navigation.navigate('FileUploadScreen')}
-          >
-            <Text className="text-4xl text-carewallet-white">+</Text>
-          </View>
+        <View
+          className="right-3 mr-3 h-12 w-12 items-center justify-center rounded-xl bg-carewallet-blue font-carewallet-manrope"
+          onTouchEnd={() => navigation.navigate('FileUploadScreen')}
+        >
+          <Text className="text-4xl text-carewallet-white">+</Text>
         </View>
       </View>
     </SafeAreaView>

diff --git a/client/navigation/containers/ProfileNavigationContainer.tsx b/client/navigation/containers/ProfileNavigationContainer.tsx
@@ -6,6 +6,7 @@ import FileViewScreen from '../../screens/FileViewScreen';
 import PatientView from '../../screens/Profile/PatientView';
 import Profile from '../../screens/Profile/Profile';
 import Settings from '../../screens/Profile/Settings';
+import SingleFile from '../../screens/SingleFile';
 import SingleTaskScreen from '../../screens/SingleTask';
 import TaskList from '../../screens/TaskList';
 import { AppStack } from '../types';
@@ -26,6 +27,7 @@ export function ProfileNavigationContainer() {
       <AppStack.Screen name="TaskList" component={TaskList} />
       <AppStack.Screen name="TaskDisplay" component={SingleTaskScreen} />
       <AppStack.Screen name="FileViewScreen" component={FileViewScreen} />
+      <AppStack.Screen name="SingleFile" component={SingleFile} />
     </AppStack.Navigator>
   );
 }
diff --git a/client/navigation/types.ts b/client/navigation/types.ts
@@ -13,6 +13,7 @@ export type AppStackParamList = {
   FileUploadScreen: undefined;
   FileViewScreen: undefined;
   Landing: undefined;
+  SingleFile: { url: string; name: string; label: string };
   Calendar: undefined;
   Notifications: undefined;
   TaskType: undefined;

diff --git a/client/screens/SingleFile.tsx b/client/screens/SingleFile.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { SafeAreaView, Text, View } from 'react-native';
+
+import { RouteProp } from '@react-navigation/native';
+import WebView from 'react-native-webview';
+
+import { BackButton } from '../components/nav_buttons/BackButton';
+import { AppStackParamList } from '../navigation/types';
+
+type SingleFileProps = RouteProp<AppStackParamList, 'SingleFile'>;
+
+export default function SingleFile({ route }: { route: SingleFileProps }) {
+  const { url } = route.params;
+
+  return (
+    <SafeAreaView className="flex-1 bg-carewallet-white">
+      <View className="flex-row items-center justify-between border-b border-carewallet-lightgray bg-carewallet-white px-3 pb-4">
+        <BackButton />
+        <Text className="flex-1 pr-20 text-center text-xl font-bold text-carewallet-blue">
+          View Files
+        </Text>
+      </View>
+      <View className="flex-1">
+        <WebView
+          source={{ uri: url }}
+          className="flex-1 rounded-md border border-carewallet-gray"
+        />
+      </View>
+    </SafeAreaView>
+  );
+}