Fix MS Teams view bug for #113 (#114)

src/containers/internal/views/ms-teams-tenants/form.tsx

@@ -2,7 +2,12 @@ import React, { useEffect, useState } from "react";
 import { Button, ButtonGroup, MS } from "jambonz-ui";
 import { Link, useNavigate } from "react-router-dom";
 
-import { postMsTeamsTentant, putMsTeamsTenant, useApiData } from "src/api";
+import {
+  postMsTeamsTentant,
+  putMsTeamsTenant,
+  useApiData,
+  useServiceProviderData,
+} from "src/api";
 import { Section } from "src/components";
 import {
   Message,
@@ -33,8 +38,8 @@ export const MsTeamsTenantForm = ({
 }: MsTeamsTenantFormProps) => {
   const navigate = useNavigate();
   const currentServiceProvider = useSelectState("currentServiceProvider");
-  const [accounts] = useApiData<Account[]>("Accounts");
-  const [applications] = useApiData<Application[]>("Applications");
+  const [accounts] = useServiceProviderData<Account[]>("Accounts");
+  const [applications] = useServiceProviderData<Application[]>("Applications");
   const [msTeamsTenants] = useApiData<MSTeamsTenant[]>("MicrosoftTeamsTenants");
   const [domainName, setDomainName] = useState("");
   const [accountSid, setAccountSid] = useState("");
@@ -141,8 +146,15 @@ export const MsTeamsTenantForm = ({
         </fieldset>
         <fieldset>
           <ApplicationSelect
+            defaultOption="Choose application"
             application={[applicationSid, setApplicationSid]}
-            applications={applications}
+            applications={
+              applications
+                ? applications.filter(
+                    (application) => application.account_sid === accountSid
+                  )
+                : []
+            }
           />
         </fieldset>
         {message && <fieldset>{<Message message={message} />}</fieldset>}

src/containers/internal/views/ms-teams-tenants/index.tsx

@@ -1,8 +1,12 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { Button, H1, Icon, M } from "jambonz-ui";
 import { Link } from "react-router-dom";
 
-import { deleteMsTeamsTenant, useApiData } from "src/api";
+import {
+  deleteMsTeamsTenant,
+  useApiData,
+  useServiceProviderData,
+} from "src/api";
 import {
   hasLength,
   hasValue,
@@ -10,7 +14,13 @@ import {
   useFilteredResults,
 } from "src/utils";
 import { toastError, toastSuccess } from "src/store";
-import { Icons, Section, Spinner, SearchFilter } from "src/components";
+import {
+  Icons,
+  Section,
+  Spinner,
+  SearchFilter,
+  AccountFilter,
+} from "src/components";
 import {
   ROUTE_INTERNAL_ACCOUNTS,
   ROUTE_INTERNAL_MS_TEAMS_TENANTS,
@@ -27,13 +37,22 @@ export const MSTeamsTenants = () => {
   const [msTeamsTenants, refetch] = useApiData<MSTeamsTenant[]>(
     "MicrosoftTeamsTenants"
   );
-  const [accounts] = useApiData<Account[]>("Accounts");
-  const [applications] = useApiData<Application[]>("Applications");
+  const [accounts] = useServiceProviderData<Account[]>("Accounts");
+  const [applications] = useServiceProviderData<Application[]>("Applications");
   const [filter, setFilter] = useState("");
+  const [accountSid, setAccountSid] = useState("");
+
+  const msTeamsTenantsFiltered = useMemo(() => {
+    return msTeamsTenants
+      ? msTeamsTenants.filter(
+          (mst) => !accountSid || mst.account_sid === accountSid
+        )
+      : [];
+  }, [accountSid, msTeamsTenants]);
 
   const filteredMsTeamsTenants = useFilteredResults<MSTeamsTenant>(
     filter,
-    msTeamsTenants
+    msTeamsTenantsFiltered
   );
 
   const handleDelete = () => {
@@ -75,6 +94,11 @@ export const MSTeamsTenants = () => {
           placeholder="Filter ms teams tenants"
           filter={[filter, setFilter]}
         />
+        <AccountFilter
+          account={[accountSid, setAccountSid]}
+          accounts={accounts}
+          defaultOption
+        />
       </section>
       <Section {...(hasLength(filteredMsTeamsTenants) ? { slim: true } : {})}>
         <div className="list">

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

@@ -50,7 +50,7 @@ export const PhoneNumbers = () => {
   const phoneNumbersFiltered = useMemo(() => {
     return phoneNumbers
       ? phoneNumbers.filter(
-          (phoneNumber) => !accountSid || phoneNumber.account_sid === accountSid
+          (phn) => !accountSid || phn.account_sid === accountSid
         )
       : [];
   }, [accountSid, phoneNumbers]);