From b53b349c6b5cf1f53b1a6265d545568ce73b556d Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 9 Jun 2023 14:00:52 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(cardComponent):=20add=20su?=
 =?UTF-8?q?pport=20for=20styling=20the=20flow=20card=20with=20an=20emoji?=
 =?UTF-8?q?=20and=20a=20color=20=E2=9C=A8=20feat(MainPage):=20add=20error?=
 =?UTF-8?q?=20handling=20for=20adding=20and=20updating=20flows=20?=
 =?UTF-8?q?=F0=9F=94=A8=20refactor(MainPage):=20extract=20handleAddFlow=20?=
 =?UTF-8?q?and=20handleSave=20functions=20to=20improve=20readability=20The?=
 =?UTF-8?q?=20FlowType=20now=20has=20an=20optional=20style=20property=20th?=
 =?UTF-8?q?at=20can=20be=20used=20to=20style=20the=20flow=20card=20with=20?=
 =?UTF-8?q?an=20emoji=20and=20a=20color.=20The=20CardComponent=20now=20sup?=
 =?UTF-8?q?ports=20this=20feature.=20The=20MainPage=20now=20has=20error=20?=
 =?UTF-8?q?handling=20for=20adding=20and=20updating=20flows.=20The=20handl?=
 =?UTF-8?q?eAddFlow=20and=20handleSave=20functions=20were=20extracted=20to?=
 =?UTF-8?q?=20improve=20readability.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/cardComponent/index.tsx    | 19 ++++++++++++++++--
 src/frontend/src/pages/MainPage/index.tsx     | 20 ++++++++++++++++---
 src/frontend/src/types/flow/index.ts          |  7 +++++++
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 4578c5f21..b9c9bb46c 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -13,13 +13,28 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
+import { FlowType } from "../../types/flow";
 export const CardComponent = ({
   flow,
   idx,
   removeFlow,
   setTabIndex,
   setActiveTab,
+}: {
+  flow: FlowType;
+  idx: number;
+  removeFlow: (id: string) => void;
+  setTabIndex: (idx: number) => void;
+  setActiveTab: (tab: string) => void;
 }) => {
+  // flow has a style attribute
+  // if it is empty just get a random style
+  // if it is not empty use that style
+  // if it is not empty and it is not a valid style get a random style
+
+  let emoji = flow.style?.emoji || "🤖";
+  // get random tailwind color
+  let color = flow.style?.color || "bg-blue-400";
   return (
     <Card className="group">
       <CardHeader>
@@ -28,10 +43,10 @@ export const CardComponent = ({
             <span
               className={
                 "rounded-md w-10 h-10 flex items-center justify-center text-2xl " +
-                (idx === 0 ? "bg-blue-100" : " bg-orange-100")
+                color
               }
             >
-              {idx === 0 ? "🤖" : "🛠️"}
+              {emoji}
             </span>
             {flow.name}
           </div>
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index b4757132c..d5b351ca5 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -87,7 +87,7 @@ export default function HomePage() {
   const { dark, setDark } = useContext(darkContext);
   const [activeTab, setActiveTab] = useState("myflow");
   const [rename, setRename] = useState(false);
-  const { notificationCenter, setNotificationCenter } =
+  const { notificationCenter, setNotificationCenter, setErrorData } =
     useContext(alertContext);
   useEffect(() => {
     //create the first flow
@@ -96,9 +96,23 @@ export default function HomePage() {
     }
   }, [addFlow, flows.length, templates]);
 
+  function handleAddFlow() {
+    try {
+      addFlow();
+      // saveFlowStyleInDataBase();
+    } catch (err) {
+      setErrorData(err);
+    }
+  }
+
   function handleSave(flow) {
     // Put your save logic here.
-    updateFlowInDatabase(flow);
+    try {
+      updateFlowInDatabase(flow);
+      // updateFlowStyleInDataBase(flow);
+    } catch (err) {
+      setErrorData(err);
+    }
   }
 
   return (
@@ -197,7 +211,7 @@ export default function HomePage() {
                       </MenubarRadioGroup>
                       <MenubarItem
                         onClick={() => {
-                          addFlow();
+                          handleAddFlow();
                         }}
                       >
                         <PlusIcon className="w-4 h-4 mr-2" />
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index 6c118aa49..3cfbee421 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -7,6 +7,7 @@ export type FlowType = {
   id: string;
   data: ReactFlowJsonObject;
   description: string;
+  style?: FlowStyleType;
 };
 export type NodeType = {
   id: string;
@@ -20,3 +21,9 @@ export type NodeDataType = {
   id: string;
   value: any;
 };
+// FlowStyleType is the type of the style object that is used to style the
+// Flow card with an emoji and a color.
+export type FlowStyleType = {
+  emoji: string;
+  color: string;
+};