Merge pull request #146 from Apsysikal/dev

Dev

.env.example

@@ -1,3 +1,2 @@
 DATABASE_URL="file:./data.db?connection_limit=1"
 SESSION_SECRET="super-duper-s3cret"
-IMAGE_UPLOAD_FOLDER="/workspaces/mokupona/build/uploads"

app/components/dinner-card.tsx

@@ -1,5 +1,4 @@
 import type { Event } from "@prisma/client";
-import type { SerializeFrom } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 
 import { Button } from "./ui/button";
@@ -10,7 +9,7 @@ export function DinnerCard({
   event,
   preferredLocale,
 }: {
-  event: Event | SerializeFrom<Event>;
+  event: Event;
   preferredLocale: string;
 }) {
   const parsedDate = new Date(event.date);

app/components/dinner-view.tsx

@@ -1,14 +1,10 @@
-import type { Address, Event } from "@prisma/client";
-import { SerializeFrom } from "@remix-run/node";
-
 import { AutoLink } from "./auto-link";
 
+import { loader } from "~/routes/admin.dinners.$dinnerId";
 import { getEventImageUrl } from "~/utils/misc";
 
 export interface DinnerViewProps {
-  event:
-    | (Event & { address: Address })
-    | SerializeFrom<Event & { address: Address }>;
+  event: Awaited<ReturnType<typeof loader>>["event"];
 }
 
 export function DinnerView({ event }: DinnerViewProps) {

app/components/ui/select.tsx

@@ -17,7 +17,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
     className?: string | ClassValue[];
   }
@@ -39,7 +39,7 @@ const SelectTrigger = React.forwardRef<
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
     className?: string | ClassValue[];
   }
@@ -58,7 +58,7 @@ const SelectScrollUpButton = React.forwardRef<
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
     className?: string | ClassValue[];
   }
@@ -78,7 +78,7 @@ SelectScrollDownButton.displayName =
   SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
     className?: string | ClassValue[];
     position: "item-aligned" | "popper";
@@ -113,7 +113,7 @@ const SelectContent = React.forwardRef<
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
     className?: string | ClassValue[];
   }
@@ -127,7 +127,7 @@ const SelectLabel = React.forwardRef<
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
     className?: string | ClassValue[];
   }
@@ -151,7 +151,7 @@ const SelectItem = React.forwardRef<
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
     className?: string | ClassValue[];
   }

app/root.tsx

@@ -1,10 +1,6 @@
 import { HamburgerMenuIcon, InstagramLogoIcon } from "@radix-ui/react-icons";
