Manage client changes passing a callback instead of using event emitter

[singiamtel]

Doing it this way we shouldn't have any re-render issues as we're not trying to get stale variables from client

Example snippet on how the callback should look by @Async10

type PS = {
	rooms: Room[]
	users: User[]
	send(roomId: string, message: string): void
}

const PSContext = React.createContext<PS | null>(null)

type PSProviderProps = {
	client: PSClient
	children: React.ReactNode
}

function PSProvider(client: PSClient) {
	const [users, setUsers] = React.useState<User[]>([])
	const [rooms, setRooms] = React.useState<Room[]>([])

	React.useEffect(() => {
		client.connect()
		client.subscribe(handlePSEvent)
	}, [handlePSEvent])

	const handlePSEvent = React.useCallback(function (event: PSEvent) {
		// TODO: Handle PSEvent and update users and roooms by
		// using setUsers and setRooms
	}, [setUsers, setRooms])

	
	return (
		<PSContext.Provider value={{ rooms, users, send: client.send }}>
			{props.children}
		</PSContext.Provider>
	)
}

function usePS() {
	const ps = React.useContext(PSContext)
	if (!ps) throw new Error("You fucked up. Pass an instance of PSClient to PSProvider!")
	return ps
}

const client = new PSClient(...)

function App() {
	<PSProvider client={client}>
		{/* Components ... */}
	</PSProvider>
}