Fixed sorting

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -19,15 +19,32 @@ export default function ComponentsComponent({
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(1);
-  const [allData, setAllData] = useState(
+  const [allData, setAllData] = useState(flows);
-    flows.filter((f) => f.is_component === is_component)
-  );
 
   const navigate = useNavigate();
 
   useEffect(() => {
-    setAllData(flows.filter((f) => f.is_component === is_component));
+    setAllData(
-    console.log(allData);
+      flows
+        .filter((f) => f.is_component === is_component)
+        .sort((a, b) => {
+          if (a?.updated_at && b?.updated_at) {
+            return (
+              new Date(b?.updated_at!).getTime() -
+              new Date(a?.updated_at!).getTime()
+            );
+          } else if (a?.updated_at && !b?.updated_at) {
+            return -1;
+          } else if (!a?.updated_at && b?.updated_at) {
+            return 1;
+          } else {
+            return (
+              new Date(b?.date_created!).getTime() -
+              new Date(a?.date_created!).getTime()
+            );
+          }
+        })
+    );
   }, [flows]);
 
   useEffect(() => {
@@ -80,25 +97,7 @@ export default function ComponentsComponent({
         <div className="flex w-full flex-col gap-4">
           <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
             {!isLoading || data?.length > 0 ? (
-              data
+              data?.map((item, idx) => (
-                ?.sort((a, b) => {
-                  if (a?.updated_at && b?.updated_at) {
-                    return (
-                      new Date(b?.updated_at!).getTime() -
-                      new Date(a?.updated_at!).getTime()
-                    );
-                  } else if (a?.updated_at && !b?.updated_at) {
-                    return -1;
-                  } else if (!a?.updated_at && b?.updated_at) {
-                    return 1;
-                  } else {
-                    return (
-                      new Date(b?.date_created!).getTime() -
-                      new Date(a?.date_created!).getTime()
-                    );
-                  }
-                })
-                .map((item, idx) => (
                 <CollectionCardComponent
                   onDelete={() => {
                     removeFlow(item.id);

src/frontend/src/pages/MainPage/index.tsx

@@ -64,7 +64,8 @@ export default function HomePage(): JSX.Element {
   useEffect(() => {
     setTabId("");
     refreshFlows();
-  }, []);
+  }, [pathname]);
+
   const navigate = useNavigate();
 
   // Personal flows display