From 95b7e2ab50bbb964d9a17f2b8514bed24ab6239d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 10:50:52 +0300
Subject: [PATCH 1/2] WIP

---
 frontend/webapp/app/overview/sources/page.tsx |  7 ++-
 frontend/webapp/containers/overview/index.tsx |  1 +
 .../overview/sources/sources.styled.tsx       |  7 +++
 .../containers/overview/sources/sources.tsx   | 51 +++++++++++++++++++
 4 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 frontend/webapp/containers/overview/sources/sources.styled.tsx
 create mode 100644 frontend/webapp/containers/overview/sources/sources.tsx

diff --git a/frontend/webapp/app/overview/sources/page.tsx b/frontend/webapp/app/overview/sources/page.tsx
index 42e001585..454db1e18 100644
--- a/frontend/webapp/app/overview/sources/page.tsx
+++ b/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 />
+    </>
+  );
 }
diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx
index 0bd20bd08..2a26e3504 100644
--- a/frontend/webapp/containers/overview/index.tsx
+++ b/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";
diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx
new file mode 100644
index 000000000..4c8ff6466
--- /dev/null
+++ b/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;
+`;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
new file mode 100644
index 000000000..7124c8208
--- /dev/null
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -0,0 +1,51 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { KeyvalLoader } from "@/design.system";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { useQuery } from "react-query";
+import { getSources } from "@/services";
+import { OverviewHeader } from "@/components/overview";
+import { useNotification } from "@/hooks";
+import { SourcesContainerWrapper } from "./sources.styled";
+
+export function SourcesContainer() {
+  const { show, Notification } = useNotification();
+
+  const {
+    data: sources,
+    refetch,
+    isLoading,
+  } = useQuery([QUERIES.API_SOURCES], getSources);
+
+  useEffect(() => {
+    console.log({ sources });
+  }, [sources]);
+
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    refetch();
+
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  if (isLoading) {
+    return <KeyvalLoader />;
+  }
+
+  return (
+    <SourcesContainerWrapper>
+      <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+      <Notification />
+    </SourcesContainerWrapper>
+  );
+}

From 3f0700a90cdd81b24a269cde73c8f6c401765944 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 12:38:53 +0300
Subject: [PATCH 2/2] WIP

---
 .../containers/overview/sources/sources.tsx   | 29 ++-----------------
 1 file changed, 2 insertions(+), 27 deletions(-)

diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 7124c8208..541fb8d21 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -1,43 +1,19 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { KeyvalLoader } from "@/design.system";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getSources } from "@/services";
 import { OverviewHeader } from "@/components/overview";
-import { useNotification } from "@/hooks";
 import { SourcesContainerWrapper } from "./sources.styled";
 
 export function SourcesContainer() {
-  const { show, Notification } = useNotification();
-
   const {
     data: sources,
     refetch,
     isLoading,
   } = useQuery([QUERIES.API_SOURCES], getSources);
 
-  useEffect(() => {
-    console.log({ sources });
-  }, [sources]);
-
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    refetch();
-
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
   if (isLoading) {
     return <KeyvalLoader />;
   }
@@ -45,7 +21,6 @@ export function SourcesContainer() {
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
-      <Notification />
     </SourcesContainerWrapper>
   );
 }