Merge pull request #106 from kloudlite/feature/update-event

✨ Added resource update event listner hook

lib/client/helpers/socket/context.tsx

@@ -24,7 +24,7 @@ export interface ISocketResp<T = any> {
 }
 
 type IData = {
-  event?: string;
+  event?: 'subscribe' | 'unsubscribe';
   id: string;
 };
 

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);
+};

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} />}