feat: implement TaskRawData component and integrate with TasksRoute for improved task detail display

Author: ErwanDecoster

src/modules/JsonBlock.tsx

@@ -7,13 +7,15 @@ type JsonBlockProps = {
   className?: string;
   collapsed?: number;
   enableClipboard?: boolean;
+  copyText?: string;
 };
 
 const JsonBlock = ({
   children,
   className,
   collapsed = 1,
   enableClipboard = true,
+  copyText = 'Copy',
 }: JsonBlockProps) => {
   let jsonData: object;
   let rawToCopy: string;
@@ -47,10 +49,13 @@ const JsonBlock = ({
           displayObjectSize={false}
           enableClipboard={false}
           collapsed={collapsed}
+          shortenTextAfterLength={128}
           style={defaultJsonViewStyle}
         />
       </div>
-      {enableClipboard && <CopyButton textToCopy={rawToCopy} />}
+      {enableClipboard && (
+        <CopyButton buttonText="Copy Json" textToCopy={rawToCopy} />
+      )}
     </div>
   );
 };

src/modules/tasks/task/TaskRawData.tsx

@@ -0,0 +1,54 @@
+import { TABLE_REFETCH_INTERVAL } from '@/config';
+import { useQuery } from '@tanstack/react-query';
+import { ErrorAlert } from '@/modules/ErrorAlert';
+import JsonBlock from '@/modules/JsonBlock';
+import useUserStore from '@/stores/useUser.store';
+import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+
+function useTaskRawData({ taskId }: { taskId: string }) {
+  const { chainId } = useUserStore();
+
+  const queryKey = [chainId, 'task', 'raw', taskId];
+  const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
+    {
+      queryKey,
+      queryFn: async () => {
+        const response = await fetch(
+          `https://core-prod.arbitrum-mainnet.iex.ec/tasks/${taskId}`
+        );
+        if (!response.ok) {
+          throw new Error('Failed to fetch task raw data');
+        }
+        console.log(response);
+
+        return response.json();
+      },
+      refetchInterval: TABLE_REFETCH_INTERVAL,
+      placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
+    }
+  );
+
+  return {
+    data,
+    isLoading,
+    isRefetching,
+    isError,
+    hasPastError: isError || errorUpdateCount > 0,
+  };
+}
+
+export function TaskRawData({ taskId }: { taskId: string }) {
+  const { data: tasks, hasPastError } = useTaskRawData({ taskId });
+
+  // TODO: handle loading state
+
+  return hasPastError && !tasks.length ? (
+    <ErrorAlert message="An error occurred during task raw data loading." />
+  ) : (
+    <div className="dark:bg-tooltip rounded-3xl border bg-[#fafaff] p-6">
+      <JsonBlock copyText="Copy all" collapsed={5}>
+        {tasks}
+      </JsonBlock>
+    </div>
+  );
+}

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

@@ -5,10 +5,13 @@ import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
 import TaskIcon from '@/components/icons/TaskIcon';
 import { BackButton } from '@/components/ui/BackButton';
+import { useTabParam } from '@/hooks/usePageParam';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
+import { Tabs } from '@/modules/Tabs';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import { TaskBreadcrumbs } from '@/modules/tasks/task/TaskBreadcrumbs';
+import { TaskRawData } from '@/modules/tasks/task/TaskRawData';
 import { buildTaskDetails } from '@/modules/tasks/task/buildTaskDetails';
 import { taskQuery } from '@/modules/tasks/task/taskQuery';
 import useUserStore from '@/stores/useUser.store';
@@ -64,6 +67,8 @@ function TasksRoute() {
     isValid,
     error,
   } = useTaskData((taskId as string).toLowerCase(), chainId!);
+  const tabLabels = ['DETAILS', 'RAW DATA'];
+  const [currentTab, setCurrentTab] = useTabParam('dealTab', tabLabels, 0);
 
   const taskDetails = task ? buildTaskDetails({ task }) : undefined;
 
@@ -99,11 +104,20 @@ function TasksRoute() {
         </div>
       </div>
 
-      {hasPastError && !taskDetails ? (
-        <ErrorAlert message="An error occurred during task details loading." />
-      ) : (
-        <DetailsTable details={taskDetails || {}} />
-      )}
+      <Tabs
+        currentTab={currentTab}
+        tabLabels={tabLabels}
+        onTabChange={setCurrentTab}
+      />
+      <div>
+        {currentTab === 0 &&
+          (hasPastError && !taskDetails ? (
+            <ErrorAlert message="An error occurred during task details loading." />
+          ) : (
+            <DetailsTable details={taskDetails || {}} />
+          ))}
+        {currentTab === 1 && <TaskRawData taskId={taskId} />}
+      </div>
     </div>
   );
 }