implement hosted UI

Signed-off-by: Harsh Modi <[email protected]>

src/main/webui/src/app/components/content/hosted/HostedList.jsx

@@ -14,9 +14,109 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, {useEffect, useState} from "react";
+import {useParams} from "react-router-dom";
+import {ListJsonDebugger} from "../common/Debugger.jsx";
+import ListControl from "../common/ListControl.jsx";
+import {hostedOptionLegend as options} from "../../ComponentConstants.js";
+import {StoreListingWidget} from "../common/StoreListingWidget.jsx";
+import {LoadingSpiner} from "../common/LoadingSpiner.jsx";
+import {Utils} from "#utils/AppUtils.js";
+import {IndyRest} from "#utils/RestClient.js";
 
+const {storeRes, disableRes} = IndyRest;
+
+const handlers = {
+  handleDebug: (event, setState) => {
+    setState({
+      enableDebug: event.target.checked,
+    });
+  },
+  handleSearch: (event, rawList, setState) => {
+    setState({
+      rawList,
+      listing: Utils.searchByKeyForNewStores(event.target.value, rawList),
+    });
+  },
+  handleSortBy: (event, rawList, setState) => {
+    setState({
+      rawList,
+      listing: Utils.sortByPropForStores(event.target.value, rawList),
+    });
+  },
+};
 
 export default function HostedList() {
-  return <div>This is not implemented yet</div>;
+  const {packageType} = useParams();
+  const [state, setState] = useState({
+    rawList: [],
+    listing: [],
+    disabledMap: {},
+    enableDebug: false,
+    message: "",
+  });
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    const fetchdData = async () => {
+      const res = await storeRes.getStores(packageType, "hosted");
+      if (res.success) {
+        const timeoutRes = await disableRes.getAllStoreTimeout();
+        let disabledMap = {};
+        if (timeoutRes.success) {
+          const timeoutData = timeoutRes.result;
+          disabledMap = Utils.setDisableMap(timeoutData);
+        } else {
+          Utils.logMessage(`disable timeout get failed in hosted listing! Error reason: ${timeoutRes.error.message}`,);
+        }
+        let data = res.result;
+        if (typeof data === "string") {
+          data = JSON.parse(data);
+        }
+        setState({
+          rawList: data.items,
+          listing: data.items,
+          disabledMap,
+        });
+      } else {
+        setState({
+          message: res.error.message,
+        });
+      }
+      setLoading(false);
+    };
+    fetchdData();
+  }, [packageType]);
+
+  if (loading) {
+    return <LoadingSpiner />;
+  }
+
+  return (
+    <React.Fragment>
+      <ListControl
+        type="hosted"
+        legends={options}
+        handleSearch={event => handlers.handleSearch(event, state.rawList, setState)
+        }
+        handleDebug={event => handlers.handleDebug(event, setState)}
+        handleSortBy={event => handlers.handleSortBy(event, state.rawList, setState)
+        }
+      />
+      {state.listing ?
+        <StoreListingWidget
+          storeList={state.listing}
+          disableMap={state.disabledMap}
+          storeType="hosted"
+        />
+       :
+        <div className="container-fluid">No content fetched!</div>
+      }
+      <ListJsonDebugger
+        enableDebug={state.enableDebug}
+        jsonObj={state.listing}
+      />
+    </React.Fragment>
+  );
 }