+ {/* Show carousel, have items */}
+ {cocktailsQuery.data?.pages?.[0]?.items?.length !== 0 && (
+
+
+
+ {cocktailsQuery.data?.pages.map((page, index) => (
+
+ {page.items.map((item) => (
+
+
+ ))}
+
+ ))}
+
+
+
+ )}
+ {/* Empty state for no filters, search, and no items */}
+ {cocktailsQuery.data?.pages?.[0]?.items?.length === 0 && (
+
+
+ No cocktails in the database yet!
+
+
+ )}
+
diff --git a/src/components/cocktails/paginated-user-cocktails.tsx b/src/components/cocktails/paginated-user-cocktails.tsx
index f2b8a97..64f6ae8 100644
--- a/src/components/cocktails/paginated-user-cocktails.tsx
+++ b/src/components/cocktails/paginated-user-cocktails.tsx
@@ -99,7 +99,7 @@ export function PaginatedUserCocktails({
{userCocktailsQuery.hasNextPage &&
- {/* Empty state for no filters, search, and no ingredients */}
+ {/* Empty state for no filters, search, and no items */}
{!savedSearch &&
!savedUseAvailable &&
userCocktailsQuery.data?.pages?.[0]?.items?.length === 0 && (
@@ -109,7 +109,7 @@ export function PaginatedUserCocktails({
)}
- {/* Empty state for search and no ingredients */}
+ {/* Empty state for search and no items */}
{(savedSearch || savedUseAvailable) &&
userCocktailsQuery.data?.pages?.[0]?.items?.length === 0 && (
diff --git a/src/components/layout/home-layout.tsx b/src/components/layout/home-layout.tsx
index d65f043..801473e 100644
--- a/src/components/layout/home-layout.tsx
+++ b/src/components/layout/home-layout.tsx
@@ -17,14 +17,18 @@ import { DarkModeToggle } from './dark-mode-toggle'
export default function HomeLayout({
children,
pageNames,
+ disablePageScroll,
}: {
children: React.ReactNode
pageNames: string[]
+ disablePageScroll?: boolean
}) {
return (
+
- {children}
+ {children}
)
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
new file mode 100644
index 0000000..d52c697
--- /dev/null
+++ b/src/components/ui/carousel.tsx
@@ -0,0 +1,260 @@
+import * as React from "react"
+import useEmblaCarousel, {
+ type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+import { Button } from "~/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+ opts?: CarouselOptions
+ plugins?: CarouselPlugin
+ orientation?: "horizontal" | "vertical"
+ setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+ carouselRef: ReturnType[0]
+ api: ReturnType[1]
+ scrollPrev: () => void
+ scrollNext: () => void
+ canScrollPrev: boolean
+ canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext(null)
+
+function useCarousel() {
+ const context = React.useContext(CarouselContext)
+
+ if (!context) {
+ throw new Error("useCarousel must be used within a & CarouselProps
+>(
+ (
+ {
+ orientation = "horizontal",
+ opts,
+ setApi,
+ plugins,
+ className,
+ children,
+ ...props
+ },
+ ref
+ ) => {
+ const [carouselRef, api] = useEmblaCarousel(
+ {
+ ...opts,
+ axis: orientation === "horizontal" ? "x" : "y",
+ },
+ plugins
+ )
+ const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+ const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+ const onSelect = React.useCallback((api: CarouselApi) => {
+ if (!api) {
+ return
+ }
+
+ setCanScrollPrev(api.canScrollPrev())
+ setCanScrollNext(api.canScrollNext())
+ }, [])
+
+ const scrollPrev = React.useCallback(() => {
+ api?.scrollPrev()
+ }, [api])
+
+ const scrollNext = React.useCallback(() => {
+ api?.scrollNext()
+ }, [api])
+
+ const handleKeyDown = React.useCallback(
+ (event: React.KeyboardEvent) => {
+ if (event.key === "ArrowLeft") {
+ event.preventDefault()
+ scrollPrev()
+ } else if (event.key === "ArrowRight") {
+ event.preventDefault()
+ scrollNext()
+ }
+ },
+ [scrollPrev, scrollNext]
+ )
+
+ React.useEffect(() => {
+ if (!api || !setApi) {
+ return
+ }
+
+ setApi(api)
+ }, [api, setApi])
+
+ React.useEffect(() => {
+ if (!api) {
+ return
+ }
+
+ onSelect(api)
+ api.on("reInit", onSelect)
+ api.on("select", onSelect)
+
+ return () => {
+ api?.off("select", onSelect)
+ }
+ }, [api, onSelect])
+
+ return (
+
+
+ {children}
+
+
+ )
+ }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const { carouselRef, orientation } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const { orientation } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+ return (
+
+ Previous slide
+
+ )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+ return (
+
+ Next slide
+
+ )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext,
+}
diff --git a/src/pages/home/my-bar/ingredients.tsx b/src/pages/home/my-bar/ingredients.tsx
index 93970ad..fcc3a5f 100644
--- a/src/pages/home/my-bar/ingredients.tsx
+++ b/src/pages/home/my-bar/ingredients.tsx
@@ -10,7 +10,7 @@ export const getServerSideProps = requireAuth(async () => {
const Ingredients: Page = () => {
return (
-
Ingredients
+
Ingredients
-
My Inventory
+
My Inventory
-
Random
-
Coming soon...
+
)
}
Random.getLayout = (page) => (
-
{page}
+
{page}
)
export default Random
diff --git a/src/pages/home/recipes/explore/[cocktailId].tsx b/src/pages/home/recipes/explore/[cocktailId].tsx
index 26c9ae3..2b9fd2d 100644
--- a/src/pages/home/recipes/explore/[cocktailId].tsx
+++ b/src/pages/home/recipes/explore/[cocktailId].tsx
@@ -32,7 +32,7 @@ const CocktailModal: Page = () => {
return (
-
Explore Cocktails
+
Explore Cocktails
{
const Explore: Page = () => {
return (
-
Explore Cocktails
+
Explore Cocktails
-
Saved Cocktails
+
Saved Cocktails
{
const SavedCocktails: Page = () => {
return (
-
Saved Cocktails
+
Saved Cocktails
-
Feature Roadmap
+
Feature Roadmap
A list of planned features ordered by priority.
diff --git a/src/server/routers/_app.ts b/src/server/routers/_app.ts
index 7b3c438..d197711 100644
--- a/src/server/routers/_app.ts
+++ b/src/server/routers/_app.ts
@@ -4,7 +4,6 @@
import { createCallerFactory, publicProcedure, router } from '../trpc'
import { cocktailRouter } from './cocktail'
import { ingredientRouter } from './ingredient'
-import { postRouter } from './post'
import { userRouter } from './user'
import { userCocktailRouter } from './user-cocktail'
import { userIngredientRouter } from './user-ingredient'
@@ -12,7 +11,6 @@ import { userIngredientRouter } from './user-ingredient'
export const appRouter = router({
healthcheck: publicProcedure.query(() => 'yay!'),
user: userRouter,
- post: postRouter,
ingredient: ingredientRouter,
userIngredient: userIngredientRouter,
cocktail: cocktailRouter,
diff --git a/src/server/routers/cocktail.ts b/src/server/routers/cocktail.ts
index bb4a8c4..b61471c 100644
--- a/src/server/routers/cocktail.ts
+++ b/src/server/routers/cocktail.ts
@@ -1,8 +1,8 @@
import { Prisma } from '@prisma/client'
-import { protectedProcedure, router } from '../trpc'
+import { TRPCError } from '@trpc/server'
import { z } from 'zod'
import { prisma } from '../prisma'
-import { TRPCError } from '@trpc/server'
+import { protectedProcedure, router } from '../trpc'
/**
* Default selector for Cocktail.
@@ -48,6 +48,7 @@ export const cocktailRouter = router({
z.object({
search: z.string().min(2).nullish(),
usingAvailableIngredients: z.boolean().nullish(),
+ useRandomMode: z.boolean().nullish(),
limit: z.number().min(1).max(100).nullish(),
cursor: z.string().nullish(),
}),
@@ -55,7 +56,7 @@ export const cocktailRouter = router({
.query(async ({ ctx, input }) => {
const userId = ctx.session.user.id
const limit = input.limit ?? 25
- const { cursor, search, usingAvailableIngredients } = input
+ const { cursor, search, usingAvailableIngredients, useRandomMode } = input
let availableIngredientIds: string[] = []
if (usingAvailableIngredients) {
@@ -79,7 +80,7 @@ export const cocktailRouter = router({
// Build the filters
const whereParams: Prisma.CocktailWhereInput = {}
-
+
if (search) {
whereParams.OR = [
// Name search
@@ -119,25 +120,43 @@ export const cocktailRouter = router({
]
}
- const items = await prisma.cocktail.findMany({
- where: whereParams,
- select: defaultCocktailSelect,
- take: limit + 1,
- skip: cursor ? 1 : 0,
- cursor: cursor
- ? {
- id: cursor,
- }
- : undefined,
- orderBy: {
- name: 'asc',
- },
- })
+ if (useRandomMode) {
+ const totalCount = await prisma.cocktail.count()
+ const items = await prisma.cocktail.findMany({
+ where: whereParams,
+ select: defaultCocktailSelect,
+ take: limit,
+ skip: Math.max(0, Math.floor(Math.random() * (totalCount - limit))),
+ })
+
+ return {
+ items: items.map((item) => ({
+ ...item,
+ randomId: `${item.id}-${Date.now()}`,
+ })),
+ nextCursor: items[items.length - 1]?.id,
+ }
+ } else {
+ const items = await prisma.cocktail.findMany({
+ where: whereParams,
+ select: defaultCocktailSelect,
+ take: limit + 1,
+ skip: cursor ? 1 : 0,
+ cursor: cursor
+ ? {
+ id: cursor,
+ }
+ : undefined,
+ orderBy: {
+ name: 'asc',
+ },
+ })
- return {
- items: items,
- nextCursor:
- items.length > limit ? items[items.length - 1]?.id : undefined,
+ return {
+ items: items,
+ nextCursor:
+ items.length > limit ? items[items.length - 1]?.id : undefined,
+ }
}
}),
byId: protectedProcedure
diff --git a/src/server/routers/post.ts b/src/server/routers/post.ts
deleted file mode 100644
index 9c10f22..0000000
--- a/src/server/routers/post.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- *
- * This is an example router, you can delete this file and then update `../pages/api/trpc/[trpc].tsx`
- */
-import { router, publicProcedure } from '../trpc';
-import type { Prisma } from '@prisma/client';
-import { TRPCError } from '@trpc/server';
-import { z } from 'zod';
-import { prisma } from '~/server/prisma';
-
-/**
- * Default selector for Post.
- * It's important to always explicitly say which fields you want to return in order to not leak extra information
- * @see https://github.com/prisma/prisma/issues/9353
- */
-const defaultPostSelect = {
- id: true,
- title: true,
- text: true,
- createdAt: true,
- updatedAt: true,
-} satisfies Prisma.PostSelect;
-
-export const postRouter = router({
- list: publicProcedure
- .input(
- z.object({
- limit: z.number().min(1).max(100).nullish(),
- cursor: z.string().nullish(),
- }),
- )
- .query(async ({ input }) => {
- /**
- * For pagination docs you can have a look here
- * @see https://trpc.io/docs/v11/useInfiniteQuery
- * @see https://www.prisma.io/docs/concepts/components/prisma-client/pagination
- */
-
- const limit = input.limit ?? 50;
- const { cursor } = input;
-
- const items = await prisma.post.findMany({
- select: defaultPostSelect,
- // get an extra item at the end which we'll use as next cursor
- take: limit + 1,
- where: {},
- cursor: cursor
- ? {
- id: cursor,
- }
- : undefined,
- orderBy: {
- createdAt: 'desc',
- },
- });
- let nextCursor: typeof cursor | undefined = undefined;
- if (items.length > limit) {
- // Remove the last item and use it as next cursor
-
- const nextItem = items.pop()!;
- nextCursor = nextItem.id;
- }
-
- return {
- items: items.reverse(),
- nextCursor,
- };
- }),
- byId: publicProcedure
- .input(
- z.object({
- id: z.string(),
- }),
- )
- .query(async ({ input }) => {
- const { id } = input;
- const post = await prisma.post.findUnique({
- where: { id },
- select: defaultPostSelect,
- });
- if (!post) {
- throw new TRPCError({
- code: 'NOT_FOUND',
- message: `No post with id '${id}'`,
- });
- }
- return post;
- }),
- add: publicProcedure
- .input(
- z.object({
- id: z.string().uuid().optional(),
- title: z.string().min(1).max(32),
- text: z.string().min(1),
- }),
- )
- .mutation(async ({ input }) => {
- const post = await prisma.post.create({
- data: input,
- select: defaultPostSelect,
- });
- return post;
- }),
-});