From da9df800799bf3e371637e2786b01bfe1e1bfac6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Mon, 30 Sep 2024 22:28:06 +0200
Subject: [PATCH] fix(api,dashboard): use correct id with formula

---
 .../report/sidebar/ReportFormula.tsx          | 63 +++++++++++++++++--
 packages/trpc/src/routers/chart.helpers.ts    | 11 ++--
 2 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/apps/dashboard/src/components/report/sidebar/ReportFormula.tsx b/apps/dashboard/src/components/report/sidebar/ReportFormula.tsx
index 8e181726..727b1b14 100644
--- a/apps/dashboard/src/components/report/sidebar/ReportFormula.tsx
+++ b/apps/dashboard/src/components/report/sidebar/ReportFormula.tsx
@@ -3,6 +3,10 @@
 import { Input } from '@/components/ui/input';
 import { useDispatch, useSelector } from '@/redux';
 
+import { Badge } from '@/components/ui/badge';
+import { AnimatePresence, motion } from 'framer-motion';
+import { RefreshCcwIcon } from 'lucide-react';
+import { type InputHTMLAttributes, useEffect, useState } from 'react';
 import { changeFormula } from '../reportSlice';
 
 export function ReportFormula() {
@@ -13,14 +17,65 @@ export function ReportFormula() {
     <div>
       <h3 className="mb-2 font-medium">Formula</h3>
       <div className="flex flex-col gap-4">
-        <Input
+        <InputFormula
           placeholder="eg: A/B"
-          value={formula}
-          onChange={(event) => {
-            dispatch(changeFormula(event.target.value));
+          value={formula ?? ''}
+          onChangeValue={(value) => {
+            dispatch(changeFormula(value));
           }}
         />
       </div>
     </div>
   );
 }
+
+function InputFormula({
+  value,
+  onChangeValue,
+  ...props
+}: {
+  value: string | undefined;
+  onChangeValue: (value: string) => void;
+} & InputHTMLAttributes<HTMLInputElement>) {
+  const [internalValue, setInternalValue] = useState(value ?? '');
+
+  useEffect(() => {
+    if (value !== internalValue) {
+      setInternalValue(value ?? '');
+    }
+  }, [value]);
+
+  return (
+    <div className="relative w-full">
+      <Input
+        {...props}
+        value={internalValue}
+        onChange={(e) => setInternalValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            onChangeValue(internalValue);
+          }
+        }}
+        size="default"
+      />
+      <div className="absolute right-2 top-1/2 -translate-y-1/2">
+        <AnimatePresence>
+          {internalValue !== value && (
+            <motion.button
+              key="refresh"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.8 }}
+              onClick={() => onChangeValue(internalValue)}
+            >
+              <Badge variant="muted">
+                Press enter
+                <RefreshCcwIcon className="ml-1 h-3 w-3" />
+              </Badge>
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/trpc/src/routers/chart.helpers.ts b/packages/trpc/src/routers/chart.helpers.ts
index 5477f3dd..7afc7d7d 100644
--- a/packages/trpc/src/routers/chart.helpers.ts
+++ b/packages/trpc/src/routers/chart.helpers.ts
@@ -99,19 +99,20 @@ export function withFormula(
       };
     });
   }
-
   return [
     {
       ...series[0],
       data: series[0].data.map((item, dIndex) => {
-        const scope = series.reduce((acc, item) => {
-          if (!item.event.id) {
-            return acc;
+        const scope = series.reduce((acc, item, index) => {
+          const readableId = alphabetIds[index];
+
+          if (!readableId) {
+            throw new Error('no alphabet id for serie in withFormula');
           }
 
           return {
             ...acc,
-            [item.event.id]: item.data[dIndex]?.count ?? 0,
+            [readableId]: item.data[dIndex]?.count ?? 0,
           };
         }, {});