beer-inventory/app/routes/admin/new/cocktail.tsx

import type { ActionFunctionArgs } from "@remix-run/node";
import { LoaderFunctionArgs, NodeOnDiskFile, json, redirect, unstable_composeUploadHandlers, unstable_createFileUploadHandler, unstable_createMemoryUploadHandler, unstable_parseMultipartFormData } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { copyFileSync, rmSync } from "node:fs";
import { useState } from "react";
import { Button, Container, Form, InputGroup, Row } from "react-bootstrap";

import { enhance } from "~/utils/db.server";
import { slugify } from "~/utils/slugs";

export const action = async ({
  request,
}: ActionFunctionArgs) => {
  const { dbe } = await enhance(request);

  const uploadHandler = unstable_composeUploadHandlers(
    unstable_createFileUploadHandler({
      file: ({ filename }) => filename.toLowerCase().replaceAll(" ", "_")
    }),
    // parse everything else into memory
    unstable_createMemoryUploadHandler()
  );
  const parsedForm = await unstable_parseMultipartFormData(
    request,
    uploadHandler
  );
  
  const slug = String(parsedForm.get("slug"));
  const manufacturer = Number(parsedForm.get("manufacturer"));

  const name = String(parsedForm.get("name"));
  const description = String(parsedForm.get("description"));
  var link : string | null = String(parsedForm.get("link")) || null;
  if(link == "") link = null;

  const abv = Number(parsedForm.get("abv"));

  const mix = parsedForm.has("mix") ? true : false;

  const sugar = parsedForm.has("sugar") ? true : false;
  const gluten = parsedForm.has("gluten") ? true : false;
  const lactose = parsedForm.has("lactose") ? true : false;
  const organic = parsedForm.has("organic") ? true : false;

  const image = parsedForm.get("image") as NodeOnDiskFile;

  var newFilename = null;
  if(image.size > 0)
    newFilename = "/cocktails/" + slug + "." + image.name.split('.').pop();

  try{
    // Move the file to the beers folder with the slug as name
    if(newFilename) 
    {
        // Copy is required for docker container to work
        copyFileSync(image.getFilePath(), "public" + newFilename);
        rmSync(image.getFilePath(), {force: true});
    }

    const createdCocktail = await dbe.cocktail.create({ data: {
        slug: slug,
        name: name, 
        description: description, 
        image: newFilename, 
        link: link,
        abv: abv,
        mix: mix,
        sugar: sugar,
        lactose: lactose,
        gluten: gluten,
        organic: organic,
        manufacturer: {connect: {id: manufacturer}}
      }
    });
    return redirect("/inventory/cocktail/" + createdCocktail.slug);
  }
  catch(e){
    console.log(e);
    rmSync(image.getFilePath(), {force: true});
    rmSync("public" + newFilename, {force: true});
  }

  return null;
};

export const loader = async ({
  request,
} : LoaderFunctionArgs) => {
  const { dbe } = await enhance(request);

  const manufacturers = await dbe.manufacturer.findMany({orderBy: {name: "asc"}});
  return json({manufacturers});
}

export default function NewCocktailRoute() {
  var loaderData = useLoaderData<typeof loader>();
  var [slug, setSlug] = useState("");

  return (
    <Container>
      <Row>
        <h1>Add Cocktail</h1>
        <Form method="POST" encType="multipart/form-data">

          <Form.Group className="mb-3">
            <Form.Label>Slug</Form.Label>
            <Form.Control type="text" placeholder="Auto generated" value={slug} name="slug" plaintext readOnly/>
          </Form.Group>

          <Form.Group className="mb-3">
            <Form.Label>Name</Form.Label>
            <Form.Control type="text" placeholder="Mojito" name="name" required onChange={(e) => {setSlug(slugify(e.target.value))}}/>
          </Form.Group>

          <Form.Group className="mb-3">
            <Form.Label>Description</Form.Label>
            <Form.Control as="textarea" type="text" name="description"/>
          </Form.Group>

          <Form.Group className="mb-3">
            <Form.Label>Manufacturer</Form.Label>
            <Form.Select name="manufacturer" required>
            {loaderData.manufacturers.map((manu) => (
              <option value={manu.id}>
                {manu.name}
              </option>
            ))}
            </Form.Select>
          </Form.Group>

          <Form.Group className="mb-3">
            <Form.Label>ABV</Form.Label>
            
            <InputGroup>
              <Form.Control type="number" min={0} max={100} step={0.1} name="abv" defaultValue={0.0} required/>
              <InputGroup.Text>%</InputGroup.Text>
            </InputGroup>
          </Form.Group>

          <Form.Group className="mb-3">
            <Form.Label>Cocktail specific</Form.Label>
            <Form.Check
              type="checkbox"
              label="Mix"
              name="mix"
              value={1}
            />
          </Form.Group>

          <Form.Group className="mb-3">
            <Form.Label>Allergies</Form.Label>
            <Form.Check
              type="checkbox"
              label="Sugar"
              name="sugar"
              value={1}
            />
            <Form.Check
              type="checkbox"
              label="Gluten"
              name="gluten"
              value={1}
            />
            <Form.Check
              type="checkbox"
              label="Lactose"
              name="lactose"
              value={1}
            />
            <Form.Check
              type="checkbox"
              label="Organic"
              name="organic"
              value={1}
            />
          </Form.Group>

          <Form.Group className="mb-3">
            <Form.Label>Link</Form.Label>
            <Form.Control type="text" placeholder="https://somewhere.com/..." name="link"/>
          </Form.Group>

          <Form.Group className="mb-3">
            <Form.Label>Image</Form.Label>
            <Form.Control type="file" name="image" accept="image/*"/>
          </Form.Group>

          <Button variant="primary" type="submit">
            Submit
          </Button>
        </Form>
      </Row>
    </Container>
  );
}