From d47e9f6eed8cf0ceaa2dbfb80aab56443bf97997 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sun, 24 Apr 2022 02:34:58 +0100 Subject: [PATCH] put breakpoints into the db --- app/routes/index.tsx | 18 ++++++++++++----- app/shared/db/breakpoints.server.ts | 31 +++++++++++++++++++++++++++++ app/shared/db/canvas.server.ts | 26 ++++++++++++++---------- app/shared/db/index.ts | 1 + app/shared/db/tree.server.ts | 13 ------------ 5 files changed, 61 insertions(+), 28 deletions(-) create mode 100644 app/shared/db/breakpoints.server.ts diff --git a/app/routes/index.tsx b/app/routes/index.tsx index 41d7328f07..0c315c3f8b 100644 --- a/app/routes/index.tsx +++ b/app/routes/index.tsx @@ -1,5 +1,5 @@ import { redirect, useLoaderData, type LoaderFunction } from "remix"; -import { Root, initialBreakpoints, type Data } from "@webstudio-is/sdk"; +import { Root, type Data } from "@webstudio-is/sdk"; import config from "~/config"; import * as db from "~/shared/db"; import Document from "./canvas"; @@ -23,10 +23,18 @@ export const loader: LoaderFunction = async ({ (wstdDomain === "wstd" || wstdDomain?.includes("localhost")) ) { try { - const tree = await db.tree.loadByDomain(userDomain); - const props = await db.props.loadByTreeId(tree.id); - // @todo fetch breakpoints - const breakpoints = initialBreakpoints; + const project = await db.project.loadByDomain(userDomain); + if (project === null) { + throw new Error(`Unknown domain "${userDomain}"`); + } + if (project.prodTreeId === null) { + throw new Error(`Site is not published`); + } + const [tree, props, breakpoints] = await Promise.all([ + db.tree.loadByProject(project, "production"), + db.props.loadByTreeId(project.prodTreeId), + db.breakpoints.load(project.id), + ]); return { tree, props, breakpoints }; } catch (error) { if (error instanceof Error) { diff --git a/app/shared/db/breakpoints.server.ts b/app/shared/db/breakpoints.server.ts new file mode 100644 index 0000000000..d40bea34b7 --- /dev/null +++ b/app/shared/db/breakpoints.server.ts @@ -0,0 +1,31 @@ +import { + initialBreakpoints, + type Project, + defaultBreakpoint, +} from "@webstudio-is/sdk"; +import { prisma } from "./prisma.server"; + +export const create = async (projectId: Project["id"]) => { + const data = initialBreakpoints + .filter((breakpoint) => breakpoint.ref !== "default") + .map((breakpoint) => ({ + ...breakpoint, + projectId, + })); + // https://github.com/prisma/prisma/issues/8131 + const breakpoints = await prisma.$transaction( + data.map((breakpoint) => prisma.breakpoint.create({ data: breakpoint })) + ); + // DB never contains the default breakpoint + breakpoints.push(defaultBreakpoint); + return breakpoints; +}; + +export const load = async (projectId: Project["id"]) => { + const breakpoints = await prisma.breakpoint.findMany({ + where: { projectId }, + }); + // DB never contains the default breakpoint + breakpoints.push(defaultBreakpoint); + return breakpoints; +}; diff --git a/app/shared/db/canvas.server.ts b/app/shared/db/canvas.server.ts index 86dccb4049..2fabd432ca 100644 --- a/app/shared/db/canvas.server.ts +++ b/app/shared/db/canvas.server.ts @@ -1,4 +1,4 @@ -import { type Data, initialBreakpoints, type Project } from "@webstudio-is/sdk"; +import { type Data, type Project } from "@webstudio-is/sdk"; import * as db from "."; export type CanvasData = Data & { project: Project }; @@ -7,23 +7,29 @@ export type ErrorData = { errors: string; }; -const loadData = async ({ projectId }: { projectId: string }) => { - const project = await db.project.loadById(projectId); +const loadData = async (projectId: Project["id"]) => { + const [existingBreakpoints, project] = await Promise.all([ + db.breakpoints.load(projectId), + db.project.loadById(projectId), + ]); if (project === null) throw new Error(`Project "${projectId}" not found`); - const [tree, props] = await Promise.all([ + + const [tree, props, breakpoints] = await Promise.all([ db.tree.loadByProject(project, "development"), db.props.loadByProject(project, "development"), + existingBreakpoints.length > 1 + ? existingBreakpoints + : db.breakpoints.create(projectId), ]); - // @todo fetch breakpoints from db - return { tree, props, project, breakpoints: initialBreakpoints }; + return { tree, props, project, breakpoints }; }; export const loadCanvasData = async ({ projectId, }: { - projectId: string; + projectId: Project["id"]; }): Promise => { - return await loadData({ projectId }); + return await loadData(projectId); }; export type PreviewData = Data; @@ -31,8 +37,8 @@ export type PreviewData = Data; export const loadPreviewData = async ({ projectId, }: { - projectId: string; + projectId: Project["id"]; }): Promise => { - const { tree, props, breakpoints } = await loadData({ projectId }); + const { tree, props, breakpoints } = await loadData(projectId); return { tree, props, breakpoints }; }; diff --git a/app/shared/db/index.ts b/app/shared/db/index.ts index 73291816bb..b220b5bc0b 100644 --- a/app/shared/db/index.ts +++ b/app/shared/db/index.ts @@ -3,3 +3,4 @@ export * as project from "./project.server"; export * as props from "./props.server"; export * as misc from "./misc.server"; export * from "./canvas.server"; +export * as breakpoints from "./breakpoints.server"; diff --git a/app/shared/db/tree.server.ts b/app/shared/db/tree.server.ts index 3e0c6244b1..5fe5fb6472 100644 --- a/app/shared/db/tree.server.ts +++ b/app/shared/db/tree.server.ts @@ -49,19 +49,6 @@ export const loadById = async (id: string): Promise => { })) as Tree; }; -export const loadByDomain = async (domain: string): Promise => { - const project = await prisma.project.findUnique({ - where: { domain }, - }); - if (project === null) { - throw new Error(`Unknown domain "${domain}"`); - } - if (project.prodTreeId === null) { - throw new Error(`Site is not published`); - } - return await loadById(project.prodTreeId); -}; - export const loadByProject = async ( project: Project | null, env: "production" | "development" = "development"