Feature/single file screen

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

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>

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

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;

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