feat(app): Add guide vote functionality on guide page by kevin8999 · Pull Request #210 · bluelearn-org/bluelearn

kevin8999 · 2026-07-27T18:13:01Z

Summary

Closes #175.

This PR lets users upvote and downvote guides. If the user downvotes, a popup will ask them for why they downvoted the guide.

Type of change

Verification

pnpm -r typecheck passes
pnpm -r build passes
Manually verified in a browser (for UI / behavior changes)
Followed the app layout conventions
No new dependencies, or new dependencies are justified and AGPL-compatible
Change does not violate any non-negotiable principle
Documentation only, no changes to the codebase, so no tests required

…tion This refactor makes `toggleVote()` easier to understand. The submitted vote will later be used to update the database. Signed-off-by: Kevin Duong <kevin.duong306@gmail.com>

Adds function to fetch variant ID from `GET /guides/{slug}/{variantSlug}` This function only works in development environments because it relies on an `.env` variable. Signed-off-by: Kevin Duong <kevin.duong306@gmail.com>

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

This commit adds several changes - Users can upvote. Upvotes will be saved to the `votes` table - `getAuthToken()` function that returns the user session token TODO: Add user error popups (see changes for details) Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

kevin8999 · 2026-08-03T18:56:47Z

Upvotes currently work. I still need to implement the following:

Downvotes (i.e. stating a reason for the downvote)
Popups for errors and downvoting

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

NOTE: `modal={true}` is required in `combobox.tsx`. Without it, scrolling would not be possible TODO: Update database after a reason and note is added Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

This is a large commit adds the following changes: - Splits `toggleVote()` into `toggleVote()` (UI logic) and `submitVote()` (submits vote to backend) - Uploads reason and note to backend after downvote submission - Deselects downvote when closing out of dialog Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

kevin8999 · 2026-08-06T02:57:37Z

The video below shows the guide vote functionality. My changes should work as intended now. Please let me know if you have any issues 😁!

The only things I am going to add from this point forward are refactors to make the code easier to read.

79058922-4f3c-43b6-bc62-843f4c6209c6.webm

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

WIP: when user presses downvote after it is already selected, pressing it again will "de-select" it. This still needs to be fixed Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

`GET /variants/:id/vote` will return the user's vote if a user ID is specified Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

This commit forces the downvote to be selected at all times until the user cancels or deletes their vote from the database Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

andyrodrigues30

See other comment.

Also the vote button colors don't persist after the page is refreshed

andyrodrigues30 · 2026-08-08T12:48:33Z

  };
 }

