51 | >;
52 |
53 | return (
54 |
55 |
56 |
57 |
58 |
59 |
60 | {authenticated && (
61 |
62 | )}
63 | {children}
64 |
65 |
66 |
67 |
68 |
69 | );
70 | }
71 |
72 | export default function App() {
73 | return (
74 |
75 |
76 |
77 | );
78 | }
79 |
80 | export function CatchBoundary() {
81 | const { data, status } = useCatch();
82 |
83 | const message =
84 | typeof data === "string" && data ? data : messageFromStatus(status);
85 | // const icon = iconFromStatus(status);
86 |
87 | return (
88 |
89 |
90 |
{status}
91 |
{message}
92 |
29 |
30 |
31 |
{status}
32 |
33 | Go to the project
34 |
35 |
36 |
37 |
56 |
57 |
58 |
77 |
78 |
79 |
80 |
404
81 |
82 | Go to the project
83 |
84 |
85 |
86 |
88 |
89 |
32 |
75 |
76 |
77 | );
78 | }
79 |
80 | const schema = z.object({
81 | name: z.string().trim().min(1),
82 | description: z.string().trim().optional(),
83 | });
84 |
85 | export async function action({ request }: ActionArgs) {
86 | const user = await authenticate(request);
87 |
88 | return formAction({
89 | request,
90 | schema,
91 | successPath: (data: { id: string }) => `/dashboard/${data.id}`,
92 | mutation: makeDomainFunction(schema)(async (input) => {
93 | const project = await createProject({
94 | userId: user.id,
95 | name: input.name,
96 | description: input.description,
97 | });
98 |
99 | return { id: project.id };
100 | }),
101 | });
102 | }
103 |
--------------------------------------------------------------------------------
/app/routes/_layout.login.tsx:
--------------------------------------------------------------------------------
1 | import type { ActionArgs, LoaderArgs } from "@remix-run/node";
2 | import { redirect } from "@remix-run/node";
3 | import { makeDomainFunction } from "remix-domains";
4 | import { Form, formAction } from "remix-forms";
5 | import { z } from "zod";
6 |
7 | import type { AuthenticatedUser } from "~/auth.server";
8 | import { authenticate, setUser } from "~/auth.server";
9 | import { sessionStorage } from "~/session.server";
10 | import { findOrCreateUser } from "~/models.server";
11 |
12 | export async function loader({ request }: LoaderArgs) {
13 | return authenticate(request, { successRedirect: "/dashboard" });
14 | }
15 |
16 | export default function Login() {
17 | return (
18 |
19 |
Login
20 |
64 |
65 | );
66 | }
67 |
68 | const schema = z.object({
69 | username: z.string().trim().min(1),
70 | password: z.string().min(6),
71 | });
72 |
73 | export async function action({ request }: ActionArgs) {
74 | let user: AuthenticatedUser;
75 | return formAction({
76 | request,
77 | schema,
78 | mutation: makeDomainFunction(schema)(async ({ password, username }) => {
79 | const foundUser = await findOrCreateUser({ username, password });
80 | if (!foundUser) throw new Error("Invalid username or password.");
81 | user = foundUser;
82 | return foundUser;
83 | }),
84 | // This is to get around the lack of ability to set a cookie from a domain func.
85 | beforeSuccess: async (request) => {
86 | const session = await sessionStorage.getSession(
87 | request.headers.get("Cookie")
88 | );
89 | setUser(session, user);
90 |
91 | return redirect("/dashboard", {
92 | headers: {
93 | "Set-Cookie": await sessionStorage.commitSession(session),
94 | },
95 | });
96 | },
97 | });
98 | }
99 |
--------------------------------------------------------------------------------
/app/models/models.server.ts:
--------------------------------------------------------------------------------
1 | import { prisma } from "~/prisma.server";
2 |
3 | import type { DataTypes } from "~/app.config";
4 |
5 | export async function createModelForProject({
6 | userId,
7 | projectId,
8 | slug,
9 | name,
10 | description,
11 | fields,
12 | }: {
13 | userId: string;
14 | projectId: string;
15 | slug: string;
16 | name: string;
17 | description?: string;
18 | fields?: {
19 | name: string;
20 | type: DataTypes;
21 | required: boolean;
22 | array: boolean;
23 | }[];
24 | }) {
25 | const project = await prisma.project.findFirst({
26 | where: {
27 | id: projectId,
28 | users: {
29 | some: {
30 | id: userId,
31 | },
32 | },
33 | },
34 | select: {
35 | id: true,
36 | },
37 | });
38 |
39 | if (!project) return undefined;
40 |
41 | const model = await prisma.model.create({
42 | data: {
43 | slug,
44 | name,
45 | description,
46 | projectId,
47 | fields: fields?.length
48 | ? {
49 | create: fields,
50 | }
51 | : undefined,
52 | },
53 | });
54 |
55 | return { id: model.id };
56 | }
57 |
58 | export async function getFieldsForModel({
59 | modelId,
60 | userId,
61 | }: {
62 | modelId: string;
63 | userId: string;
64 | }) {
65 | const model = await prisma.model.findFirst({
66 | where: {
67 | id: modelId,
68 | project: {
69 | users: {
70 | some: {
71 | id: userId,
72 | },
73 | },
74 | },
75 | },
76 | select: {
77 | fields: {
78 | select: {
79 | id: true,
80 | name: true,
81 | type: true,
82 | required: true,
83 | array: true,
84 | typeReference: {
85 | select: {
86 | id: true,
87 | name: true,
88 | },
89 | },
90 | },
91 | },
92 | },
93 | });
94 |
95 | if (!model) return [];
96 |
97 | return model.fields.map((field) => ({
98 | id: field.id,
99 | name: field.name,
100 | type: field.type,
101 | required: field.required,
102 | array: field.array,
103 | typeReferenceId: field.typeReference?.id,
104 | typeReferenceName: field.typeReference?.name,
105 | }));
106 | }
107 |
108 | export async function getModelsForProject({
109 | projectId,
110 | userId,
111 | }: {
112 | projectId: string;
113 | userId: string;
114 | }) {
115 | const models = await prisma.model.findMany({
116 | where: {
117 | project: {
118 | id: projectId,
119 | users: {
120 | some: {
121 | id: userId,
122 | },
123 | },
124 | },
125 | },
126 | select: {
127 | id: true,
128 | slug: true,
129 | name: true,
130 | description: true,
131 | },
132 | });
133 |
134 | return models.map(({ id, slug, name, description }) => ({
135 | id,
136 | slug,
137 | name,
138 | description: description || undefined,
139 | }));
140 | }
141 |
142 | export async function getModelOverview({
143 | modelId,
144 | userId,
145 | }: {
146 | modelId: string;
147 | userId: string;
148 | }) {
149 | const model = await prisma.model.findFirst({
150 | where: {
151 | id: modelId,
152 | project: {
153 | users: {
154 | some: {
155 | id: userId,
156 | },
157 | },
158 | },
159 | },
160 | select: {
161 | id: true,
162 | slug: true,
163 | name: true,
164 | description: true,
165 | },
166 | });
167 |
168 | if (!model) return undefined;
169 |
170 | return {
171 | id: model.id,
172 | slug: model.slug,
173 | name: model.name,
174 | description: model.description,
175 | };
176 | }
177 |
178 | export async function countModels({
179 | userId,
180 | projectId,
181 | }: {
182 | userId: string;
183 | projectId: string;
184 | }): Promise {
185 | const project = await prisma.project.findFirst({
186 | where: {
187 | id: projectId,
188 | users: {
189 | some: {
190 | id: userId,
191 | },
192 | },
193 | },
194 | select: {
195 | _count: {
196 | select: {
197 | models: true,
198 | },
199 | },
200 | },
201 | });
202 |
203 | return project?._count.models || 0;
204 | }
205 |
--------------------------------------------------------------------------------
/app/routes/dashboard._menu.$projectId.models.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import type { LoaderArgs } from "@remix-run/node";
3 | import { defer } from "@remix-run/node";
4 | import type { ShouldReloadFunction } from "@remix-run/react";
5 | import {
6 | Await,
7 | Link,
8 | useCatch,
9 | useLoaderData,
10 | useParams,
11 | } from "@remix-run/react";
12 |
13 | import { authenticate } from "~/auth.server";
14 | import { DashboardListLayout, DashboardListItem } from "~/components/dashboard";
15 | import { getModelsForProject } from "~/models.server";
16 |
17 | import spritesHref from "~/sprites.svg";
18 |
19 | import { Layout } from "./dashboard._menu.$projectId.index";
20 |
21 | export async function loader({ request, params }: LoaderArgs) {
22 | const user = await authenticate(request);
23 |
24 | const modelsPromise = getModelsForProject({
25 | projectId: params.projectId!,
26 | userId: user.id,
27 | });
28 |
29 | return defer({
30 | models: modelsPromise,
31 | });
32 | }
33 |
34 | export const unstable_shouldReload: ShouldReloadFunction = ({ submission }) => {
35 | if (submission) {
36 | return true;
37 | }
38 |
39 | return false;
40 | };
41 |
42 | export function CatchBoundary() {
43 | const { status } = useCatch();
44 | return (
45 |
46 |
47 |
{status}
48 |
49 | Go to the project models
50 |
51 |
51 |
52 |
53 |
{status}
54 |
55 | Go to the dashboard
56 |
57 |
58 |
59 |
68 | -
69 |
73 | {" "}
76 |
Models
77 |
78 |
79 | {(count) => {count}}
80 |
81 |
82 |
83 |
84 | -
85 |
89 | {" "}
92 |
Content
93 |
94 |
95 | {(count) => {count}}
96 |
97 |
98 |
99 |
100 |
101 | );
102 |
103 | return (
104 | <>
105 |
106 |
107 |
108 |
109 |
110 |
115 |
{menuContents}
116 |
117 |
118 |
119 |
120 |
121 |
122 | -
123 |
127 | {" "}
130 | Docs
131 |
132 |
133 | -
134 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
115 |
121 |
122 |
123 |
124 |
128 |
135 |
136 |
137 | {title}
138 |
139 | {header}
140 |
146 |
147 |
148 |
{header}
180 |
181 | {title}
182 | {description && (
183 | {description}
184 | )}
185 |
186 |
187 |
188 | );
189 | }
190 |
191 | interface DashboardDetailLayoutProps {
192 | children: React.ReactNode;
193 | title?: React.ReactNode;
194 | }
195 |
196 | export function DashboardDetailLayout({
197 | children,
198 | title,
199 | }: DashboardDetailLayoutProps) {
200 | return (
201 |
202 |
203 |
204 |
205 |
227 | {children}
228 |
229 |
230 |
74 |
115 |
116 |
117 | Fields
118 |
131 |
132 |
138 |
154 | Loading...
155 |
161 | {fields.map(
162 | ({ id, name, array, required, type, typeReferenceName }) => (
163 | -
164 |
175 |
176 |
177 | {required ? "required" : "optional"}
178 |
179 |
180 | {name}
181 |
182 |
183 | {array && "Array<"}
184 | {typeReferenceName || type}
185 | {array && ">"}
186 |
187 |
188 |
189 |
190 | )
191 | )}
192 |
193 | )}
194 |
195 |
196 |
197 |
198 |
199 | );
200 | }
201 |
202 | const schema = z.object({
203 | name: z.string().trim().min(1),
204 | slug: z.string().trim().min(1),
205 | description: z.string().trim().optional(),
206 | });
207 |
--------------------------------------------------------------------------------
/app/routes/dashboard_.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import type { LoaderArgs } from "@remix-run/node";
3 | import { defer } from "@remix-run/node";
4 | import type { ShouldReloadFunction } from "@remix-run/react";
5 | import { Await, Link, Outlet, useLoaderData } from "@remix-run/react";
6 |
7 | import * as appConfig from "~/app.config";
8 | import { authenticate } from "~/auth.server";
9 | import { DashboardMenu } from "~/components/dashboard";
10 | import { getProjects } from "~/models.server";
11 |
12 | import spritesHref from "~/sprites.svg";
13 |
14 | export async function loader({ request, params }: LoaderArgs) {
15 | const user = await authenticate(request);
16 |
17 | const projectsPromise = getProjects({ userId: user.id });
18 |
19 | return defer({
20 | projects: projectsPromise,
21 | });
22 | }
23 |
24 | export const unstable_shouldReload: ShouldReloadFunction = ({ submission }) => {
25 | if (submission) {
26 | return true;
27 | }
28 |
29 | return false;
30 | };
31 |
32 | export default function DashboardMenuLayout() {
33 | const { projects } = useLoaderData();
34 |
35 | const menuContents = (
36 |
39 |
55 | Loading...
56 |
57 | }
58 | >
59 |
60 | {(projects) => (
61 |
87 | )}
88 |
89 |
90 | );
91 |
92 | return (
93 | <>
94 |
95 |
96 |
97 |
98 |
101 |
102 |
103 |
104 |
Projects
105 |
109 |
125 |
Loading...
126 |
127 |
128 |
129 |
132 | }
133 | >
134 |
135 |
136 |
141 |
{menuContents}
142 |
144 |
145 |
146 |
147 |
148 |
149 |
150 | -
151 |
155 | {" "}
158 | Docs
159 |
160 |
161 | -
162 |
172 |
173 |
174 |
175 |
176 |
177 |
51 | {errors.map((error, index) => (
52 |
{error}
53 | ))}
54 |
81 | Fields
82 |
92 |
93 | {fields.map((field, index) => {
94 | return (
95 |
206 | );
207 | })}
208 |
209 | );
210 | }
211 |
212 | export default function DashboardTest() {
213 | return (
214 |
215 |
216 |
256 |
257 |
258 | );
259 | }
260 |
261 | const fieldsSchema = z
262 | .array(
263 | z.object({
264 | name: z.string().trim().min(1),
265 | type: z.enum(
266 | appConfig.dataTypes
267 | ),
268 | array: zfd.checkbox({ trueValue: "" }),
269 | required: zfd.checkbox({ trueValue: "" }),
270 | })
271 | )
272 | .optional();
273 |
274 | const schema = z.object({
275 | name: z.string().trim().min(1),
276 | slug: z.string().trim().min(1),
277 | description: z.string().trim().optional(),
278 | fields: z.any().optional(),
279 | });
280 |
281 | export async function action({ request, params }: ActionArgs) {
282 | const user = await authenticate(request);
283 |
284 | return formAction({
285 | request,
286 | schema,
287 | successPath: (data: { id: string }) =>
288 | `/dashboard/${params.projectId}/models/${data.id}`,
289 | mutation: makeDomainFunction(schema)(async (input) => {
290 | const fields = await fieldsSchema.safeParseAsync(input.fields);
291 | if (!fields.success) {
292 | throw new InputErrors(
293 | fields.error.issues.map((issue) => ({
294 | path: issue.path.reduce((acc, key, index) => {
295 | if (index === 0) {
296 | return `fields.${key}`;
297 | }
298 | if (typeof key === "number") {
299 | return `${acc}[${key}]`;
300 | }
301 | return `${acc}.${key}`;
302 | }, ""),
303 | message: issue.message,
304 | }))
305 | );
306 | }
307 |
308 | const model = await createModelForProject({
309 | userId: user.id,
310 | projectId: params.projectId!,
311 | slug: input.slug,
312 | name: input.name,
313 | description: input.description,
314 | fields: fields.data,
315 | });
316 |
317 | if (!model) throw new InputError("Failed to create a model", "name");
318 |
319 | return { id: model.id };
320 | }),
321 | });
322 | }
323 |
--------------------------------------------------------------------------------