Revamped Automation Sheet 1/1

atharva20-coder · atharva20-coder · commit d183c94bece1 · 2025-02-19T20:53:21.000+05:30
diff --git a/src/actions/user/index.ts b/src/actions/user/index.ts
@@ -1,19 +1,21 @@
 "use server";
 
 import { currentUser } from "@clerk/nextjs/server";
-
 import { redirect } from "next/navigation";
 import { createUser, findUser, updateSubscription } from "./queries";
 import { refreshToken } from "@/lib/fetch";
 import { updateIntegration } from "../integrations/queries";
 import { stripe } from "@/lib/stripe";
 
 export const onCurrentUser = async () => {
-  const user = await currentUser();
-
-  if (!user) return redirect("/sign-in");
-
-  return user;
+  try {
+    const user = await currentUser();
+    if (!user) return redirect("/sign-in");
+    return user;
+  } catch (error) {
+    console.error("Authentication error:", error);
+    return redirect("/sign-in");
+  }
 };
 
 export const onBoardUser = async () => {
diff --git a/src/components/global/activate-automation-button/index.tsx b/src/components/global/activate-automation-button/index.tsx
@@ -1,10 +1,9 @@
-import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
 import { Loader2 } from "lucide-react";
 import React from "react";
 import { useQueryAutomation } from "@/hooks/user-queries";
 import { useMutationData } from "@/hooks/use-mutation-data";
 import { activateAutomation } from "@/actions/automations";
-import { ActiveAutomation } from "@/icons/active-automation";
 
 type Props = {
   id: string;
@@ -18,18 +17,37 @@ const ActivateAutomationButton = ({ id }: Props) => {
     "automation-info"
   );
 
-  return (
-    <Button
-      disabled={isPending}
-      onClick={() => mutate({ state: !data?.data?.active })}
-      className="lg:px-10 bg-gradient-to-br hover:opacity-80 text-white rounded-full from-[#3352CC] font-medium to-[#1C2D70] ml-4"
-    >
-      {isPending ? <Loader2 className="animate-spin" /> : <ActiveAutomation />}
+  const [optimisticState, setOptimisticState] = React.useState(data?.data?.active || false);
+
+  React.useEffect(() => {
+    if (!isPending) {
+      setOptimisticState(data?.data?.active || false);
+    }
+  }, [data?.data?.active, isPending]);
 
-      <p className="lg:inline hidden">
-        {data?.data?.active ? "Disable" : "Activate"}
-      </p>
-    </Button>
+  const handleStateChange = (checked: boolean) => {
+    setOptimisticState(checked);
+    mutate({ state: checked });
+  };
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch
+        disabled={isPending}
+        checked={optimisticState}
+        onCheckedChange={handleStateChange}
+        className="data-[state=checked]:hover:bg-green-600 data-[state=checked]:bg-green-500 data-[state=unchecked]:hover:bg-slate-500 data-[state=unchecked]:bg-slate-400 h-6 w-11 mx-4 [&>span]:data-[state=checked]:translate-x-6 [&>span]:bg-white transition-colors duration-200"
+      />
+      <span className="text-sm font-medium">
+        {isPending ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          <strong className={optimisticState ? "text-green-500" : ""}>
+            {optimisticState ? "Active" : "Inactive"}
+          </strong>
+        )}
+      </span>
+    </div>
   );
 };
 
