improve server rendering

VictorVation · May 19, 2023 · 4cf73e4 · 4cf73e4 · vercel · May 19, 2023
1 parent a047420
commit 4cf73e4
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 36 deletions.
diff --git a/app/(introducty)/editor/[siteId]/AddLinkCard.tsx b/app/(introducty)/editor/[siteId]/AddLinkCard.tsx
@@ -76,7 +76,7 @@ export default function AddLinkCard({ links, siteId }: Props) {
     const res = await fetch(`/api/links/${id}`, {
       method: "DELETE",
     });
-    console.log(res);
+
     if (!res.ok) {
       if (res.status === 422) return toast.error(await res.text());
       toast.error("Error, your link was not deleted. Please try again");

diff --git a/app/(introducty)/editor/[siteId]/LinksPreviewCard.tsx b/app/(introducty)/editor/[siteId]/LinksPreviewCard.tsx
@@ -4,16 +4,20 @@ import Link from "next/link";
 import { Link as LinkType } from "~/types/supabase";
 import DeviceFrame from "./DeviceFrame";
 import { EditorContext } from "./EditorContext";
-import { useContext } from "react";
+import { PropsWithChildren, useContext } from "react";
 import { cn } from "~/lib/utils";
 import { GradientIdsType, gradientVariant } from "~/lib/gradients";
 
-type Props = {
+type Props = PropsWithChildren<{
   siteName: string;
   links?: Array<Pick<LinkType, "id" | "title" | "url">>;
-};
+}>;
 
-export default function LinksPreviewComponent({ links, siteName }: Props) {
+export default function LinksPreviewComponent({
+  links,
+  siteName,
+  children,
+}: Props) {
   const { solid, gradientId, backgroundType } = useContext(EditorContext);
 
   const renderedLinks = links ?? [];
@@ -29,24 +33,7 @@ export default function LinksPreviewComponent({ links, siteName }: Props) {
           backgroundColor: backgroundType === "solid" ? solid : undefined,
         }}
       >
-        <div className="grid gap-8 p-10 pt-32">
-          <h4 className="text-md text-black text-center font-bold">
-            {siteName}
-          </h4>
-          <div className="grid gap-2">
-            {renderedLinks.map((link) => (
-              <Link
-                className={
-                  "w-full rounded-lg border bg-slate-50 border-slate-200 text-black p-4 text-center"
-                }
-                key={link.id}
-                href={link.url}
-              >
-                {link.title}
-              </Link>
-            ))}
-          </div>
-        </div>
+        {children}
       </div>
     </DeviceFrame>
   );

diff --git a/app/(introducty)/editor/[siteId]/SiteDesignCard.tsx b/app/(introducty)/editor/[siteId]/SiteDesignCard.tsx
@@ -86,7 +86,6 @@ export default function SiteDesignCard({ siteDesignId }: Props) {
   } = useController({ name: "gradientId", control });
 
   const handleSolidChange = (e: SyntheticEvent<HTMLInputElement>) => {
-    console.log(e.currentTarget.value);
     setSolidContext?.(e.currentTarget.value);
     onSolidInputChange(e);
   };
@@ -106,12 +105,6 @@ export default function SiteDesignCard({ siteDesignId }: Props) {
     }
   }
 
-  console.log(
-    gradientVariant({
-      gradientId: gradientId as GradientIdsType,
-    })
-  );
-
   return (
     <div className="w-sm row-span-2 transition-all duration-500">
       <Card>

diff --git a/app/(introducty)/editor/[siteId]/SiteSettingsCard.tsx b/app/(introducty)/editor/[siteId]/SiteSettingsCard.tsx
@@ -43,11 +43,6 @@ export default function SiteSettingsCard({ siteName, siteId }: Props) {
   const {
     register,
     handleSubmit,
-    setValue,
-    control,
-    getValues,
-    reset,
-    watch,
     formState: { errors },
     formState: { isSubmitting },
   } = useForm<Inputs>({ defaultValues: { siteName } });
@@ -97,6 +92,7 @@ export default function SiteSettingsCard({ siteName, siteId }: Props) {
                     introducty.com/
                   </label>
                   <Input
+                    defaultValue={siteName}
                     type="text"
                     id="siteName"
                     placeholder="Title"

diff --git a/app/(introducty)/editor/[siteId]/page.tsx b/app/(introducty)/editor/[siteId]/page.tsx
@@ -71,7 +71,26 @@ export default async function Editor({ params }: Props) {
           <AddLinkCard siteId={siteId} links={links} />
         </div>
         <div className="mx-auto">
-          <LinksPreviewCard siteName={siteName} links={links} />
+          <LinksPreviewCard siteName={siteName} links={links}>
+            <div className="grid gap-8 p-10 pt-32">
+              <h4 className="text-md text-black text-center font-bold">
+                {siteName}
+              </h4>
+              <div className="grid gap-2">
+                {links.map((link) => (
+                  <Link
+                    className={
+                      "w-full rounded-lg border bg-slate-50 border-slate-200 text-black p-4 text-center"
+                    }
+                    key={link.id}
+                    href={link.url}
+                  >
+                    {link.title}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          </LinksPreviewCard>
         </div>
       </div>
       <Link