fix: call react hook after return

Author: ErwanDecoster

src/routes/$chainSlug/_layout/deal/$dealId.tsx

@@ -73,25 +73,6 @@ function DealsRoute() {
     error,
   } = useDealData((dealId as string).toLowerCase(), chainId!);
 
-  const [isLoadingChild, setIsLoadingChild] = useState(false);
-  const [isOutdatedChild, setIsOutdatedChild] = useState(false);
-
-  const dealDetails = deal
-    ? buildDealDetails({
-        deal,
-        isConnected,
-        onSeeTasks: () => setCurrentTab(1),
-      })
-    : undefined;
-
-  if (!isValid) {
-    return <ErrorAlert className="my-16" message="Invalid deal address." />;
-  }
-
-  if (isError && error instanceof NotFoundError) {
-    return <ErrorAlert className="my-16" message="Deal not found." />;
-  }
-
   const associatedDealsPresenceQueryKey = [
     chainId,
     'deal',
@@ -100,7 +81,7 @@ function DealsRoute() {
   ];
   const { data: associatedDealsPresence } = useQuery({
     queryKey: associatedDealsPresenceQueryKey,
-    enabled: dealId && !!chainId && !!deal && currentTab !== 2,
+    enabled: !!dealId && !!chainId && !!deal && currentTab !== 2,
     queryFn: () =>
       execute(dealAssociatedDealsQuery, chainId!, {
         length: 1,
@@ -114,6 +95,25 @@ function DealsRoute() {
   const hasAssociatedDeals =
     (associatedDealsPresence?.deal?.requestorder?.deals?.length || 0) > 0;
 
+  const [isLoadingChild, setIsLoadingChild] = useState(false);
+  const [isOutdatedChild, setIsOutdatedChild] = useState(false);
+
+  const dealDetails = deal
+    ? buildDealDetails({
+        deal,
+        isConnected,
+        onSeeTasks: () => setCurrentTab(1),
+      })
+    : undefined;
+
+  if (!isValid) {
+    return <ErrorAlert className="my-16" message="Invalid deal address." />;
+  }
+
+  if (isError && error instanceof NotFoundError) {
+    return <ErrorAlert className="my-16" message="Deal not found." />;
+  }
+
   const showOutdated = deal && (isError || isOutdatedChild);
   const showLoading = isLoading || isRefetching || isLoadingChild;
 

src/routes/$chainSlug/_layout/task/$taskId.tsx

@@ -73,20 +73,6 @@ function TasksRoute() {
   const tabLabels = ['DETAILS', 'DATASETS', 'RAW DATA'];
   const [currentTab, setCurrentTab] = useTabParam('dealTab', tabLabels, 0);
 
-  const [isLoadingChild, setIsLoadingChild] = useState(false);
-  const [isOutdatedChild, setIsOutdatedChild] = useState(false);
-
-  const taskDetails = task ? buildTaskDetails({ task }) : undefined;
-
-  if (!isValid) {
-    return <ErrorAlert className="my-16" message="Invalid task address." />;
-  }
-
-  if (isError && error instanceof NotFoundError) {
-    return <ErrorAlert message="Task not found." />;
-  }
-
-  // Presence check for datasets to disable tab if none
   const datasetsPresenceQueryKey = [
     chainId,
     'task',
@@ -109,6 +95,19 @@ function TasksRoute() {
   const hasDatasets =
     (datasetsPresence?.task?.bulkSlice?.datasets?.length || 0) > 0;
 
+  const [isLoadingChild, setIsLoadingChild] = useState(false);
+  const [isOutdatedChild, setIsOutdatedChild] = useState(false);
+
+  const taskDetails = task ? buildTaskDetails({ task }) : undefined;
+
+  if (!isValid) {
+    return <ErrorAlert className="my-16" message="Invalid task address." />;
+  }
+
+  if (isError && error instanceof NotFoundError) {
+    return <ErrorAlert message="Task not found." />;
+  }
+
   const showOutdated = task && (isError || isOutdatedChild);
   const showLoading = isLoading || isRefetching || isLoadingChild;