Add env var to defer full retrieval of phone numbers (#518)

* Add env var to defer full retrieval of phone numbers

* wip

* wip

* wip

.env

@@ -29,4 +29,6 @@
 ## ignore some specific speech vendors, defined by ADDITIONAL_SPEECH_VENDORS constant
 # VITE_APP_DISABLE_ADDITIONAL_SPEECH_VENDORS=true
 ## AWS region for enabling Recent Call Feature server logs
-#VITE_APP_AWS_REGION=us-west-2
+#VITE_APP_AWS_REGION=us-west-2
+## enable lazy loading for phone numbers (improves performance when managing large quantities)
+# VITE_APP_ENABLE_PHONE_NUMBER_LAZY_LOAD=true

src/api/constants.ts

@@ -33,6 +33,7 @@ interface JambonzWindowObject {
   STRIPE_PUBLISHABLE_KEY: string;
   DISABLE_ADDITIONAL_SPEECH_VENDORS: string;
   AWS_REGION: string;
+  ENABLE_PHONE_NUMBER_LAZY_LOAD: string;
 }
 
 declare global {
@@ -91,6 +92,10 @@ export const DISABLE_ADDITIONAL_SPEECH_VENDORS: boolean =
 export const AWS_REGION: string =
   window.JAMBONZ?.AWS_REGION || import.meta.env.VITE_APP_AWS_REGION;
 
+export const ENABLE_PHONE_NUMBER_LAZY_LOAD: boolean =
+  window.JAMBONZ?.ENABLE_PHONE_NUMBER_LAZY_LOAD === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_ENABLE_PHONE_NUMBER_LAZY_LOAD || "false");
+
 export const DEFAULT_SERVICE_PROVIDER_SID: string =
   window.JAMBONZ?.DEFAULT_SERVICE_PROVIDER_SID ||
   import.meta.env.VITE_APP_DEFAULT_SERVICE_PROVIDER_SID;

src/api/index.ts

@@ -96,6 +96,7 @@ import type {
   GoogleCustomVoicesQuery,
   SpeechSupportedLanguagesAndVoices,
   AppEnv,
+  PhoneNumberQuery,
 } from "./types";
 import { Availability, StatusCodes } from "./types";
 import { JaegerRoot } from "./jaeger-types";
@@ -899,6 +900,12 @@ export const getPrice = () => {
   return getFetch<PriceInfo[]>(API_PRICE);
 };
 
+export const getPhoneNumbers = (query: Partial<PhoneNumberQuery>) => {
+  const qryStr = getQuery<Partial<PhoneNumberQuery>>(query);
+
+  return getFetch<PhoneNumber[]>(`${API_PHONE_NUMBERS}?${qryStr}`);
+};
+
 export const getSpeechSupportedLanguagesAndVoices = (
   sid: string | undefined,
   vendor: string,

src/api/types.ts

@@ -562,6 +562,11 @@ export interface PageQuery {
   days?: number;
 }
 
+export interface PhoneNumberQuery extends PageQuery {
+  account_sid?: string;
+  filter?: string;
+}
+
 export interface CallQuery extends PageQuery {
   direction?: string;
   answered?: string;

src/containers/internal/views/phone-numbers/index.tsx

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 
 import {
   deletePhoneNumber,
+  getPhoneNumbers,
   putPhoneNumber,
   useServiceProviderData,
 } from "src/api";
@@ -30,7 +31,7 @@ import {
 import { DeletePhoneNumber } from "./delete";
 
 import type { Account, PhoneNumber, Carrier, Application } from "src/api/types";
-import { USER_ACCOUNT } from "src/api/constants";
+import { ENABLE_PHONE_NUMBER_LAZY_LOAD, USER_ACCOUNT } from "src/api/constants";
 import { ScopedAccess } from "src/components/scoped-access";
 import { Scope } from "src/store/types";
 import { getAccountFilter, setLocation } from "src/store/localStore";
@@ -41,8 +42,7 @@ export const PhoneNumbers = () => {
   const [applications] = useServiceProviderData<Application[]>("Applications");
   const [carriers] = useServiceProviderData<Carrier[]>("VoipCarriers");
   const [phoneNumber, setPhoneNumber] = useState<PhoneNumber | null>(null);
-  const [phoneNumbers, refetch] =
+  const [phoneNumbers, setPhoneNumbers] = useState<PhoneNumber[] | null>(null);
-    useServiceProviderData<PhoneNumber[]>("PhoneNumbers");
   const [selectedPhoneNumbers, setSelectedPhoneNumbers] = useState<
     PhoneNumber[]
   >([]);
@@ -59,12 +59,30 @@ export const PhoneNumbers = () => {
           (phn) => !accountSid || phn.account_sid === accountSid,
         )
       : [];
-  }, [accountSid, phoneNumbers]);
+  }, [phoneNumbers, ...[!ENABLE_PHONE_NUMBER_LAZY_LOAD && accountSid]]);
 
-  const filteredPhoneNumbers = useFilteredResults<PhoneNumber>(
+  const filteredPhoneNumbers = !ENABLE_PHONE_NUMBER_LAZY_LOAD
-    filter,
+    ? useFilteredResults<PhoneNumber>(filter, phoneNumbersFiltered)
-    phoneNumbersFiltered,
+    : phoneNumbersFiltered;
-  );
+
+  const refetch = () => {
+    getPhoneNumbers(
+      !ENABLE_PHONE_NUMBER_LAZY_LOAD
+        ? {}
+        : {
+            ...(accountSid && { account_sid: accountSid }),
+            ...(filter && { filter }),
+          },
+    )
+      .then(({ json }) => {
+        if (json) {
+          setPhoneNumbers(json);
+        }
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      });
+  };
 
   const handleMassEdit = () => {
     Promise.all(
@@ -114,6 +132,15 @@ export const PhoneNumbers = () => {
     }
   }, [user]);
 
+  useEffect(() => {
+    if (ENABLE_PHONE_NUMBER_LAZY_LOAD) {
+      setPhoneNumbers([]);
+      return;
+    }
+
+    refetch();
+  }, []);
+
   return (
     <>
       <section className="mast">
@@ -141,6 +168,19 @@ export const PhoneNumbers = () => {
             defaultOption
           />
         </ScopedAccess>
+        {ENABLE_PHONE_NUMBER_LAZY_LOAD && (
+          <ButtonGroup>
+            <Button
+              small
+              onClick={() => {
+                setPhoneNumbers(null);
+                refetch();
+              }}
+            >
+              Search
+            </Button>
+          </ButtonGroup>
+        )}
       </section>
       <Section {...(hasLength(filteredPhoneNumbers) && { slim: true })}>
         <div className="list">