@plusscommunities/pluss-maintenance-app-a 8.0.26 → 8.0.27

package/src/components/MaintenanceList.js

@@ -1,22 +1,22 @@
 import React, { Component } from "react";
 import { Text } from "@plusscommunities/pluss-core-app/components";
 import {
-	View,
-	StyleSheet,
-	FlatList,
-	TouchableOpacity,
-	Animated,
+  View,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+  Animated,
 } from "react-native";
 import _ from "lodash";
 import { connect } from "react-redux";
 import { maintenanceActions } from "../apis";
 import {
-	jobsLoaded,
-	jobAdded,
-	jobsAdded,
-	jobStatusesUpdate,
-	jobHideSeenUpdate,
-	jobsFilterLoaded,
+  jobsLoaded,
+  jobAdded,
+  jobsAdded,
+  jobStatusesUpdate,
+  jobHideSeenUpdate,
+  jobsFilterLoaded,
 } from "../actions";
 import MaintenanceListItem from "../components/MaintenanceListItem";
 import FilterPopupMenu from "./FilterPopupMenu";
@@ -24,597 +24,590 @@ import { Components, Colours, Helper } from "../core.config";
 import { values } from "../values.config";
 
 class MaintenanceList extends Component {
-	_refreshCounter = 0;
-	_filterApplying = false;
-	_filterDataReady = false;
-	_overlayOpacity = new Animated.Value(0);
-
-	constructor(props) {
-		super(props);
-
-		this.state = {
-			types: [],
-			filteredList: props.jobs,
-			loading: false,
-			loadingMore: false,
-			hasMore: true,
-			lastKey: null,
-			searchText: "",
-			showFilterPopup: false,
-		};
-	}
-
-	componentDidMount() {
-		this.props.jobStatusesUpdate(this.props.site);
-		this.props.jobHideSeenUpdate(this.props.site);
-		this.refresh();
-		this.refreshTypes();
-		this.resetDataSource();
-	}
-
-	componentDidUpdate(prevProps) {
-		if (!prevProps.dataUpdated && this.props.dataUpdated) this.refresh();
-		if (
-			!_.isEqual(prevProps.jobs, this.props.jobs) ||
-			!_.isEqual(prevProps.jobfilters, this.props.jobfilters)
-		)
-			this.resetDataSource();
-	}
-
-	expandStatus = (status) => {
-		if (status !== "Incomplete") return status;
-		const { statusTypes } = this.props;
-		if (!statusTypes || !statusTypes.length) return status;
-		const incompleteStatuses = statusTypes
-			.filter((s) => s.category !== "Completed")
-			.map((s) => s.text);
-		return incompleteStatuses.length > 0
-			? incompleteStatuses.join(",")
-			: status;
-	};
-
-	refresh = (overrideFilters) => {
-		const currentCounter = ++this._refreshCounter;
-		this.onLoadingChanged(true, async () => {
-			try {
-				const jobfilters = overrideFilters || this.props.jobfilters;
-				const res = await maintenanceActions.getJobs2(
-					this.props.site,
-					this.expandStatus(jobfilters.status),
-					jobfilters.priority,
-					jobfilters.type,
-					null, // No lastKey = first page
-					jobfilters.assignee,
-				);
-
-				// Discard stale responses from earlier filter changes
-				if (currentCounter !== this._refreshCounter) return;
-
-				const jobs = res.data.Items;
-				const lastKey = res.data.LastKey;
-
-				// Signal that the API response is ready before dispatching to Redux
-				this._filterDataReady = true;
-
-				// Always replace jobs on refresh (filters are server-side)
-				this.props.jobsLoaded(jobs);
-
-				// Reset filter flags directly in case resetDataSource never fires
-				// (e.g. when the list was already empty and jobsLoaded([]) doesn't
-				// trigger componentDidUpdate because _.isEqual([], []) is true)
-				if (this._filterApplying) {
-					this._filterApplying = false;
-					this._filterDataReady = false;
-					this._showOverlay(false);
-				}
-
-				this.setState({
-					lastKey,
-					hasMore: !!lastKey,
-				});
-			} catch (error) {
-				if (currentCounter !== this._refreshCounter) return;
-				console.log("refresh error", error);
-				this._filterApplying = false;
-				this._filterDataReady = false;
-				this._showOverlay(false);
-			} finally {
-				if (currentCounter === this._refreshCounter) {
-					this.onLoadingChanged(false);
-				}
-			}
-		});
-	};
-
-	loadMore = () => {
-		const { loading, loadingMore, hasMore, lastKey, searchText } = this.state;
-
-		// Don't load if already loading, no more pages, or during search
-		if (loading || loadingMore || !hasMore || !lastKey || searchText) return;
-
-		this.setState({ loadingMore: true }, async () => {
-			try {
-				const { jobfilters } = this.props;
-				const res = await maintenanceActions.getJobs2(
-					this.props.site,
-					this.expandStatus(jobfilters.status),
-					jobfilters.priority,
-					jobfilters.type,
-					lastKey,
-					jobfilters.assignee,
-				);
-
-				const newJobs = res.data.Items;
-				const newLastKey = res.data.LastKey;
-
-				// Append to existing jobs
-				this.props.jobsAdded(newJobs);
-
-				this.setState({
-					lastKey: newLastKey,
-					hasMore: !!newLastKey,
-				});
-			} catch (error) {
-				console.log("loadMore error", error);
-			} finally {
-				this.setState({ loadingMore: false });
-			}
-		});
-	};
-
-	refreshTypes = async () => {
-		const { data } = await maintenanceActions.getJobTypes(
-			Helper.getSite(this.props.site),
-		);
-		const types = data.map((t) => {
-			return { label: t.typeName, value: t.typeName };
-		});
-		types.splice(0, 0, { label: "All", value: "" });
-		// console.log('refreshTypes', types);
-		this.setState({ types });
-	};
-
-	fetchJob = (jobId) => {
-		if (this.state.loading) return;
-
-		this.onLoadingChanged(true, async () => {
-			try {
-				const job = await maintenanceActions.getJobByJobId(
-					this.props.site,
-					jobId,
-				);
-				// console.log('fetchJob', job?.data);
-				this.props.jobAdded(job.data);
-			} catch (error) {
-				console.log("fetchJob error", error);
-			} finally {
-				this.onLoadingChanged(false);
-			}
-		});
-	};
-
-	getEmptyStateText() {
-		if (this.props.options && !_.isEmpty(this.props.options.EmptyText)) {
-			return this.props.options.EmptyText;
-		}
-		return this.props.userCategory === "staff"
-			? values.emptyRequestsStaff
-			: values.emptyRequestsUser;
-	}
-
-	resetDataSource = (source = "") => {
-		const { searchText } = this.state;
-		const { jobs, jobfilters } = this.props;
-
-		let filteredList = jobs;
-		let jobIdMatch = null;
-
-		if (jobfilters.status) {
-			const expandedStatuses = this.expandStatus(jobfilters.status).split(",");
-			filteredList = filteredList.filter(
-				(j) => !j.status || expandedStatuses.includes(j.status),
-			);
-		}
-
-		// Client-side search filtering (search is not supported server-side)
-		if (searchText) {
-			jobIdMatch = _.find(jobs, (j) => j.jobId === searchText);
-			filteredList = jobs.filter((j) => {
-				if (
-					j.room &&
-					j.room.toLowerCase().indexOf(searchText.toLowerCase()) > -1
-				) {
-					return true;
-				}
-				return false;
-			});
-			if (!jobIdMatch) this.fetchJob(searchText);
-		}
-
-		// Note: status, priority, type, and assignee filters are applied server-side
-		// via getJobs2, so no client-side filtering needed for those
-
-		if (jobIdMatch) {
-			const jobIndex = filteredList.indexOf(jobIdMatch);
-			if (jobIndex > -1) {
-				filteredList.splice(jobIndex, 1);
-			}
-			filteredList.unshift(jobIdMatch);
-		}
-
-		// During a filter transition, don't clear the list until the API
-		// response has arrived and been processed. This prevents the empty
-		// state from flashing when jobs transiently drop to [].
-		if (
-			this._filterApplying &&
-			!this._filterDataReady &&
-			filteredList.length === 0
-		) {
-			return;
-		}
-
-		this.setState({ filteredList }, () => {
-			if (this._filterDataReady) {
-				this._filterApplying = false;
-				this._filterDataReady = false;
-				this._showOverlay(false);
-			}
-		});
-	};
-
-	onLoadingChanged = (loading, callback) => {
-		this.setState({ loading }, () => {
-			if (this.props.onLoadingChanged)
-				this.props.onLoadingChanged(this.state.loading);
-			if (callback) callback();
-		});
-	};
-
-	onSearchText = (value) => {
-		this.setState({ searchText: value }, () => {
-			if (_.isEmpty(this.state.searchText)) this.resetDataSource("search");
-		});
-	};
-
-	onSearchSubmit = () => {
-		this.resetDataSource("search");
-	};
-
-	onToggleFilter = () => {
-		this.setState({ showFilterPopup: !this.state.showFilterPopup });
-	};
-
-	onSelectFilter = (selected) => {
-		this._filterApplying = true;
-		this._filterDataReady = false;
-		this._showOverlay(true);
-		this.props.jobsFilterLoaded(selected);
-		this.onToggleFilter();
-		// Reset pagination but keep old list visible while loading
-		// Pass filters directly to avoid stale props from async Redux update
-		this.setState({ lastKey: null, hasMore: true }, () => {
-			this.refresh(selected);
-		});
-	};
-
-	getFilterButtonText = () => {
-		const { jobfilters } = this.props;
-		const filterTexts = [];
-		if (!_.isEmpty(jobfilters.status)) {
-			filterTexts.push(jobfilters.statusText);
-		}
-		if (!_.isEmpty(jobfilters.priority)) {
-			filterTexts.push(jobfilters.priorityText);
-		}
-		if (!_.isEmpty(jobfilters.type)) {
-			filterTexts.push(jobfilters.type);
-		}
-		if (!_.isEmpty(jobfilters.assignee)) {
-			filterTexts.push(jobfilters.assigneeName);
-		}
-		if (_.isEmpty(filterTexts)) {
-			return "Filter";
-		}
-		return `Filtering by ${filterTexts.join(", ")}`;
-	};
-
-	hasFiltersActive() {
-		const { jobfilters } = this.props;
-		return (
-			!_.isEmpty(jobfilters.status) ||
-			!_.isEmpty(jobfilters.priority) ||
-			!_.isEmpty(jobfilters.type) ||
-			!_.isEmpty(jobfilters.assignee)
-		);
-	}
-
-	clearFilters = () => {
-		const emptyFilters = {
-			status: "",
-			statusText: "",
-			priority: "",
-			priorityText: "",
-			type: "",
-			assignee: "",
-			assigneeName: "",
-		};
-		this.onSelectFilter(emptyFilters);
-	};
-
-	renderEmptyList() {
-		if (this.state.loading || this._filterApplying) return null;
-
-		const hasFilters = this.hasFiltersActive();
-
-		return (
-			<View style={{ marginHorizontal: 16 }}>
-				<Components.EmptyStateMain
-					title={
-						hasFilters
-							? "No requests match your filters"
-							: this.getEmptyStateText()
-					}
-				/>
-				{hasFilters && (
-					<TouchableOpacity
-						onPress={this.clearFilters}
-						style={[styles.clearFiltersButton, { alignSelf: "center" }]}
-					>
-						<Text
-							style={[
-								styles.clearFiltersText,
-								{ color: this.props.colourBrandingMain },
-							]}
-						>
-							Clear filters
-						</Text>
-					</TouchableOpacity>
-				)}
-			</View>
-		);
-	}
-
-	renderFilterButton() {
-		return (
-			<TouchableOpacity onPress={this.onToggleFilter}>
-				<View style={styles.filterButton}>
-					<Text
-						style={[
-							styles.filterButtonText,
-							{ color: this.props.colourBrandingMain },
-						]}
-					>
-						{this.getFilterButtonText()}
-					</Text>
-				</View>
-			</TouchableOpacity>
-		);
-	}
-
-	renderSearch() {
-		if (!this.props.hasPermission) return null;
-
-		return (
-			<View style={styles.searchContainer}>
-				<Components.GenericInput
-					placeholder={`Search by ${values.textEntityName} ID or Address`}
-					value={this.state.searchText}
-					onChangeText={this.onSearchText}
-					onSubmitEditing={this.onSearchSubmit}
-					squaredCorners
-					hasClear
-					// keyboardType={'numeric'}
-					returnKeyType={"done"}
-				/>
-			</View>
-		);
-	}
-
-	renderListHeader() {
-		const { ListHeaderComponent } = this.props;
-		return (
-			<View>
-				{ListHeaderComponent ? (
-					ListHeaderComponent
-				) : (
-					<View style={{ height: 8 }} />
-				)}
-				{this.renderFilterButton()}
-				{this.renderSearch()}
-			</View>
-		);
-	}
-
-	renderList() {
-		const { filteredList, loading } = this.state;
-
-		return (
-			<FlatList
-				keyboardShouldPersistTaps="always"
-				style={{ flex: 1 }}
-				contentContainerStyle={{ paddingBottom: 16 }}
-				data={filteredList}
-				keyExtractor={(item) => item.id}
-				renderItem={({ item }) => (
-					<MaintenanceListItem style={this.props.itemStyle} job={item} />
-				)}
-				ListEmptyComponent={this.renderEmptyList()}
-				ListHeaderComponent={this.renderListHeader()}
-				ListFooterComponent={this.renderListFooter()}
-				onEndReached={this.loadMore}
-				onEndReachedThreshold={0.5}
-				onRefresh={this.refresh}
-				refreshing={loading}
-			/>
-		);
-	}
-
-	renderListFooter = () => {
-		if (!this.state.loadingMore) return null;
-
-		return (
-			<View style={styles.loadingMore}>
-				<Components.LoadingIndicator visible={true} />
-			</View>
-		);
-	};
-
-	_showOverlay = (visible) => {
-		Animated.timing(this._overlayOpacity, {
-			toValue: visible ? 1 : 0,
-			duration: 200,
-			useNativeDriver: true,
-		}).start();
-	};
-
-	renderFilterOverlay() {
-		if (!this._filterApplying) return null;
-
-		return (
-			<Animated.View
-				style={[styles.filterOverlay, { opacity: this._overlayOpacity }]}
-				pointerEvents="none"
-			>
-				<View style={styles.filterOverlayInner}>
-					<Components.LoadingCircles />
-				</View>
-			</Animated.View>
-		);
-	}
-
-	renderFilterPopup() {
-		const { jobfilters } = this.props;
-		const { showFilterPopup, types } = this.state;
-		if (!showFilterPopup) return null;
-
-		return (
-			<FilterPopupMenu
-				site={this.props.site}
-				types={types}
-				status={jobfilters.status}
-				priority={jobfilters.priority}
-				assignee={jobfilters.assignee}
-				type={jobfilters.type}
-				onClose={this.onSelectFilter}
-			/>
-		);
-	}
-
-	render() {
-		return (
-			<View style={[styles.container, this.props.style]}>
-				{this.renderList()}
-				{this.renderFilterOverlay()}
-				{this.renderFilterPopup()}
-			</View>
-		);
-	}
+  _refreshCounter = 0;
+  _filterApplying = false;
+  _filterDataReady = false;
+  _overlayOpacity = new Animated.Value(0);
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      types: [],
+      filteredList: props.jobs,
+      loading: false,
+      loadingMore: false,
+      hasMore: true,
+      lastKey: null,
+      searchText: "",
+      showFilterPopup: false,
+    };
+  }
+
+  componentDidMount() {
+    this.props.jobStatusesUpdate(this.props.site);
+    this.props.jobHideSeenUpdate(this.props.site);
+    this.refresh();
+    this.refreshTypes();
+    this.resetDataSource();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.dataUpdated && this.props.dataUpdated) this.refresh();
+    if (
+      !_.isEqual(prevProps.jobs, this.props.jobs) ||
+      !_.isEqual(prevProps.jobfilters, this.props.jobfilters)
+    )
+      this.resetDataSource();
+  }
+
+  expandStatus = (status) => {
+    if (status !== "Incomplete") return status;
+    const { statusTypes } = this.props;
+    if (!statusTypes || !statusTypes.length) return status;
+    const incompleteStatuses = statusTypes
+      .filter((s) => s.category !== "Completed")
+      .map((s) => s.text);
+    return incompleteStatuses.length > 0
+      ? incompleteStatuses.join(",")
+      : status;
+  };
+
+  refresh = (overrideFilters) => {
+    const currentCounter = ++this._refreshCounter;
+    this.onLoadingChanged(true, async () => {
+      try {
+        const jobfilters = overrideFilters || this.props.jobfilters;
+        const res = await maintenanceActions.getJobs2(
+          this.props.site,
+          this.expandStatus(jobfilters.status),
+          jobfilters.priority,
+          jobfilters.type,
+          null, // No lastKey = first page
+          jobfilters.assignee,
+        );
+
+        // Discard stale responses from earlier filter changes
+        if (currentCounter !== this._refreshCounter) return;
+
+        const jobs = res.data.Items;
+        const lastKey = res.data.LastKey;
+
+        // Signal that the API response is ready before dispatching to Redux
+        this._filterDataReady = true;
+
+        // Always replace jobs on refresh (filters are server-side)
+        this.props.jobsLoaded(jobs);
+
+        // Reset filter flags directly in case resetDataSource never fires
+        // (e.g. when the list was already empty and jobsLoaded([]) doesn't
+        // trigger componentDidUpdate because _.isEqual([], []) is true)
+        if (this._filterApplying) {
+          this._filterApplying = false;
+          this._filterDataReady = false;
+          this._showOverlay(false);
+        }
+
+        this.setState({
+          lastKey,
+          hasMore: !!lastKey,
+        });
+      } catch (error) {
+        if (currentCounter !== this._refreshCounter) return;
+        console.log("refresh error", error);
+        this._filterApplying = false;
+        this._filterDataReady = false;
+        this._showOverlay(false);
+      } finally {
+        if (currentCounter === this._refreshCounter) {
+          this.onLoadingChanged(false);
+        }
+      }
+    });
+  };
+
+  loadMore = () => {
+    const { loading, loadingMore, hasMore, lastKey, searchText } = this.state;
+
+    // Don't load if already loading, no more pages, or during search
+    if (loading || loadingMore || !hasMore || !lastKey || searchText) return;
+
+    this.setState({ loadingMore: true }, async () => {
+      try {
+        const { jobfilters } = this.props;
+        const res = await maintenanceActions.getJobs2(
+          this.props.site,
+          this.expandStatus(jobfilters.status),
+          jobfilters.priority,
+          jobfilters.type,
+          lastKey,
+          jobfilters.assignee,
+        );
+
+        const newJobs = res.data.Items;
+        const newLastKey = res.data.LastKey;
+
+        // Append to existing jobs
+        this.props.jobsAdded(newJobs);
+
+        this.setState({
+          lastKey: newLastKey,
+          hasMore: !!newLastKey,
+        });
+      } catch (error) {
+        console.log("loadMore error", error);
+      } finally {
+        this.setState({ loadingMore: false });
+      }
+    });
+  };
+
+  refreshTypes = async () => {
+    const { data } = await maintenanceActions.getJobTypes(
+      Helper.getSite(this.props.site),
+    );
+    const types = data.map((t) => {
+      return { label: t.typeName, value: t.typeName };
+    });
+    types.splice(0, 0, { label: "All", value: "" });
+    // console.log('refreshTypes', types);
+    this.setState({ types });
+  };
+
+  fetchJob = (jobId) => {
+    if (this.state.loading) return;
+
+    this.onLoadingChanged(true, async () => {
+      try {
+        const job = await maintenanceActions.getJobByJobId(
+          this.props.site,
+          jobId,
+        );
+        // console.log('fetchJob', job?.data);
+        this.props.jobAdded(job.data);
+      } catch (error) {
+        console.log("fetchJob error", error);
+      } finally {
+        this.onLoadingChanged(false);
+      }
+    });
+  };
+
+  getEmptyStateText() {
+    if (this.props.options && !_.isEmpty(this.props.options.EmptyText)) {
+      return this.props.options.EmptyText;
+    }
+    return this.props.userCategory === "staff"
+      ? values.emptyRequestsStaff
+      : values.emptyRequestsUser;
+  }
+
+  resetDataSource = (source = "") => {
+    const { searchText } = this.state;
+    const { jobs, jobfilters } = this.props;
+
+    let filteredList = jobs;
+    let jobIdMatch = null;
+
+    // Note: status, priority, type, and assignee filters are applied server-side
+    // via getJobs2, so no client-side filtering needed for those
+
+    // Client-side search filtering (search is not supported server-side)
+    if (searchText) {
+      jobIdMatch = _.find(jobs, (j) => j.jobId === searchText);
+      filteredList = jobs.filter((j) => {
+        if (
+          j.room &&
+          j.room.toLowerCase().indexOf(searchText.toLowerCase()) > -1
+        ) {
+          return true;
+        }
+        return false;
+      });
+      if (!jobIdMatch) this.fetchJob(searchText);
+    }
+
+    if (jobIdMatch) {
+      const jobIndex = filteredList.indexOf(jobIdMatch);
+      if (jobIndex > -1) {
+        filteredList.splice(jobIndex, 1);
+      }
+      filteredList.unshift(jobIdMatch);
+    }
+
+    // During a filter transition, don't clear the list until the API
+    // response has arrived and been processed. This prevents the empty
+    // state from flashing when jobs transiently drop to [].
+    if (
+      this._filterApplying &&
+      !this._filterDataReady &&
+      filteredList.length === 0
+    ) {
+      return;
+    }
+
+    this.setState({ filteredList }, () => {
+      if (this._filterDataReady) {
+        this._filterApplying = false;
+        this._filterDataReady = false;
+        this._showOverlay(false);
+      }
+    });
+  };
+
+  onLoadingChanged = (loading, callback) => {
+    this.setState({ loading }, () => {
+      if (this.props.onLoadingChanged)
+        this.props.onLoadingChanged(this.state.loading);
+      if (callback) callback();
+    });
+  };
+
+  onSearchText = (value) => {
+    this.setState({ searchText: value }, () => {
+      if (_.isEmpty(this.state.searchText)) this.resetDataSource("search");
+    });
+  };
+
+  onSearchSubmit = () => {
+    this.resetDataSource("search");
+  };
+
+  onToggleFilter = () => {
+    this.setState({ showFilterPopup: !this.state.showFilterPopup });
+  };
+
+  onSelectFilter = (selected) => {
+    this._filterApplying = true;
+    this._filterDataReady = false;
+    this._showOverlay(true);
+    this.props.jobsFilterLoaded(selected);
+    this.onToggleFilter();
+    // Reset pagination but keep old list visible while loading
+    // Pass filters directly to avoid stale props from async Redux update
+    this.setState({ lastKey: null, hasMore: true }, () => {
+      this.refresh(selected);
+    });
+  };
+
+  getFilterButtonText = () => {
+    const { jobfilters } = this.props;
+    const filterTexts = [];
+    if (!_.isEmpty(jobfilters.status)) {
+      filterTexts.push(jobfilters.statusText);
+    }
+    if (!_.isEmpty(jobfilters.priority)) {
+      filterTexts.push(jobfilters.priorityText);
+    }
+    if (!_.isEmpty(jobfilters.type)) {
+      filterTexts.push(jobfilters.type);
+    }
+    if (!_.isEmpty(jobfilters.assignee)) {
+      filterTexts.push(jobfilters.assigneeName);
+    }
+    if (_.isEmpty(filterTexts)) {
+      return "Filter";
+    }
+    return `Filtering by ${filterTexts.join(", ")}`;
+  };
+
+  hasFiltersActive() {
+    const { jobfilters } = this.props;
+    return (
+      !_.isEmpty(jobfilters.status) ||
+      !_.isEmpty(jobfilters.priority) ||
+      !_.isEmpty(jobfilters.type) ||
+      !_.isEmpty(jobfilters.assignee)
+    );
+  }
+
+  clearFilters = () => {
+    const emptyFilters = {
+      status: "",
+      statusText: "",
+      priority: "",
+      priorityText: "",
+      type: "",
+      assignee: "",
+      assigneeName: "",
+    };
+    this.onSelectFilter(emptyFilters);
+  };
+
+  renderEmptyList() {
+    if (this.state.loading || this._filterApplying) return null;
+
+    const hasFilters = this.hasFiltersActive();
+
+    return (
+      <View style={{ marginHorizontal: 16 }}>
+        <Components.EmptyStateMain
+          title={
+            hasFilters
+              ? "No requests match your filters"
+              : this.getEmptyStateText()
+          }
+        />
+        {hasFilters && (
+          <TouchableOpacity
+            onPress={this.clearFilters}
+            style={[styles.clearFiltersButton, { alignSelf: "center" }]}
+          >
+            <Text
+              style={[
+                styles.clearFiltersText,
+                { color: this.props.colourBrandingMain },
+              ]}
+            >
+              Clear filters
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  }
+
+  renderFilterButton() {
+    return (
+      <TouchableOpacity onPress={this.onToggleFilter}>
+        <View style={styles.filterButton}>
+          <Text
+            style={[
+              styles.filterButtonText,
+              { color: this.props.colourBrandingMain },
+            ]}
+          >
+            {this.getFilterButtonText()}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  renderSearch() {
+    if (!this.props.hasPermission) return null;
+
+    return (
+      <View style={styles.searchContainer}>
+        <Components.GenericInput
+          placeholder={`Search by ${values.textEntityName} ID or Address`}
+          value={this.state.searchText}
+          onChangeText={this.onSearchText}
+          onSubmitEditing={this.onSearchSubmit}
+          squaredCorners
+          hasClear
+          // keyboardType={'numeric'}
+          returnKeyType={"done"}
+        />
+      </View>
+    );
+  }
+
+  renderListHeader() {
+    const { ListHeaderComponent } = this.props;
+    return (
+      <View>
+        {ListHeaderComponent ? (
+          ListHeaderComponent
+        ) : (
+          <View style={{ height: 8 }} />
+        )}
+        {this.renderFilterButton()}
+        {this.renderSearch()}
+      </View>
+    );
+  }
+
+  renderList() {
+    const { filteredList, loading } = this.state;
+
+    return (
+      <FlatList
+        keyboardShouldPersistTaps="always"
+        style={{ flex: 1 }}
+        contentContainerStyle={{ paddingBottom: 16 }}
+        data={filteredList}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <MaintenanceListItem style={this.props.itemStyle} job={item} />
+        )}
+        ListEmptyComponent={this.renderEmptyList()}
+        ListHeaderComponent={this.renderListHeader()}
+        ListFooterComponent={this.renderListFooter()}
+        onEndReached={this.loadMore}
+        onEndReachedThreshold={0.5}
+        onRefresh={this.refresh}
+        refreshing={loading}
+      />
+    );
+  }
+
+  renderListFooter = () => {
+    if (!this.state.loadingMore) return null;
+
+    return (
+      <View style={styles.loadingMore}>
+        <Components.LoadingIndicator visible={true} />
+      </View>
+    );
+  };
+
+  _showOverlay = (visible) => {
+    Animated.timing(this._overlayOpacity, {
+      toValue: visible ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  renderFilterOverlay() {
+    if (!this._filterApplying) return null;
+
+    return (
+      <Animated.View
+        style={[styles.filterOverlay, { opacity: this._overlayOpacity }]}
+        pointerEvents="none"
+      >
+        <View style={styles.filterOverlayInner}>
+          <Components.LoadingCircles />
+        </View>
+      </Animated.View>
+    );
+  }
+
+  renderFilterPopup() {
+    const { jobfilters } = this.props;
+    const { showFilterPopup, types } = this.state;
+    if (!showFilterPopup) return null;
+
+    return (
+      <FilterPopupMenu
+        site={this.props.site}
+        types={types}
+        status={jobfilters.status}
+        priority={jobfilters.priority}
+        assignee={jobfilters.assignee}
+        type={jobfilters.type}
+        onClose={this.onSelectFilter}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <View style={[styles.container, this.props.style]}>
+        {this.renderList()}
+        {this.renderFilterOverlay()}
+        {this.renderFilterPopup()}
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		backgroundColor: "#fff",
-	},
-	filterContainerOuter: {
-		flexDirection: "row",
-		justifyContent: "space-between",
-		alignItems: "center",
-		paddingHorizontal: 16,
-		paddingVertical: 16,
-	},
-	filterTitle: {
-		fontFamily: "sf-bold",
-		fontSize: 11,
-		letterSpacing: 0.8,
-		color: "#4d4d4d",
-	},
-	filterContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-	},
-	filterText: {
-		fontFamily: "sf-semibold",
-		fontSize: 16,
-		marginRight: 6,
-	},
-	filterIcon: {
-		fontSize: 20,
-	},
-	searchContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-		paddingBottom: 8,
-		paddingHorizontal: 16,
-	},
-	filterButton: {
-		paddingBottom: 8,
-		paddingHorizontal: 16,
-		flexDirection: "row-reverse",
-	},
-	filterButtonText: {
-		fontFamily: "sf-semibold",
-		fontSize: 16,
-	},
-	loadingMore: {
-		paddingVertical: 20,
-		alignItems: "center",
-	},
-	clearFiltersButton: {
-		marginTop: 12,
-		paddingVertical: 10,
-		paddingHorizontal: 24,
-		borderRadius: 8,
-		borderWidth: 1,
-		borderColor: "#ccc",
-		backgroundColor: "#f9f9f9",
-	},
-	clearFiltersText: {
-		fontFamily: "sf-semibold",
-		fontSize: 15,
-	},
-	filterOverlay: {
-		...StyleSheet.absoluteFillObject,
-		justifyContent: "center",
-		alignItems: "center",
-		backgroundColor: "rgba(255, 255, 255, 0.7)",
-	},
-	filterOverlayInner: {
-		padding: 20,
-		borderRadius: 12,
-	},
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  filterContainerOuter: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+  },
+  filterTitle: {
+    fontFamily: "sf-bold",
+    fontSize: 11,
+    letterSpacing: 0.8,
+    color: "#4d4d4d",
+  },
+  filterContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  filterText: {
+    fontFamily: "sf-semibold",
+    fontSize: 16,
+    marginRight: 6,
+  },
+  filterIcon: {
+    fontSize: 20,
+  },
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+  },
+  filterButton: {
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+    flexDirection: "row-reverse",
+  },
+  filterButtonText: {
+    fontFamily: "sf-semibold",
+    fontSize: 16,
+  },
+  loadingMore: {
+    paddingVertical: 20,
+    alignItems: "center",
+  },
+  clearFiltersButton: {
+    marginTop: 12,
+    paddingVertical: 10,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#ccc",
+    backgroundColor: "#f9f9f9",
+  },
+  clearFiltersText: {
+    fontFamily: "sf-semibold",
+    fontSize: 15,
+  },
+  filterOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.7)",
+  },
+  filterOverlayInner: {
+    padding: 20,
+    borderRadius: 12,
+  },
 });
 
 const mapStateToProps = (state) => {
-	const { user, notifications } = state;
-	const jobs = state[values.reducerKey];
-	const jobsOrdered = _.orderBy(jobs.jobs, ["createdUnix"], ["desc"]);
-	const hasPermission = _.includes(user.permissions, "maintenanceTracking");
-
-	return {
-		hasPermission,
-		jobs: jobsOrdered,
-		site: user.site,
-		userCategory: user.category,
-		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-		dataUpdated: notifications.dataUpdated[values.updateKey],
-		statusTypes: state[values.reducerKey].jobstatuses,
-		jobfilters: state[values.reducerKey].jobfilters || {},
-	};
+  const { user, notifications } = state;
+  const jobs = state[values.reducerKey];
+  const jobsOrdered = _.orderBy(jobs.jobs, ["createdUnix"], ["desc"]);
+  const hasPermission = _.includes(user.permissions, "maintenanceTracking");
+
+  return {
+    hasPermission,
+    jobs: jobsOrdered,
+    site: user.site,
+    userCategory: user.category,
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    dataUpdated: notifications.dataUpdated[values.updateKey],
+    statusTypes: state[values.reducerKey].jobstatuses,
+    jobfilters: state[values.reducerKey].jobfilters || {},
+  };
 };
 
 export default connect(
-	mapStateToProps,
-	{
-		jobsLoaded,
-		jobAdded,
-		jobsAdded,
-		jobStatusesUpdate,
-		jobHideSeenUpdate,
-		jobsFilterLoaded,
-	},
-	null,
-	{
-		forwardRef: true,
-	},
+  mapStateToProps,
+  {
+    jobsLoaded,
+    jobAdded,
+    jobsAdded,
+    jobStatusesUpdate,
+    jobHideSeenUpdate,
+    jobsFilterLoaded,
+  },
+  null,
+  {
+    forwardRef: true,
+  },
 )(MaintenanceList);