React Phoenix Socket Context

SocketContainer.jsx

import React, { useEffect, useMemo } from "react";
import { Socket } from "phoenix";

// A utility to get the JWT token of the user
import getUserJWT from "utils/getUserJWT";

// The URL of the socket, example: ws://localhost:4000
import { SOCKET_URL } from "settings/socket";

// A hook that returns the current user authenticated
import { useCurrentUser } from "contexts/currentUser/CurrentUserContext";

import { SocketProvider } from "./SocketContext";

const SocketContainer = ({ children }) => {
  const [currentUser] = useCurrentUser();

  const socket = useMemo(() => (
    new Socket(SOCKET_URL, {
      params: () => ({
        Authorization: getUserJWT(),
      }),
    })
  ), []);

  useEffect(() => {
    if (currentUser && !socket.isConnected()) {
      socket.connect();
    }
  }, [
    socket,
    currentUser,
  ]);

  return (
    <SocketProvider value={socket}>
      {children}
    </SocketProvider>
  );
};

export default SocketContainer;

SocketContext.jsx

import React from "react";

const SocketContext = React.createContext({});

export const SocketProvider = SocketContext.Provider;

export const useSocket = () => React.useContext(SocketContext);