From 9dedce565df1cceb66d6756f3a984e88242a9eb4 Mon Sep 17 00:00:00 2001
From: Rachid Flih <rf@panora.dev>
Date: Mon, 23 Dec 2024 00:02:11 -0300
Subject: [PATCH] fix: frontend build issues

---
 .../app/(Dashboard)/configuration/page.tsx    | 54 +++++++------------
 .../Configuration/Catalog/CatalogWidget.tsx   |  8 +--
 .../src/components/Connection/columns.tsx     | 22 ++++----
 apps/webapp/src/components/Events/columns.tsx |  8 +--
 4 files changed, 30 insertions(+), 62 deletions(-)

diff --git a/apps/webapp/src/app/(Dashboard)/configuration/page.tsx b/apps/webapp/src/app/(Dashboard)/configuration/page.tsx
index efee2b607..5a681fd31 100644
--- a/apps/webapp/src/app/(Dashboard)/configuration/page.tsx
+++ b/apps/webapp/src/app/(Dashboard)/configuration/page.tsx
@@ -118,39 +118,26 @@ export default function Page() {
     if (pullFrequencies) {
       const initialFrequencies = VERTICALS.reduce((acc, vertical) => {
         const value = pullFrequencies[vertical as keyof typeof pullFrequencies];
-        acc[vertical] = typeof value === 'string' ? value : '0';
+        acc[vertical] = value?.toString() || '0';
         return acc;
       }, {} as Record<string, string>);
       setLocalFrequencies(initialFrequencies);
     }
-  }, [pullFrequencies, VERTICALS]);
-
-  const handleFrequencyChange = (vertical: string, value: string) => {
-    setLocalFrequencies(prev => ({ ...prev, [vertical]: value }));
-  };
-  
-
+  }, [pullFrequencies]);
 
   const handleFrequencyChangeAndSave = async (vertical: string, value: string) => {
-    handleFrequencyChange(vertical, value);
-    await saveFrequency(vertical, value);
-  };
-  
-  const saveFrequency = async (vertical: string, value: string) => {
-    setLoadingStates(prev => ({ ...prev, [vertical]: true }));
+    const frequency = parseInt(value, 10);
+    const updateData = { [vertical]: frequency };
+    
     try {
-      const frequency = parseInt(value, 10);
-      console.log("frequency being saved: " + frequency);
-      const updateData = { [vertical]: frequency };
-      
       await toast.promise(
         createPullFrequencyPromise(updateData),
         {
           loading: 'Updating...',
-          success: (data: any) => {
-            queryClient.setQueryData<any>(['pull_frequencies'], (oldData: any) => ({
-              ...oldData,
-              [vertical]: frequency.toString(),
+          success: () => {
+            setLocalFrequencies(prev => ({
+              ...prev,
+              [vertical]: value
             }));
             return frequency === 0 ? `${vertical} sync deactivated` : `Frequency saved for ${vertical}`;
           },
@@ -159,19 +146,6 @@ export default function Page() {
       );
     } catch (error) {
       console.error(`Error updating ${vertical} pull frequency:`, error);
-    } finally {
-      setLoadingStates(prev => ({ ...prev, [vertical]: false }));
-    }
-  };
-
-  const handleConfirmSuspend = async () => {
-    try {
-      if (selectedVertical) {
-        await saveFrequency(selectedVertical, '0');
-        setDialogOpen(false);
-      }
-    } catch (error) {
-      console.error('Error suspending sync:', error);
     }
   };
 
@@ -181,6 +155,14 @@ export default function Page() {
     setDialogOpen(true);
   };
 
+  const handleConfirmSuspend = async () => {
+    if (selectedVertical && confirmText.toLowerCase() === 'suspend') {
+      await handleFrequencyChangeAndSave(selectedVertical, '0');
+      setDialogOpen(false);
+      setConfirmText('');
+    }
+  };
+
   return (
     
     <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
@@ -301,7 +283,7 @@ export default function Page() {
         <Select
           value={localFrequencies[vertical] || '0'}
           onValueChange={(value: string) => handleFrequencyChangeAndSave(vertical, value)}
-          >
+        >
           <SelectTrigger className="w-full">
             <SelectValue placeholder="Select frequency" />
           </SelectTrigger>
diff --git a/apps/webapp/src/components/Configuration/Catalog/CatalogWidget.tsx b/apps/webapp/src/components/Configuration/Catalog/CatalogWidget.tsx
index e87381a9f..d4c5e9a39 100644
--- a/apps/webapp/src/components/Configuration/Catalog/CatalogWidget.tsx
+++ b/apps/webapp/src/components/Configuration/Catalog/CatalogWidget.tsx
@@ -134,13 +134,7 @@ export function CatalogWidget() {
             <div className="flex w-full items-start justify-between">
               <div className="flex flex-col gap-1">
                 <div className="flex items-center gap-2">
-                  <Image 
-                    src={item.logoPath} 
-                    width={20} 
-                    height={20} 
-                    className="rounded-sm mr-2"
-                    alt={`${item.name} logo`}
-                  />
+                  <img src={item.logoPath} className="w-8 h-8 rounded-lg" />
                   <div className="font-semibold">{`${item.name.substring(0, 1).toUpperCase()}${item.name.substring(1)}`}</div>
                 </div>
                 <div className="line-clamp-2 text-xs text-muted-foreground">
diff --git a/apps/webapp/src/components/Connection/columns.tsx b/apps/webapp/src/components/Connection/columns.tsx
index db7e731eb..c1b23da04 100644
--- a/apps/webapp/src/components/Connection/columns.tsx
+++ b/apps/webapp/src/components/Connection/columns.tsx
@@ -379,27 +379,25 @@ const ConnectionActionsCell = ({ row }: { row: any }) => {
 
 export const columns: ColumnDef<Connection>[] = [
   {
-    accessorKey: "app", 
+    accessorKey: "app",
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Provider" />
     ),
-    cell: ({ row }) => {      
+    cell: ({ row }) => {
       const provider = (row.getValue("app") as string).toLowerCase();
+
       return (
-        <div className="flex space-x-2">
-          <Badge variant={"outline"} className="rounded-sm pr-6 py-1 font-normal">
-              <Image 
-                src={getLogoURL(provider)} 
-                width={20} 
-                height={20} 
-                className="rounded-sm mr-2"
-                alt={`${provider} logo`}
-              />
+        <div className="flex w-[100px] items-center">
+            <Badge variant="outline" className="rounded-sm py-1 pr-2 font-normal">
+              <img src={getLogoURL(provider)} className="w-5 h-5 rounded-sm mr-2" alt={`${provider} logo`} />
               {provider}
-          </Badge>
+            </Badge>
         </div>
       )
     },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id))
+    },
   },
   {
     accessorKey: "category",
diff --git a/apps/webapp/src/components/Events/columns.tsx b/apps/webapp/src/components/Events/columns.tsx
index 13d42d563..b493c98cf 100644
--- a/apps/webapp/src/components/Events/columns.tsx
+++ b/apps/webapp/src/components/Events/columns.tsx
@@ -162,13 +162,7 @@ export const columns: ColumnDef<Event>[] = [
       return (
         <div className="flex w-[100px] items-center">
             <Badge variant="outline" className="rounded-sm py-1 pr-2 font-normal">
-              <Image 
-                src={getLogoURL(provider)} 
-                width={20} 
-                height={20} 
-                className="rounded-sm mr-2"
-                alt={`${provider} logo`}
-              />
+              <img src={getLogoURL(provider)} className="w-5 h-5 rounded-sm mr-2" />
               {provider}
             </Badge>
         </div>