add update design settings

app/api/siteDesign/[siteDesignId]/route.ts

@@ -0,0 +1,60 @@
+import * as z from "zod";
+
+import { createRouteHandlerSupabaseClient } from "@supabase/auth-helpers-nextjs";
+import { headers, cookies } from "next/headers";
+import getUser from "~/lib/getUser";
+import { Database } from "~/types/supabase";
+import { fromZodError } from "zod-validation-error";
+
+const routeContextSchema = z.object({
+  params: z.object({
+    siteDesignId: z.string(),
+  }),
+});
+
+const patchRequestSchema = z.object({
+  gradientId: z.string(),
+  backgroundType: z.string(),
+  solid: z.string(),
+});
+
+export async function PATCH(
+  req: Request,
+  context: z.infer<typeof routeContextSchema>
+) {
+  try {
+    // Validate route params.
+    const { params } = routeContextSchema.parse(context);
+
+    // Get the request body and validate it.
+    const json = await req.json();
+    const { gradientId, backgroundType, solid } =
+      patchRequestSchema.parse(json);
+
+    // Update the post.
+    const supabase = createRouteHandlerSupabaseClient<Database>({
+      headers,
+      cookies,
+    });
+    const { error: updateError } = await supabase
+      .from("site_design")
+      .update({
+        gradient_id: gradientId,
+        background_type: backgroundType,
+        solid,
+      })
+      .eq("id", parseInt(params.siteDesignId));
+
+    if (updateError) {
+      console.error(updateError);
+      return new Response(null, { status: 500 });
+    }
+    return new Response(null, { status: 200 });
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return new Response(fromZodError(error).message, { status: 422 });
+    }
+
+    return new Response(null, { status: 500 });
+  }
+}

app/api/sites/[siteId]/route.ts

@@ -55,6 +55,13 @@ export async function DELETE(
   }
 }
 
+// const patchRequestSchema = z.object({
+//   params: z.object({
+//     gradientId: z.number(),
+//     backgroundType: z.string(),
+//     solid: z.string(),
+//   }),
+// });
 // export async function PATCH(
 //   req: Request,
 //   context: z.infer<typeof routeContextSchema>
