Merge pull request #65 from yummy-recipes/add-more-links

Add links to categories and all recipes

src/app/page.tsx

@@ -1,54 +1,56 @@
-import Link from 'next/link'
-import { PrismaClient } from '@prisma/client'
-import { RecipeListItem } from '@/components/recipe-list-item/recipe-list-item'
-import { RecipeList } from '@/components/recipe-list/recipe-list'
+import Link from "next/link";
+import { PrismaClient } from "@prisma/client";
+import { RecipeListItem } from "@/components/recipe-list-item/recipe-list-item";
+import { RecipeList } from "@/components/recipe-list/recipe-list";
 
-const prisma = new PrismaClient()
+const prisma = new PrismaClient();
 
-const tagSlugs = ['makaron', 'wegetarianskie', 'drozdzowe', 'ciasta']
+const tagSlugs = ["makaron", "wegetarianskie", "drozdzowe", "ciasta"];
 
-const bySlugPosition = (tag1: { slug: string }, tag2: { slug: string }) => tagSlugs.indexOf(tag1.slug) - tagSlugs.indexOf(tag2.slug)
+const bySlugPosition = (tag1: { slug: string }, tag2: { slug: string }) =>
+  tagSlugs.indexOf(tag1.slug) - tagSlugs.indexOf(tag2.slug);
 
-const upperCaseFirstLetter = (string: string) => string.charAt(0).toUpperCase() + string.slice(1)
+const upperCaseFirstLetter = (string: string) =>
+  string.charAt(0).toUpperCase() + string.slice(1);
 
 export default async function Home() {
-  const tags = await prisma.tag.findMany({ where: { slug: { in: tagSlugs } } })
-  const recipeCount = await prisma.recipe.count()
+  const tags = await prisma.tag.findMany({ where: { slug: { in: tagSlugs } } });
+  const recipeCount = await prisma.recipe.count();
+  const categories = await prisma.category.findMany();
 
   const groupLoaders = tags.sort(bySlugPosition).map(async (tag) => {
-
     const recipes = await prisma.recipe.findMany({
       where: {
         tags: {
           some: {
-            id: tag.id
-          }
-        }
+            id: tag.id,
+          },
+        },
       },
       take: 4,
       orderBy: {
-        publishedAt: 'desc'
+        publishedAt: "desc",
       },
       include: {
         category: true,
-      }
-    })
+      },
+    });
 
     return {
       tag,
-      recipes
-    }
-  })
+      recipes,
+    };
+  });
 
-  const groups = await Promise.all(groupLoaders)
+  const groups = await Promise.all(groupLoaders);
 
   return (
     <main className="flex flex-col items-center gap-8">
-      <div className='w-full my-12'>
-        <h1 className='text-gradient uppercase text-4xl inline'>
+      <div className="w-full my-12">
+        <h1 className="text-gradient uppercase text-4xl inline">
           Przepisy kulinarne
         </h1>
-        <h2 className='text-lg'>
+        <h2 className="text-lg">
           Kolekcja {recipeCount} domowych przepisów na pyszne dania
         </h2>
       </div>
@@ -69,11 +71,30 @@ export default async function Home() {
           </RecipeList>
 
           <div className="flex justify-end">
-            <Link href={`/tag/${tag.slug}`} className="text-md text-blue-600">Zobacz wszystkie w kategorii {tag.title}</Link>
+            <Link href={`/tag/${tag.slug}`} className="text-md text-blue-600">
+              Zobacz wszystkie w kategorii {tag.title}
+            </Link>
           </div>
         </div>
       ))}
 
-    </main >
-  )
+      <div className="w-full py-6 flex flex-row flex-wrap gap-4">
+        {categories.map((category) => (
+          <div className="flex justify-center">
+            <Link href={`/${category.slug}`} className="text-md text-blue-600">
+              {category.title}
+            </Link>
+          </div>
+        ))}
+      </div>
+
+      <div className="w-full py-6">
+        <div className="flex justify-center">
+          <Link href={`/wszystko`} className="text-md text-blue-600">
+            Zobacz wszystkie przepisy
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
 }

src/app/wszystko/page.tsx

@@ -0,0 +1,36 @@
+import { prisma } from "@/data";
+import { RecipeListItem } from "@/components/recipe-list-item/recipe-list-item";
+import { RecipeList } from "@/components/recipe-list/recipe-list";
+
+interface Params {
+  slug: string;
+}
+
+interface Props {
+  params: Params;
+}
+
+export default async function Page({ params }: Props) {
+  const recipes = await prisma.recipe.findMany({
+    include: {
+      category: true,
+    },
+  });
+
+  return (
+    <main className="w-full">
+      <h2 className="text-2xl my-8">Przepisy</h2>
+
+      <RecipeList>
+        {recipes.map((recipe) => (
+          <RecipeListItem
+            key={recipe.id}
+            href={`/${recipe.category.slug}/${recipe.slug}`}
+            coverImage={recipe.coverImage}
+            title={recipe.title}
+          />
+        ))}
+      </RecipeList>
+    </main>
+  );
+}