Add edit functionality (#574)

* Add edit functionality

* Remove old add recipe form

* Remove meta data from recipe edit page

* Fix code smells

* Fix all type errors and formatted files

package.json

@@ -80,6 +80,7 @@
  "contentlayer": "^0.3.4",
  "date-fns": "^2.30.0",
  "langchain": "^0.0.153",
+ "lodash": "^4.17.21",
  "lucide-react": "^0.279.0",
  "next": "13.5.2",
  "next-contentlayer": "^0.3.4",
@@ -102,6 +103,7 @@
  "simplebar-react": "^3.2.4",
  "sonner": "^1.0.3",
  "stripe": "^13.7.0",
+ "superjson": "^2.0.0",
  "tailwind-merge": "^1.14.0",
  "tailwindcss": "3.3.3",
  "tailwindcss-animate": "^1.0.7",
@@ -117,6 +119,7 @@
  "@faker-js/faker": "^8.1.0",
  "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
  "@types/eslint": "^8.44.3",
+ "@types/lodash": "^4.14.200",
  "@typescript-eslint/eslint-plugin": "^6.7.4",
  "@typescript-eslint/parser": "^6.7.4",
  "eslint": "8.51.0",

prisma/schema.prisma

@@ -15,12 +15,12 @@ datasource db {
 model Recipe {
  id String @id @default(cuid())
  title String
- description String? @db.LongText
+ description String  @db.LongText
  isPublic Boolean @default(false)
  userId String
- timeInKitchen Int?
- waitingTime Int?
- numberOfPeople Int?
+ timeInKitchen Int
+ waitingTime Int
+ numberOfPeople Int
  ratings RecipeRating[]
  ingredients IngredientsOnRecipes[]
  steps Step[]
@@ -40,7 +40,7 @@ model RecipeRating {
 model Ingredient {
  id String @id @default(cuid())
  name String
- unit String?
+ unit String
  userId String
  recipes IngredientsOnRecipes[]
 }
@@ -52,12 +52,10 @@ model IngredientsOnRecipes {
  recipeId String
  quantity Float
  assignedAt DateTime @default(now())
- assignedBy String?
 
  @@id([ingredientId, recipeId])
  @@index([ingredientId])
  @@index([recipeId])
- @@index([assignedBy])
 }
 
 model Step {

prisma/seed.ts

@@ -23,7 +23,6 @@ async function main() {
  },
  },
  quantity: 10,
- assignedBy: '1',
  },
  {
  ingredient: {
@@ -34,7 +33,6 @@ async function main() {
  },
  },
  quantity: 5,
- assignedBy: '1',
  },
  ],
  },

src/app/(dashboard)/dashboard/recipe/[recipeId]/edit/loading.tsx

@@ -0,0 +1,5 @@
+import { RecipeSkeleton } from '@/components/skeleton/RecipeSkeleton';
+
+export default function RecipeLoading() {
+ return <RecipeSkeleton />;
+}

src/app/(dashboard)/dashboard/recipe/[recipeId]/edit/not-found.tsx

@@ -0,0 +1,15 @@
+import { ErrorCard } from '@/components/cards/error-card';
+import { Shell } from '@/components/shells/shell';
+
+export default function RecipeNotFound() {
+ return (
+ <Shell variant="centered" className="max-w-md">
+ <ErrorCard
+ title="Recipe not found"
+ description="The recipe you are looking for does not exist."
+ retryLink="/recipes"
+ retryLinkText="Go to Recipes"
+ />
+ </Shell>
+ );
+}

src/app/(dashboard)/dashboard/recipe/[recipeId]/edit/page.tsx

@@ -0,0 +1,48 @@
+import { serverClient } from '@/app/_trpc/serverClient';
+import { EditRecipeForm } from '@/components/forms/recipe/UpdateRecipeForm';
+import { Breadcrumbs } from '@/components/pagers/breadcrumbs';
+import { Shell } from '@/components/shells/shell';
+import { currentUser } from '@clerk/nextjs/server';
+import { notFound } from 'next/navigation';
+
+interface ProductPageProps {
+ params: {
+ recipeId: string;
+ };
+}
+
+export default async function RecipeEditPage({
+ params,
+}: Readonly<ProductPageProps>) {
+ if (!params.recipeId) {
+ notFound();
+ }
+
+ const user = await currentUser();
+
+ const recipe = await serverClient.recipe
+ .getRecipe({ id: params.recipeId })
+ .catch(() => null);
+
+ if (!recipe || !user || recipe.userId !== user.id) {
+ notFound();
+ }
+
+ return (
+ <Shell>
+ <Breadcrumbs
+ segments={[
+ {
+ title: 'My Recipes',
+ href: '/dashboard/recipes',
+ },
+ {
+ title: recipe.title,
+ href: `/dashboard/recipe/${recipe.id}`,
+ },
+ ]}
+ />
+ <EditRecipeForm recipeId={recipe.id} initialRecipe={recipe} />
+ </Shell>
+ );
+}

src/app/(dashboard)/dashboard/recipe/[recipeId]/page.tsx

@@ -31,7 +31,7 @@ export async function generateMetadata({ params }: ProductPageProps) {
  };
 }
 
