some changes in ui

src/Screens/Auction/LiveAuction.tsx

@@ -18,13 +18,14 @@ const LiveAuction = () => {
     const onEndReachedCalledDuringMomentum = useRef(true);
     const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction);
     const [showRefreshBanner, setShowRefreshBanner] = useState(false);
-    const [allBoolean, setAllBoolean] = useState({ liveAuctionData: [] })
+    const [allBoolean, setAllBoolean] = useState({ liveAuctionData: [], isLoading: false })
     const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isRefetching, refetch, isPending }: any = useFetchLiveAuction();
 
     // My Methods
 
     const getMyAuction = async () => {
         try {
+            setAllBoolean(prev => ({ ...prev, isLoading: true }))
             const res = await apiCall<any>('get', `${GET_MY_AUCTION}`,);
             if (res?.statusCode === 200) {
                 const purchasedIds = new Set(res.data.map((item: any) => item.auctionId));
@@ -100,7 +101,7 @@ const LiveAuction = () => {
 
     return (
         <View style={{ flex: 1 }}>
-            <SearchInput onChange={() => { }} placeholder="Search...." />
+            <SearchInput onChange={() => { }} placeholder="Search...." filter={false} />
 
             {showRefreshBanner && (
                 <Animated.View
@@ -139,7 +140,7 @@ const LiveAuction = () => {
                 </Animated.View>
             )}
             {
-                isPending ? <Skeleton /> :
+                isPending || allBoolean.isLoading ? <Skeleton /> :
                     <FlatList
                         data={allBoolean.liveAuctionData ?? []}
                         renderItem={renderItem}

src/Screens/Auction/Modal/AuctionItemDetail.tsx

@@ -72,7 +72,6 @@ const AuctionItemDetail: React.FC<Props> = ({ visible, onClose, data }) => {
     };
 
     return (
-
         <Modal
             visible={visible}
             transparent={false}

src/Screens/Auction/Modal/FilterModal.tsx

@@ -1,30 +1,14 @@
 import React, { useState } from 'react';
-import {
-    Modal,
-    View,
-    Text,
-    StyleSheet,
-    TouchableOpacity,
-    Pressable,
-} from 'react-native';
+import { Modal, View, Text, StyleSheet, TouchableOpacity, Pressable } from 'react-native';
 import DatePicker from 'react-native-date-picker';
 import moment from 'moment';
 import colors from '../../../Constant/Color';
 import FontsFamily from '../../../Constant/FontsFamily';
+import { AuctionStatus, Props } from '../types/types';
 
-type AuctionStatus = 'RUNNING' | 'ENDED' | 'NOT_STARTED' | null;
 
-interface Props {
-    visible: boolean;
-    onClose: () => void;
-    onApply: (filters: {
-        fromDate: Date | null;
-        toDate: Date | null;
-        status: AuctionStatus;
-    }) => void;
-}
 
-const FilterModal: React.FC<Props> = ({ visible, onClose, onApply }) => {
+const FilterModal: React.FC<Props> = ({ visible, onClose, setFilter, filter }) => {
     const [fromDate, setFromDate] = useState<Date | null>(null);
     const [toDate, setToDate] = useState<Date | null>(null);
     const [status, setStatus] = useState<AuctionStatus>(null);
@@ -38,16 +22,26 @@ const FilterModal: React.FC<Props> = ({ visible, onClose, onApply }) => {
     };
 
     const handleConfirm = (date: Date) => {
+
         if (pickerType === 'FROM') {
             setFromDate(date);
+            console.log('FROM date set');
         } else {
             setToDate(date);
+            console.log('TO date set');
         }
+
         setOpenPicker(false);
     };
 
     const handleApply = () => {
-        onApply({ fromDate, toDate, status });
+        const payload = {
+            fromDate: fromDate ? fromDate.toISOString() : null,
+            toDate: toDate ? toDate.toISOString() : null,
+            status,
+
+        };
+        setFilter({ ...payload, auctionNumber: filter.auctionNumber || '' });
         onClose();
     };
 
@@ -67,7 +61,7 @@ const FilterModal: React.FC<Props> = ({ visible, onClose, onApply }) => {
                 <View style={styles.container}>
                     <Text style={styles.title}>Filter Auctions</Text>
 
-                    {/* ===== DATE RANGE ===== */}
+                    {/* DATE RANGE */}
                     <Text style={styles.sectionTitle}>Date Range</Text>
 
                     <View style={styles.dateRow}>
@@ -96,7 +90,7 @@ const FilterModal: React.FC<Props> = ({ visible, onClose, onApply }) => {
                         </TouchableOpacity>
                     </View>
 
-                    {/* ===== STATUS ===== */}
+                    {/* STATUS */}
                     <Text style={styles.sectionTitle}>Auction Status</Text>
 
                     <View style={styles.statusRow}>
@@ -109,7 +103,9 @@ const FilterModal: React.FC<Props> = ({ visible, onClose, onApply }) => {
                             return (
                                 <TouchableOpacity
                                     key={item.value}
-                                    onPress={() => setStatus(item.value as AuctionStatus)}
+                                    onPress={() =>
+                                        setStatus(item.value as AuctionStatus)
+                                    }
                                     style={[
                                         styles.statusPill,
                                         active && styles.statusActive,
@@ -128,20 +124,25 @@ const FilterModal: React.FC<Props> = ({ visible, onClose, onApply }) => {
                         })}
                     </View>
 
-                    {/* ===== FOOTER ===== */}
+                    {/* FOOTER */}
                     <View style={styles.footer}>
-                        {/* <TouchableOpacity style={styles.cancelBtn} onPress={onClose}>
-              <Text style={styles.cancelText}>Cancel</Text>
-            </TouchableOpacity> */}
-
-                        <TouchableOpacity style={styles.applyBtn} onPress={handleApply}>
+                        <TouchableOpacity
+                            style={[styles.applyBtn]}
+                            onPress={() => { setFilter({}), onClose() }}
+                        >
+                            <Text style={styles.applyText}>Clear</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={styles.applyBtn}
+                            onPress={handleApply}
+                        >
                             <Text style={styles.applyText}>Apply</Text>
                         </TouchableOpacity>
                     </View>
                 </View>
             </Modal>
 
-            {/* ===== DATE PICKER ===== */}
+            {/* DATE PICKER */}
             <DatePicker
                 modal
                 open={openPicker}
@@ -160,7 +161,6 @@ const FilterModal: React.FC<Props> = ({ visible, onClose, onApply }) => {
 
 export default FilterModal;
 
-
 const styles = StyleSheet.create({
     overlay: {
         flex: 1,
@@ -229,31 +229,28 @@ const styles = StyleSheet.create({
     statusText: {
         fontSize: 13,
         color: '#334155',
-        fontFamily:FontsFamily.poppinsSemiBold
+        fontFamily: FontsFamily.poppinsSemiBold,
     },
     statusActiveText: {
         color: '#fff',
     },
     footer: {
+        marginTop: 24,
         flexDirection: 'row',
         justifyContent: 'space-between',
-        marginTop: 24,
+        alignItems: 'center'
     },
-    cancelBtn: {
-        padding: 12,
-    },
- 
     applyBtn: {
         backgroundColor: colors.primary,
         paddingHorizontal: 20,
         paddingVertical: 12,
         borderRadius: 12,
-        width: '100%'
+        width: '49%',
     },
     applyText: {
         color: '#fff',
         fontSize: 16,
         textAlign: 'center',
-        fontFamily: FontsFamily.poppinsSemiBold
+        fontFamily: FontsFamily.poppinsSemiBold,
     },
 });

src/Screens/Auction/PurchaseAuction.tsx

@@ -19,7 +19,8 @@ const PurchaseAuction = () => {
     const navigation = useNavigation() as any;
     const Dispatch = useDispatch()
     const onEndReachedCalledDuringMomentum = useRef(true);
-    const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isRefetching, refetch, isPending }: any = useFetchLiveAuctionPage();
+    const [filter, setFilter] = useState({})
+    const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isRefetching, refetch, isPending }: any = useFetchLiveAuctionPage(filter);
     const [allBoolean, setAllBoolean] = useState<allBooleanProps>({ isShowFilter: false })
     const format = 'DD-MM-YYYY HH:mm:ss';
 
@@ -60,9 +61,10 @@ const PurchaseAuction = () => {
         );
     }, [isFetchingNextPage]);
 
+
     return (
         <View style={{ flex: 1 }}>
-            <SearchInput onChange={() => { }} placeholder='Search....' filterPress={() => { setAllBoolean((prev: any) => ({ ...prev, isShowFilter: !prev.isShowFilter })) }} />
+            <SearchInput onChange={(val) => { setFilter(prev => ({ ...prev, auctionNumber: val })) }} placeholder='Search....' filterPress={() => { setAllBoolean((prev: any) => ({ ...prev, isShowFilter: !prev.isShowFilter })) }} />
             {isPending ? <Skelton />
                 :
                 <FlatList
@@ -108,8 +110,8 @@ const PurchaseAuction = () => {
                 />
             }
             {allBoolean.isShowFilter && <View style={{ flex: 1 }}>
-                <FilterModal visible={allBoolean.isShowFilter} onClose={() => { setAllBoolean((prev: any) => ({ ...prev, isShowFilter: false })) }} onApply={() => { }} />
-            </View>}
+                <FilterModal visible={allBoolean.isShowFilter} onClose={() => { setAllBoolean((prev: any) => ({ ...prev, isShowFilter: false })) }} setFilter={setFilter} filter={filter} />
+            </View>}.
 
         </View>
     );

src/Screens/Auction/types/types.tsx

@@ -15,4 +15,23 @@ export interface LiveAuctionTileProps {
 export interface allBooleanProps {
     showDetail?: boolean
     isShowFilter?: boolean
+    filterValue?: {
+        fromDate?: any,
+        toDate?: any,
+        status?: any
+    }
+}
+
+export type AuctionStatus = 'RUNNING' | 'ENDED' | 'NOT_STARTED' | null;
+
+export interface Props {
+    visible: boolean;
+    onClose: () => void;
+    setFilter: (data: {
+        fromDate?: string | null;
+        toDate?: string | null;
+        status?: AuctionStatus;
+        auctionNumber?: any
+    }) => void;
+    filter: any
 }