🎨 style(cardComponent): add support for styling the flow card with an emoji and a color

✨ feat(MainPage): add error handling for adding and updating flows
🔨 refactor(MainPage): extract handleAddFlow and handleSave functions to improve readability
The FlowType now has an optional style property that can be used to style the flow card with an emoji and a color. The CardComponent now supports this feature. The MainPage now has error handling for adding and updating flows. The handleAddFlow and handleSave functions were extracted to improve readability.

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>

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" />

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;
+};