-export default async function ProductPage({
+export default async function RecipeViewPage({
  params,
 }: Readonly<ProductPageProps>) {
  if (!params.recipeId) {

src/app/(dashboard)/dashboard/recipes/new/page.tsx

@@ -1,4 +1,4 @@
-import { AddRecipeForm } from '@/components/forms/add-recipe-form';
+import { AddRecipeForm } from '@/components/forms/recipe/AddRecipeForm';
 import {
  PageHeader,
  PageHeaderDescription,

src/app/actions.ts

@@ -9,11 +9,19 @@ export async function createRecipeRevalidate() {
  revalidatePath('/dashboard/recipes');
 }
 
+export async function updateRecipeRevalidate(id: string) {
+ revalidatePath('/recipes');
+ revalidatePath(`/recipe/${id}`);
+ revalidatePath(`/dashboard/recipes`);
+ revalidatePath(`/dashboard/recipe/${id}`);
+ revalidatePath(`/dashboard/recipe/${id}/edit`);
+}
+
 export async function deleteRecipeRevalidate(id: string) {
  revalidatePath('/recipes');
- revalidatePath(`/recipes/${id}`);
+ revalidatePath(`/recipe/${id}`);
  revalidatePath(`/dashboard/recipes`);
- revalidatePath(`/dashboard/recipes/${id}`);
+ revalidatePath(`/dashboard/recipe/${id}`);
 }
 
 // For development

src/components/data-table/data-table-column-header.tsx

@@ -1,25 +1,24 @@
-import {
- ArrowDownIcon,
- ArrowUpIcon,
- CaretSortIcon,
- EyeNoneIcon,
-} from "@radix-ui/react-icons"
-import { type Column } from "@tanstack/react-table"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { Button } from '@/components/ui/button';
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import {
+ ArrowDownIcon,
+ ArrowUpIcon,
+ CaretSortIcon,
+ EyeNoneIcon,
+} from '@radix-ui/react-icons';
+import { type Column } from '@tanstack/react-table';
 
 interface DataTableColumnHeaderProps<TData, TValue>
  extends React.HTMLAttributes<HTMLDivElement> {
- column: Column<TData, TValue>
- title: string
+ column: Column<TData, TValue>;
+ title: string;
 }
 
 export function DataTableColumnHeader<TData, TValue>({
@@ -28,18 +27,18 @@ export function DataTableColumnHeader<TData, TValue>({
  className,
 }: DataTableColumnHeaderProps<TData, TValue>) {
  if (!column.getCanSort()) {
- return <div className={cn(className)}>{title}</div>
+ return <div className={cn(className)}>{title}</div>;
  }
 
  return (
- <div className={cn("flex items-center space-x-2", className)}>
+ <div className={cn('flex items-center space-x-2', className)}>
  <DropdownMenu>
  <DropdownMenuTrigger asChild>
  <Button
  aria-label={
- column.getIsSorted() === "desc"
+ column.getIsSorted() === 'desc'
  ? `Sorted descending. Click to sort ascending.`
- : column.getIsSorted() === "asc"
+ : column.getIsSorted() === 'asc'
  ? `Sorted ascending. Click to sort descending.`
  : `Not sorted. Click to sort ascending.`
  }
@@ -48,9 +47,9 @@ export function DataTableColumnHeader<TData, TValue>({
  className="-ml-3 h-8 data-[state=open]:bg-accent"
  >
  <span>{title}</span>
- {column.getIsSorted() === "desc" ? (
+ {column.getIsSorted() === 'desc' ? (
  <ArrowDownIcon className="ml-2 h-4 w-4" aria-hidden="true" />
- ) : column.getIsSorted() === "asc" ? (
+ ) : column.getIsSorted() === 'asc' ? (
  <ArrowUpIcon className="ml-2 h-4 w-4" aria-hidden="true" />
  ) : (
  <CaretSortIcon className="ml-2 h-4 w-4" aria-hidden="true" />
@@ -92,5 +91,5 @@ export function DataTableColumnHeader<TData, TValue>({
  </DropdownMenuContent>
  </DropdownMenu>
  </div>
- )
+ );
 }