Commit 7444db1
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 cleanup1 parent bcaf806 commit 7444db1
26 files changed
Lines changed: 2000 additions & 965 deletions
File tree
- prisma
- src
- app
- api/presentation/[id]/question
- dashboard
- presentation/[id]
- question
- presentation/[id]
- components
- hook
- server-lib
- ui
- dashboard
- presentation
- question/presentation/[id]
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | | - | |
| 1 | + | |
2 | 2 | | |
3 | | - | |
| 3 | + | |
4 | 4 | | |
5 | | - | |
| 5 | + | |
| 6 | + | |
| 7 | + | |
| 8 | + | |
| 9 | + | |
| 10 | + | |
| 11 | + | |
| 12 | + | |
| 13 | + | |
| 14 | + | |
| 15 | + | |
| 16 | + | |
| 17 | + | |
| 18 | + | |
| 19 | + | |
| 20 | + | |
| 21 | + | |
| 22 | + | |
| 23 | + | |
| 24 | + | |
| 25 | + | |
| 26 | + | |
| 27 | + | |
| 28 | + | |
| 29 | + | |
| 30 | + | |
| 31 | + | |
| 32 | + | |
| 33 | + | |
| 34 | + | |
| 35 | + | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
| 46 | + | |
| 47 | + | |
| 48 | + | |
| 49 | + | |
| 50 | + | |
| 51 | + | |
| 52 | + | |
| 53 | + | |
| 54 | + | |
| 55 | + | |
| 56 | + | |
| 57 | + | |
| 58 | + | |
| 59 | + | |
| 60 | + | |
| 61 | + | |
| 62 | + | |
| 63 | + | |
| 64 | + | |
| 65 | + | |
| 66 | + | |
| 67 | + | |
| 68 | + | |
| 69 | + | |
| 70 | + | |
| 71 | + | |
| 72 | + | |
| 73 | + | |
| 74 | + | |
| 75 | + | |
| 76 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
10 | 10 | | |
11 | 11 | | |
12 | 12 | | |
| 13 | + | |
| 14 | + | |
| 15 | + | |
| 16 | + | |
13 | 17 | | |
14 | 18 | | |
15 | 19 | | |
| |||
0 commit comments