created useCallUI hook to simplify cross demo call loop

dailyjs/basic-call/components/App/App.js

@@ -1,77 +1,23 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
-import Loader from '@dailyjs/shared/components/Loader';
 import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import {
+import { useCallUI } from '@dailyjs/shared/hooks/useCallUI';
-  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 '../HairCheck';
-import MessageCard from '../MessageCard';
 import Room from '../Room';
 import { Modals } from './Modals';
 
 export const App = () => {
   const { state, leave } = useCallState();
-  const router = useRouter();
 
-  useEffect(() => {
+  const componentForState = useCallUI({
-    console.log(`%c🔀 App state changed: ${state}`, `color: gray;`);
+    state,
-  }, [state]);
+    room: () => <Room onLeave={() => leave()} />,
-
+  });
-  const renderState = useCallback(() => {
-    // Show loader when state is undefined or ready to join
-    if (!state || [CALL_STATE_READY, CALL_STATE_JOINING].includes(state)) {
-      return <Loader />;
-    }
-
-    // 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 (
-          <MessageCard error header="Cannot join before owner">
-            This room has `nbf` set, meaning you cannot join the call before the
-            owner
-          </MessageCard>
-        );
-      case CALL_STATE_LOBBY:
-        return <HairCheck />;
-      case CALL_STATE_JOINED:
-        return <Room onLeave={() => 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 (
-          <MessageCard onBack={() => window.location.reload()}>
-            You have left the call. We hope you had fun!
-          </MessageCard>
-        );
-      default:
-        break;
-    }
-
-    return (
-      <MessageCard error header="An error occured">
-        An unknown error has occured in the call loop. This should not happen!
-      </MessageCard>
-    );
-  }, [leave, router, state]);
 
   // Memoize children to avoid unnecassary renders from HOC
   return useMemo(
     () => (
       <div className="app">
-        {renderState()}
+        {componentForState()}
         <Modals />
         <style jsx>{`
           color: white;
@@ -86,7 +32,7 @@ export const App = () => {
         `}</style>
       </div>
     ),
-    [renderState]
+    [componentForState]
   );
 };
 

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 <Loader />;
+    }
+
+    // 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 (
+          <MessageCard error header="Cannot join before owner">
+            This room has `nbf` set, meaning you cannot join the call before the
+            owner
+          </MessageCard>
+        );
+      case CALL_STATE_LOBBY:
+        return haircheck ? haircheck() : <HairCheck />;
+      case CALL_STATE_REDIRECTING:
+        window.location = redirectUrl;
+        break;
+      case CALL_STATE_JOINED:
+        return room ? (
+          room()
+        ) : (
+          <MessageCard error header="No room component declared" />
+        );
+      case CALL_STATE_ENDED:
+        // Note: you could set a manual redirect here but we'll show just an exit screen
+        return (
+          <MessageCard onBack={() => window.location.reload()}>
+            You have left the call. We hope you had fun!
+          </MessageCard>
+        );
+      default:
+        break;
+    }
+
+    return (
+      <MessageCard error header="An error occured">
+        An unknown error has occured in the call loop. This should not happen!
+      </MessageCard>
+    );
+  }, [state, notFoundRedirect, redirectUrl, haircheck, room, router]);
+
+  return renderByState;
+};
+
+export default useCallUI;