adding zen provider

This commit is contained in:
talksik
2022-06-10 07:30:39 -05:00
parent 2ffd340d2f
commit 327581adaf
6 changed files with 41 additions and 31 deletions
+1 -1
View File
@@ -6,7 +6,7 @@
"editor.tabSize": 2, "editor.tabSize": 2,
"workbench.iconTheme": "material-icon-theme", "workbench.iconTheme": "material-icon-theme",
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.defaultFormatter": "esbenp.prettier-vscode",
"workbench.colorTheme": "Default Light+", "workbench.colorTheme": "Solarized Light",
"javascript.format.semicolons": "insert", "javascript.format.semicolons": "insert",
"window.zoomLevel": 1 "window.zoomLevel": 1
@@ -1,3 +0,0 @@
export default class CreateLineRequest {
constructor(public otherMemberIds: string[], public lineName?: string) {}
}
@@ -1,4 +0,0 @@
import { LineMemberState } from '../models/line.model';
export default class UpdateLineMemberState {
constructor(public newState: LineMemberState) {}
}
@@ -1,7 +1,6 @@
import React, { useCallback, useContext, useEffect, useState } from 'react'; import React, { useCallback, useContext, useEffect, useState } from 'react';
import { Socket, io } from 'socket.io-client'; import { Socket, io } from 'socket.io-client';
import FlowState from '../tree/FlowState';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import useAuth from './AuthProvider'; import useAuth from './AuthProvider';
@@ -20,8 +19,6 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
const [$ws, set$ws] = useState<Socket>(null); const [$ws, set$ws] = useState<Socket>(null);
const [flowState, setFlowState] = useState<boolean>(false);
const initiateSocketStabilityListeners = useCallback((socketConnection: Socket) => { const initiateSocketStabilityListeners = useCallback((socketConnection: Socket) => {
socketConnection.on('connect', () => { socketConnection.on('connect', () => {
toast.success('sockets connected'); toast.success('sockets connected');
@@ -64,19 +61,10 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
}; };
}, [set$ws, jwtToken, initiateSocketStabilityListeners]); }, [set$ws, jwtToken, initiateSocketStabilityListeners]);
const handleFlowState = useCallback(() => {
setFlowState(true);
$ws.disconnect();
$ws.removeAllListeners();
}, [setFlowState, $ws]);
const handleReconnect = useCallback(() => { const handleReconnect = useCallback(() => {
setFlowState(false);
initiateSocketStabilityListeners($ws); initiateSocketStabilityListeners($ws);
$ws.connect(); $ws.connect();
}, [setFlowState, $ws, initiateSocketStabilityListeners]); }, [$ws, initiateSocketStabilityListeners]);
if (!$ws) { if (!$ws) {
return ( return (
@@ -91,13 +79,7 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
); );
} }
if (flowState) { return <SocketContext.Provider value={{ $ws }}>{children}</SocketContext.Provider>;
return <FlowState handleReconnect={handleReconnect} />;
}
return (
<SocketContext.Provider value={{ $ws, handleFlowState }}>{children}</SocketContext.Provider>
);
} }
export default function useSockets() { export default function useSockets() {
@@ -1 +1,33 @@
// handle the flow state and other things // handle the flow state and other things
import React, { useCallback, useContext, useState } from 'react';
import FlowState from '../tree/FlowState';
interface IZenContext {
handleFlowState?: () => void;
}
const ZenContext = React.createContext<IZenContext>({});
export function ZenProvider({ children }: { children: React.ReactNode }) {
const [flowState, setFlowState] = useState<boolean>(false);
const handleFlowState = useCallback(() => {
setFlowState(true);
}, [setFlowState]);
const handleReconnect = useCallback(() => {
setFlowState(false);
}, [setFlowState]);
if (flowState) {
return <FlowState handleReconnect={handleReconnect} />;
}
return <ZenContext.Provider value={{ handleFlowState }}>{children}</ZenContext.Provider>;
}
export default function useZen() {
return useContext(ZenContext);
}
+6 -3
View File
@@ -5,6 +5,7 @@ import React from 'react';
import { SocketProvider } from '../providers/SocketProvider'; import { SocketProvider } from '../providers/SocketProvider';
import { StabilityProvider } from '../providers/StabilityProvider'; import { StabilityProvider } from '../providers/StabilityProvider';
import { Toaster } from 'react-hot-toast'; import { Toaster } from 'react-hot-toast';
import { ZenProvider } from '../providers/ZenProvider';
export default function ElectronApp() { export default function ElectronApp() {
return ( return (
@@ -12,9 +13,11 @@ export default function ElectronApp() {
<ElectronProvider> <ElectronProvider>
<AuthProvider> <AuthProvider>
<ProtectedRoute> <ProtectedRoute>
<SocketProvider> <ZenProvider>
<></> <SocketProvider>
</SocketProvider> <></>
</SocketProvider>
</ZenProvider>
</ProtectedRoute> </ProtectedRoute>
</AuthProvider> </AuthProvider>