Merge pull request #11 from NIAEFEUP/feature/ticket-selection-page

Feature/ticket-selection-page

.github/workflows/website.yml

@@ -14,7 +14,7 @@ jobs:
   lint:
     name: Linting
     runs-on: ubuntu-latest
-    
+
     defaults:
       run:
         working-directory: website
@@ -46,7 +46,7 @@ jobs:
   typecheck:
     name: Typechecking
     runs-on: ubuntu-latest
-    
+
     defaults:
       run:
         working-directory: website

website/.env.example

@@ -6,7 +6,7 @@ APP_KEY=
 NODE_ENV=development
 SESSION_DRIVER=cookie
 
-FROM_EMAIL=
+FROM_EMAIL=[email protected]
 SMTP_HOST=localhost
 SMTP_PORT=1025
 

website/.gitignore

@@ -2,6 +2,7 @@
 node_modules
 build
 tmp
+.adonisjs
 
 # Secrets
 .env

website/README.md

@@ -30,28 +30,35 @@ To get started with the website, follow these steps:
 3. Install the dependencies:
 
    ```bash
-   pnpm install
+   pnpm install --frozen-lockfile
    ```
 
-4. Copy the `.env.example` file to a new file called `.env` and update the values as needed.
-
-5. Create an app key to sign the session cookies:
-
-   ```bash
-   node ace generate:key
-   ```
-
-6. Run the database migrations to create the database:
+4. Run the database migrations to create the database:
 
    ```bash
    node ace migration:run
    ```
 
-7. Start the development server:
+5. Start the development server:
 
    ```bash
    pnpm run dev
    ```
 
    This will start the development server on `http://localhost:3333`.
    The development server has hot-reloading enabled, so you can make changes to the code and see them reflected in the browser immediately.
+
+## Defining Routes with Tuyau
+
+To use Tuyau in your routes, you need to update the API file each time you do certain actions, mainly:
+
+1. Adding a new route/controller to your project
+2. Adding a `request.validateUsing` call in your controller method
+
+This is done with the command:
+
+```bash
+node ace tuyau:generate
+```
+
+More info here: [Tuyau - Installation](https://adonisjs.com/blog/introducing-tuyau#installation)

website/adonisrc.ts

@@ -14,6 +14,7 @@ export default defineConfig({
     () => import('@adonisjs/core/commands'),
     () => import('@adonisjs/lucid/commands'),
     () => import('@adonisjs/mail/commands'),
+    () => import('@tuyau/core/commands'),
   ],
 
   /*
@@ -43,6 +44,7 @@ export default defineConfig({
     () => import('@adonisjs/auth/auth_provider'),
     () => import('@adonisjs/inertia/inertia_provider'),
     () => import('@adonisjs/mail/mail_provider'),
+    () => import('@tuyau/core/tuyau_provider'),
   ],
 
   /*

website/app/controllers/tickets_controller.ts

@@ -0,0 +1,10 @@
+import Ticket from '#models/ticket'
+import type { HttpContext } from '@adonisjs/core/http'
+
+export default class TicketsController {
+  async index({ inertia }: HttpContext) {
+    const ticketTypes = await Ticket.all()
+
+    return inertia.render('tickets', { ticketTypes })
+  }
+}

website/app/models/ticket.ts

@@ -0,0 +1,25 @@
+import { DateTime } from 'luxon'
+import { BaseModel, column } from '@adonisjs/lucid/orm'
+
+export default class Ticket extends BaseModel {
+  @column({ isPrimary: true })
+  declare id: number
+
+  @column()
+  declare name: string | null
+
+  @column()
+  declare description: string
+
+  @column()
+  declare price: number
+
+  @column()
+  declare stock: number
+
+  @column.dateTime({ autoCreate: true })
+  declare createdAt: DateTime
+
+  @column.dateTime({ autoCreate: true, autoUpdate: true })
+  declare updatedAt: DateTime | null
+}

website/config/tuyau.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from '@tuyau/core'
+
+const tuyauConfig = defineConfig({
+  codegen: {
+    /**
+     * Filters the definitions and named routes to be generated
+     */
+    // definitions: {
+    //  only: [],
+    // }
+    // routes: {
+    //  only: [],
+    // }
+  },
+})
+
+export default tuyauConfig

website/database/migrations/1734798835308_create_tickets_table.ts

@@ -0,0 +1,21 @@
+import { BaseSchema } from '@adonisjs/lucid/schema'
+
+export default class extends BaseSchema {
+  protected tableName = 'tickets'
+
+  async up() {
+    this.schema.createTable(this.tableName, (table) => {
+      table.increments('id')
+      table.string('name').nullable()
+      table.text('description')
+      table.float('price').notNullable()
+      table.integer('stock').notNullable()
+      table.timestamp('created_at')
+      table.timestamp('updated_at')
+    })
+  }
+
+  async down() {
+    this.schema.dropTable(this.tableName)
+  }
+}

website/database/seeders/ticket_seeder.ts

