Merge pull request #18 from PCS-Poli-USP/add/added-new-general-fixes

Add/added new general fixes
PCS-Poli-USP · Dec 10, 2023 · 7b7b365 · 7b7b365
2 parents 446a8be + 95e69bd
commit 7b7b365
Show file tree

Hide file tree

Showing 13 changed files with 393 additions and 228 deletions.
diff --git a/app.json b/app.json
@@ -29,7 +29,7 @@
         "backgroundColor": "#FFFFFF"
       },
       "package": "uspolis.lunadros",
-      "versionCode": 57
+      "versionCode": 60
     },
     "web": {
       "favicon": "./assets/favicon.png"

diff --git a/src/components/ClassModalDetails/index.tsx b/src/components/ClassModalDetails/index.tsx
@@ -9,9 +9,9 @@ import { sortEventsByScheduleTime } from './utils'
 import { Building, IClass } from '../../dtos/classes'
 import { Theme } from '@/theme/theme'
 import { useTheme } from '@shopify/restyle'
-import Modal from 'react-native-modal'
 import { Box, HStack, Typography, VStack } from '../ui'
 import { logger } from '@/services/logger'
+import { Modal } from '../Modal'
 
 interface ClassModalDetailsProps {
   sclass?: IClass | null
@@ -62,14 +62,16 @@ export const ClassModalDetails = ({
   return (
     <Box flex={1}>
       <Modal
-        isVisible={isOpen}
-        backdropColor={colors.grayOne}
-        backdropOpacity={0.2}
-        swipeDirection={'down'}
-        onBackdropPress={onClose}
-        onSwipeComplete={onClose}
-        coverScreen
-        style={{ margin: 0 }}
+        isOpen={isOpen}
+        onClose={onClose}
+        // isVisible={isOpen}
+        // backdropColor={colors.grayOne}
+        // backdropOpacity={0.2}
+        // swipeDirection={'down'}
+        // onBackdropPress={onClose}
+        // onSwipeComplete={onClose}
+        // coverScreen
+        // style={{ margin: 0 }}
       >
         <Box
           width={'100%'}

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -1,35 +1,41 @@
-import { Picker } from '@react-native-picker/picker';
-import React from 'react';
-import { Box } from '../ui';
-import { Platform } from 'react-native';
-import { useTheme } from '@shopify/restyle';
-import { Theme } from '@/theme/theme';
+import { Picker } from '@react-native-picker/picker'
+import React from 'react'
+import { Box } from '../ui'
+import { Platform } from 'react-native'
+import { useTheme } from '@shopify/restyle'
+import { Theme } from '@/theme/theme'
 
-export interface IPickerOption { 
-  label: string; 
-  value: string;
+export interface IPickerOption {
+  label: string
+  value: string
 }
 
 interface DropdownProps {
-  label: string;
-  data: Array<IPickerOption>;
-  selected?: string;
-  onSelect: (item: string) => void;
+  label: string
+  data: Array<IPickerOption>
+  selected?: string
+  onSelect: (item: string) => void
   disabled?: boolean
 }
 
-export const Dropdown = ({ disabled, label, data, onSelect, selected }: DropdownProps) => {
-  const theme = useTheme<Theme>();
+export const Dropdown = ({
+  disabled,
+  label,
+  data,
+  onSelect,
+  selected,
+}: DropdownProps) => {
+  const theme = useTheme<Theme>()
 
   const onItemPress = (item: any): void => {
-    onSelect(item);
-  };
+    onSelect(item)
+  }
 
   if (Platform.OS === 'ios') {
     return (
       <Box bg="grayFive" width={'100%'} borderRadius={8}>
         <Picker
-          style={{ 
+          style={{
             backgroundColor: theme.colors.grayFive,
             borderRadius: 8,
             height: 100,
@@ -45,7 +51,12 @@ export const Dropdown = ({ disabled, label, data, onSelect, selected }: Dropdown
           }}
         >
           {data.map((item) => (
-            <Picker.Item key={item.value} label={item.label} value={item.value} color={theme.colors.white} />
+            <Picker.Item
+              key={item.value}
+              label={item.label}
+              value={item.value}
+              color={theme.colors.white}
+            />
           ))}
         </Picker>
       </Box>
@@ -55,9 +66,9 @@ export const Dropdown = ({ disabled, label, data, onSelect, selected }: Dropdown
   return (
     <Box bg="grayFive" width={'100%'} borderRadius={8}>
       <Picker
-        mode='dropdown'
+        mode="dropdown"
         dropdownIconColor={theme.colors.primary}
-        style={{ 
+        style={{
           borderRadius: 8,
           height: 70,
           color: theme.colors.grayTwo,
@@ -70,9 +81,14 @@ export const Dropdown = ({ disabled, label, data, onSelect, selected }: Dropdown
         }}
       >
         {data.map((item, index) => (
-          <Picker.Item key={item.value} label={item.label} value={item.value} color={theme.colors.grayFive} />
+          <Picker.Item
+            key={item.value}
+            label={item.label}
+            value={item.value}
+            color={theme.colors.grayFive}
+          />
         ))}
       </Picker>
     </Box>
-  );
-};
+  )
+}
diff --git a/src/components/MailComposer/index.tsx b/src/components/MailComposer/index.tsx
@@ -2,11 +2,11 @@ import { TouchableOpacity } from 'react-native'
 import { Box, Typography } from '../ui'
 import * as Mail from 'expo-mail-composer'
 import { useRef, useState } from 'react'
-import Modal from 'react-native-modal'
 import { Theme } from '@/theme/theme'
 import { useTheme } from '@shopify/restyle'
 import { Button } from '../Button'
 import * as Clipboard from 'expo-clipboard'
+import { Modal } from '../Modal'
 
 export const MailComposer = () => {
   const { colors } = useTheme<Theme>()
@@ -42,14 +42,16 @@ export const MailComposer = () => {
         </Typography>
       </TouchableOpacity>
       <Modal
-        isVisible={isDrawerOpen}
-        backdropColor={colors.grayOne}
-        backdropOpacity={0.2}
-        swipeDirection={'down'}
-        onBackdropPress={() => setIsDrawerOpen(false)}
-        onSwipeComplete={() => setIsDrawerOpen(false)}
-        coverScreen
-        style={{ margin: 0 }}
+        isOpen={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+        // isVisible={isDrawerOpen}
+        // backdropColor={colors.grayOne}
+        // backdropOpacity={0.2}
+        // swipeDirection={'down'}
+        // onBackdropPress={() => setIsDrawerOpen(false)}
+        // onSwipeComplete={() => setIsDrawerOpen(false)}
+        // coverScreen
+        // style={{ margin: 0 }}
       >
         <Box
           width={'100%'}

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -0,0 +1,47 @@
+import { Theme } from '@/theme/theme'
+import { useTheme } from '@shopify/restyle'
+import { useEffect } from 'react'
+import { BackHandler } from 'react-native'
+import ModalComponent from 'react-native-modal'
+
+export const Modal = ({
+  isOpen,
+  onClose,
+  children,
+}: {
+  isOpen: boolean
+  onClose: (isOpen: boolean) => void
+  children: React.ReactNode
+}) => {
+  const { colors } = useTheme<Theme>()
+
+  useEffect(() => {
+    const backAction = () => {
+      onClose(false)
+      return true
+    }
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
+    )
+
+    return () => backHandler.remove()
+  }, [])
+
+  return (
+    <ModalComponent
+      propagateSwipe
+      isVisible={isOpen}
+      backdropColor={colors.grayOne}
+      backdropOpacity={0.2}
+      swipeDirection={'down'}
+      onBackdropPress={() => onClose(false)}
+      onSwipeComplete={() => onClose(false)}
+      coverScreen
+      style={{ margin: 0 }}
+    >
+      {children}
+    </ModalComponent>
+  )
+}
diff --git a/src/routes/app.routes.tsx b/src/routes/app.routes.tsx
@@ -47,7 +47,7 @@ export const AppRoutes = () => {
           backgroundColor: colors.graySix,
           borderTopWidth: 0,
           height: Platform.OS === 'ios' ? 110 : 102,
-          paddingBottom: spacing.xl,
+          paddingBottom: Platform.OS === 'ios' ? spacing.xl : spacing.m,
           paddingTop: spacing.l,
           paddingHorizontal: spacing.l,
         },

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,10 +1,10 @@
-import { Loading } from "@/components"
-import { useAuth } from "@/hooks"
-import { Theme } from "@/theme/theme"
-import { DefaultTheme, NavigationContainer } from "@react-navigation/native"
-import { useTheme } from "@shopify/restyle"
+import { Loading } from '@/components'
+import { useAuth } from '@/hooks'
+import { Theme } from '@/theme/theme'
+import { DefaultTheme, NavigationContainer } from '@react-navigation/native'
+import { useTheme } from '@shopify/restyle'
 
-import { AppRoutes } from "./app.routes"
+import { AppRoutes } from './app.routes'
 // import { AuthRoutes } from "./auth.routes"
 
 export const Routes = () => {
@@ -31,4 +31,4 @@ export const Routes = () => {
   //     </NavigationContainer>
   //   </Box>
   // )
-}
+}
diff --git a/src/screens/Events/EventDrawer.tsx b/src/screens/Events/EventDrawer.tsx
@@ -1,12 +1,18 @@
 import FeatherIcons from '@expo/vector-icons/Feather'
-import { format, parseISO } from 'date-fns'
-import { Alert, Linking, Pressable } from 'react-native'
+import {
+  Alert,
+  Dimensions,
+  Linking,
+  Pressable,
+  ScrollView,
+  View,
+} from 'react-native'
 import { Theme } from '@/theme/theme'
 import { useTheme } from '@shopify/restyle'
-import Modal from 'react-native-modal'
 import { Box, HStack, Typography, VStack } from '@/components'
 import { IEvent } from '@/dtos/events'
 import dayjs from 'dayjs'
+import { Modal } from '@/components/Modal'
 
 interface EventModalProps {
   event?: IEvent | null
@@ -36,14 +42,16 @@ export const EventModal = ({ event, isOpen, onClose }: EventModalProps) => {
   return (
     <Box flex={1}>
       <Modal
-        isVisible={isOpen}
-        backdropColor={colors.grayOne}
-        backdropOpacity={0.2}
-        swipeDirection={'down'}
-        onBackdropPress={onClose}
-        onSwipeComplete={onClose}
-        coverScreen
-        style={{ margin: 0 }}
+        isOpen={isOpen}
+        onClose={onClose}
+        // isVisible={isOpen}
+        // backdropColor={colors.grayOne}
+        // backdropOpacity={0.2}
+        // swipeDirection={'down'}
+        // onBackdropPress={onClose}
+        // onSwipeComplete={onClose}
+        // coverScreen
+        // style={{ margin: 0 }}
       >
         <Box
           width={'100%'}
@@ -54,6 +62,7 @@ export const EventModal = ({ event, isOpen, onClose }: EventModalProps) => {
           bottom={0}
           paddingHorizontal={'s'}
           paddingVertical="l"
+          maxHeight={Dimensions.get('window').height * 0.9}
         >
           <Box backgroundColor="graySeven" borderBottomColor="transparent">
             <VStack alignItems="center" marginBottom={'m'}>
@@ -106,13 +115,18 @@ export const EventModal = ({ event, isOpen, onClose }: EventModalProps) => {
                   </Pressable>
                 </Box>
               )}
-              {!!event.description && (
-                <Box marginBottom="m" marginTop="m">
-                  <Typography color="white" fontSize={16}>
-                    {event.description}
-                  </Typography>
-                </Box>
-              )}
+              <Box maxHeight={(3 * Dimensions.get('window').height) / 7}>
+                <ScrollView>
+                  <View
+                    style={{ flex: 1 }}
+                    onStartShouldSetResponder={() => true}
+                  >
+                    <Typography color="white" fontSize={16}>
+                      {event.description}
+                    </Typography>
+                  </View>
+                </ScrollView>
+              </Box>
               {!!event.category && (
                 <Box marginBottom="m">
                   <Typography color="grayTwo">Categoria</Typography>

diff --git a/src/screens/Events/EventsList.tsx b/src/screens/Events/EventsList.tsx
@@ -142,16 +142,12 @@ export const EventCard = ({ event }: EventCardProps) => {
                 color="white"
                 variant={'heading'}
                 fontWeight="bold"
-                numberOfLines={1}
+                // numberOfLines={1}
               >
                 {event.title}
               </Typography>
 
-              <Typography
-                color="grayTwo"
-                marginBottom={'xxs'}
-                numberOfLines={2}
-              >
+              <Typography color="grayTwo" marginBottom={'xs'} numberOfLines={2}>
                 {event.description}
               </Typography>
               <Typography color="grayOne" numberOfLines={2} variant="heading">