feat: add realtime with socket.io

tools/authentication/AuthenticationContext.tsx

@@ -23,7 +23,9 @@ export const AuthenticationProvider: React.FC<PagePropsWithAuthentication> = (
 
   const authentication = useMemo(() => {
     return new Authentication(props.authentication.tokens)
-  }, [props.authentication.tokens])
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to run this memo once
+  }, [])
 
   useEffect(() => {
     setLanguage(user.settings.language).catch(() => {})

tools/handleSocketData.ts

@@ -0,0 +1,49 @@
+import { SetItems } from '../hooks/usePagination'
+
+export interface Item {
+  id: number
+  [key: string]: any
+}
+
+export interface SocketData<T extends Item = Item> {
+  action: 'create' | 'update' | 'delete'
+  item: T
+}
+
+export interface HandleSocketDataOptions<T extends Item = Item> {
+  setItems: SetItems<T>
+  data: SocketData<T>
+}
+
+export type SocketListener = (data: SocketData) => void
+
+export const handleSocketData = <T extends Item = Item>(
+  options: HandleSocketDataOptions<T>
+): void => {
+  const { data, setItems } = options
+
+  setItems((oldItems) => {
+    const newItems = [...oldItems]
+    switch (data.action) {
+      case 'create': {
+        newItems.push(data.item)
+        break
+      }
+      case 'delete': {
+        const itemIndex = newItems.findIndex((item) => item.id === data.item.id)
+        if (itemIndex !== -1) {
+          newItems.splice(itemIndex, 1)
+        }
+        break
+      }
+      case 'update': {
+        const itemIndex = newItems.findIndex((item) => item.id === data.item.id)
+        if (itemIndex !== -1) {
+          newItems[itemIndex] = data.item
+        }
+        break
+      }
+    }
+    return newItems
+  })
+}