Instagram headless component #303
Conversation
- Implement Instagram feed component following 3-level architecture pattern - Integrate with @wix/instagram-account and @wix/instagram-media SDKs - Add comprehensive TypeScript support and proper component structure - Configure build pipeline for both ESM and CJS outputs - Set up testing infrastructure with vitest
…-components into instagram-updated
…less-components into create-new-components
nivinab
changed the title
…less-components into create-new-components
| <div> | ||
| <InstagramFeed.Title /> | ||
| <InstagramFeed.UserName /> | ||
| <InstagramFeed.Hashtag hashtag="myhashtag" /> |
There was a problem hiding this comment.
why do you need to provide the hashtag? I thought it was supposed to list the hashtags from the feed or something, does it have any actual headless logic? or is it pure UI?
| <InstagramFeed.InstagramMedias> | ||
| <InstagramFeed.InstagramMediaRepeater> | ||
| <MediaGallery.Root> | ||
| <InstagramMedia.caption /> |
There was a problem hiding this comment.
.Caption, .MediaType, ...
all components' names should start with capital letter including after .
| <InstagramMedia.timestamp /> | ||
| <InstagramMedia.MediaGalleries> | ||
| <InstagramMedia.MediaGalleryRepeater> | ||
| <MediaGallery.Root /> |
There was a problem hiding this comment.
The Root is rendered inside the repeater you don't need to render MediaGallery.Root but MediaGallery.ViewPort (or whatever they call it)
| <InstagramFeed.UserName /> | ||
| </div> | ||
| <div className="opacity-70 text-sm"> | ||
| <InstagramFeed.Hashtag hashtag={instagramConfig.accountId || 'instagram'} /> |
There was a problem hiding this comment.
you have the instegramConfig on the Root level, this component should get the data from it, and not as a prop
| <InstagramFeed.InstagramMediaRepeater> | ||
| <InstagramMedia.MediaGalleries> | ||
| <InstagramMedia.MediaGalleryRepeater> | ||
| <MediaGallery.Root mediaGalleryServiceConfig={{ media: [], infinite: true }}> |
There was a problem hiding this comment.
this should be on the repeater component which is rendering the root component internally and not rendering the media root again,
|
|
||
| return ( | ||
| <div ref={ref}> | ||
| <MediaGallery.Thumbnails>{children}</MediaGallery.Thumbnails> |
There was a problem hiding this comment.
Where does the MediaGallery.Thumbnail get the context from? if it is from Gallery component than this component is redundant and we can use MediaGallery.Thumbnails directly
|
|
||
| <InstagramFeed.InstagramMedias> | ||
| <InstagramFeed.InstagramMediaRepeater> | ||
| <InstagramMedia.MediaGalleries> |
There was a problem hiding this comment.
why don't we render MediaGallery.Thumbnails here and use MediaGallery components directly under it?
| })); | ||
|
|
||
| return ( | ||
| <MediaGallery.Root |
There was a problem hiding this comment.
everything under MediaGallery.Root should be just MediaGallery and not Instegram media
| const { type } = mediaItemService.mediaItem.get(); | ||
|
|
||
| return props.children({ | ||
| mediaType: type, |
There was a problem hiding this comment.
why do you provide the same prop twice with different names?
| const feedData = instagramFeedService.feedData.get(); | ||
|
|
||
| const displayName = | ||
| feedData.account?.instagramInfo?.instagramUsername || 'unknown'; |
There was a problem hiding this comment.
labels should always be controlled by the user you should accept an unknownLabel or something
No description provided.