+function DownvoteDialog({ isOpen, setIsOpen, setVote, vote }) {


rename to DownvoteModal and move to separate file DownvoteModal.tsx under @/components/modals/DownvoteModal.tsx.

Also change to an export arrow function see GuideSubmitModal.tsx as an example.

This commit also replaces `toggleVote()` with `setVote()`. This change may need to be reverted in the future Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

into feat/guide-vote Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

`API_BASE` is also moved outside its function Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

refactor(app): Set vote on frontend to support future backend integra…

8030600

…tion This refactor makes `toggleVote()` easier to understand. The submitted vote will later be used to update the database. Signed-off-by: Kevin Duong <kevin.duong306@gmail.com>

andyrodrigues30 assigned kevin8999 Jul 27, 2026

andyrodrigues30 added the area:frontend Tasks related to frontend (app) label Jul 27, 2026

kevin8999 and others added 5 commits July 31, 2026 16:45

Merge branch 'bluelearn-org:main' into feat/guide-vote

d4e661a

Merge branch 'bluelearn-org:main' into feat/guide-vote

eb0d216

feat(app): Get guide variant id from frontend

506a5a0

Adds function to fetch variant ID from `GET /guides/{slug}/{variantSlug}` This function only works in development environments because it relies on an `.env` variable. Signed-off-by: Kevin Duong <kevin.duong306@gmail.com>

style(app): Change comment for better readability

7bfb81f

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

kevin8999 added 2 commits August 5, 2026 16:40

fix(app): Pass in slug when performing voting

322ce6e

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

feat(app): Make downvote dialog appear when user downvotes guide

90a1557

NOTE: `modal={true}` is required in `combobox.tsx`. Without it, scrolling would not be possible TODO: Update database after a reason and note is added Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

kevin8999 commented Aug 5, 2026

View reviewed changes

Comment thread app/src/components/ui/combobox.tsx

Merge branch 'main' into feat/guide-vote

e25e766

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

kevin8999 marked this pull request as ready for review August 6, 2026 02:59

kevin8999 requested review from andyrodrigues30 and tonylam0 as code owners August 6, 2026 02:59

kevin8999 mentioned this pull request Aug 6, 2026

[Feature] Add GET route for voting #250

Closed

1 task

kevin8999 added 8 commits August 5, 2026 23:21

fix(app): Remove unneeded import

3d343bf

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

refactor(app): Extract reasons for downvoting to new file

8380cac

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

feat(app): Add cancel button to downvote dialog

f544b2b

WIP: when user presses downvote after it is already selected, pressing it again will "de-select" it. This still needs to be fixed Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

feat(api): Add route to get user's vote

6a13790

`GET /variants/:id/vote` will return the user's vote if a user ID is specified Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

feat(api): Add route to get user's vote

748d8a8

`GET /variants/:id/vote` will return the user's vote if a user ID is specified Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

fix(app): Fix downvote being deselected when clicked

aa08cf4

This commit forces the downvote to be selected at all times until the user cancels or deletes their vote from the database Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

refactor(app): Remove unneeded variable and import

0632674

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

refactor(app): Move downvoteReasons.ts to votes.ts

b2a4abf

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

andyrodrigues30 requested changes Aug 8, 2026

View reviewed changes

kevin8999 added 2 commits August 9, 2026 14:29

refactor(app): Move submitVote() to votes.ts

e46acfe

This commit also replaces `toggleVote()` with `setVote()`. This change may need to be reverted in the future Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

Merge branch 'feat/guide-vote' of https://github.com/kevin8999/bluelearn

6720a48

into feat/guide-vote Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

style(app): Rename variables, change parameter order

6c2cde4

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

kevin8999 marked this pull request as draft August 9, 2026 21:09

kevin8999 added 10 commits August 9, 2026 17:11

Merge branch 'main' into feat/guide-vote

ad308d8

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

style(app): Rename variable

e84a66b

`API_BASE` is also moved outside its function Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

feat(app): Add function to get vote from frontend

27ad3f0

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

chore(app): Remove unneeded console.log statement

bde55de

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

feat(app): Add fetchVote() function to get vote from frontend

5eb8dbb

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

refactor(app): Restrict voting tpes to "up" | "down" | null

869070a

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

feat(app): Add toggleVote() wrapper function

c528bb8

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

refactor(app): Move DownvoteDialog to DownvoteModal.tsx

577c482

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

feat(app): Fetch vote when user first loads page

4caa1e2

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

fix(app): Add missing UI imports

4a44dd8

Signed-off-by: Kevin Duong <kevinduong306@gmail.com>

Navigation Menu

Uh oh!

feat(app): Add guide vote functionality on guide page - #210

feat(app): Add guide vote functionality on guide page#210
kevin8999 wants to merge 31 commits into
bluelearn-org:mainfrom
kevin8999:feat/guide-vote

kevin8999 commented Jul 27, 2026 •

edited

Loading

Uh oh!

kevin8999 commented Aug 3, 2026

Uh oh!

Uh oh!

kevin8999 commented Aug 6, 2026 •

edited

Loading

Uh oh!

andyrodrigues30 left a comment •

edited

Loading

Uh oh!

andyrodrigues30 Aug 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

kevin8999 commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Type of change

Verification

Uh oh!

kevin8999 commented Aug 3, 2026

Uh oh!

Uh oh!

kevin8999 commented Aug 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andyrodrigues30 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andyrodrigues30 Aug 8, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kevin8999 commented Jul 27, 2026 •

edited

Loading

kevin8999 commented Aug 6, 2026 •

edited

Loading

andyrodrigues30 left a comment •

edited

Loading