Merge pull request #1266 from smart-village-solutions/fix/SVA-1384-fi…

…x-dropdown-for-overlay-filter feat: add `isOverlayFilter` prop to `Dropdown` components
smart-village-solutions · Feb 20, 2025 · f30c41c · f30c41c
2 parents b7093d6 + 6fae52a
commit f30c41c
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 42 deletions.
diff --git a/src/components/DropdownSelect.js b/src/components/DropdownSelect.js
@@ -18,15 +18,16 @@ export const DropdownSelect = ({
   boldLabel = false,
   data,
   errorMessage,
-  multipleSelect,
-  setData,
+  isOverlayFilter = false,
   label,
   labelWrapperStyle,
+  multipleSelect,
   placeholder,
-  showSearch,
-  searchInputStyle,
   renderSearch,
-  searchPlaceholder
+  searchInputStyle,
+  searchPlaceholder,
+  setData,
+  showSearch
 }) => {
   const dropdownRef = useRef();
   const { orientation } = useContext(OrientationContext);
@@ -39,7 +40,8 @@ export const DropdownSelect = ({
       ...styles,
       height: 'auto',
       left: marginHorizontal,
-      marginTop: device.platform === 'android' ? -normalize(24) : 0,
+      marginTop:
+        device.platform === 'android' ? -normalize(24) : isOverlayFilter ? normalize(65) : 0,
       maxHeight: normalize(320)
     }),
     [marginHorizontal]
@@ -200,13 +202,14 @@ DropdownSelect.propTypes = {
   boldLabel: PropTypes.bool,
   data: PropTypes.array,
   errorMessage: PropTypes.string,
-  multipleSelect: PropTypes.bool,
-  setData: PropTypes.func,
+  isOverlayFilter: PropTypes.bool,
   label: PropTypes.string,
-  placeholder: PropTypes.string,
   labelWrapperStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
-  showSearch: PropTypes.bool,
-  searchInputStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
+  multipleSelect: PropTypes.bool,
+  placeholder: PropTypes.string,
   renderSearch: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  searchPlaceholder: PropTypes.string
+  searchInputStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
+  searchPlaceholder: PropTypes.string,
+  setData: PropTypes.func,
+  showSearch: PropTypes.bool
 };
diff --git a/src/components/filter/DateFilter.tsx b/src/components/filter/DateFilter.tsx
@@ -45,7 +45,7 @@ const CalendarView = ({
     dates[date] = {
       ...(dates[date] ?? {}),
       selected: true,
-      selectedColor: colors.lighterSecondary
+      selectedColor: colors.lighterPrimary
     };
 
     return dates;

diff --git a/src/components/filter/DropdownFilter.tsx b/src/components/filter/DropdownFilter.tsx
@@ -7,29 +7,31 @@ import { DropdownSelect } from '../DropdownSelect';
 import { colors, normalize } from '../../config';
 
 type Props = {
-  multipleSelect?: boolean;
-  showSearch?: boolean;
-  searchPlaceholder?: string;
   containerStyle?: StyleProp<ViewStyle>;
   data: DropdownProps[];
   filters: FilterProps;
+  isOverlayFilter: boolean;
   label?: string;
+  multipleSelect?: boolean;
   name: keyof FilterProps;
   placeholder?: string;
+  searchPlaceholder?: string;
   setFilters: React.Dispatch<FilterProps>;
+  showSearch?: boolean;
 };
 
 export const DropdownFilter = ({
-  multipleSelect,
-  showSearch,
-  searchPlaceholder,
   containerStyle,
   data,
   filters,
+  isOverlayFilter,
   label,
+  multipleSelect,
   name,
   placeholder,
-  setFilters
+  searchPlaceholder,
+  setFilters,
+  showSearch
 }: Props) => {
   const initiallySelectedItem = {
     id: 0,
@@ -85,6 +87,7 @@ export const DropdownFilter = ({
       <View style={(styles.container, containerStyle)}>
         <DropdownSelect
           data={dropdownData}
+          isOverlayFilter={isOverlayFilter}
           label={label}
           labelWrapperStyle={styles.labelWrapper}
           multipleSelect={multipleSelect}

diff --git a/src/components/filter/Filter.tsx b/src/components/filter/Filter.tsx
@@ -36,6 +36,16 @@ const deleteInitialStartDateFromQueryVariables = (queryVariables: FilterProps):
     return newQueryVariables;
   }
 
+  if (queryVariables.dateRange?.length) {
+    const newQueryVariables = { ...queryVariables };
+
+    return {
+      ...newQueryVariables,
+      start_date: queryVariables.dateRange[0],
+      end_date: queryVariables.dateRange[1]
+    };
+  }
+
   return queryVariables;
 };
 
@@ -100,7 +110,7 @@ export const Filter = ({
 
   useEffect(() => {
     if (!!isOverlay && !_isEqual(filters, queryVariables) && isCollapsed) {
-      setFilters(queryVariables);
+      setFilters(updatedQueryVariables);
     }
   }, [isCollapsed]);
 
@@ -185,6 +195,7 @@ export const Filter = ({
                 <FilterComponent
                   filters={filters}
                   filterTypes={filterTypes}
+                  isOverlayFilter
                   setFilters={setFilters}
                 />
               </Wrapper>

diff --git a/src/components/filter/FilterComponent.tsx b/src/components/filter/FilterComponent.tsx
@@ -20,10 +20,11 @@ const { FILTER_TYPES } = consts;
 type Props = {
   filters: FilterProps;
   filterTypes?: FilterTypesProps[];
+  isOverlayFilter: boolean;
   setFilters: React.Dispatch<FilterProps>;
 };
 
-export const FilterComponent = ({ filters, filterTypes, setFilters }: Props) => {
+export const FilterComponent = ({ filters, filterTypes, isOverlayFilter, setFilters }: Props) => {
   const [sliderVisible, setSliderVisible] = useState(
     !filters?.radiusSearch?.currentPosition || false
   );
@@ -50,6 +51,7 @@ export const FilterComponent = ({ filters, filterTypes, setFilters }: Props) =>
                 setFilters={setFilters}
                 {...item}
                 data={item.data as DropdownProps[]}
+                isOverlayFilter={isOverlayFilter}
                 multipleSelect={item.isMultiselect}
                 searchPlaceholder={item.searchPlaceholder}
                 showSearch={item.searchable}

diff --git a/src/components/widgets/EventWidget.tsx b/src/components/widgets/EventWidget.tsx
@@ -53,7 +53,7 @@ export const EventWidget = ({ text, additionalProps }: WidgetProps) => {
       title: text ?? texts.homeTitles.events,
       query: QUERY_TYPES.EVENT_RECORDS,
       queryVariables: {
-        order: 'listDate_ASC',
+        ...queryVariables,
         limit: additionalProps?.limit || 15
       },
       rootRouteName: ROOT_ROUTE_NAMES.EVENT_RECORDS,

diff --git a/src/config/navigation/defaultStackConfig.tsx b/src/config/navigation/defaultStackConfig.tsx
@@ -262,7 +262,6 @@ export const defaultStackConfig = ({
         headerLeft: () => (
           <HeaderLeft
             onPress={() => {
-              // @ts-expect-error we are lacking proper param types here
               if (route.params?.qrId || route.params?.fromPoll) {
                 navigation.goBack();
               } else {
@@ -312,15 +311,13 @@ export const defaultStackConfig = ({
       screenComponent: HtmlScreen
     },
     {
-      routeName: ScreenName.Index,
-      screenComponent: IndexScreen,
-      screenOptions: getScreenOptions({ withInfo: true }),
-      // NOTE: is used as initial screen for the points of interest tab
       initialParams: initialParams || {
         title: texts.screenTitles.pointsOfInterest,
-        query: QUERY_TYPES.CATEGORIES,
-        usedAsInitialScreen: true
-      }
+        query: QUERY_TYPES.CATEGORIES
+      },
+      routeName: ScreenName.Index,
+      screenComponent: IndexScreen,
+      screenOptions: getScreenOptions({ withInfo: true })
     },
     {
       initialParams,
@@ -390,17 +387,17 @@ export const defaultStackConfig = ({
       screenComponent: PdfScreen
     },
     {
-      routeName: ScreenName.Profile,
-      screenComponent: ProfileHomeScreen,
-      screenOptions: getScreenOptions({ withInfo: true }),
       initialParams: initialParams || {
         title: texts.screenTitles.profile.home,
         query: QUERY_TYPES.PUBLIC_JSON_FILE,
         queryVariables: {
           name: 'profile'
         },
         rootRouteName: ScreenName.Profile
-      }
+      },
+      routeName: ScreenName.Profile,
+      screenComponent: ProfileHomeScreen,
+      screenOptions: getScreenOptions({ withInfo: true })
     },
     {
       initialParams,
@@ -495,26 +492,23 @@ export const defaultStackConfig = ({
     {
       initialParams: initialParams || {
         title: texts.screenTitles.sue.listView,
-        query: QUERY_TYPES.SUE.REQUESTS,
-        usedAsInitialScreen: true
+        query: QUERY_TYPES.SUE.REQUESTS
       },
       routeName: ScreenName.SueList,
       screenComponent: SueListScreen
     },
     {
       initialParams: initialParams || {
         title: texts.screenTitles.sue.mapView,
-        query: QUERY_TYPES.SUE.REQUESTS,
-        usedAsInitialScreen: true
+        query: QUERY_TYPES.SUE.REQUESTS
       },
       routeName: ScreenName.SueMap,
       screenComponent: SueMapScreen
     },
     {
       initialParams: initialParams || {
         title: texts.screenTitles.sue.reportView,
-        query: QUERY_TYPES.SUE.REQUESTS,
-        usedAsInitialScreen: true
+        query: QUERY_TYPES.SUE.REQUESTS
       },
       routeName: ScreenName.SueReport,
       screenComponent: SueReportScreen

diff --git a/src/helpers/parser/listItemParser.js b/src/helpers/parser/listItemParser.js
@@ -223,7 +223,6 @@ const parseCategories = (data, skipLastDivider, routeName, queryVariables, query
           category: `${category.name}`,
           location: queryVariables?.location
         },
-        usedAsInitialScreen: false,
         rootRouteName: ROOT_ROUTE_NAMES.POINTS_OF_INTEREST_AND_TOURS
       },
       bottomDivider: !skipLastDivider || index !== data.length - 1

diff --git a/src/hooks/listHooks.js b/src/hooks/listHooks.js
@@ -221,6 +221,8 @@ export const useRenderItem = (query, navigation, options = {}) => {
     default: {
       /* eslint-disable complexity */
       renderItem = ({ item, index, section, target }) => {
+        const bottomDivider = item.bottomDivider ? true : calculateBottomDivider(index, section);
+
         if (query === QUERY_TYPES.PROFILE.GET_CONVERSATIONS) {
           return (
             <ConversationListItem