@@ -0,0 +1,23 @@
+import { BaseSeeder } from '@adonisjs/lucid/seeders'
+import Ticket from '#models/ticket'
+
+export default class extends BaseSeeder {
+  async run() {
+    await Ticket.createMany([
+      {
+        name: 'Bilhete - Com Alojamento',
+        description:
+          'Inclui:\n• Pequenos-almoços, almoços e jantares durante o período do evento\n• Acesso a coffee breaks e sessão de cocktails\n• Acesso a workshops, palestras e outros\n• Acesso a festas noturnas e outras atividades recreativas (exceto Rally Tascas) \n• Alojamento em Pavilhão',
+        price: 35,
+        stock: 150,
+      },
+      {
+        name: 'Bilhete - Sem Alojamento',
+        description:
+          'Inclui:\n• Pequenos-almoços, almoços e jantares durante o período do evento\n• Acesso a coffee breaks e sessão de cocktails\n• Acesso a workshops, palestras e outros\n• Acesso a festas noturnas e outras atividades recreativas (exceto Rally Tascas)',
+        price: 30,
+        stock: 50,
+      },
+    ])
+  }
+}

website/inertia/app/app.tsx

@@ -3,9 +3,11 @@
 
 import '../css/app.css'
 
-import { hydrateRoot } from 'react-dom/client'
-import { createInertiaApp } from '@inertiajs/react'
 import { resolvePageComponent } from '@adonisjs/inertia/helpers'
+import { createInertiaApp } from '@inertiajs/react'
+import { TuyauProvider } from '@tuyau/inertia/react'
+import { hydrateRoot } from 'react-dom/client'
+import { tuyau } from './tuyau'
 
 const appName = import.meta.env.VITE_APP_NAME || 'ENEI'
 
@@ -19,6 +21,13 @@ createInertiaApp({
   },
 
   setup({ el, App, props }) {
-    hydrateRoot(el, <App {...props} />)
+    hydrateRoot(
+      el,
+      <>
+        <TuyauProvider client={tuyau}>
+          <App {...props} />
+        </TuyauProvider>
+      </>
+    )
   },
 })

website/inertia/app/ssr.tsx

@@ -1,5 +1,7 @@
 import ReactDOMServer from 'react-dom/server'
 import { createInertiaApp } from '@inertiajs/react'
+import { TuyauProvider } from '@tuyau/inertia/react'
+import { tuyau } from './tuyau'
 
 export default function render(page: any) {
   return createInertiaApp({
@@ -9,6 +11,12 @@ export default function render(page: any) {
       const pages = import.meta.glob('../pages/**/*.tsx', { eager: true })
       return pages[`../pages/${name}.tsx`]
     },
-    setup: ({ App, props }) => <App {...props} />,
+    setup: ({ App, props }) => (
+      <>
+        <TuyauProvider client={tuyau}>
+          <App {...props} />
+        </TuyauProvider>
+      </>
+    ),
   })
 }

website/inertia/app/tuyau.ts

@@ -0,0 +1,7 @@
+import { createTuyau } from '@tuyau/client'
+import { api } from '#.adonisjs/api'
+
+export const tuyau = createTuyau({
+  api,
+  baseUrl: import.meta.env.BASE_URL || 'http://localhost:3333',
+})

website/inertia/pages/tickets.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { InferPageProps } from '@adonisjs/inertia/types'
+import { Link } from '@tuyau/inertia/react'
+import { Card, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
+import TicketsController from '#controllers/tickets_controller'
+
+export default function SelectTicketsPage(props: InferPageProps<TicketsController, 'index'>) {
+  const imageSrc = `favicon.svg`
+
+  return (
+    <div className="container mx-auto p-4 flex flex-col items-center">
+      <h1 className="text-3xl font-bold text-center mb-6">Seleciona o teu bilhete</h1>
+      <p className="text-center text-gray-600 mb-8">
+        Seleciona o teu bilhete e clica em comprar para continuar.
+      </p>
+
+      <div className="grid gap-6 grid-cols-1 md:w-1/2">
+        {props.ticketTypes.map((ticket) => (
+          <Link route="checkout" params={{ id: ticket.id }} key={ticket.id}>
+            <Card className="hover:shadow-lg">
+              <div className="flex items-center justify-between p-6">
+                <CardHeader>
+                  <CardTitle>{ticket.name}</CardTitle>
+                  <CardDescription className="whitespace-pre-wrap">
+                    {ticket.description}
+                  </CardDescription>
+                  <p className="text-2xl font-bold">{ticket.price}€</p>
+                </CardHeader>
+                <img className="hidden md:block" src={imageSrc} alt={ticket.name || undefined} />
+              </div>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}

website/package.json

@@ -13,9 +13,10 @@
     "lint": "eslint .",
     "format": "prettier --write .",
     "typecheck": "tsc --noEmit",
-    "prepare": "cd .. && husky website/.husky"
+    "prepare": "sh -c './scripts/prepare.sh'"
   },
   "imports": {
+    "#.adonisjs/*": "./.adonisjs/*.ts",
     "#controllers/*": "./app/controllers/*.js",
     "#exceptions/*": "./app/exceptions/*.js",
     "#models/*": "./app/models/*.js",
@@ -103,6 +104,9 @@
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-toggle-group": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.5",
+    "@tuyau/client": "^0.2.2",
+    "@tuyau/core": "^0.2.3",
+    "@tuyau/inertia": "^0.0.8",
     "@vinejs/vine": "^3.0.0",
     "better-sqlite3": "^11.7.0",
     "class-variance-authority": "^0.7.1",