fix: build errors on use effects

felibatista · Mar 13, 2024 · ec45931 · ec45931
1 parent dfe5ee5
commit ec45931
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 62 deletions.
diff --git a/frontend/src/components/dashboard/table/columns.tsx b/frontend/src/components/dashboard/table/columns.tsx
@@ -54,44 +54,4 @@ export const columns: ColumnDef<Url>[] = [
       );
     },
   },
-  {
-    id: "actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      const link = row.original;
-      const [open, setOpen] = React.useState(false);
-
-      if (open) {
-        return <AlertRemoveURL setOpen={setOpen} open={open} urlId={parseInt(link.id)} />;
-      }
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Acciones</DropdownMenuLabel>
-            <DropdownMenuItem
-            onClick={() => navigator.clipboard.writeText(`${getUrlAPI()}/${link.urlShort}`)}
-            >
-              Copiar link corto
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              className="text-red-500 hover:text-red-600"
-              onClick={() => {
-               setOpen(true);
-              }}
-            >
-              Eliminar
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      );
-    },
-  },
 ];
diff --git a/frontend/src/components/url/URLCreatorInput.tsx b/frontend/src/components/url/URLCreatorInput.tsx
@@ -52,15 +52,6 @@ export default function URLCreatorInput({
   const [nameError, setNameError] = useState<string | null>(null);
   const [urlError, setUrlError] = useState<string | null>(null);
 
-  useEffect(() => {
-    setUrlError(null);
-    setNameError(null);
-
-    setUrl("");
-    setName("");
-    setCategory("Default");
-  }, []);
-
   function verifyName(nameVerify: string) {
     if (nameVerify.length < 3) {
       return {

diff --git a/frontend/src/components/url/URLCreatorLoading.tsx b/frontend/src/components/url/URLCreatorLoading.tsx
@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/card";
 
 import { Progress } from "../ui/progress";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { PhaseUrl } from "@/lib/types";
 import { addUrl } from "@/lib/url";
 
@@ -30,7 +30,7 @@ export default function URLCreatorLoading({
   const [phase, setPhaseLoading] = useState<number>(0);
   const [description, setDescription] = useState<string>("");
 
-  function startRender() {
+  const startRender = () => {
     setDescription("Iniciando conexiones con el servidor...");
     setPhaseLoading(1);
 
@@ -77,9 +77,11 @@ export default function URLCreatorLoading({
     });
   }
 
+  const startRenderRef = useRef(startRender);
+
   useEffect(() => {
-    startRender();
-  }, []);
+    startRenderRef.current();
+  }, [startRender]);
 
   return (
     <Card className="w-full h-[211px] grid items-center ">

diff --git a/frontend/src/components/url/URLCreatorResult.tsx b/frontend/src/components/url/URLCreatorResult.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   Card,
@@ -21,25 +21,29 @@ export default function URLCreatorResult({
   setPhase,
   setResultId,
 
-  resultId
+  resultId,
 }: {
   setPhase: (phase: PhaseUrl) => void;
   setResultId: (id: number | null) => void;
 
   resultId: number | null;
 }) {
-  const [loading, setLoading] = useState<boolean>(true)
-  const [url, setUrl] = useState<Url | null | undefined>(undefined)
+  const [loading, setLoading] = useState<boolean>(true);
+  const [url, setUrl] = useState<Url | null | undefined>(undefined);
 
   useEffect(() => {
-    getUrl(resultId!).then((url) => setUrl(url))
-  }, [])
+    if (resultId == null) {
+      return;
+    }
+
+    getUrl(resultId).then((url) => setUrl(url));
+  }, [resultId]);
 
   if (url == undefined) {
     return <Skeleton className="w-full h-[211px]" />;
   }
 
-  if (url == null){
+  if (url == null) {
     return (
       <Card className="w-full">
         <CardHeader>
@@ -64,8 +68,15 @@ export default function URLCreatorResult({
         </CardDescription>
       </CardHeader>
       <CardContent>
-      <CardTitle className="text-base">Información del URL:</CardTitle>
-        <p className="text-muted-foreground">| Link acortado: <a href={`${getUrlAPI()}/${url.urlShort}`} target="_blank" className="text-primary hover:underline">{`${getUrlAPI()}/${url.urlShort}`}</a>  </p>
+        <CardTitle className="text-base">Información del URL:</CardTitle>
+        <p className="text-muted-foreground">
+          | Link acortado:{" "}
+          <a
+            href={`${getUrlAPI()}/${url.urlShort}`}
+            target="_blank"
+            className="text-primary hover:underline"
+          >{`${getUrlAPI()}/${url.urlShort}`}</a>{" "}
+        </p>
       </CardContent>
       <CardFooter className="flex justify-end">
         <Button onClick={() => setPhase("input")}> Acortar otro URL</Button>