Merge pull request #603 from storytold/fix/jobs-causing-modal-rerenders

fixed a bug with inferenceJobs polling causing modal rerenders

packages/fakeyou.com/src/components/providers/CoreServicesProvider/CoreServicesProvider.tsx

@@ -6,7 +6,6 @@ import {
   SessionProvider,
 } from "components/providers";
 import ServerStatusChecker from "./ServerStatusChecker";
-import { useInferenceJobsPolling } from "hooks";
 
 interface Props {
   children?: any;
@@ -21,15 +20,6 @@ export default function CoreServicesProvider({
   querySubscriptions,
   state,
 }: Props) {
-  const {
-    byCategory,
-    clearJobs,
-    clearJobsStatus,
-    enqueueInferenceJob,
-    inferenceJobs,
-    someJobsAreDone,
-  } = useInferenceJobsPolling({ sessionWrapper: state.sessionWrapper });
-
   const sessionProps = {
     querySession: querySession,
     querySubscriptions,
@@ -37,23 +27,15 @@ export default function CoreServicesProvider({
     sessionWrapper: state.sessionWrapper,
     sessionFetched: state.sessionFetched,
   };
-  const inferenceJobsProps = {
-    enqueue: enqueueInferenceJob,
-    byCategory,
-    clearJobs,
-    clearJobsStatus,
-    inferenceJobs,
-    someJobsAreDone,
-  };
 
   return (
     <SessionProvider {...sessionProps}>
-      <InferenceJobsProvider {...inferenceJobsProps}>
-        <NotificationProvider>
-          <ServerStatusChecker />
-          <ModalProvider>{children}</ModalProvider>
-        </NotificationProvider>
-      </InferenceJobsProvider>
+      <NotificationProvider>
+        <ServerStatusChecker />
+        <ModalProvider>
+          <InferenceJobsProvider>{children}</InferenceJobsProvider>
+        </ModalProvider>
+      </NotificationProvider>
     </SessionProvider>
   );
 }

packages/fakeyou.com/src/components/providers/InferenceJobsProvider/InferenceJobsProvider.tsx

@@ -4,7 +4,7 @@ import {
 	GetQueuesResponse,
 } from "@storyteller/components/src/api/stats/queues/GetQueues";
 import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
-import { useQueuePoll } from "hooks";
+import { useInferenceJobsPolling, useQueuePoll, useSession } from "hooks";
 
 interface InferenceJobsContextType {
 	inferenceJobs?: any;
@@ -24,11 +24,32 @@ interface Props {
 	children?: any;
 }
 
-export default function InferenceJobsProvider({ children, ...rest }: Props) {
+export default function InferenceJobsProvider({ children }: Props) {
+	const { sessionWrapper } = useSession();
 	const queueStats = useQueuePoll();
+	const {
+		byCategory,
+		clearJobs,
+		clearJobsStatus,
+		enqueueInferenceJob,
+		inferenceJobs,
+		someJobsAreDone,
+	} = useInferenceJobsPolling({ sessionWrapper });
 
 	return (
-		<InferenceJobsContext.Provider {...{ value: { ...rest, queueStats } }}>
+		<InferenceJobsContext.Provider
+			{...{
+				value: {
+					byCategory,
+					clearJobs,
+					clearJobsStatus,
+					enqueueInferenceJob,
+					inferenceJobs,
+					someJobsAreDone,
+					queueStats,
+				},
+			}}
+		>
 			{children}
 		</InferenceJobsContext.Provider>
 	);

packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx

@@ -33,6 +33,7 @@ interface SessionContextType {
   querySubscriptions?: any;
   sessionFetched: boolean;
   sessionSubscriptions?: any;
+  sessionWrapper: SessionWrapper;
   studioAccessCheck: (x: any) => any;
   user?: any;
   userTokenMatch: (token: string) => boolean;
@@ -51,6 +52,8 @@ interface Props {
 // These functions will never actually fire because they are immediately redefined in the provider below,
 // as they must be as they utilize the provider's state.
 
+// const thingy = new SessionWrapper()
+
 export const SessionContext = createContext<SessionContextType>({
   canAccessStudio: () => false,
   canEditTtsModel: () => false,
@@ -66,6 +69,7 @@ export const SessionContext = createContext<SessionContextType>({
     view: ModalView.Closed,
   },
   userTokenMatch: () => false,
+  sessionWrapper: SessionWrapper.emptySession(),
 });
 
 export default function SessionProvider({
@@ -98,9 +102,9 @@ export default function SessionProvider({
   };
   // NB: Since user token matching is used for ownership permission checking, neither may be undefined!
   const userTokenMatch = (otherUserToken?: string) =>
-    user?.user_token !== undefined && 
-      otherUserToken !== undefined && 
-      user.user_token === otherUserToken;
+    user?.user_token !== undefined &&
+    otherUserToken !== undefined &&
+    user.user_token === otherUserToken;
   const canEditTtsModel = (userToken: string) =>
     user?.can_delete_other_users_tts_models || userTokenMatch(userToken);
   const canEditMediaFile = (userToken?: string) =>
@@ -134,6 +138,7 @@ export default function SessionProvider({
           querySubscriptions,
           sessionFetched,
           sessionSubscriptions,
+          sessionWrapper,
           studioAccessCheck,
           user,
           userTokenMatch,