Simplify getting more sources

skyportal · Dec 30, 2023 · c718671 · c718671
1 parent 61f988a
commit c718671
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 21 deletions.
diff --git a/app/(tabs)/sources.jsx b/app/(tabs)/sources.jsx
@@ -4,7 +4,7 @@ import { Link } from "expo-router";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import dayjs from "dayjs";
 import calendar from "dayjs/plugin/calendar";
-import { Text, View } from "../../components/Themed.tsx";
+import { Text, View, Button } from "../../components/Themed.tsx";
 
 import { ra_to_hours, dec_to_dms } from "../../components/units";
 import { GET } from "../../components/API";
@@ -15,10 +15,12 @@ dayjs.extend(calendar);
 
 function Sources() {
   const [sources, setSources] = useState(null);
+  const [page, setPage] = useState(1);
+  const [sourceFilter, setSourceFilter] = useState("");
   const [userData, setUserData] = useState(null);
   const [queryStatus, setQueryStatus] = useState(false);
 
-  const handleApiCall = (sourceFilter) => {
+  useEffect(() => {
     // Show loading indicator
     setQueryStatus(true);
 
@@ -27,13 +29,11 @@ function Sources() {
     // Define parameters
     const params = {
       numPerPage: 10,
+      pageNumber: page,
       includeThumbnails: true,
-      includeComments: true,
-      includeDetectionStats: true,
       sourceID: sourceFilter,
       sortBy: "saved_at",
-      sort_order: "asc",
-      // Add any other parameters as needed
+      sort_order: "desc",
     };
 
     async function fetchData() {
@@ -43,7 +43,7 @@ function Sources() {
     }
 
     fetchData();
-  };
+  }, [page, sourceFilter]);
 
   useEffect(() => {
     async function fetchUserData() {
@@ -119,9 +119,20 @@ function Sources() {
     );
   };
 
+  const handleLoadMore = () => {
+    if (!queryStatus) {
+      setPage((prevPage) => prevPage + 1);
+    }
+  };
+
   return (
     <View>
-      <SourceQuery handleApiCall={handleApiCall} queryStatus={queryStatus} />
+      <SourceQuery
+        sourceFilter={sourceFilter}
+        setSourceFilter={setSourceFilter}
+        queryStatus={queryStatus}
+      />
+      <Button title="Load More" onPress={handleLoadMore} />
       {!queryStatus && sources ? (
         <View>
           {/* Use FlatList to render the list */}

diff --git a/components/SourceQuery.jsx b/components/SourceQuery.jsx
@@ -1,24 +1,16 @@
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import {
   View,
   TextInput,
   Text,
   ActivityIndicator,
-  Alert,
   TouchableOpacity,
 } from "react-native";
 
-function SourceQuery({ handleApiCall, queryStatus }) {
-  const [sourceFilter, setSourceFilter] = useState("");
-
+function SourceQuery({ sourceFilter, setSourceFilter, queryStatus }) {
   const handleSourceQuery = async () => {
-    try {
-      // Trigger the API call
-      await handleApiCall(sourceFilter);
-    } catch (error) {
-      Alert.alert("Error", `An error occurred during the API call: ${error}`);
-    }
+    setSourceFilter(sourceFilter);
   };
 
   return (
@@ -50,7 +42,7 @@ function SourceQuery({ handleApiCall, queryStatus }) {
           flexDirection: "row",
         }}
         onPress={handleSourceQuery}
-        disabled={queryStatus} // Disable the button while loading
+        disabled={queryStatus}
       >
         {queryStatus ? (
           <ActivityIndicator
@@ -67,7 +59,8 @@ function SourceQuery({ handleApiCall, queryStatus }) {
 }
 
 SourceQuery.propTypes = {
-  handleApiCall: PropTypes.func.isRequired,
+  sourceFilter: PropTypes.string.isRequired,
+  setSourceFilter: PropTypes.func.isRequired,
   queryStatus: PropTypes.bool.isRequired,
 };