Add filling Stations

src/screens/fillingStations/FilingStationSearch.tsx

@@ -0,0 +1,118 @@
+import React, {useCallback, useState} from 'react';
+import {CompositeNavigationProp, useNavigation} from '@react-navigation/native';
+import {HomeStackParamList} from '../../navigators/Home';
+import {FlatList, ListRenderItem, StyleSheet, View} from 'react-native';
+import {Colors} from '../../Colors';
+import {Header} from '../../components/Header';
+import {ArrowLeft} from '../../icons/ArrowLeft';
+import {SearchInput} from '../../components/SearchInput';
+import {RootStackParamList} from '../../navigators/Root';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {Pressable} from '../../components/Button/Pressable';
+import {StationRow} from './components/StationRow';
+import {FunnelIcons} from '../../icons/Funnel';
+import {SortModalModal} from './components/SortModal';
+import {useFillingStation} from '../../context/FilingStations';
+
+type NavigationProps = CompositeNavigationProp<
+  StackNavigationProp<HomeStackParamList, 'FilingStationSearch'>,
+  StackNavigationProp<RootStackParamList>
+>;
+
+export const FilingStationSearch = () => {
+  const {goBack, navigate} = useNavigation<NavigationProps>();
+  const [showSortModal, setShowSortModal] = useState(false);
+  const {filingStations} = useFillingStation();
+  const itemSeparatorComponent = useCallback(
+    () => <View style={styles.separator} />,
+    [],
+  );
+
+  const renderItem: ListRenderItem<FillingStation> = ({item}) => (
+    <StationRow
+      fs={item}
+      onPress={() =>
+        navigate('FilingStation', {
+          id: item.id,
+        })
+      }
+    />
+  );
+
+  const keyExtractor = useCallback((item: FillingStation) => {
+    return `fs-Item-${item.id} `;
+  }, []);
+
+  return (
+    <>
+      <View style={styles.root}>
+        <Header
+          title={'Filling Stations'}
+          leftIcon={<ArrowLeft />}
+          onPressLeft={() => goBack()}
+          backgroundColor="white"
+        />
+        <View style={styles.searchContainer}>
+          <SearchInput
+            style={styles.search}
+            onChange={value => {}}
+            onClose={() => {}}
+            value={''}
+          />
+          <Pressable
+            onPress={() => {
+              setShowSortModal(true);
+            }}
+            style={styles.filterButton}>
+            <FunnelIcons size={20} color={Colors.Secondary.Red} />
+          </Pressable>
+        </View>
+        <FlatList
+          data={filingStations}
+          renderItem={renderItem}
+          ItemSeparatorComponent={itemSeparatorComponent}
+          style={styles.list}
+          keyExtractor={keyExtractor}
+        />
+      </View>
+      <SortModalModal
+        show={showSortModal}
+        onClose={() => {
+          setShowSortModal(false);
+        }}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: Colors.Primary.White,
+  },
+  searchContainer: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    marginTop: 16,
+    marginHorizontal: 24,
+  },
+  search: {
+    marginRight: 16,
+  },
+  list: {
+    marginTop: 16,
+  },
+  filterButton: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    backgroundColor: Colors.Label.OffRed,
+    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  separator: {
+    height: 16,
+  },
+});

src/screens/fillingStations/components/SortModal.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {View} from 'react-native';
+import {Colors} from '../../../Colors';
+import {BottomModal} from '../../../components/BottomModal';
+import {Pressable} from '../../../components/Button/Pressable';
+import {FontSize, Text} from '../../../components/Text';
+import {XIcon} from '../../../icons/XIcon';
+
+interface SortModalProps {
+  show: boolean;
+  onClose: () => void;
+}
+
+export const SortModalModal = ({show, onClose}: SortModalProps) => {
+  return (
+    <>
+      <BottomModal
+        show={show}
+        onClose={() => {
+          onClose();
+        }}>
+        <View
+          style={{
+            margin: 16,
+          }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignContent: 'center',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}>
+            <Text fontSize={FontSize.H2}>Filter & Sorting</Text>
+            <Pressable
+              style={{
+                backgroundColor: Colors.Label.OffBlue,
+                height: 50,
+                width: 50,
+                borderRadius: 25,
+                alignContent: 'center',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+              <XIcon color={Colors.Primary.Blue} />
+            </Pressable>
+          </View>
+          <Text fontSize={FontSize.H3}>Distance </Text>
+          <Text fontSize={FontSize.H3}>Availability </Text>
+          <View
+            style={{
+              flexDirection: 'row',
+            }}>
+            <Pressable
+              onPress={() => {}}
+              style={{
+                height: 50,
+                borderRadius: 25,
+                backgroundColor: Colors.Label.OffRed,
+                alignContent: 'center',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}></Pressable>
+            <Pressable
+              onPress={() => {}}
+              style={{
+                height: 50,
+                borderRadius: 25,
+                backgroundColor: Colors.Label.OffRed,
+                alignContent: 'center',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}></Pressable>
+          </View>
+        </View>
+      </BottomModal>
+    </>
+  );
+};

src/screens/fillingStations/components/StationRow.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {Colors} from '../../../Colors';
+import {StyleSheet, View} from 'react-native';
+import {FontSize, Text} from '../../../components/Text';
+import {StatusTag} from '../../../components/StatusTag';
+import {Pressable} from '../../../components/Button/Pressable';
+
+interface StationRowProps {
+  onPress: () => void;
+  fs: FillingStation;
+}
+
+export const StationRow = ({onPress, fs}: StationRowProps) => {
+  return (
+    <Pressable onPress={onPress} style={styles.root}>
+      <View style={styles.subRowContainer}>
+        <View style={styles.leftColumnContainer}>
+          <View>
+            <Text fontSize={FontSize.H3}>{fs.stationName}</Text>
+            <Text>{fs.address}</Text>
+          </View>
+          {fs.scheduleDelivery?.scheduledDate && (
+            <View>
+              <Text numberOfLines={2}>Estimate Fuel arrival: </Text>
+              <Text fontSize={FontSize.H5}>
+                {fs.scheduleDelivery?.scheduledDate}
+              </Text>
+            </View>
+          )}
+        </View>
+        <View>
+          <StatusTag status={fs.SDStatus} />
+          {fs.scheduleDelivery?.queueNumber && (
+            <View style={styles.queueContainer}>
+              <Text fontSize={FontSize.H3}>
+                {fs.scheduleDelivery?.queueNumber}
+              </Text>
+              <Text>on going</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    backgroundColor: Colors.Secondary.GreyOff,
+    borderRadius: 16,
+    paddingVertical: 16,
+    marginHorizontal: 24,
+    paddingHorizontal: 8,
+  },
+  subRowContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  leftColumnContainer: {
+    justifyContent: 'space-between',
+    flex: 1,
+  },
+  dateContainer: {
+    flexDirection: 'row',
+    marginTop: 4,
+    alignContent: 'center',
+    alignItems: 'center',
+  },
+  queueContainer: {
+    alignContent: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 8,
+  },
+});