Usage

Our minimal implementation is defines:

import { ChatApp, ChatProvider, LoginModal } from "@ajariapps/chat-react";

export default App = () => {
    const [localToken, setLocalToken] = useState<string>("");
    const [localUserId, setLocalUserId] = useState<string>("");
    const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
  
    const onCheckToken = async () => {
      try {
        const accessToken = localStorage.getItem("token");
        const userId = localStorage.getItem("current_user_id");
        if (accessToken) {
          const decoded: ISession = jwtDecode(accessToken as string);
          if (decoded.exp < new Date().getTime() / 1000) {
            localStorage.removeItem("token");
            window.location.reload();
            return;
          }
          setLocalToken(accessToken as string);
          setLocalUserId(userId as string);
        } else {
          setShowLoginModal(true);
        }
      } catch (error: any) {
        console.log("error", error);
      }
    };
  
    const onSuccessLogin = async (
      token?: string,
      current_user_id?: string,
      current_username?: string
    ) => {
      localStorage.setItem("token", token as string);
      localStorage.setItem("current_user_id", current_user_id as string);
      localStorage.setItem("current_username", current_username as string);
      await onCheckToken();
    };
  
    useEffect(() => {
      onCheckToken();
    }, []);
  
    return(
      <ChatProvider defaultToken={localToken} defaultUserId={localUserId}>
          {localToken ? (
            <ChatApp authorized={true} />
          ) : (
            <LoginModal
              isOpen={showLoginModal}
              onClose={() => setShowLoginModal(false)}
              onSuccess={(token, current_user_id, current_username) => {
                onSuccessLogin(token, current_user_id, current_username);
              }}
            />
          )}
      </ChatProvider>
    )
}

Types

If you want to explore type from each of function args and each of returned function, please import from:

import { } from "@ajariapps/chat-react/types"