Implemented api endpoint for listing stacks

dashboard/src/main/home/cluster-dashboard/stacks/Dashboard.tsx

@@ -1,8 +1,30 @@
 import DynamicLink from "components/DynamicLink";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useHistory, useLocation } from "react-router";
+import { useRouting } from "shared/routing";
+import styled from "styled-components";
 import DashboardHeader from "../DashboardHeader";
+import NamespaceSelector from "../NamespaceSelector";
 import StackList from "./_StackList";
 const Dashboard = () => {
+  const [currentNamespace, setCurrentNamespace] = useState("default");
+
+  const location = useLocation();
+  const history = useHistory();
+  const { getQueryParam, pushQueryParams } = useRouting();
+
+  const handleNamespaceChange = (namespace: string) => {
+    setCurrentNamespace(namespace);
+    pushQueryParams({ namespace });
+  };
+
+  useEffect(() => {
+    const newNamespace = getQueryParam("namespace");
+    if (newNamespace !== currentNamespace) {
+      setCurrentNamespace(newNamespace);
+    }
+  }, [location.search, history]);
+
   return (
     <>
       <DashboardHeader
@@ -11,10 +33,21 @@ const Dashboard = () => {
         title="Preview Environments"
         description=""
       />
-      <DynamicLink to={"/stacks/launch"}>Create stack</DynamicLink>
-      <StackList />
+      <ActionRow>
+        <DynamicLink to={"/stacks/launch"}>Create stack</DynamicLink>
+        <NamespaceSelector
+          namespace={currentNamespace}
+          setNamespace={handleNamespaceChange}
+        />
+      </ActionRow>
+      <StackList namespace={currentNamespace} />
     </>
   );
 };
 
 export default Dashboard;
+
+const ActionRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;

dashboard/src/main/home/cluster-dashboard/stacks/_StackList.tsx

@@ -1,27 +1,63 @@
 import DynamicLink from "components/DynamicLink";
 import Loading from "components/Loading";
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
+import api from "shared/api";
+import { Context } from "shared/Context";
 import styled from "styled-components";
 import { GetStacksResponse, Stack } from "./types";
 
-const StackList = () => {
+const StackList = ({ namespace }: { namespace: string }) => {
+  const { currentProject, currentCluster, setCurrentError } = useContext(
+    Context
+  );
   const [stacks, setStacks] = useState<Stack[]>(null);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    mockApi()
+    let isSubscribed = true;
+
+    setIsLoading(true);
+
+    api
+      .listStacks(
+        "<token>",
+        {},
+        {
+          project_id: currentProject.id,
+          cluster_id: currentCluster.id,
+          namespace,
+        }
+      )
       .then((res) => {
-        setStacks(res.data);
+        if (isSubscribed) {
+          setStacks(res.data);
+        }
+      })
+      .catch((err) => {
+        if (isSubscribed) {
+          setCurrentError(err);
+        }
       })
       .finally(() => {
-        setIsLoading(false);
+        if (isSubscribed) {
+          setIsLoading(false);
+        }
       });
-  }, []);
+  }, [namespace]);
 
   if (isLoading) {
     return <Loading />;
   }
 
+  if (stacks.length === 0) {
+    return (
+      <div>
+        <h3>No stacks found</h3>
+        <p>You can create a stack by clicking the "Create stack" button.</p>
+      </div>
+    );
+  }
+
   return (
     <>
       {stacks.map((stack) => (

dashboard/src/main/home/cluster-dashboard/stacks/launch/SelectSource.tsx

@@ -54,4 +54,5 @@ const SubmitButton = styled(SaveButton)`
   width: 100%;
   display: flex;
   justify-content: flex-end;
+  margin-top: 15px;
 `;