Fix/195 (#200)

* refactor: add typescript dependencies
* chore: update chakra-ui
* refactor: typescript config
* refactor: convert <MenuBar> component to typescript
* refactor: convert <TooltipActionBtn> component to typescript
* refactor: improve UX in file upload
* refactor: upgrade dependencies
* refactor: prepare data provider
* refactor: prevent importing bad fields
* refactor: extract merge to provider
* refactor(upload): parser merges only given fields
* refactor(upload): add event fields to excel
* refactor(upload): improve styling on modal open
* style: improve styling in menu
* style: prevent global pollution
* feat(upload): add upload options
* fix: avoid potential bug in log queue

client/src/common/context/socketContext.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import { serverURL } from 'common/api/apiConstants';
+import io, { Socket } from 'socket.io-client';
+
+interface SocketProviderState {
+  socket: Socket | null;
+  emit: <T>(topic: string, payload?: T) => void;
+  on: <T>(topic: string, callback: (data: T) => void) => void;
+  off: (topic: string) => void;
+}
+
+type SocketProviderProps = {
+  children: ReactNode;
+};
+
+const SocketContext = createContext<SocketProviderState>({
+  socket: null,
+  emit: () => {},
+  on: () => {},
+  off: () => {}
+});
+
+export const useSocket = () => {
+  return useContext(SocketContext);
+};
+
+function SocketProvider({ children }: SocketProviderProps) {
+  const [socket, setSocket] = useState({} as Socket);
+
+  useEffect(() => {
+    const socketInstance = io(serverURL, { transports: ["websocket"] });
+    setSocket(socketInstance);
+    return () => {
+      socketInstance.disconnect();
+    };
+  }, []);
+
+  return (
+    <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
+  );
+}
+
+export default SocketProvider;