connect event details page to backend (#48)

* connect event details page to backend

* fix mockData

apps/backend/src/auth/auth.controller.ts

@@ -27,7 +27,7 @@ export class AuthController {
   oauthRedirect(@CurrentUser() user: User) {
     const jwt = this.authService.login(user);
     return {
-      url: `${process.env.FRONTEND_URL}?jwt=${jwt}`,
+      url: `${process.env.FRONTEND_URL}/authorized?jwt=${jwt}`,
     };
   }
 }

apps/backend/src/drink-action/dto/create-drink-action-without-eventid.dto.ts

@@ -2,4 +2,4 @@ import { OmitType } from '@nestjs/swagger';
 
 import { DrinkAction } from '../entities/drink-action.entity';
 
-export class CreateDrinkActionWithoutEventIdDto extends OmitType(DrinkAction, ['id', 'eventId']) {}
+export class CreateDrinkActionWithoutEventIdDto extends OmitType(DrinkAction, ['id', 'eventId', 'userId']) {}

apps/backend/src/events/events.controller.ts

@@ -42,7 +42,7 @@ export class EventsController {
     @Query('skip', new DefaultValuePipe(0), ParseIntPipe) skip?: number,
     @Query('take', new DefaultValuePipe(10), ParseIntPipe) take?: number
   ): Promise<Event[]> {
-    return this.eventsService.findAll(take, skip);
+    return this.eventsService.findAll(skip, take);
   }
 
   @Get(':id')

apps/backend/src/main.ts

@@ -6,6 +6,7 @@ import { AppModule } from './app.module';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
+  app.enableCors({ origin: process.env.FRONTEND_URL });
   app.useGlobalPipes(new ValidationPipe({ whitelist: true }));
   const config = new DocumentBuilder()
     .setTitle('BeAlcoholic')

apps/frontend/.env.local.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_BACKEND_URL=http://localhost:3001

apps/frontend/package.json

@@ -13,8 +13,11 @@
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.0",
+    "@tanstack/react-query": "^5.52.0",
+    "axios": "^1.7.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.426.0",
     "next": "14.2.2",
     "react": "^18.2.0",
@@ -23,6 +26,8 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.52.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",

apps/frontend/src/api/axiosConfig.ts

@@ -0,0 +1,15 @@
+import axios, { AxiosHeaders } from 'axios';
+import Cookies from 'js-cookie';
+
+export const axiosConfig = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
+});
+
+axiosConfig.interceptors.request.use((config) => {
+  const token = Cookies.get('jwt');
+  if (token && config.headers) {
+    (config.headers as AxiosHeaders).set('Authorization', `Bearer ${token}`);
+  }
+
+  return config;
+});

apps/frontend/src/api/eventHooks.ts

@@ -0,0 +1,25 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+
+import { CreateDrinkAction, DrinkAction } from '@/models/drinkAction';
+import { EventDetails } from '@/models/event';
+
+import { axiosConfig } from './axiosConfig';
+import { queryClient } from './queryClient';
+
+export const useFetchEventDetailsQuery = (eventId: string) =>
+  useQuery<EventDetails>(
+    {
+      queryKey: ['fetchEventDetails', eventId],
+      queryFn: async () => (await axiosConfig.get(`/events/${eventId}`)).data,
+    },
+    queryClient
+  );
+
+export const useAddDrinkActionToEventMutation = () =>
+  useMutation<DrinkAction, Error, CreateDrinkAction>(
+    {
+      mutationKey: ['addDrinkActionToEvent'],
+      mutationFn: async (data) => (await axiosConfig.post('/drink-actions', data)).data,
+    },
+    queryClient
+  );

apps/frontend/src/api/queryClient.ts

@@ -0,0 +1,10 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});

apps/frontend/src/app/authorized/route.ts

@@ -0,0 +1,16 @@
+import { cookies } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+  const jwt = request.nextUrl.searchParams.get('jwt');
+
+  if (!jwt) {
+    return NextResponse.json({ error: 'Missing jwt query parameter' }, { status: 401 });
+  }
+
+  cookies().set('jwt', jwt, { path: '/' });
+
+  return NextResponse.redirect(new URL('/', request.url));
+}

apps/frontend/src/app/events/[id]/page.tsx

@@ -1,15 +1,33 @@
+'use client';
+
+import { useAddDrinkActionToEventMutation, useFetchEventDetailsQuery } from '@/api/eventHooks';
 import { DrinkActionTile } from '@/components/drink-action-tile';
