From 8923d20a90a4ec05683a7a4e6cecb5713a10b0ff Mon Sep 17 00:00:00 2001
From: Sstark97 <aitorscinfo@gmail.com>
Date: Sun, 24 Nov 2024 20:14:51 +0000
Subject: [PATCH] :recycle: Add button for remove repos in local

---
 components/forms/DeleteAllReposButton.tsx     | 24 +++++++++++++++++++
 components/forms/RealTimeForm.tsx             | 15 ++++++++----
 {components/hooks => hooks}/usePusherState.ts |  0
 3 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 components/forms/DeleteAllReposButton.tsx
 rename {components/hooks => hooks}/usePusherState.ts (100%)

diff --git a/components/forms/DeleteAllReposButton.tsx b/components/forms/DeleteAllReposButton.tsx
new file mode 100644
index 0000000..d83039d
--- /dev/null
+++ b/components/forms/DeleteAllReposButton.tsx
@@ -0,0 +1,24 @@
+import {useFormStatus} from "react-dom";
+import {Button} from "@/components/ui/button";
+import {Loader2, Shuffle} from "lucide-react";
+import {deleteAllRepositories} from "@/lib/infrastructure/server/actions";
+
+export const DeleteAllReposButton = () => {
+    const { pending } = useFormStatus();
+    return (
+        <form action={deleteAllRepositories}>
+            <Button
+                className="w-full bg-gradient-to-r from-gray-700 to-[#39b3c2] hover:from-gray-600 hover:to-[#2a8a96] text-white font-bold py-3 rounded-full transition-all duration-300 transform hover:scale-105"
+                type="submit"
+                disabled={pending}
+            >
+                {pending ? (
+                    <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                ) : (
+                    <Shuffle className="mr-2 h-5 w-5" />
+                )}
+                Eliminar todos los repos
+            </Button>
+        </form>
+    );
+}
\ No newline at end of file
diff --git a/components/forms/RealTimeForm.tsx b/components/forms/RealTimeForm.tsx
index 1ac2e7f..20266b4 100644
--- a/components/forms/RealTimeForm.tsx
+++ b/components/forms/RealTimeForm.tsx
@@ -2,13 +2,15 @@
 
 import {AnimatePresence, motion} from "framer-motion";
 import {RepositorySubmitButton} from "@/components/forms/RepositorySubmitButton";
-import {usePusherState} from "@/components/hooks/usePusherState";
+import {usePusherState} from "@/hooks/usePusherState";
 import {useTransition} from "react";
 import {openAnonymousRandomRepository} from "@/lib/infrastructure/server/actions";
+import { DeleteAllReposButton } from "@/components/forms/DeleteAllReposButton";
 
 export const RealTimeForm = () => {
     const repositories = usePusherState();
     const [, startTransition] = useTransition();
+    const isLocal = process.env.NODE_ENV === 'development';
 
     const handleSendToServer = async () => {
         startTransition(async () => {
@@ -24,7 +26,7 @@ export const RealTimeForm = () => {
             }
         });
     };
-
+    
     return (
         <>
             <div className="mb-6">
@@ -55,9 +57,12 @@ export const RealTimeForm = () => {
                     </AnimatePresence>
                 </div>
             </div>
-            <form action={handleSendToServer}>
-                <RepositorySubmitButton repositories={repositories}/>
-            </form>
+            <section className="flex">
+                <form action={handleSendToServer} className="w-full">
+                    <RepositorySubmitButton repositories={repositories}/>
+                </form>
+                { isLocal ? <DeleteAllReposButton /> : <></>}
+            </section>
         </>
 )
 }
\ No newline at end of file
diff --git a/components/hooks/usePusherState.ts b/hooks/usePusherState.ts
similarity index 100%
rename from components/hooks/usePusherState.ts
rename to hooks/usePusherState.ts