From 6166898bfb78cc13fe96fedc433165f32554cd2b Mon Sep 17 00:00:00 2001 From: Jon Date: Tue, 15 Jun 2021 17:32:27 +0100 Subject: [PATCH] created useCallUI hook to simplify cross demo call loop --- dailyjs/basic-call/components/App/App.js | 70 ++-------------- .../components/HairCheck/HairCheck.js | 0 .../components/HairCheck/index.js | 0 .../components/MessageCard/MessageCard.js | 0 .../components/MessageCard/index.js | 0 dailyjs/shared/hooks/useCallUI.js | 80 +++++++++++++++++++ 6 files changed, 88 insertions(+), 62 deletions(-) rename dailyjs/{basic-call => shared}/components/HairCheck/HairCheck.js (100%) rename dailyjs/{basic-call => shared}/components/HairCheck/index.js (100%) rename dailyjs/{basic-call => shared}/components/MessageCard/MessageCard.js (100%) rename dailyjs/{basic-call => shared}/components/MessageCard/index.js (100%) create mode 100644 dailyjs/shared/hooks/useCallUI.js diff --git a/dailyjs/basic-call/components/App/App.js b/dailyjs/basic-call/components/App/App.js index 045c303..fdc6849 100644 --- a/dailyjs/basic-call/components/App/App.js +++ b/dailyjs/basic-call/components/App/App.js @@ -1,77 +1,23 @@ -import React, { useCallback, useEffect, useMemo } from 'react'; -import Loader from '@dailyjs/shared/components/Loader'; +import React, { useMemo } from 'react'; import { useCallState } from '@dailyjs/shared/contexts/CallProvider'; -import { - CALL_STATE_ENDED, - CALL_STATE_JOINED, - CALL_STATE_JOINING, - CALL_STATE_LOBBY, - CALL_STATE_NOT_FOUND, - CALL_STATE_NOT_BEFORE, - CALL_STATE_READY, - CALL_STATE_REDIRECTING, -} from '@dailyjs/shared/contexts/useCallMachine'; +import { useCallUI } from '@dailyjs/shared/hooks/useCallUI'; -import { useRouter } from 'next/router'; -import HairCheck from '../HairCheck'; -import MessageCard from '../MessageCard'; import Room from '../Room'; import { Modals } from './Modals'; export const App = () => { const { state, leave } = useCallState(); - const router = useRouter(); - useEffect(() => { - console.log(`%c🔀 App state changed: ${state}`, `color: gray;`); - }, [state]); - - const renderState = useCallback(() => { - // Show loader when state is undefined or ready to join - if (!state || [CALL_STATE_READY, CALL_STATE_JOINING].includes(state)) { - return ; - } - - // Update the UI based on the state of our call - switch (state) { - case CALL_STATE_NOT_FOUND: - router.replace('/not-found'); - return null; - case CALL_STATE_NOT_BEFORE: - return ( - - This room has `nbf` set, meaning you cannot join the call before the - owner - - ); - case CALL_STATE_LOBBY: - return ; - case CALL_STATE_JOINED: - return leave()} />; - case CALL_STATE_REDIRECTING: - case CALL_STATE_ENDED: - // Note: you could set a manual redirect here but we'll show just an exit screen - return ( - window.location.reload()}> - You have left the call. We hope you had fun! - - ); - default: - break; - } - - return ( - - An unknown error has occured in the call loop. This should not happen! - - ); - }, [leave, router, state]); + const componentForState = useCallUI({ + state, + room: () => leave()} />, + }); // Memoize children to avoid unnecassary renders from HOC return useMemo( () => (
- {renderState()} + {componentForState()}
), - [renderState] + [componentForState] ); }; diff --git a/dailyjs/basic-call/components/HairCheck/HairCheck.js b/dailyjs/shared/components/HairCheck/HairCheck.js similarity index 100% rename from dailyjs/basic-call/components/HairCheck/HairCheck.js rename to dailyjs/shared/components/HairCheck/HairCheck.js diff --git a/dailyjs/basic-call/components/HairCheck/index.js b/dailyjs/shared/components/HairCheck/index.js similarity index 100% rename from dailyjs/basic-call/components/HairCheck/index.js rename to dailyjs/shared/components/HairCheck/index.js diff --git a/dailyjs/basic-call/components/MessageCard/MessageCard.js b/dailyjs/shared/components/MessageCard/MessageCard.js similarity index 100% rename from dailyjs/basic-call/components/MessageCard/MessageCard.js rename to dailyjs/shared/components/MessageCard/MessageCard.js diff --git a/dailyjs/basic-call/components/MessageCard/index.js b/dailyjs/shared/components/MessageCard/index.js similarity index 100% rename from dailyjs/basic-call/components/MessageCard/index.js rename to dailyjs/shared/components/MessageCard/index.js diff --git a/dailyjs/shared/hooks/useCallUI.js b/dailyjs/shared/hooks/useCallUI.js new file mode 100644 index 0000000..65ef647 --- /dev/null +++ b/dailyjs/shared/hooks/useCallUI.js @@ -0,0 +1,80 @@ +import React, { useCallback, useEffect } from 'react'; +import Loader from '@dailyjs/shared/components/Loader'; +import MessageCard from '@dailyjs/shared/components/MessageCard'; +import { + CALL_STATE_ENDED, + CALL_STATE_JOINED, + CALL_STATE_JOINING, + CALL_STATE_LOBBY, + CALL_STATE_NOT_FOUND, + CALL_STATE_NOT_BEFORE, + CALL_STATE_READY, + CALL_STATE_REDIRECTING, +} from '@dailyjs/shared/contexts/useCallMachine'; +import { useRouter } from 'next/router'; +import HairCheck from '../components/HairCheck'; + +export const useCallUI = ({ + state, + room, + haircheck, + redirectUrl, + notFoundRedirect = 'not-found', +}) => { + const router = useRouter(); + + useEffect(() => { + console.log(`%c🔀 App state changed: ${state}`, `color: gray;`); + }, [state]); + + const renderByState = useCallback(() => { + // Show loader when state is undefined or ready to join + if (!state || [CALL_STATE_READY, CALL_STATE_JOINING].includes(state)) { + return ; + } + + // Update the UI based on the state of our call + switch (state) { + case CALL_STATE_NOT_FOUND: + router.replace(notFoundRedirect); + return null; + case CALL_STATE_NOT_BEFORE: + return ( + + This room has `nbf` set, meaning you cannot join the call before the + owner + + ); + case CALL_STATE_LOBBY: + return haircheck ? haircheck() : ; + case CALL_STATE_REDIRECTING: + window.location = redirectUrl; + break; + case CALL_STATE_JOINED: + return room ? ( + room() + ) : ( + + ); + case CALL_STATE_ENDED: + // Note: you could set a manual redirect here but we'll show just an exit screen + return ( + window.location.reload()}> + You have left the call. We hope you had fun! + + ); + default: + break; + } + + return ( + + An unknown error has occured in the call loop. This should not happen! + + ); + }, [state, notFoundRedirect, redirectUrl, haircheck, room, router]); + + return renderByState; +}; + +export default useCallUI;