-import { events } from '@/models/mockData';
 
 export default function EventDetailsPage({ params }: { params: { id: string } }) {
-  const event = events.find((e) => e.id === params.id);
+  const { data: event, isLoading, error, refetch } = useFetchEventDetailsQuery(params.id);
+  const { mutate } = useAddDrinkActionToEventMutation();
+
+  if (isLoading) return 'Loading...';
+  if (error) return error.message;
   if (!event) return null;
+
+  const addDrinkAction = () => {
+    mutate(
+      { drinkId: '4bd5daa0-cad6-4c0a-961c-feb9c8eb0fc4', eventId: params.id, milliliter: 500, price: 999 },
+      {
+        onSuccess: () => {
+          refetch();
+        },
+      }
+    );
+  };
+
   return (
     <main className='flex flex-col items-center justify-center'>
       <h1 className='text-3xl font-bold'>{event.name}</h1>
       {event.description && <p>{event.description}</p>}
       <p>
-        {event.startDate.toLocaleString('hu')} - {event.endDate.toLocaleString('hu')}
+        {new Date(event.startDate).toLocaleString('hu')} - {new Date(event.endDate).toLocaleString('hu')}
       </p>
       <p>
         Létrehozta: {event.owner.lastName} {event.owner.firstName}
@@ -20,6 +38,7 @@ export default function EventDetailsPage({ params }: { params: { id: string } })
           <DrinkActionTile key={da.id} drinkAction={da} />
         ))}
       </div>
+      <button onClick={addDrinkAction}>Ittam valamit!</button>
     </main>
   );
 }

apps/frontend/src/models/drinkAction.ts

@@ -13,3 +13,10 @@ export interface DrinkAction {
   user: PublicUser;
   drink: Drink;
 }
+
+export interface CreateDrinkAction {
+  drinkId: string;
+  eventId: string;
+  price: number;
+  milliliter: number;
+}

apps/frontend/src/models/event.ts

