Feat/page profile #15
Conversation
Rename profile/* to profiles/* as it shows multiple files. Update <a> in index menu.
Add Profile page for showing volunteer's profile details.
Add CSS styles for Profile page. Add SVG icons as React components. Add links for profiles on index page.
|
@madcampos This page displays profile for a single individual. @kbventures you have already written a ProfileList component for rendering all profiles as a list. Is it sufficient for the use case and are you planning to work on it further? |
| setIsErrorProfile(true); | ||
| } | ||
| const jsonDataProfile = await responseProfile.json(); | ||
| // REMOVE: Filtering won't be required with API, remove filtering when integrating with backend |
There was a problem hiding this comment.
suggestion: Use common pattern words like "TODO" or "FIXME".
Some extensions also help to highlight different keywords with different colors. Here is the one I use: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
There was a problem hiding this comment.
@manvinderjit we should definitely reuse that if possible. I'm not currently working on it but we shall surely expand on this in terms of functionality.
There was a problem hiding this comment.
@manvinderjit for front end work we should try to include a picture so we can get a quick peak without running the code(even though we will run it). Eventually when we have mobile version both images will be expected.
There was a problem hiding this comment.
@kbventures As each commit creates and updates a preview branch in CloudFlare, we can preview it directly in the browser instead of running locally. Refer to the image for instructions. Apologies for it being a crude design.
If we still need images, I can upload them.
Not sure if it was a question, but yes, it is correct. And the layout look nice 😉
I think for now this is sufficient, we can reuse the |
|
Please test the page for mobile using the dev tools to check for potential issues with content breaking.
|
There was a problem hiding this comment.
Great work @manvinderjit
Small ask. For future branches lets create a draft sooner during the development project so we are able to coordinate more efficiently have have a pulse on progression.
|
Should we introduce PascalCase for the components? |
|
@manvinderjit nit picking but eventually we probably want Inner Components (Reusable UI Elements) for Team & Profile |
I am already following PascalCase for components, unless I might have missed it somewhere. Functions and variables are camel case. I can update the contribution guides if required for the same. For the pages, I am using small case because that is how @madcampos initialized them. Not sure on the nomenclature for them. |
@kbventures Kindly elaborate on the elements parts. Do you mean the card for each team member and profile, if yes then these are already reusable components -> TeamMemberCard & ProfileCard. Otherwise, lemme know. |
OOPS! I might have not checked below 600px width. Will rectify it immediately! |
@madcampos @kbventures Apologies for the lack of clarity. What I meant to ask was that @kbventures originally created the as a reference point. I was confirming if I was expected to build upon that component or will Ken continue to work on it. I guess I will leave it for Ken. |
Fix mobile content breaking under 600px. Update message pattern in ProfileCard component.
|
It was simply an mvp to compare deployment solutions. |
Deploying volunteer with
|
| Latest commit: |
38cc5c2
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2771267c.volunteer-ekr.pages.dev |
| Branch Preview URL: | https://feat-page-profile.volunteer-ekr.pages.dev |
@kbventures Will do. |
|
@manvinderjit inner components and camelcase are fine. Ignore that. |
Yes, react component names should be in PascalCase, always, that helps to differentiate from native html elements and web components when referencing them in jsx. Fun fact: this is also a recommendation in vue for the same reason, it helps differentiate framework components from other things.
Ops... That was an oversight on my side |
Summary
Add a profile page to show the profile for an individual volunteer.
Additional information
The profile page right now uses a profile Id 'pid' URL parameter to fetch the profile id. Let me know if this has to be updated.