From c9a28bf4da9fe7eec9676e9fdb6074e4d76ff95e Mon Sep 17 00:00:00 2001
From: Alexander Capehart <alex@oxycblt.org>
Date: Wed, 18 Oct 2023 15:38:32 -0600
Subject: [PATCH] frontend: cleanup

---
 frontend/App.tsx                  |  5 +----
 frontend/src/Main.tsx             | 31 +++++++++++++++++++++----------
 frontend/src/components/Map.tsx   |  5 +++--
 frontend/src/components/Sheet.tsx | 28 ++++++++++++++++------------
 4 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/frontend/App.tsx b/frontend/App.tsx
index ce1dbe52..656846c6 100644
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -1,4 +1,3 @@
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { StyleSheet, SafeAreaView } from 'react-native'
 import * as NavigationBar from 'expo-navigation-bar'
 import { Main } from './src/Main'
@@ -12,9 +11,7 @@ NavigationBar.setBackgroundColorAsync('white').catch(console.error)
 export default function App(): React.ReactElement<void> {
   return (
     <SafeAreaView style={StyleSheet.absoluteFillObject}>
-      <GestureHandlerRootView style={StyleSheet.absoluteFillObject}>
-        <Main />
-      </GestureHandlerRootView>
+      <Main style={StyleSheet.absoluteFillObject} />
     </SafeAreaView>
   )
 }
diff --git a/frontend/src/Main.tsx b/frontend/src/Main.tsx
index 06f301d9..fd0eb82b 100644
--- a/frontend/src/Main.tsx
+++ b/frontend/src/Main.tsx
@@ -1,28 +1,39 @@
 import React from 'react'
-import { StyleSheet, View, Text, Dimensions } from 'react-native'
+import { StyleSheet, View, Text, Dimensions, type ViewProps } from 'react-native'
 import { Map } from './components/Map'
 import { Sheet } from './components/Sheet'
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+/**
+ * Controls the percentage of the screen taken up by the bottom sheet in
+ * it's collapsed state.
+ */
+const SHEET_EXTENT = 0.5
 
 /**
  * The main screen containing the map and sheet components.
  */
-export function Main(): React.ReactElement<void> {
+export function Main(_: ViewProps): React.ReactElement<void> {
   // The bottom sheet extends halfway across the screen, with the map
   // being inset accordingly.
-  const halfwayExtent = 0.5
-  const halfwayInset = Dimensions.get('window').height * halfwayExtent
-  const mapInsets = { top: 0, left: 0, bottom: halfwayInset, right: 0 }
+  const screenHeight = Dimensions.get('window').height
+  const mapInsets = { 
+    top: 0, 
+    left: 0, 
+    // Inset the map so that elements are not obscured by the bottom sheet
+    bottom: screenHeight * SHEET_EXTENT, 
+    right: 0
+  }
 
   return (
-    <View>
+    <GestureHandlerRootView>
       <Map style={StyleSheet.absoluteFillObject} 
         insets={mapInsets} />
-      <Sheet collapsedExtent={halfwayExtent}>
+      <Sheet collapsedExtent={SHEET_EXTENT}>
         <View>
-          <Text>Paula</Text>
-          <Text>Brilliant</Text>
+          <Text>Hello World</Text>
         </View>
       </Sheet>
-    </View>
+    </GestureHandlerRootView>
   )
 }
diff --git a/frontend/src/components/Map.tsx b/frontend/src/components/Map.tsx
index 32ae8065..ba737cff 100644
--- a/frontend/src/components/Map.tsx
+++ b/frontend/src/components/Map.tsx
@@ -72,8 +72,9 @@ export interface MapProps {
 
 /**
  * The insets to apply to the {@interface Map} component when it will be obscured by
- * other components. Note that the component will already be insetting by the status
- * bar, so you don't need to include that in your insets.
+ * other components. This will shift map components like the google logo, and the way
+ * that the map camera will pan around. Note that the component will already be insetting
+ * by the status bar, so you don't need to include that in your insets.
  */
 export interface Insets {
   /** The amount of space to inset from the top of the map. */
diff --git a/frontend/src/components/Sheet.tsx b/frontend/src/components/Sheet.tsx
index c97fd983..3ea139da 100644
--- a/frontend/src/components/Sheet.tsx
+++ b/frontend/src/components/Sheet.tsx
@@ -2,20 +2,10 @@ import React, { useMemo } from 'react'
 import { StatusBar, type ViewProps, StyleSheet, Dimensions } from 'react-native'
 import BottomSheet from '@gorhom/bottom-sheet'
 
-/**
- * The props for the {@interface Sheet} component.
- */
-interface SheetProps {
-  /** How much of the bottom sheet to show initially as a fraction of the screen, such as '0.5' for half of the screen */
-  collapsedExtent: number,
-  /** The child view of the bottom sheet */
-  children: React.ReactNode;
-}
-
 /**
  * Wraps the bottom sheet component with a simplified interface.
  */
-export function Sheet(props: SheetProps & ViewProps): React.ReactElement<void> {
+export function Sheet(props: SheetProps & ViewProps): React.ReactElement<SheetProps & ViewProps> {
   // BottomSheet does have a topInset property, but that causes the shadow of the bottom
   // sheet to become clipped at the top for some reason. Instead, we manually recreate it
   // by adjusting our snap points such that they will cause the sheet to never overlap the
@@ -28,20 +18,34 @@ export function Sheet(props: SheetProps & ViewProps): React.ReactElement<void> {
   // Then we can adjust that calculated value by the specified extent of the collapsed
   // bottom sheet.
   const collapsedPercent = props.collapsedExtent * expandedPercent
-  const snapPoints = [collapsedPercent + '%', expandedPercent + '%'];
+  const snapPoints = [collapsedPercent + '%', expandedPercent + '%']
 
   return (
     <BottomSheet
       style={styles.innerBottomSheetStyle}
       index={0}
+      enableOverDrag={false}
       snapPoints={snapPoints}>
       {props.children}
     </BottomSheet>
   )
 }
 
+/**
+ * The props for the {@interface Sheet} component.
+ */
+export interface SheetProps {
+  /** How much of the bottom sheet to show initially as a fraction of the screen, such as '0.5' for half of the screen */
+  collapsedExtent: number,
+  /** The child view of the bottom sheet */
+  children: React.ReactNode;
+}
+
 const styles = StyleSheet.create({
   innerBottomSheetStyle: {
+    // Required to get the shadow to render
+    backgroundColor: 'white',
+    borderRadius: 24,
     shadowColor: "#000",
     shadowOffset: {
       width: 0,