From 724465bf67790f1a924f0809c8faa374f6e31503 Mon Sep 17 00:00:00 2001
From: oliviaseds <osedarski@gmail.com>
Date: Tue, 12 Mar 2024 09:46:53 -0400
Subject: [PATCH] refactor: remove ScrollView and non-Tailwind styling

---
 client/assets/close/close1.svg             |  3 ++
 client/assets/close/close2.svg             |  3 ++
 client/components/TaskType/CloseButton.tsx | 26 ++++++++++++
 client/package.json                        |  2 +-
 client/screens/TaskType.tsx                | 47 ++++++++++++++--------
 5 files changed, 64 insertions(+), 17 deletions(-)
 create mode 100644 client/assets/close/close1.svg
 create mode 100644 client/assets/close/close2.svg
 create mode 100644 client/components/TaskType/CloseButton.tsx

diff --git a/client/assets/close/close1.svg b/client/assets/close/close1.svg
new file mode 100644
index 0000000..6528766
--- /dev/null
+++ b/client/assets/close/close1.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="1.43599" y1="1.54321" x2="13.5192" y2="13.5013" stroke="black" stroke-width="3"/>
+</svg>
\ No newline at end of file
diff --git a/client/assets/close/close2.svg b/client/assets/close/close2.svg
new file mode 100644
index 0000000..3492923
--- /dev/null
+++ b/client/assets/close/close2.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="1.52173" y1="13.5415" x2="13.4799" y2="1.45838" stroke="black" stroke-width="3"/>
+</svg>
diff --git a/client/components/TaskType/CloseButton.tsx b/client/components/TaskType/CloseButton.tsx
new file mode 100644
index 0000000..dc5f5d5
--- /dev/null
+++ b/client/components/TaskType/CloseButton.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { useNavigation } from '@react-navigation/native';
+import { IconButton } from 'react-native-paper';
+
+import Close1 from '../../assets/close/close1.svg';
+import Close2 from '../../assets/close/close2.svg';
+import { AppStackNavigation } from '../../navigation/AppNavigation';
+
+export function CloseButton({onPress}: {onPress: () => void}) {
+const navigation = useNavigation<AppStackNavigation>();
+
+return (
+    <IconButton
+        className="align-center m-2 flex h-[50px] w-[52px] justify-center rounded-xl bg-carewallet-gray"
+        mode="contained"
+        icon={() => (
+            <>
+                <Close1 style={{ position: 'absolute', top: 20, left: 20 }} />
+                <Close2 style={{ position: 'absolute', top: 20, left: 20 }} />
+            </>
+        )}
+        onPress={onPress}
+    />
+);
+}
diff --git a/client/package.json b/client/package.json
index eda66a1..0bbbc7a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -24,7 +24,7 @@
     "@types/react": "^18.2.55",
     "axios": "^1.6.4",
     "clsx": "^2.1.0",
-    "expo": "^50.0.7",
+    "expo": "^50.0.11",
     "expo-document-picker": "~11.10.1",
     "expo-file-system": "~16.0.6",
     "expo-status-bar": "~1.11.1",
diff --git a/client/screens/TaskType.tsx b/client/screens/TaskType.tsx
index fafdffc..41993ee 100644
--- a/client/screens/TaskType.tsx
+++ b/client/screens/TaskType.tsx
@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState
 } from 'react';
-import { ScrollView, View } from 'react-native';
+import { FlatList, View } from 'react-native';
 
 import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
@@ -18,6 +18,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { BackButton } from '../components/TaskType/BackButton';
 import { AppStackNavigation } from '../navigation/AppNavigation';
 import { Category, categoryToTypeMap, TypeOfTask } from '../types/type';
+import { CloseButton } from '../components/TaskType/CloseButton';
 
 export function TaskType() {
   const navigation = useNavigation<AppStackNavigation>();
@@ -43,10 +44,16 @@ export function TaskType() {
     value: filter
   }));
 
-  const snapPoints = useMemo(() => ['50%'], []);
+  const snapPoints = useMemo(() => ['60%'], []);
 
   const bottomSheetRef = useRef<BottomSheet>(null);
 
+  const closeBottomSheet = () => {
+      if (bottomSheetRef.current) {
+          bottomSheetRef.current.close(); // Close the BottomSheet
+      }
+  };
+
   const snapToIndex = (index: number) =>
     bottomSheetRef.current?.snapToIndex(index);
   const renderBackdrop = useCallback(
@@ -84,19 +91,23 @@ export function TaskType() {
           </Button>
         </View>
 
-        <ScrollView style={{ height: 850 }}>
-          {selectedTypes.map((type) => (
-            <Button
-              className="m-2 h-[50px] items-center justify-center rounded-xl"
-              textColor="black"
-              key={type}
-              mode="outlined"
-              onPress={() => navigation.navigate('New ' + type)} // TODO other screens should have this name
-            >
-              {type}
-            </Button>
-          ))}
-        </ScrollView>
+          <FlatList
+            className="h-full"
+            data={selectedTypes}
+            renderItem={
+              ({ item }) => (
+                <Button
+                  className="m-2 h-[50px] items-center justify-center rounded-xl"
+                  textColor="black"
+                  mode="outlined"
+                  onPress={() => navigation.navigate('New ' + item + "Task")}
+                >
+                  {item}
+                </Button>
+              )
+            }
+          />
+        
         <BottomSheet
           ref={bottomSheetRef}
           index={0}
@@ -105,7 +116,11 @@ export function TaskType() {
           backdropComponent={renderBackdrop}
         >
           <View>
-            <Text className="m-5 text-2xl font-bold">Filter</Text>
+            <View className="flex flex-row justify-between">
+              <Text className="m-5 text-2xl font-bold">Filter</Text>
+              <CloseButton onPress={closeBottomSheet}/>
+            </View>
+            
             <DropDownPicker
               open={open}
               value={selectedCategory}