<feat> Organization Page #8
Conversation
Organization page using dummy data, and a google maps embed. Does not contain image support
|
Nvm, it was just a unused package. My b. |
Updated for Prettier Formatting for Build
|
@danielpeterkim For future pull requests, can you include screenshots of the changes you made |
| import { Card } from 'antd'; | ||
|
|
||
| // The Left Column Top Card | ||
| const OrganizationDisplayCard: React.FC = () => { |
There was a problem hiding this comment.
I think React.FC is going to get deprecated at some point. Just do const OrganizationDisplayCard = () => {}
| <Card | ||
| title={<span style={{ fontSize: '2rem' }}>A Wider Circle</span>} | ||
| bordered | ||
| style={{ |
There was a problem hiding this comment.
We usually prefer using tailwind for styling. Can you change the style prop for className= ...
| boxShadow: '0 4px 8px rgba(0,0,0,0.2)', | ||
| }} | ||
| > | ||
| <div style={{ fontSize: '1rem', color: '#333' }}> |
There was a problem hiding this comment.
Same comment here about tailwind
| @@ -0,0 +1,47 @@ | |||
| import React from 'react'; | |||
| import { Card } from 'antd'; | |||
There was a problem hiding this comment.
Could you maybe add an interface prop to this component?
interface OrganizationDisplayCard {
organization: Organization
}You will need to import the type
src/components/OrganizationTabs.tsx
Outdated
|
|
||
| // Example "Services" data array. | ||
| // In a real app, you'll fetch this from a backend and store it in state or props. | ||
| const servicesData = [ |
There was a problem hiding this comment.
Maybe this move this array to data/services.ts and import it from there. It will be cleaner
There was a problem hiding this comment.
that makes sense, will do
src/components/OrganizationTabs.tsx
Outdated
| <p> | ||
| <strong>Address:</strong> {address} | ||
| </p> | ||
| {/* Example "chips" for categories */} |
There was a problem hiding this comment.
I don't think we need these comments
src/components/OrganizationTabs.tsx
Outdated
| }; | ||
|
|
||
| // Render a "Location" item | ||
| const LocationCard: React.FC<{ |
There was a problem hiding this comment.
Can you add this card in another file? LocationCard.tsx
src/pages/OrganizationLayout.tsx
Outdated
| <> | ||
| <Navbar /> | ||
| {/* PLACE HOLDER SEARCH BAR*/} | ||
| {/* TO DO: Add search bar that links back to "Organizations" page with search query */} |
There was a problem hiding this comment.
Is the todo going to be addressed in another PR?
There was a problem hiding this comment.
Yes, I didn't really understand the functions in the Navbar of the Organization page at the time, but I would like to revisit it in a new PR.
src/pages/OrganizationLayout.tsx
Outdated
| <Content style={{ margin: '2rem' }}> | ||
| <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap' }}> | ||
| {/* Left Column: Organization Display Card */} | ||
| <div style={{ flex: '1 1 400px', minWidth: '350px' }}> |
There was a problem hiding this comment.
Yeah, will do. Saw the use of style for the drop shadows and totally forgot about tailwind. :P
src/pages/OrganizationLayout.tsx
Outdated
| </div> | ||
| </Card> | ||
| {/* Google Map Embed */} | ||
| <iframe |
There was a problem hiding this comment.
We have a component? Why not use it here?
There was a problem hiding this comment.
Yeah, map was empty at that time but definitely could have just put it there, whoopsy.
Addressed and changed various styling inconsistencies, switching all CSS to tailwind. Created Seperate component file for location card, and moved dummy data to Service Data,
Created life-like dummy data, allowing me to change all the pages to take in actual data objects like Services and Organizations.
|
Switched all Organization Page styling to Tailwind and Added Map Embed
Created a DummyData.tsx, which has Organization, Service, and Location Objects (use responsibly as some field were removed for convenience)
OrganizationTabs.tsx functionally take in Service and Location Data to create tabs, although the LocationCard input data is preprocessed. |
Various data types were inputted incorrectly, I fixed them
|
I can't seem to find why it isn't building. MapProps isn't used, while Maps itself doesn't take in any arguments? Not sure, definite blocker |
Organization page using dummy data, and a non-functional google maps embed.
To access go to route organization/:id
The id can be anything currently as they all go to the same place.