-import type {
-  LinksFunction,
-  LoaderFunctionArgs,
-  SerializeFrom,
-} from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
+import { data } from "@remix-run/node";
 import {
   Form,
   Link,
@@ -36,7 +32,7 @@ import { getToast } from "./utils/toast.server";
 import stylesheet from "~/tailwind.css?url";
 import { getUserWithRole } from "~/utils/session.server";
 
-export type RootLoaderData = SerializeFrom<typeof loader>;
+export type RootLoaderData = typeof loader;
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
@@ -74,7 +70,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   const domainUrl = getDomainUrl(request);
   const user = await getUserWithRole(request);
   const { toast, headers } = await getToast(request);
-  return json({ user, toast, domainUrl }, { headers: combineHeaders(headers) });
+  return data({ user, toast, domainUrl }, { headers: combineHeaders(headers) });
 };
 
 export default function App() {
@@ -86,7 +82,7 @@ export default function App() {
         <Meta />
         <Links />
       </head>
-      <body className="h-full bg-gray-950 text-gray-50">
+      <body className="dark h-full bg-gray-950 text-gray-50">
         <Document />
         <ScrollRestoration />
         <Scripts />

app/routes.ts

@@ -0,0 +1,3 @@
+import { flatRoutes } from "@remix-run/fs-routes";
+
+export default flatRoutes();

app/routes/admin._index.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node";
+import { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 
 import { Button } from "~/components/ui/button";
@@ -7,7 +7,7 @@ import { requireUserWithRole } from "~/utils/session.server";
 
 export async function loader({ request }: LoaderFunctionArgs) {
   await requireUserWithRole(request, ["moderator", "admin"]);
-  return json({});
+  return {};
 }
 
 export const meta: MetaFunction<typeof loader> = () => {

app/routes/admin.dinners.$dinnerId.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node";
+import { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Form, Link, useLoaderData } from "@remix-run/react";
 import invariant from "tiny-invariant";
 
@@ -17,7 +17,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 
   if (!event) throw new Response("Not found", { status: 404 });
 
-  return json({ event });
+  return { event };
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {

app/routes/admin.dinners.$dinnerId_.edit.tsx

@@ -6,28 +6,25 @@ import {
   useForm,
 } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
+import { FileUpload, parseFormData } from "@mjackson/form-data-parser";
 import {
   ActionFunctionArgs,
   LoaderFunctionArgs,
-  MaxPartSizeExceededError,
   MetaFunction,
-  NodeOnDiskFile,
-  json,
   redirect,
-  unstable_composeUploadHandlers,
-  unstable_createFileUploadHandler,
-  unstable_createMemoryUploadHandler,
-  unstable_parseMultipartFormData,
 } from "@remix-run/node";
 import { Form, useActionData, useLoaderData } from "@remix-run/react";
 import invariant from "tiny-invariant";
-import { z } from "zod";
 
 import { Field, SelectField, TextareaField } from "~/components/forms";
 import { Button } from "~/components/ui/button";
 import { prisma } from "~/db.server";
 import { getAddresses } from "~/models/address.server";
 import { getEventById, updateEvent } from "~/models/event.server";
+import {
+  fileStorage,
+  getStorageKey,
+} from "~/utils/dinner-image-storage.server";
 import { ClientEventSchema } from "~/utils/event-validation";
 import { ServerEventSchema } from "~/utils/event-validation.server";
 import { getTimezoneOffset, offsetDate } from "~/utils/misc";
@@ -46,11 +43,11 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 
   if (!event) throw new Response("Not found", { status: 404 });
 
-  return json({
+  return {
     validImageTypes,
     addresses,
     dinner: event,
-  });
+  };
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
@@ -71,41 +68,18 @@ export async function action({ request, params }: ActionFunctionArgs) {
   const { dinnerId } = params;
   invariant(typeof dinnerId === "string", "Parameter dinnerId is missing");
 
-  const uploadHandler = unstable_composeUploadHandlers(
-    unstable_createFileUploadHandler({
-      directory: process.env.IMAGE_UPLOAD_FOLDER,
-    }),
-    unstable_createMemoryUploadHandler(),
-  );
+  const uploadHandler = async (fileUpload: FileUpload) => {
+    let storageKey = getStorageKey("temporary-key");
+    await fileStorage.set(storageKey, fileUpload);
+    return fileStorage.get(storageKey);
+  };
 
-  const formData = await unstable_parseMultipartFormData(
-    request,
-    async (part) => {
-      try {
-        const result = await uploadHandler(part);
-        return result;
-      } catch (error) {
-        if (error instanceof MaxPartSizeExceededError) {
-          maximumFileSizeExceeded = true;
-          return new File([], "cover");
-        }
-        throw error;
-      }
-    },
-  );
+  const formData = await parseFormData(request, uploadHandler);
 
   const submission = parseWithZod(formData, {
     schema: (intent) =>
-      schema.superRefine((data, ctx) => {
+      schema.superRefine((data) => {
         if (intent !== null) return { ...data };
-        if (maximumFileSizeExceeded) {
-          ctx.addIssue({
-            path: ["cover"],
-            code: z.ZodIssueCode.custom,
-            message: "File cannot be greater than 3MB",
-          });
-          return;
-        }
       }),
   });
 
@@ -116,11 +90,11 @@ export async function action({ request, params }: ActionFunctionArgs) {
   ) {
     // Remove the uploaded file from disk.
     // It will be sent again when submitting.
-    await (submission.payload.cover as unknown as NodeOnDiskFile).remove();
+    await fileStorage.remove(getStorageKey("temporary-key"));
   }
 
   if (submission.status !== "success" || !submission.value) {
-    return json(submission.reply());
+    return submission.reply();
   }
 
   const { title, description, date, slots, price, cover, addressId } =
@@ -138,7 +112,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
 
     // Remove the file from disk.
     // It is in the database now.
-    await (cover as NodeOnDiskFile).remove();
+    await fileStorage.remove(getStorageKey("temporary-key"));
   }
 
   const event = await updateEvent(dinnerId, {
@@ -167,7 +141,7 @@ export default function DinnersPage() {
     defaultValue: {
       title: dinner.title,
       description: dinner.description,
-      date: dinner.date.substring(0, 16),
+      date: dinner.date.toISOString().substring(0, 16),
       slots: dinner.slots,
       price: dinner.price,
       addressId: dinner.addressId,

app/routes/admin.dinners.$dinnerId_.signups.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node";
+import { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import invariant from "tiny-invariant";
 
@@ -27,10 +27,10 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 
   if (!event) throw new Response("Not found", { status: 404 });
 
-  return json({
+  return {
     event,
     responses,
-  });
+  };
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {

app/routes/admin.dinners._index.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node";
+import { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Link, useFetcher, useLoaderData } from "@remix-run/react";
 
 import { Button } from "~/components/ui/button";
@@ -9,7 +9,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   await requireUserWithRole(request, ["moderator", "admin"]);
   const events = await getEvents();
 
-  return json({ events });
+  return { events };
 }
 
 export const meta: MetaFunction<typeof loader> = () => {