EPMGCIP-171: Implement Homepage with Slider Featuring Exhibits #30
Conversation
| import styles from "./page.module.scss"; | ||
| import HomePage from "../../components/pages/Home/Home"; | ||
| import { getTopLatestExhibits } from "@/lib/exhibit"; | ||
| import { ITopLatestExhibit } from "@/interfaces/ITopLatestExhibit"; |
There was a problem hiding this comment.
what do you think about reusing src\interfaces\IExhibit.ts interface?
There was a problem hiding this comment.
I was thinking about the same approach, however, since I use lightweight model of exhibit that does not include a large set of properties in IExhibit I believe it would be better to define custom model instead.
There was a problem hiding this comment.
Got it. In that case, maybe it is better to rename it to something like "IPreviewExhibit"? So it will be more clear that it should be used for preview cards.
| export default async function Home() { | ||
| const topLatestExhibits = (await getTopLatestExhibits( | ||
| topLatestExhibitsLimit, | ||
| )) as ITopLatestExhibit[]; |
There was a problem hiding this comment.
Not sure that need type assertion here... I suppose type should be passed from appollo client
There was a problem hiding this comment.
I am afraid it does not work here, TS raises types error and it is mandatory to perform manual casting. I can try to put it on lib error to prevent extra casts in uses cases
There was a problem hiding this comment.
Yes, I agree. If it is possible, let's do that in 'libs'
There was a problem hiding this comment.
I think we should consider code styling for import order—for example, starting with third-party libraries, followed by local imports, arranged from distant to closer paths.
There was a problem hiding this comment.
Good catch, thank you!
It is already done in terms of #31
|
|
||
| function ImageGalleryArrow(props: Props): React.ReactElement { | ||
| return ( | ||
| <div |
There was a problem hiding this comment.
Could you use 'button' here?
| font-size: 30px; | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
Could you add 'hover' effect?
| import styles from "./page.module.scss"; | ||
| import HomePage from "../../components/pages/Home/Home"; | ||
| import { getTopLatestExhibits } from "@/lib/exhibit"; | ||
| import { ITopLatestExhibit } from "@/interfaces/ITopLatestExhibit"; |
There was a problem hiding this comment.
Got it. In that case, maybe it is better to rename it to something like "IPreviewExhibit"? So it will be more clear that it should be used for preview cards.
| export default async function Home() { | ||
| const topLatestExhibits = (await getTopLatestExhibits( | ||
| topLatestExhibitsLimit, | ||
| )) as ITopLatestExhibit[]; |
There was a problem hiding this comment.
Yes, I agree. If it is possible, let's do that in 'libs'
| @@ -32,35 +30,19 @@ export default function Home(props: Props): React.ReactElement { | |||
| return { | |||
| url: firstImageItem.url, | |||
| id: firstImageItem.sys.id, | |||
| clickUrl: `${locale}${EXHIBIT_URL}/${exhibit.slug}`, | |||
There was a problem hiding this comment.
I suppose, you can remove ${locale}, next-intl should resolve that
https://jira.epam.com/jira/browse/EPMGCIP-171
Code changes
Homecomponent handling basic layout forhomepage;TopLatestExhibits.gqlto obtain top latest recently added exhibits;ImageGallerycomponent to be customized, update usages;ImageGalleryArrowforImageGalleryto represent custom arrow customization;package-lock.json;package.jsonto run application;Screenshots
Screen.Recording.2024-11-21.at.22.27.07.mov