From 1bb73ef9b19b253182ce37f9a2c73292ce8e9698 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Fri, 1 Mar 2024 18:16:05 +0530
Subject: [PATCH] :sparkles: Added resource update event listner hook

---
 lib/client/helpers/socket/context.tsx         |  2 +-
 lib/client/helpers/socket/useWatch.tsx        | 36 +++++++++++++++++++
 .../$account+/projects/project-resources.tsx  |  6 +++-
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 lib/client/helpers/socket/useWatch.tsx

diff --git a/lib/client/helpers/socket/context.tsx b/lib/client/helpers/socket/context.tsx
index a6e7e1fa0..ccb5a23d9 100644
--- a/lib/client/helpers/socket/context.tsx
+++ b/lib/client/helpers/socket/context.tsx
@@ -24,7 +24,7 @@ export interface ISocketResp<T = any> {
 }
 
 type IData = {
-  event?: string;
+  event?: 'subscribe' | 'unsubscribe';
   id: string;
 };
 
diff --git a/lib/client/helpers/socket/useWatch.tsx b/lib/client/helpers/socket/useWatch.tsx
new file mode 100644
index 000000000..17436a090
--- /dev/null
+++ b/lib/client/helpers/socket/useWatch.tsx
@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { ISocketResp, useSubscribe } from './context';
+import { useReload } from '../reloader';
+
+export const useSocketWatch = (
+  onUpdate: (v: ISocketResp<any>[]) => void,
+  topic: string
+) => {
+  const { responses, subscribed } = useSubscribe(
+    {
+      for: 'resource-update',
+      data: {
+        id: topic,
+        respath: topic,
+      },
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (subscribed) {
+      onUpdate(responses);
+    }
+  }, [responses]);
+};
+
+export const useWatchReload = (topic: string) => {
+  const reloadPage = useReload();
+  useSocketWatch((rd) => {
+    console.log(rd);
+    if (rd.find((v) => v.id === topic)) {
+      console.log('reloading due to watch event', rd);
+      reloadPage();
+    }
+  }, topic);
+};
diff --git a/src/apps/console/routes/_main+/$account+/projects/project-resources.tsx b/src/apps/console/routes/_main+/$account+/projects/project-resources.tsx
index a57d84a22..0beb95125 100644
--- a/src/apps/console/routes/_main+/$account+/projects/project-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/projects/project-resources.tsx
@@ -1,5 +1,5 @@
 import { GearSix } from '@jengaicons/react';
-import { Link, useParams } from '@remix-run/react';
+import { Link, useOutletContext, useParams } from '@remix-run/react';
 import { generateKey, titleCase } from '~/components/utils';
 import ConsoleAvatar from '~/console/components/console-avatar';
 import {
@@ -20,6 +20,8 @@ import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
+import { useWatchReload } from '~/root/lib/client/helpers/socket/useWatch';
+import { IAccountContext } from '../_layout';
 
 type BaseType = ExtractNodeType<IProjects>;
 const RESOURCE_NAME = 'project';
@@ -156,6 +158,8 @@ const ListView = ({ items }: { items: BaseType[] }) => {
 };
 
 const ProjectResources = ({ items = [] }: { items: BaseType[] }) => {
+  const { account } = useOutletContext<IAccountContext>();
+  useWatchReload(`account:${parseName(account)}`);
   return (
     <ListGridView
       listView={<ListView items={items} />}