@@ -6,8 +6,8 @@ export interface EventDetails {
   name: string;
   location: string;
   ownerId: string;
-  startDate: Date;
-  endDate: Date;
+  startDate: string;
+  endDate: string;
   description?: string;
   createdAt: Date;
   owner: PublicUser;

apps/frontend/src/models/mockData.ts

@@ -7,8 +7,8 @@ export const events: EventDetails[] = [
     name: 'Pöci',
     location: 'Budapest, Irinyi József u. 42, 1117 (8. floor)',
     ownerId: 'string',
-    startDate: new Date('2022-01-01T22:30:00.000Z'),
-    endDate: new Date('2022-01-02T04:00:00.000Z'),
+    startDate: '2022-01-01T22:30:00.000Z',
+    endDate: '2022-01-02T04:00:00.000Z',
     description:
       'We are going to play a turn-based strategy game played with 20 forint coins, during which wearing a tie is mandatory.',
     createdAt: new Date('2024-08-08T12:13:40.444Z'),

yarn.lock

@@ -1499,6 +1499,25 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
+"@tanstack/eslint-plugin-query@^5.52.0":
+  version "5.52.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.52.0.tgz#ee2c11059a7df69724db5b61e1f43e37b65d2ca7"
+  integrity sha512-i02fOM3TRURI46AswPNlKb4Gwu+/mAPssI+pVu0AifA7/qzOJRgco17vdqjq/VgChKLLIltd9/KI4MCJFFfWEw==
+  dependencies:
+    "@typescript-eslint/utils" "8.0.0-alpha.30"
+
+"@tanstack/[email protected]":
+  version "5.52.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.52.0.tgz#44070b2d6eb58c3a5ce2788471d842e932294a87"
+  integrity sha512-U1DOEgltjUwalN6uWYTewSnA14b+tE7lSylOiASKCAO61ENJeCq9VVD/TXHA6O5u9+6v5+UgGYBSccTKDoyMqw==
+
+"@tanstack/react-query@^5.52.0":
+  version "5.52.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.52.0.tgz#671478798f1873983807cf6f62b140c817b3cc9f"
+  integrity sha512-T8tLZdPEopSD3A1EBZ/sq7WkI76pKLKKiT82F486K8wf26EPgYCdeiSnJfuayssdQjWwLQMQVl/ROUBNmlWgCQ==
+  dependencies:
+    "@tanstack/query-core" "5.52.0"
+
 "@total-typescript/ts-reset@^0.5.1":
   version "0.5.1"
   resolved "https://registry.npmjs.org/@total-typescript/ts-reset/-/ts-reset-0.5.1.tgz"
@@ -1657,6 +1676,11 @@
     expect "^29.0.0"
     pretty-format "^29.0.0"
 
+"@types/js-cookie@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.6.tgz#a04ca19e877687bd449f5ad37d33b104b71fdf95"
+  integrity sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==
+
 "@types/json-schema@*", "@types/json-schema@^7.0.8":
   version "7.0.15"
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
@@ -1894,6 +1918,14 @@
     "@typescript-eslint/types" "7.2.0"
     "@typescript-eslint/visitor-keys" "7.2.0"
 
+"@typescript-eslint/[email protected]":
+  version "8.0.0-alpha.30"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.0.0-alpha.30.tgz#851e38a30884b4247485de1ad10b072c3df80a4a"
+  integrity sha512-FGW/iPWGyPFamAVZ60oCAthMqQrqafUGebF8UKuq/ha+e9SVG6YhJoRzurlQXOVf8dHfOhJ0ADMXyFnMc53clg==
+  dependencies:
+    "@typescript-eslint/types" "8.0.0-alpha.30"
+    "@typescript-eslint/visitor-keys" "8.0.0-alpha.30"
+
 "@typescript-eslint/[email protected]":
   version "7.16.1"
   resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.16.1.tgz"
@@ -1914,6 +1946,11 @@
   resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.2.0.tgz"
   integrity sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA==
 
+"@typescript-eslint/[email protected]":
+  version "8.0.0-alpha.30"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.0.0-alpha.30.tgz#149ae5b6aa99e2491cb79a90ad70cdbc98b7586a"
+  integrity sha512-4WzLlw27SO9pK9UFj/Hu7WGo8WveT0SEiIpFVsV2WwtQmLps6kouwtVCB8GJPZKJyurhZhcqCoQVQFmpv441Vg==
+
 "@typescript-eslint/[email protected]":
   version "7.16.1"
   resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.16.1.tgz"
@@ -1942,6 +1979,20 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/[email protected]":
+  version "8.0.0-alpha.30"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.0.0-alpha.30.tgz#acd674b63e204af9022b33ff031261e2e3a88b8d"
+  integrity sha512-WSXbc9ZcXI+7yC+6q95u77i8FXz6HOLsw3ST+vMUlFy1lFbXyFL/3e6HDKQCm2Clt0krnoCPiTGvIn+GkYPn4Q==
+  dependencies:
+    "@typescript-eslint/types" "8.0.0-alpha.30"
+    "@typescript-eslint/visitor-keys" "8.0.0-alpha.30"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/[email protected]":
   version "7.16.1"
   resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.16.1.tgz"
@@ -1952,6 +2003,16 @@
     "@typescript-eslint/types" "7.16.1"
     "@typescript-eslint/typescript-estree" "7.16.1"
 
+"@typescript-eslint/[email protected]":
+  version "8.0.0-alpha.30"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.0.0-alpha.30.tgz#8102839b7b773be6572964a5bb8c378b526c78b2"
+  integrity sha512-rfhqfLqFyXhHNDwMnHiVGxl/Z2q/3guQ1jLlGQ0hi9Rb7inmwz42crM+NnLPR+2vEnwyw1P/g7fnQgQ3qvFx4g==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "8.0.0-alpha.30"
+    "@typescript-eslint/types" "8.0.0-alpha.30"
+    "@typescript-eslint/typescript-estree" "8.0.0-alpha.30"
+
 "@typescript-eslint/[email protected]":
   version "7.16.1"
   resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.16.1.tgz"
@@ -1968,6 +2029,14 @@
     "@typescript-eslint/types" "7.2.0"
     eslint-visitor-keys "^3.4.1"
 
+"@typescript-eslint/[email protected]":
+  version "8.0.0-alpha.30"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.0.0-alpha.30.tgz#8424b5eb2ca73cb58a8fa1c4bfb6ab72693d3a7f"
+  integrity sha512-XZuNurZxBqmr6ZIRIwWFq7j5RZd6ZlkId/HZEWyfciK+CWoyOxSF9Pv2VXH9Rlu2ZG2PfbhLz2Veszl4Pfn7yA==
+  dependencies:
+    "@typescript-eslint/types" "8.0.0-alpha.30"
+    eslint-visitor-keys "^3.4.3"
+
 "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz"
@@ -5409,6 +5478,11 @@ js-base64@^3.7.7:
   resolved "https://registry.npmjs.org/js-base64/-/js-base64-3.7.7.tgz"
   integrity sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 js-tiktoken@^1.0.12:
   version "1.0.12"
   resolved "https://registry.npmjs.org/js-tiktoken/-/js-tiktoken-1.0.12.tgz"