@@ -64,26 +71,33 @@ export async function DELETE(
 //     const { params } = routeContextSchema.parse(context);
 
 //     // Check if the user has access to this post.
-//     if (!(await verifyCurrentUserHasAccessToSite(params.postId))) {
+//     if (!(await verifyCurrentUserHasAccessToSite(params.siteId))) {
 //       return new Response(null, { status: 403 });
 //     }
 
 //     // Get the request body and validate it.
 //     const json = await req.json();
-//     const body = postPatchSchema.parse(json);
+//     const { gradientId, backgroundType, solid } =
+//       patchRequestSchema.parse(json).params;
 
 //     // Update the post.
-//     // TODO: Implement sanitization for content.
-//     await db.post.update({
-//       where: {
-//         id: params.postId,
-//       },
-//       data: {
-//         title: body.title,
-//         content: body.content,
-//       },
+//     const supabase = createRouteHandlerSupabaseClient<Database>({
+//       headers,
+//       cookies,
 //     });
-
+//     const { error: updateError } = await supabase
+//       .from("site_design")
+//       .update({
+//         gradient_id: gradientId,
+//         background_type: backgroundType,
+//         solid,
+//       })
+//       .eq("id", params.siteId);
+
+//     if (updateError) {
+//       console.error(updateError);
+//       return new Response(null, { status: 500 });
+//     }
 //     return new Response(null, { status: 200 });
 //   } catch (error) {
 //     if (error instanceof z.ZodError) {

app/editor/[siteId]/EditorContext.tsx

@@ -3,20 +3,44 @@
 import React, { PropsWithChildren, useEffect, useState } from "react";
 
 type EditorContextType = {
-  solid?: string;
-  setSolid?: React.Dispatch<React.SetStateAction<string>>;
-  gradientId?: number;
-  setGradientId?: React.Dispatch<React.SetStateAction<number>>;
-  backgroundType?: string;
-  setBackgroundType?: React.Dispatch<React.SetStateAction<string>>;
+  solid: string;
+  gradientId: string;
+  backgroundType: string;
+  setSolid: React.Dispatch<React.SetStateAction<string>>;
+  setGradientId: React.Dispatch<React.SetStateAction<string>>;
+  setBackgroundType: React.Dispatch<React.SetStateAction<string>>;
 };
 
-export const EditorContext = React.createContext<EditorContextType>({});
+const defaultContext = {
+  solid: "#f1f5f9",
+  setSolid: () => {},
+  gradientId: "1",
+  setGradientId: () => {},
+  backgroundType: "gradient",
+  setBackgroundType: () => {},
+};
+export const EditorContext =
+  React.createContext<EditorContextType>(defaultContext);
+
+type EditorContextProviderProps = PropsWithChildren<{
+  solid?: string | null;
+  gradientId?: string | null;
+  backgroundType?: string | null;
+}>;
 
-export function EditorContextProvider({ children }: PropsWithChildren) {
-  const [solid, setSolid] = useState("#ffffff");
-  const [gradientId, setGradientId] = useState(0);
-  const [backgroundType, setBackgroundType] = useState("gradient");
+export function EditorContextProvider({
+  children,
+  solid: initialSolid,
+  gradientId: initialGradientId,
+  backgroundType: initialBackgroundType,
+}: EditorContextProviderProps) {
+  const [solid, setSolid] = useState(initialSolid ?? defaultContext.solid);
+  const [gradientId, setGradientId] = useState(
+    initialGradientId ?? defaultContext.gradientId
+  );
+  const [backgroundType, setBackgroundType] = useState(
+    initialBackgroundType ?? defaultContext.backgroundType
+  );
   return (
     <EditorContext.Provider
       value={{

app/editor/[siteId]/LinksPreview.tsx

@@ -1,51 +1,34 @@
 "use client";
 
 import Link from "next/link";
-import CopyLinkButton from "./CopyLinkButton";
+import { gradients } from "./SiteDesignCard";
+import type { GradientIds } from "./SiteDesignCard";
 import { Link as LinkType } from "~/types/supabase";
-import DeviceFrame from "./DeviceFrame";
+import DeviceFrame from "./components/DeviceFrame";
 import { EditorContext } from "./EditorContext";
 import { useContext } from "react";
 import { cn } from "~/lib/utils";
-import { cva } from "class-variance-authority";
 
 type Props = {
   siteName: string;
   links?: Array<Pick<LinkType, "id" | "title" | "url">>;
 };
 
-const gradients = cva(["bg-gradient-to-br"], {
-  variants: {
-    gradientId: {
-      1: ["from-amber-300", "to-rose-400"], // OrangeRed
-      2: ["from-pink-400", "to-rose-400"], // RosePink
-      3: ["from-cyan-300", "to-blue-600"], // Sky
-      4: ["from-emerald-400", "to-cyan-500"], // CyanGreen
-      5: ["from-purple-600", "to-blue-500"], // BluePurple
-      6: ["from-green-600", "to-green-800"], // GreenGreen
-      7: ["from-fuchsia-300", "to-red-400"], // LightPink
-      8: ["from-purple-300", "to-blue-400"], // GreenGreen
-    },
-  },
-});
 export default function LinksPreviewComponent({ links, siteName }: Props) {
-  const {
-    solid,
-    setSolid,
-    gradientId,
-    setGradientId,
-    backgroundType,
-    setBackgroundType,
-  } = useContext(EditorContext);
+  const { solid, gradientId, backgroundType } = useContext(EditorContext);
 
   const renderedLinks = links ?? [];
   return (
     <DeviceFrame>
       <div
         className={cn(
           "h-full w-full rounded-[68px] bg-background",
-          gradients({ gradientId: 8 })
+          backgroundType === "gradient" &&
+            gradients({ gradientId: gradientId as GradientIds })
         )}
+        style={{
+          backgroundColor: backgroundType === "solid" ? solid : undefined,
+        }}
       >
         <div className="grid gap-8 p-10 pt-32">
           <h4 className="text-md text-center font-bold">{siteName}</h4>
@@ -67,21 +50,3 @@ export default function LinksPreviewComponent({ links, siteName }: Props) {
     </DeviceFrame>
   );
 }
-
-/* <CopyLinkButton siteName={siteName} />
-      <div
-        className="radius-1/2 relative overflow-hidden rounded-3xl border-8 border-foreground p-2 text-center"
-        style={{ height: "844px", width: "390px" }}
-      >
-        <div className="radius-1/2 flex h-full w-full flex-col justify-center overflow-y-scroll rounded-2xl">
-          {renderedLinks.map((link) => (
-            <Link
-              className={"w-full rounded-lg border bg-background p-8"}
-              key={link.id}
-              href={link.url}
-            >
-              {link.title}
-            </Link>
-          ))}
-      </div>
-        </div> */