Skip to content

Commit 7444db1

Browse files
authored
Refactor: Migrate to React Query and client-side components (#7)
* Refactor: Migrate to React Query and client-side components This commit implements a major architectural shift in the Konferenciapp application, moving from server-side data fetching and state management to a client-side approach using React Query. This change affects data fetching, presentation logic, UI components, and caching strategies. **Key Changes:** * **Dependency Updates:** Updated numerous dependencies, including: * `@heroicons/react`, `@hookform/resolvers`, `@prisma/client`, `@radix-ui/*`, `@tailwindcss/forms`, `@tanstack/react-query`, `axios`, `date-fns`, `lru-cache`, `next`, `next-auth`, `prisma`, `react-hook-form`, `react-icons`, `tailwind-merge`, `tailwindcss`, `zod`, and several ESLint/Prettier related devDependencies. * **Reasoning:** The motivation was to move client state management to the client and to prefer REST over Next.js server actions. The specific reasons for *each* individual package update were not provided. This should be reviewed for potential unintended consequences. * **React Query Integration:** * Introduced `@tanstack/react-query` for client-side data fetching and caching. * Created `src/app/providers.tsx` to wrap the application with `QueryClientProvider`, configuring default query options (15-second stale time, refetch on window focus, 1 retry). * Created custom hooks in `src/hook/use-presentation-queries.ts`: * `useSelectedQuestions`: Fetches questions marked as "SELECTED" for a given presentation. * `useAllQuestions`: Fetches *all* questions for a given presentation. * These hooks handle caching, automatic refetching (every 15 seconds, but disabled after 2 hours past the presentation end time), and error handling. * **Server Actions Refactoring:** * Created new server actions in `src/server-lib/actions.ts`: * `getAllPresentations`: Fetches presentations within the last 30 days (changed from almost a year). * `getSelectedPresentationQuestions`: Fetches selected questions for a presentation. * `getAllPresentationQuestions`: Fetches all questions for a presentation. * `updatePresentations`: Fetches presentation data from the external CMSCH API and updates the database. **NOTE:** This function currently lacks error handling. * `setQuestionMark`: Updates the `mark` field of a question (used for marking as selected/hidden). Now revalidates specific presentation pages instead of the entire site. * `createSelectedQuestion`: Creates a new question, optionally marking it as selected. Also revalidates specific presentation pages. * The `prisma/seed.ts` file was *not* intentionally changed regarding question state probabilities. * **Component Changes:** * **`src/app/dashboard/layout.tsx`:** Now uses `getAllPresentations` server action and `revalidate = 3600` (1 hour) for caching. * **`src/app/dashboard/page.tsx`:** Similar changes, using `getAllPresentations` and `revalidate`. Replaced the "Update Presentations" form with a `<UpdatePresentations />` component. * **`src/app/dashboard/presentation/[id]/client-page.tsx` (NEW):** A *client* component that fetches all questions for a presentation using the `useAllQuestions` hook. Displays presentation information, stats, and the `PresentationGrid`. * **`src/app/dashboard/presentation/[id]/page.tsx`:** Now a *server* component that fetches all presentation data and passes it as `initialPresentation` to `client-page.tsx`. Uses `notFound()` for error handling. * **`src/app/dashboard/presentation/[id]/loading.tsx.bak` (DELETED):** Loading state handling is now likely managed within `client-page.tsx` using React Query's `isLoading` state. * **`src/app/question/layout.tsx` and `src/app/question/page.tsx`:** Similar changes to the dashboard, using `getAllPresentations`. * **`src/app/question/presentation/[id]/page.tsx`:** Fetches *selected* questions and renders the `QuestionList` component. * **`src/ui/dashboard/presentation/create-question-card-form.tsx`:** Now uses `createSelectedQuestion` server action and `useQueryClient().refetchQueries()` to update the UI after submission. * **`src/ui/dashboard/presentation/question-grid.tsx`:** Updated filter options labels ("Beérkezett", "Megjelölt", "Törölt"). The logic for `QuestionState.NONE` representing "Beérkezett" questions is clarified as being analogous to an inbox. * **`src/ui/dashboard/presentation/update-presentations.tsx` (NEW):** A component with a button to trigger the `updatePresentations` server action. * **`src/ui/dashboard/question-card.tsx`:** Now uses `setQuestionMark` server action and `useQueryClient().refetchQueries()` to update the UI after marking/hiding a question. * **`src/ui/question/presentation/[id]/QuestionList.tsx` (NEW):** Displays the list of selected questions, using the `useSelectedQuestions` hook. * **`src/components/util.tsx`:** Removed the `PeriodicReloader` component, as React Query handles data refetching. * **`src/ui/global.css`:** No significant changes noted in the diff. * **`next.config.js`:** Added `warp.sch.bme.hu` to the allowed image hostnames. * Docs: Update README with project overview * code cleanup
1 parent bcaf806 commit 7444db1

26 files changed

Lines changed: 2000 additions & 965 deletions

File tree

README.md

Lines changed: 74 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,76 @@
1-
## Next.js App Router Course - Starter
1+
# Konferenciapp - Question Collector Application
22

3-
This is the starter template for the Next.js App Router Course. It contains the starting code for the dashboard application.
3+
This application is designed for collecting and managing questions during presentations at the Simonyi Conference. It allows attendees to submit questions, moderators to manage them, and presenters to display selected questions.
44

5-
For more information, see the [course curriculum](https://nextjs.org/learn) on the Next.js Website.
5+
## Overview
6+
7+
This project is a Next.js application built using the App Router. It uses server actions for data fetching and mutations on the client-side. Data is stored in a PostgreSQL database, accessed via Prisma.
8+
9+
## Technologies Used
10+
11+
* **Framework:** Next.js (App Router)
12+
* **Database:** Prisma (PostgreSQL)
13+
* **Authentication:** NextAuth.js
14+
* **Styling:** Tailwind CSS
15+
* **UI Components:** shadcn/ui
16+
17+
## Setup Instructions
18+
19+
**Prerequisites:**
20+
21+
* Node.js (version 18.17.0 or later, as specified in `package.json`)
22+
* npm
23+
* A PostgreSQL database (configured in Prisma schema)
24+
* Environment variables (see `.env.example`)
25+
26+
**Steps:**
27+
28+
1. **Clone the repository:**
29+
30+
```bash
31+
git clone <repository_url>
32+
cd konferenciapp-question-collector
33+
```
34+
35+
2. **Install dependencies:**
36+
37+
```bash
38+
npm install
39+
```
40+
41+
3. **Configure environment variables:**
42+
* Create a `.env` file in the root directory.
43+
* Copy the contents of `.env.example` into `.env`.
44+
* Fill in the required values
45+
46+
4. **Database setup:**
47+
* Ensure your PostgreSQL database is running.
48+
* Run Prisma migrations:
49+
```bash
50+
npx prisma migrate deploy
51+
```
52+
* (Optional) Seed the database:
53+
```bash
54+
npx prisma db seed
55+
```
56+
57+
5. **Run the development server:**
58+
59+
```bash
60+
npm run dev
61+
```
62+
63+
The application should be accessible at `http://localhost:3000`.
64+
65+
## API Endpoints
66+
67+
Client-side data fetching and mutations are handled via internal server actions.
68+
69+
The following endpoints are known:
70+
71+
* **`GET /api/presentation/[id]/question?userid=<userId>`:** Fetches questions for a specific presentation and user. Requires a `userid` query parameter.
72+
* **`POST /api/presentation/[id]/question`:** Creates a new question for a specific presentation.
73+
74+
## External API
75+
76+
The application interacts with an external API at the URL specified by the `CMSCH_CONFERENCES_API` environment variable. This API provides data about presentations, speakers, and other conference-related information.

next.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ const nextConfig = {
1010
protocol: 'https',
1111
hostname: 'konf-api.kir-dev.hu',
1212
},
13+
{
14+
protocol: 'https',
15+
hostname: 'warp.sch.bme.hu',
16+
},
1317
],
1418
},
1519
};

0 commit comments

Comments
 (0)