Merge branch 'CE-2064-convert-useIocSearch' into 'develop'

Resolve CE-2064 "Convert useiocsearch"

See merge request !346

src/api/SwaggerApi.js

@@ -205,13 +205,6 @@ export function unpackIocInfo(ioc) {
   return ioc;
 }
 
-const emptyIocListResponse = {
-  totalCount: 0,
-  pageNumber: 0,
-  limit: 0,
-  iocList: []
-};
-
 export function unpackIOCList(iocs) {
   let iocArray = iocs.iocList.map((ioc) => unpackIocInfo(ioc));
 
@@ -225,21 +218,6 @@ export function unpackIOCList(iocs) {
   return unpackedIOCList;
 }
 
-export function useIOCList() {
-  const api = useContext(apiContext);
-  const method = useCallAndUnpack(api.apis.IOCs.listIocs, unpackIOCList);
-  return useAsync({ fcn: method, init: emptyIocListResponse });
-}
-
-export function useIOCSearch() {
-  const api = useContext(apiContext);
-  const method = useCallAndUnpack(
-    (params) => api.apis.IOCs.listIocs(params),
-    unpackIOCList
-  );
-  return useAsync({ fcn: method, call: false, init: emptyIocListResponse });
-}
-
 export function useCreateIOC(onError) {
   const api = useContext(apiContext);
   const method = useCallAndUnpack(

src/components/IOC/IOCAsyncList/IOCAsyncList.js

-import React from "react";
-import { useMediaQuery } from "@mui/material";
-import { IOCList } from "../IOCList";
-import { IOCTable } from "../IOCTable";
-
-export function IOCAsyncList({
-  iocs,
-  setIocs,
-  rowType,
-  pagination,
-  onPage,
-  loading
-}) {
-  const smUp = useMediaQuery((theme) => theme.breakpoints.up("sm"));
-  const smDown = useMediaQuery((theme) => theme.breakpoints.down("sm"));
-
-  return (
-    <>
-      {smDown ? <IOCList iocs={iocs} /> : null}
-      {smUp ? (
-        <IOCTable
-          iocs={iocs}
-          setIocs={setIocs}
-          loading={loading}
-          rowType={rowType}
-          pagination={pagination}
-          onPage={onPage}
-        />
-      ) : null}
-    </>
-  );
-}

src/components/IOC/IOCAsyncList/index.js

-import { IOCAsyncList } from "./IOCAsyncList";
-
-export { IOCAsyncList };
-export default IOCAsyncList;

src/components/IOC/IOCTable/IOCTable.js

 import React from "react";
 import { Table } from "@ess-ics/ce-ui-common";
-import { Link } from "@mui/material";
+import { Link, useMediaQuery } from "@mui/material";
 import { IOCDescription } from "./IOCDescription";
 import { IOCStatus } from "./IOCStatus";
 import { noWrapText } from "../../common/Helper";
+import IOCList from "../IOCList";
 
 const ownIocsColumns = [
   {
@@ -146,12 +147,15 @@ function createTableRowForExploreIocs(ioc) {
 }
 
 export function IOCTable({
-  iocs,
+  iocs = [],
   rowType = "own",
   loading,
   pagination,
   onPage
 }) {
+  const smUp = useMediaQuery((theme) => theme.breakpoints.up("sm"));
+  const smDown = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+
   const tableTypeSpecifics = {
     own: [ownIocsColumns, createTableRowForOwnIocs],
     host: [hostDetailsColumns, createTableRowForHostDetails],
@@ -162,12 +166,17 @@ export function IOCTable({
   const rows = iocs.map((ioc) => createRow(ioc));
 
   return (
-    <Table
-      columns={columns}
-      rows={rows}
-      pagination={pagination}
-      onPage={onPage}
-      loading={loading}
-    />
+    <>
+      {smDown ? <IOCList iocs={iocs} /> : null}
+      {smUp ? (
+        <Table
+          columns={columns}
+          rows={rows}
+          pagination={pagination}
+          onPage={onPage}
+          loading={loading}
+        />
+      ) : null}
+    </>
   );
 }

src/components/common/User/UserIOCList.js

-import React from "react";
+import React, { useContext } from "react";
 import { Card, CardHeader } from "@mui/material";
-import { useState, useEffect } from "react";
-import { useIOCSearch } from "../../../api/SwaggerApi";
-import { IOCAsyncList } from "../../IOC/IOCAsyncList";
+import { useEffect } from "react";
 import { initRequestParams } from "../Helper";
 import { usePagination } from "../../../hooks/pagination";
+import IOCTable from "../../IOC/IOCTable";
+import { apiContext } from "../../../api/DeployApi";
+import { useAPIMethod } from "@ess-ics/ce-ui-common";
 
 export function UserIocList({ userName }) {
-  const [iocs, getIocs, , loading] = useIOCSearch();
-  const [iocList, setIocList] = useState([]);
+  const client = useContext(apiContext);
 
-  // Sync manipulatable ioc list copy
-  useEffect(() => {
-    setIocList(iocs.iocList);
-  }, [iocs, setIocList]);
+  const {
+    value: iocs,
+    wrapper: getIocs,
+    loading,
+    dataReady
+  } = useAPIMethod({
+    fcn: client.apis.IOCs.listIocs,
+    call: false
+  });
 
   const rowsPerPage = [20, 50];
   const { pagination, setPagination } = usePagination({
@@ -24,8 +29,8 @@ export function UserIocList({ userName }) {
 
   // update pagination whenever search result total pages change
   useEffect(() => {
-    setPagination({ totalCount: iocs.totalCount ?? 0 });
-  }, [setPagination, iocs.totalCount]);
+    setPagination({ totalCount: iocs?.totalCount ?? 0 });
+  }, [setPagination, iocs?.totalCount]);
 
   // Request more results when pagination changes
   useEffect(() => {
@@ -50,10 +55,9 @@ export function UserIocList({ userName }) {
           component: "h2"
         }}
       />
-      <IOCAsyncList
-        iocs={iocList}
-        setIocs={setIocList}
-        loading={loading}
+      <IOCTable
+        iocs={iocs?.iocList}
+        loading={loading || !dataReady}
         rowType="explore"
         pagination={pagination}
         onPage={onPage}

src/views/IOC/IOCListView.js

 import React, { useState, useEffect, useContext, useCallback } from "react";
 import { Container, Grid, Typography, Tabs, Tab } from "@mui/material";
-import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
-import { IOCAsyncList } from "../../components/IOC/IOCAsyncList";
-import { useIOCSearch } from "../../api/SwaggerApi";
+import {
+  GlobalAppBarContext,
+  RootPaper,
+  useAPIMethod
+} from "@ess-ics/ce-ui-common";
 import {
   applicationTitle,
   initRequestParams
@@ -15,19 +17,24 @@ import {
 } from "../../components/common/URLState/URLState";
 import { usePagination } from "../../hooks/pagination";
 import { useMemo } from "react";
-import { RootPaper } from "@ess-ics/ce-ui-common/dist/components/common/container/RootPaper";
+import IOCTable from "../../components/IOC/IOCTable";
+import { apiContext } from "../../api/DeployApi";
 
 export function IOCListView() {
   const { setTitle } = useContext(GlobalAppBarContext);
   useEffect(() => setTitle(applicationTitle("IOCs")), [setTitle]);
 
-  const [iocs, getIocs /* reset*/, , loading] = useIOCSearch();
-  const [iocList, setIocList] = useState([]);
+  const client = useContext(apiContext);
 
-  // Sync manipulatable ioc list copy
-  useEffect(() => {
-    setIocList(iocs.iocList);
-  }, [iocs, setIocList]);
+  const {
+    value: iocs,
+    wrapper: getIocs,
+    loading,
+    dataReady
+  } = useAPIMethod({
+    fcn: client.apis.IOCs.listIocs,
+    call: false
+  });
 
   const [urlState, setUrlState] = useUrlState(
     {
@@ -94,8 +101,8 @@ export function IOCListView() {
 
   // update pagination whenever search result total pages change
   useEffect(() => {
-    setPagination({ totalCount: iocs.totalCount ?? 0 });
-  }, [setPagination, iocs.totalCount]);
+    setPagination({ totalCount: iocs?.totalCount ?? 0 });
+  }, [setPagination, iocs?.totalCount]);
 
   // whenever url state changes, update pagination
   useEffect(() => {
@@ -139,10 +146,9 @@ export function IOCListView() {
       loading={loading}
       placeholder="Search in IOC name"
     >
-      <IOCAsyncList
-        iocs={iocList}
-        setIocs={setIocList}
-        loading={loading}
+      <IOCTable
+        iocs={iocs?.iocList}
+        loading={loading || !dataReady}
         rowType="explore"
         pagination={pagination}
         onPage={onPage}

src/views/host/HostDetailsView.js

-import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useContext,
-  useMemo
-} from "react";
+import React, { useEffect, useCallback, useContext, useMemo } from "react";
 import {
   Link,
   Container,
@@ -19,7 +13,6 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { useHostIOCList } from "../../api/SwaggerApi";
 import { HostBadge } from "../../components/host/HostBadge";
 import { SimpleAccordion } from "../../components/common/Accordion/SimpleAccordion";
-import { IOCAsyncList } from "../../components/IOC/IOCAsyncList";
 import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
 import { LokiPanel } from "../../components/common/Loki/LokiPanel";
 import { useNavigate, Link as ReactRouterLink } from "react-router-dom";
@@ -38,6 +31,7 @@ import {
 import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
 import { usePagination } from "../../hooks/pagination";
 import { RootPaper } from "@ess-ics/ce-ui-common";
+import IOCTable from "../../components/IOC/IOCTable";
 
 export function HostDetailsView({ id }) {
   const [host] = useHost(id);
@@ -49,11 +43,6 @@ export function HostDetailsView({ id }) {
   }, [host, setTitle]);
 
   const [iocs, getIocs /* reset*/, , loading] = useHostIOCList();
-  const [deployedIocs, setDeployedIocs] = useState([]);
-  // Sync manipulatable ioc list copy
-  useEffect(() => {
-    setDeployedIocs(iocs?.deployedList ?? []);
-  }, [iocs, setDeployedIocs]);
 
   const [urlState, setUrlState] = useUrlState(
     {
@@ -203,9 +192,8 @@ export function HostDetailsView({ id }) {
           setUrlState({ iocs_open: serialize(expanded) })
         }
       >
-        <IOCAsyncList
-          iocs={deployedIocs}
-          setIocs={setDeployedIocs}
+        <IOCTable
+          iocs={iocs?.deployedList}
           loading={loading}
           rowType="host"
           pagination={pagination}