Implement refresh on pull.

src/Authorities.tsx

@@ -3,6 +3,7 @@ import { Suspense } from "react";
 import { FlatList, Text } from "react-native";
 
 import { getAuthorities } from "./FSA";
+import { useRefresh } from "./useRefresh";
 
 const queryKey = ["authorities"];
 
@@ -16,12 +17,18 @@ const Fallback = () => <Text>loading...</Text>;
 // https://react.dev/reference/react/Suspense suggests can use Suspense in same component
 // that can suspend, but that doesn't work, so need a separate component.
 const AuthoritiesImpl = () => {
-  const { data } = useSuspenseQuery({ queryKey, queryFn: getAuthorities });
+  const { data, refetch } = useSuspenseQuery({
+    queryKey,
+    queryFn: getAuthorities,
+  });
+  const { refreshing, onRefresh } = useRefresh(refetch);
   return (
     <FlatList
       data={data}
       renderItem={({ item }) => <Item name={item.name} />}
       keyExtractor={(item) => item.localAuthorityId.toString()}
+      onRefresh={onRefresh}
+      refreshing={refreshing}
     />
   );
 };

src/FSA.tsx

@@ -13,5 +13,6 @@ export const getAuthorities: () => Promise<LocalAuthority[]> = async () => {
     "https://aws.jeremygreen.me.uk/api/fsa/localAuthority",
   );
   const json = (await authorities.json()) as unknown as LocalAuthorities;
-  return json.localAuthorities;
+  const { localAuthorities } = json;
+  return localAuthorities;
 };

src/useRefresh.tsx

@@ -0,0 +1,21 @@
+import { useState } from "react";
+
+// Connects https://reactnative.dev/docs/flatlist onRefresh()/refreshing with refetch()
+// returned by https://tanstack.com/query/v4/docs/framework/react/reference/useQuery
+export function useRefresh<T>(refetch: () => Promise<T>) {
+  const [refreshing, setRefreshing] = useState(false);
+
+  async function onRefresh() {
+    setRefreshing(true);
+    try {
+      await refetch();
+    } finally {
+      setRefreshing(false);
+    }
+  }
+
+  return {
+    refreshing,
+    onRefresh,
+  };
+}