fix: Using "undefined" to link "null" with "useParams"

ln-dev7 · Sep 30, 2023 · 6716d6a · 6716d6a
1 parent c33cc9d
commit 6716d6a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 15 deletions.
diff --git a/components/algolia/algolia-search-link.tsx b/components/algolia/algolia-search-link.tsx
@@ -21,7 +21,7 @@ export default function AlgoliaSearchLink() {
   const params = useParams()
 
   const transformItems = (items) => {
-    if (params["link"] !== null) {
+    if (params["link"] !== undefined) {
       return items.filter((item) => item.idAuthor === params["link"])
     } else {
       return items.filter((item) => item.idAuthor === userPseudo)
@@ -31,9 +31,11 @@ export default function AlgoliaSearchLink() {
   return (
     <InstantSearch indexName="links" searchClient={client}>
       <SearchBox
-        placeholder={`Search links of ${
-          params["link"] !== null ? params["link"] : null
-        }...`}
+        placeholder={` ${
+          params["link"] !== undefined
+            ? `Search links of ${params["link"]}`
+            : "Search links"
+        } ...`}
         submitIconComponent={() => <Search className="h-4 w-4" />}
         resetIconComponent={() => <Trash2 />}
         loadingIconComponent={() => (

diff --git a/components/cards/card-code-admin.tsx b/components/cards/card-code-admin.tsx
@@ -334,7 +334,7 @@ export default function CardCodeAdmin({
 
   return (
     <div key={id} className="mb-0 flex flex-col gap-2">
-      {params["code-preview"] !== null && (
+      {params["code-preview"] !== undefined && (
         <div className="flex w-full items-center justify-center">
           <Dialog>
             <DialogTrigger asChild>
@@ -780,7 +780,7 @@ export default function CardCodeAdmin({
             </AlertDialog>
           </div>
         </div>
-        {params["code-preview"] === null && !isPrivate ? (
+        {params["code-preview"] === undefined && !isPrivate ? (
           <Link href={`/code-preview/${id}`}>
             <pre className="max-h-[200px] w-auto overflow-auto rounded-lg rounded-t-none bg-slate-900 p-4 hover:bg-gray-900 dark:bg-black dark:hover:bg-zinc-900">
               <code
@@ -794,7 +794,9 @@ export default function CardCodeAdmin({
         ) : (
           <pre
             className={`${
-              params["code-preview"] === null && isPrivate && "max-h-[200px] "
+              params["code-preview"] === undefined &&
+              isPrivate &&
+              "max-h-[200px] "
             }
           w-auto overflow-auto rounded-lg rounded-t-none bg-slate-900 p-4 dark:bg-black`}
           >
@@ -860,7 +862,7 @@ export default function CardCodeAdmin({
           </div>
         </a>
         <div className="flex shrink-0 items-center gap-4">
-          {params["code-preview"] === null && !isPrivate && (
+          {params["code-preview"] === undefined && !isPrivate && (
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -994,7 +996,7 @@ export default function CardCodeAdmin({
           )}
         </div>
       </div>
-      {params["code-preview"] === null && !isPrivate ? (
+      {params["code-preview"] === undefined && !isPrivate ? (
         <Link
           href={`/code-preview/${id}`}
           className="text-sm text-slate-700 dark:text-slate-400"

diff --git a/components/cards/card-code.tsx b/components/cards/card-code.tsx
@@ -179,9 +179,11 @@ export default function CardCode({
     link.click()
   }
 
+  console.log("params", params["code-preview"])
+
   return (
     <div key={id} className="mb-0 flex flex-col gap-2">
-      {params["code-preview"] !== null && (
+      {params["code-preview"] !== undefined && (
         <div className="flex w-full items-center justify-center">
           <Dialog>
             <DialogTrigger asChild>
@@ -399,7 +401,7 @@ export default function CardCode({
             </AlertDialog>
           </div>
         </div>
-        {params["code-preview"] === null ? (
+        {params["code-preview"] === undefined ? (
           <Link href={`/code-preview/${id}`}>
             <pre className="max-h-[200px] w-auto overflow-auto rounded-lg rounded-t-none bg-slate-900 p-4 hover:bg-gray-900 dark:bg-black dark:hover:bg-zinc-900">
               <code
@@ -474,7 +476,7 @@ export default function CardCode({
           </div>
         </a>
         <div className="flex shrink-0 items-center justify-end gap-3">
-          {params["code-preview"] === null && (
+          {params["code-preview"] === undefined && (
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -700,7 +702,7 @@ export default function CardCode({
         </div>
       </div>
 
-      {params["code-preview"] === null ? (
+      {params["code-preview"] === undefined ? (
         <Link
           href={`/code-preview/${id}`}
           className="text-sm text-slate-700 dark:text-slate-400"

diff --git a/components/form/publish.tsx b/components/form/publish.tsx
@@ -200,6 +200,7 @@ export default function PublishForms({ dataForm }: { dataForm: any }) {
             type="text"
             placeholder={`https://sharuco.lndev.me/form/view/${params["form"]}`}
             value={`https://sharuco.lndev.me/form/view/${params["form"]}`}
+            disabled
           />
           <Button
             onClick={() => {

diff --git a/components/site-header.tsx b/components/site-header.tsx
@@ -26,9 +26,9 @@ export function SiteHeader() {
         </div>
         <div className="flex flex-1 items-center justify-end space-x-4">
           <div className="w-full flex-1 lg:w-auto lg:flex-none">
-            {params["link"] !== null || (pathName === "/links" && user) ? (
+            {params["link"] !== undefined || (pathName === "/links" && user) ? (
               <SearchBarLink />
-            ) : (params["form"] !== null && user) ||
+            ) : (params["form"] !== undefined && user) ||
               (pathName === "/forms" && user) ? (
               <SearchBarForm />
             ) : (