Learn Page UI Update#5
Conversation
- Created ContentIcon component for content representation. - Added DurationIcon component to represent duration visually. - Implemented GlobeIcon component for global representation.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
jeafreezy
left a comment
There was a problem hiding this comment.
Thank you for the great work @superwaih!
Just some minor changes and this will be ready to merge.
Generally also, don't forget to run pnpm format to format the code.
Thanks.
There was a problem hiding this comment.
This seems to be the first hook to make api calls. Other hooks are mostly utilities, so we need to organize this better. Can this be under services ? Or be a subfolder named hooks under the learn component. Which do you suggest ? Or it's okay under hooks folder but we have another subfolder named services...
There was a problem hiding this comment.
yeah, i'll create a new folder inside the hooks folder named services
There was a problem hiding this comment.
Write vitest/unit test for this hook and other hooks and functions in this pr
| import { useQuery } from "@tanstack/react-query"; | ||
|
|
||
| const FAIR_UPDATES_URL = | ||
| "https://raw.githubusercontent.com/hotosm/fAIr/develop/docs/assets/fair-updates.json"; |
There was a problem hiding this comment.
I don't see this changing, but make it an environment variable and let it fallback to this. See the config/env file and put it there. Let it come from there.
frontend/src/utils/general-utils.ts
Outdated
| toast(message, "danger"); | ||
| }; | ||
|
|
||
| export const BACKUP_VIDEO_URL = "https://www.youtube.com/embed/N2_9Bvm05_0?si=to_2aoeRCW3APmmZ"; |
There was a problem hiding this comment.
Put this as well in the env config folder and let it be an environment variable.
Which means you'll update the env.dist so others can know.
…tion - Implemented a new Carousel component with responsive design using Shoelace. - Added styles for carousel and update cards in carousel.css. - Created tests for the getSlidesPerPage function to ensure correct slide counts based on breakpoints. - Developed useBreakpoint hook tests to verify breakpoint detection and updates. - Introduced useFairUpdates hook to fetch updates from a specified URL with error handling.
jeafreezy
left a comment
There was a problem hiding this comment.
Some changes are needed. Please check @superwaih .
Also don't forget to run prettier and remove any console.log!
frontend/src/app/routes/learn.tsx
Outdated
| )} | ||
| /> | ||
| {/* <div | ||
| className="relative updates-carousel-container" |
jeafreezy
left a comment
There was a problem hiding this comment.
This looks great. Thank you for the great work!
This PR finalizes the UI design for the Learn page and addresses issue
check the videos below for the before and after
before
Screen.Recording.2026-01-26.at.23.21.05.mov
after
new-learn.mov