refined method for applications index

src/api/index.ts

@@ -36,7 +36,6 @@ import type {
   Alert,
   PagedResponse,
   RecentCall,
-  Application,
 } from "./types";
 
 /** Wrap all requests to normalize response handling */
@@ -283,10 +282,6 @@ export const getAccountWebhook = (sid: string) => {
   );
 };
 
-export const getApplications = (sid: string) => {
-  return getFetch<Application[]>(`${API_ACCOUNTS}/${sid}/Applications`);
-};
-
 /** Wrappers for APIs that can have a mock dev server response */
 
 export const getRecentCalls = (sid: string) => {

src/containers/internal/views/applications/index.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import { H1, Button, Icon } from "jambonz-ui";
 import { Link } from "react-router-dom";
 
-import { deleteApplication, getApplications, getFetch } from "src/api";
-import { API_APPLICATIONS } from "src/api/constants";
+import { deleteApplication, getFetch } from "src/api";
+import { API_ACCOUNTS } from "src/api/constants";
 import { ROUTE_INTERNAL_APPLICATIONS } from "src/router/routes";
 import { Icons, Section, Spinner, AccountFilter } from "src/components";
 import { DeleteApplication } from "./delete";
@@ -16,13 +16,11 @@ export const Applications = () => {
   const [applications, setApplications] = useState<Application[] | null>(null);
   const [application, setApplication] = useState<Application | null>(null);
 
-  const [refetch, setRefetch] = useState(0);
-
   const handleDelete = () => {
     if (application) {
       deleteApplication(application.application_sid)
         .then(() => {
-          setRefetch(refetch + 1);
+          getApplications();
           setApplication(null);
           toastSuccess(
             <>
@@ -36,22 +34,19 @@ export const Applications = () => {
     }
   };
 
+  const getApplications = () => {
+    getFetch<Application[]>(`${API_ACCOUNTS}/${accountSid}/Applications`)
+      .then(({ json }) => setApplications(json))
+      .catch((error) => {
+        toastError(error.msg);
+      });
+  };
+
   useEffect(() => {
     if (accountSid) {
-      getApplications(accountSid)
-        .then(({ json }) => setApplications(json))
-        .catch((error) => {
-          toastError(error.msg);
-        });
-    } else {
-      // accountSid is null is "All accounts"
-      getFetch<Application[]>(API_APPLICATIONS)
-        .then(({ json }) => setApplications(json))
-        .catch((error) => {
-          toastError(error.msg);
-        });
+      getApplications();
     }
-  }, [accountSid, refetch]);
+  }, [accountSid]);
 
   return (
     <>
@@ -67,11 +62,7 @@ export const Applications = () => {
         </Link>
       </section>
       <section className="filters">
-        <AccountFilter
-          label="Used by"
-          account={[accountSid, setAccountSid]}
-          defaultOption
-        />
+        <AccountFilter account={[accountSid, setAccountSid]} />
       </section>
       <Section
         {...(applications && applications.length > 0 ? { slim: true } : {})}