Merge pull request #344 from alonkeyval/TASK-149-overview-container

Task 149 sources container

frontend/webapp/app/overview/sources/page.tsx

@@ -1,6 +1,11 @@
 "use client";
+import { SourcesContainer } from "@/containers/overview";
 import React from "react";
 
 export default function SourcesOverviewPage() {
-  return <div>SourcesOverviewPage</div>;
+  return (
+    <>
+      <SourcesContainer />
+    </>
+  );
 }

frontend/webapp/containers/overview/index.tsx

@@ -1,2 +1,3 @@
 export { OverviewContainer } from "./overview/overview";
 export { DestinationContainer } from "./destination/destination";
+export { SourcesContainer } from "./sources/sources";

frontend/webapp/containers/overview/sources/sources.styled.tsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const SourcesContainerWrapper = styled.div`
+  height: 100vh;
+  width: 100%;
+  overflow-y: scroll;
+`;

frontend/webapp/containers/overview/sources/sources.tsx

@@ -0,0 +1,26 @@
+"use client";
+import React from "react";
+import { KeyvalLoader } from "@/design.system";
+import { OVERVIEW, QUERIES } from "@/utils/constants";
+import { useQuery } from "react-query";
+import { getSources } from "@/services";
+import { OverviewHeader } from "@/components/overview";
+import { SourcesContainerWrapper } from "./sources.styled";
+
+export function SourcesContainer() {
+  const {
+    data: sources,
+    refetch,
+    isLoading,
+  } = useQuery([QUERIES.API_SOURCES], getSources);
+
+  if (isLoading) {
+    return <KeyvalLoader />;
+  }
+
+  return (
+    <SourcesContainerWrapper>
+      <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+    </SourcesContainerWrapper>
+  );
+}