From ae07ebc75a7b74de53c307fb83658668751c74a7 Mon Sep 17 00:00:00 2001
From: atrincas <atrincas@gmail.com>
Date: Tue, 3 Dec 2024 11:57:28 +0100
Subject: [PATCH] Display repsonse rate in sandbox

---
 client/src/containers/sandbox/index.tsx              | 1 +
 client/src/containers/sandbox/user-sandbox/index.tsx | 7 ++++++-
 client/src/containers/widget/widget-header/index.tsx | 2 +-
 client/src/hooks/use-sandbox-widget.ts               | 6 +++++-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/src/containers/sandbox/index.tsx b/client/src/containers/sandbox/index.tsx
index 27528ea4..c833ffd0 100644
--- a/client/src/containers/sandbox/index.tsx
+++ b/client/src/containers/sandbox/index.tsx
@@ -38,6 +38,7 @@ const Sandbox: FC = () => {
       <Widget
         breakdown={breakdown || undefined}
         indicator={widget.indicator}
+        responseRate={widget.responseRate}
         question={widget.question}
         visualization={visualization || widget.defaultVisualization}
         data={widget.data}
diff --git a/client/src/containers/sandbox/user-sandbox/index.tsx b/client/src/containers/sandbox/user-sandbox/index.tsx
index 17ea4b06..39fdd065 100644
--- a/client/src/containers/sandbox/user-sandbox/index.tsx
+++ b/client/src/containers/sandbox/user-sandbox/index.tsx
@@ -4,6 +4,7 @@ import { FC, useEffect } from "react";
 import { useAtom } from "jotai";
 import { useSession } from "next-auth/react";
 
+import { getResponseRate } from "@/lib/normalize-widget-data";
 import { client } from "@/lib/queryClient";
 import { queryKeys } from "@/lib/queryKeys";
 
@@ -53,7 +54,10 @@ const Sandbox: FC<SandboxProps> = ({ customWidgetId }) => {
     },
     {
       enabled: !!indicator,
-      select: (res) => res.body.data,
+      select: (res) => ({
+        ...res.body.data,
+        responseRate: getResponseRate(res.body.data.data),
+      }),
     },
   );
 
@@ -76,6 +80,7 @@ const Sandbox: FC<SandboxProps> = ({ customWidgetId }) => {
       {widget && (
         <Widget
           indicator={widget.indicator}
+          responseRate={widget.responseRate}
           question={widget.question}
           visualization={visualization || widget.defaultVisualization}
           data={widget.data}
diff --git a/client/src/containers/widget/widget-header/index.tsx b/client/src/containers/widget/widget-header/index.tsx
index aa07f011..ea0e6834 100644
--- a/client/src/containers/widget/widget-header/index.tsx
+++ b/client/src/containers/widget/widget-header/index.tsx
@@ -6,7 +6,7 @@ import Title from "@/components/ui/title";
 
 interface WidgetHeaderProps {
   indicator: string;
-  responseRate: number;
+  responseRate?: number;
   question?: string;
   menu?: React.ReactNode;
   className?: string;
diff --git a/client/src/hooks/use-sandbox-widget.ts b/client/src/hooks/use-sandbox-widget.ts
index 56ed00af..4b55220a 100644
--- a/client/src/hooks/use-sandbox-widget.ts
+++ b/client/src/hooks/use-sandbox-widget.ts
@@ -4,7 +4,10 @@ import {
 } from "@shared/dto/widgets/widget-visualizations.constants";
 import { parseAsStringEnum, useQueryState } from "nuqs";
 
-import { normalizeWidgetData } from "@/lib/normalize-widget-data";
+import {
+  getResponseRate,
+  normalizeWidgetData,
+} from "@/lib/normalize-widget-data";
 import { client } from "@/lib/queryClient";
 import { queryKeys } from "@/lib/queryKeys";
 
@@ -37,6 +40,7 @@ function useSandboxWidget() {
       select: (res) => ({
         ...res.body.data,
         data: normalizeWidgetData(res.body.data.data),
+        responseRate: getResponseRate(res.body.data.data),
       }),
     },
   );