Fixed chest page using sockets instead refetch

server/src/routes/api/chests.ts

@@ -1,10 +1,19 @@
 import { socketVariables } from '@/libs/socketVariables'
 import express from 'express'
+import { sendChests } from '@/socketEmit';
 
 const router = express.Router()
 
 router.get('/chests', (req, res) => {
     res.json({ chests: socketVariables.chests })
 })
 
+router.delete('/chest/:uuid', (req, res) => {
+    const uuid = req.params.uuid
+    delete socketVariables.chests[uuid]
+    sendChests()
+
+    res.json({ success: true})
+})
+
 export default router

server/src/socketEmit/index.ts

@@ -0,0 +1,6 @@
+export * from './sendBotConnect'
+export * from './sendBotsOnline'
+export * from './sendChests'
+export * from './sendCoreIsConnected'
+export * from './sendLogs'
+export * from './sendMastersOnline'

server/src/socketEmit/sendChests.ts

@@ -0,0 +1,12 @@
+import { io } from "@/server";
+import { socketVariables } from '@/libs/socketVariables'
+
+export const sendChests = () => {
+    io
+        .to("web")
+        .to("bot")
+        .emit("action", {
+            type: "getChests",
+            value: socketVariables.chests,
+        });
+}

server/src/socketEvents/sendAction.ts

@@ -2,7 +2,7 @@ import { log } from "@/config";
 import { findBotBySocketId } from "@/libs/botStore";
 import { socketVariables } from "@/libs/socketVariables";
 import { io } from "@/server";
-import { sendBotsOnline } from "@/socketEmit/sendBotsOnline";
+import { sendBotsOnline, sendChests } from "@/socketEmit";
 import { BotsConnected } from "base-types"
 import { Socket } from "socket.io";
 
@@ -99,11 +99,7 @@ export default (socket: Socket) => {
 
                 const newChests = data.value
                 setChests(newChests);
-
-                io.to("usersLoged").emit("action", {
-                    type: "getChests",
-                    value: newChests,
-                });
+                sendChests()
                 break;
 
             case "getChests":
@@ -117,10 +113,13 @@ export default (socket: Socket) => {
 
                 const newPortals = data.value;
                 setPortals(newPortals)
-                io.to("usersLoged").emit("action", {
-                    type: "getPortals",
-                    value: newPortals,
-                });
+                io
+                    .to("web")
+                    .to("bot")
+                    .emit("action", {
+                        type: "getPortals",
+                        value: newPortals,
+                    });
                 break;
 
             case "getPortals":

web/src/pages/Chests/DrawChest.tsx

@@ -127,11 +127,14 @@ export const DrawChest: React.FC<Props> = (props) => {
                             </Row>
                         ))}
                     </div>
-                    <Canvas
-                        draw={draw}
-                        width={352}
-                        height={chest.slots.length === 27 ? 150 : 260}
-                    />
+
+                    <div style={{ overflowX: 'auto' }}>
+                        <Canvas
+                            draw={draw}
+                            width={352}
+                            height={chest.slots.length === 27 ? 150 : 260}
+                        />
+                    </div>
 
                 </Card.Body>
             </Card>

web/src/pages/Chests/index.tsx

@@ -1,27 +1,32 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Card, CardGroup } from "react-bootstrap";
-import { DrawChest } from "./DrawChest";
-import { useSendActionSocket } from "@/hooks/useSendActionSocket";
 import { Chests as ChestsType } from "base-types";
-import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
+import { useStore } from "@/hooks/useStore";
+import { DrawChest } from "./DrawChest";
 
 export const Chests: React.FC = () => {
-  const { data: chests } = useQuery({
-    queryKey: ['chests'],
-    queryFn: () => axios.get<{ chests: ChestsType }>('/api/chests').then((data) => data.data.chests),
-    refetchInterval: 2000,
-  })
+  const [chests, setChests] = useState<ChestsType>({});
+  const [socket] = useStore(state => [state.socket])
 
+  useEffect(() => {
+    socket?.on('action', ({ type, value }: { type: string, value: ChestsType }) => {
+      if (type !== 'getChests') return;
+      setChests(value)
+    });
 
-  const sendAction = useSendActionSocket()
+    socket?.emit('sendAction', {
+      action: 'getChests',
+      value: ''
+    });
 
-  const deleteChest = (key: string) => {
-    if (window.confirm("Confirm delete chest?") === true) {
-      const newChests = { ...chests }
-      delete newChests[key]
-      sendAction('setChests', newChests)
+    return () => {
+      socket?.off("action");
     }
+  }, [setChests])
+
+  const deleteChest = (uuid: string) => {
+    axios.delete(`/api/chest/${uuid}`)
   }
 
   return (

web/src/utils/useSocketSetup.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Socket, io } from "socket.io-client";
+import { io } from "socket.io-client";
 import { useVerifyLoggedIn } from './useVerifyLoggedIn';
 import { Bot } from '@/types';
 import { useStore } from '@/hooks/useStore';