BA-2452-ba-content-feed-viewing-image-posts #255
Conversation
davidbermudez-tsl
requested review from
anicioalexandre,
deboracosilveira and
priscilladeroode
as code owners
|
WalkthroughThis update introduces a comprehensive content feed posts feature, including a paginated post list with image carousels, reactions, and creation forms. It adds new GraphQL fragments, queries, and mutations, replaces old post creation components, and implements new UI components for post display, creation, and interaction. Supporting icons and types are also added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ContentFeed (Page)
participant PostList
participant PostItem
participant PostHeader
participant PostItemImages
participant PostFooter
User->>ContentFeed: Loads page with preloadedQuery
ContentFeed->>PostList: Passes preloadedQuery
PostList->>PostItem: For each postRef, render PostItem
PostItem->>PostHeader: Render post header
PostItem->>PostItemImages: Render image carousel if images exist
PostItem->>PostFooter: Render footer with reactions, time, etc.
User->>PostFooter: Clicks reaction/share/reply
PostFooter->>PostReactionButton: Triggers reaction mutation
sequenceDiagram
participant User
participant PostCreate
participant PostForm
participant useContentPostCreateMutation
participant GraphQL API
User->>PostCreate: Opens create post form
PostCreate->>PostForm: Renders form
User->>PostForm: Fills form and submits
PostForm->>PostCreate: onSubmit called
PostCreate->>useContentPostCreateMutation: Triggers mutation with form data
useContentPostCreateMutation->>GraphQL API: Create post mutation with files
GraphQL API-->>useContentPostCreateMutation: Returns result/errors
useContentPostCreateMutation->>PostCreate: Handles response
PostCreate->>User: Shows success/error, navigates as needed
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/components/modules/content-feed/common/graphql/fragments/ContentPost.tsOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /packages/components/.eslintrc.js
packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.tsOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /packages/components/.eslintrc.js
packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.tsOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /packages/components/.eslintrc.js
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (3)
📒 Files selected for processing (48)
💤 Files with no reviewable changes (5)
🚧 Files skipped from review as they are similar to previous changes (42)
🧰 Additional context used🧠 Learnings (2)📓 Common learningspackages/components/modules/content-feed/web/PostCreate/types.ts (3)🪛 Biome (1.9.4)packages/components/modules/content-feed/web/PostCreate/types.ts[error] 1-1: An empty interface is equivalent to {}. Safe fix: Use a type alias instead. (lint/suspicious/noEmptyInterface) ⏰ Context from checks skipped due to timeout of 90000ms (4)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 15
🧹 Nitpick comments (28)
packages/design-system/tsup.config.ts (1)
6-6:❓ Verification inconclusive
Simplified build configuration removes dynamic behavior.
The changes to the configuration file make the build options static by removing conditional behavior that likely depended on watch mode. While this simplifies the configuration, be aware of the following implications:
- Disabling minification (
minify: false) will result in larger bundle sizes that might impact loading times in production.- Disabling code splitting (
splitting: false) may affect selective loading and caching opportunities.Ensure these changes align with the performance expectations for the design system in production environments.
Also applies to: 28-28, 31-31
🏁 Script executed:
#!/bin/bash # Check bundle sizes before and after this change echo "Checking if there's a significant bundle size impact from disabling minification and code splitting" find dist -type f -name "*.js" -exec du -h {} \; | sort -hr | head -10Length of output: 327
🏁 Script executed:
#!/bin/bash # Locate tsup config file CONFIG=$(fd tsup.config.ts | head -n1) echo "Found tsup config: $CONFIG" # Show the defineConfig call context echo -e "\nContext around defineConfig:" rg -n "export default defineConfig" -A5 -B5 "$CONFIG" # Show minify and splitting flags echo -e "\nContext for minify and splitting flags:" rg -n "minify" -n "splitting" "$CONFIG"Length of output: 942
Review build configuration in packages/components/tsup.config.ts
The update removes dynamic behavior and now explicitly disables minification (
minify: false). This will increase your bundle sizes and may impact production load times. Additionally, there is no explicitsplittingsetting in the config—so tsup’s default (splitting: false) still applies. Consider whether you need code‑splitting for better caching and selective loading.Key locations:
- packages/components/tsup.config.ts around the
defineConfigcall
• Line 33:minify: false
• Nosplittingoption set (defaults tofalse)Please measure bundle sizes in your
dist/output before and after this change to ensure it meets your performance targets, and verify if you should enablesplitting: truefor production.packages/design-system/components/web/icons/PillIcon/index.tsx (1)
6-9: Consider accessibility improvements for the icon.For better accessibility:
- Add a descriptive
titleAccessprop value to provide screen reader information- Ensure adequate color contrast when using the default color (
action.active)- <SvgIcon sx={{ fontSize: 18, color: 'action.active', ...sx }} {...props}> + <SvgIcon + titleAccess="Indicator dot" + sx={{ fontSize: 18, color: 'action.active', ...sx }} + {...props} + >packages/components/modules/content-feed/web/PostList/styled.tsx (1)
3-8: Consider responsive width instead of fixed 600px
Hard–codingwidth: '600px'may limit usability on smaller viewports. You could use a percent‐based width with amaxWidthand add padding at breakpoints:-export const RootContainer = styled(Box)(() => ({ - display: 'flex', - width: '600px', - alignSelf: 'center', - flexDirection: 'column', -})) +export const RootContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + width: '100%', + maxWidth: '600px', + margin: '0 auto', + flexDirection: 'column', + [theme.breakpoints.down('sm')]: { + padding: theme.spacing(0, 2), + }, +}))packages/components/package.json (1)
109-112: Dependency addition looks good; don’t forget the CSS import
Referencing"react-multi-carousel": "catalog:"aligns with the workspace catalog. Remember to import its stylesheet in your component, for example:// In PostItemImages/index.tsx import 'react-multi-carousel/lib/styles.css';packages/components/modules/content-feed/web/PostImageSlide/styled.tsx (1)
1-6: Consider preventing image dragging.The styling correctly sets the height and prevents user selection, but you might want to also prevent image dragging for a better carousel experience.
export const ImageSlide = styled('img')(() => ({ height: '100%', userSelect: 'none', + draggable: 'false', + WebkitUserDrag: 'none' }))packages/components/modules/content-feed/web/PostHeader/types.ts (1)
1-5: LGTM - Clean type definition.The interface correctly uses the generated GraphQL type for post data, ensuring type safety for the PostHeader component.
Consider a shared interface.
Since PostHeaderProps and PostFooterProps are identical, you might consider creating a shared interface like
PostComponentPropsto reduce duplication.packages/components/modules/content-feed/web/PostImageSlide/types.tsx (1)
1-5: Consider renaming file extension to.ts.This file only exports type definitions and contains no JSX. Renaming it to
.tswould better reflect its contents.- packages/components/modules/content-feed/web/PostImageSlide/types.tsx + packages/components/modules/content-feed/web/PostImageSlide/types.tspackages/design-system/components/web/icons/index.ts (1)
35-37: Maintain export ordering consistencyThe new icons
PillIcon,ReplyIcon, andSharePostIconare appended at the end, which breaks the existing alphabetical/grouped ordering of exports. For better readability and maintainability, please insert them in their correct positions:
PillIconbeforePinIconReplyIconafterCommentReplyIconSharePostIconafterShareIconSuggested diff:
-export { default as UsernameIcon } from './UsernameIcon' -export { default as PillIcon } from './PillIcon' -export { default as ReplyIcon } from './ReplyIcon' -export { default as SharePostIcon } from './SharePostIcon' +export { default as PillIcon } from './PillIcon' +export { default as PinIcon } from './PinIcon' ... +export { default as CommentReplyIcon } from './CommentReplyIcon' +export { default as ReplyIcon } from './ReplyIcon' ... +export { default as ShareIcon } from './ShareIcon' +export { default as SharePostIcon } from './SharePostIcon' +export { default as UsernameIcon } from './UsernameIcon'packages/components/modules/content-feed/web/PostItemImages/styled.tsx (1)
3-9: Add vertical centering and overflow handlingThe carousel container centers content horizontally but lacks vertical centering and overflow clipping. Consider adding
alignItems: 'center'andoverflow: 'hidden':export const ImageCarouselContainer = styled(Box)(() => ({ background: '#000', width: 600, height: '100%', - justifyContent: 'center', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + overflow: 'hidden', }))This ensures carousel slides are fully centered and prevents visual spillover.
packages/components/modules/content-feed/web/ContentFeed/types.ts (1)
10-12: Consider consolidating duplicate type definitionsThese type definitions are duplicated with identical definitions in
packages/components/modules/content-feed/common/types.ts. To avoid potential maintenance issues, consider importing these types from the common location instead of duplicating them.- export type ContentPosts = NonNullable<ContentPostsFragment$data['contentPosts']> - export type ContentPostEdges = ContentPosts['edges'] - export type ContentPostNode = NonNullable<ContentPostEdges[number]>['node'] + import { ContentPosts, ContentPostEdges, ContentPostNode } from '../../common/types' + export { ContentPosts, ContentPostEdges, ContentPostNode }packages/components/modules/content-feed/web/PostImageSlide/index.tsx (1)
14-16: Consider adding error handling for image loading failuresThe component currently doesn't handle cases where the image fails to load. Adding an onError handler would improve user experience.
- return <ImageSlide draggable={false} src={target.image} /> + return ( + <ImageSlide + draggable={false} + src={target.image} + alt="Post image" + onError={(e) => { + e.currentTarget.style.display = 'none' + }} + /> + )packages/components/tsup.config.ts (1)
9-9: Consider impact of keepNames on bundle sizeThe
keepNames: truesetting preserves function and class names during bundling, which is helpful for debugging but increases bundle size. This is a good choice for development builds but might want to be conditional for production.packages/components/modules/content-feed/web/PostItem/index.tsx (2)
16-33: Consider memoization to optimize rendering performanceIn a list context, the
PostItemcomponent could benefit from memoization to prevent unnecessary re-renders when props haven't changed.-const PostItem: FC<PostItemProps> = ({ postRef }) => { +const PostItem: FC<PostItemProps> = React.memo(({ postRef }) => { const [post] = useRefetchableFragment<ContentPostRefetchQuery, ContentPost_post$key>( ContentPostFragmentQuery, postRef, ) if (!post) return null return ( <Stack> <PostHeader post={post} /> <PostItemImages post={post} /> <Stack px={1.5} gap={1}> <Typography variant="body2">{post.content}</Typography> </Stack> <PostFooter post={post} /> </Stack> ) -} +})
17-20: Add error handling for GraphQL query failuresThe component doesn't currently handle potential GraphQL query failures. Consider adding error handling to improve user experience.
- const [post] = useRefetchableFragment<ContentPostRefetchQuery, ContentPost_post$key>( + const [post, refetch] = useRefetchableFragment<ContentPostRefetchQuery, ContentPost_post$key>( ContentPostFragmentQuery, postRef, ) + + const handleRefetch = useCallback(() => { + refetch({}, { onError: (error) => console.error('Failed to refetch post:', error) }); + }, [refetch]);packages/components/modules/content-feed/web/PostCreate/types.ts (1)
1-5: Consider adding validation constraints to the form interfaceWhile the types provide good structure, they don't enforce validation constraints like minimum/maximum content length or maximum number of images allowed.
If you have validation constraints, consider documenting them as JSDoc comments:
export interface ContentPostCreateForm { + /** Content text (1-1000 characters) */ content: string + /** Up to 10 image files, each max 5MB */ images?: File[] | Blob[] isReactionsEnabled: boolean }packages/components/modules/content-feed/web/PostFooter/index.tsx (1)
28-30: Consider timezone handling for displayed dates.The date/time formatting doesn't explicitly handle timezone differences, which might lead to inconsistent time displays depending on the user's locale. Consider specifying a consistent timezone or using the user's local timezone.
- {created.toFormat('hh:mm a')} <CircleIcon color="disabled" sx={{ fontSize: 4 }} />{' '} - {created.toFormat('DDD')} + {created.setZone('local').toFormat('hh:mm a')} <CircleIcon color="disabled" sx={{ fontSize: 4 }} />{' '} + {created.setZone('local').toFormat('DDD')}packages/components/modules/content-feed/web/PostForm/index.tsx (1)
22-23: Add aria-label for better form accessibility.The form lacks an explicit aria-label which would improve accessibility for screen readers.
- <RootContainer> - <form onSubmit={onSubmit}> + <RootContainer> + <form onSubmit={onSubmit} aria-label="Create new post">packages/components/modules/content-feed/web/PostHeader/index.tsx (4)
16-16: Add loading state handling.The component currently returns null if profile is not available, but doesn't handle explicit loading states. This may result in an abrupt UI transition.
- if (!profile) return null + if (!profile) { + return <Stack p={1.5} gap={1} direction="row" justifyContent="space-between"> + <Stack direction="row" gap={1}> + <Avatar sizes="small" sx={{ p: 0 }} /> + <Stack> + <Typography variant="subtitle2"><Skeleton width={100} /></Typography> + <Typography variant="caption" color="text.secondary"><Skeleton width={60} /></Typography> + </Stack> + </Stack> + </Stack> + }
22-22: Add fallback for missing Avatar image.The Avatar component doesn't have a fallback for missing images which may result in a broken image if the profile image is unavailable.
- <Avatar sizes="small" sx={{ p: 0 }} src={image?.url} /> + <Avatar sizes="small" sx={{ p: 0 }} src={image?.url}> + {name ? name.charAt(0).toUpperCase() : '?'} + </Avatar>
26-26: Extract path handling logic to a utility function.The path replacement logic in the JSX makes the component less readable. Consider extracting this to a utility function.
+ const getHandleFromPath = (path?: string): string => { + if (!path) return ''; + return path.replace('/', ''); + } + return ( <Stack p={1.5} gap={1} direction="row" justifyContent="space-between"> <Stack direction="row" gap={1}> <Avatar sizes="small" sx={{ p: 0 }} src={image?.url} /> <Stack> <Typography variant="subtitle2">{name}</Typography> <Typography variant="caption" color="text.secondary"> - {urlPath?.path && <>@{urlPath.path.replace('/', '')}</>} + {urlPath?.path && <>@{getHandleFromPath(urlPath.path)}</>} </Typography> </Stack> </Stack>
30-30: Use theme spacing instead of hardcoded pixel values.The hardcoded
translateX(16px)transform might not scale well with different theme densities. Consider using MUI's theme spacing.- <IconButton aria-label="Post Options" sx={{ transform: `translateX(16px)` }}> + <IconButton aria-label="Post Options" sx={{ transform: `translateX(${theme.spacing(2)})` }}>packages/components/modules/content-feed/web/PostImageDropzone/index.tsx (1)
63-66: Add keyboard accessibility for file selection.The file selection is only triggered by clicks, making it inaccessible to keyboard users. Consider adding keyboard handling.
onFileClick={(selectedFile, index) => { setSelectedPreview(selectedFile as File) setSelectedPreviewIndex(index) }} + onKeyDown={(e, selectedFile, index) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + setSelectedPreview(selectedFile as File) + setSelectedPreviewIndex(index) + } + }}packages/components/modules/content-feed/web/PostForm/constants.ts (1)
5-9: Consider type annotations for default form values.The
imagesarray lacks a type annotation compared to the implementation inPostCreate/constants.tswhere it's explicitly typed as[] as File[]. For consistency and to prevent potential type issues, add type annotations.export const DEFAULT_CONTENT_POST_CREATE_FORM_VALUES = { content: '', - images: [], + images: [] as File[], isReactionsEnabled: true, }packages/components/modules/content-feed/web/PostCreate/index.tsx (1)
61-67: Consider adding form reset on cancel.When a user cancels, you might want to reset the form to prevent stale data if they return to the form later.
const onCancel = useCallback(() => { + form.reset(DEFAULT_CONTENT_POST_CREATE_FORM_VALUES) router.push('/posts') }, [router, form])packages/components/modules/content-feed/web/PostList/index.tsx (2)
15-19: Missing component name in forwardRef.The
Scrollercomponent uses React.forwardRef but doesn't provide a display name, which can make debugging more difficult with React DevTools.const Scroller: Components['List'] = React.forwardRef(({ style, children }, ref) => ( <PostsListContainer style={style} ref={ref}> {children} </PostsListContainer> )) +Scroller.displayName = 'Scroller';
29-32: Consider memoizing the renderPostItem function.Since this function is passed to virtualized rendering, memoizing it with useCallback can prevent unnecessary re-renders.
-const renderPostItem = (post: ContentPostEdges[number]) => { +const renderPostItem = React.useCallback((post: ContentPostEdges[number]) => { if (!post?.node) return null return <PostItem postRef={post.node} /> -} +}, [])packages/components/modules/content-feed/web/PostItemImages/index.tsx (1)
34-34: Fix redundant conditional in opacity stylingThe opacity conditional makes no sense in the inactive state since
activewill always be false.- <CircleIcon sx={{ color: '#fff', fontSize: 8, opacity: active ? 1 : 0.5 }} /> + <CircleIcon sx={{ color: '#fff', fontSize: 8, opacity: 0.5 }} />packages/components/modules/content-feed/web/PostForm/types.ts (1)
20-25: Consider making PostFormProps more flexible for both create and update operationsCurrently,
PostFormPropsonly supports the create form type. Consider making it generic to support both create and update operations for better reusability.export interface PostFormProps { - form: UseFormReturn<ContentPostCreateForm> + form: UseFormReturn<ContentPostCreateForm | ContentPostUpdateForm> onSubmit: () => void isSaving: boolean onCancel: () => void }Or use a generic type parameter:
export interface PostFormProps<T = ContentPostCreateForm> { form: UseFormReturn<T> onSubmit: () => void isSaving: boolean onCancel: () => void }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (45)
packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/index.ts(1 hunks)packages/components/modules/content-feed/common/types.ts(1 hunks)packages/components/modules/content-feed/web/ContentFeed/index.tsx(2 hunks)packages/components/modules/content-feed/web/ContentFeed/types.ts(1 hunks)packages/components/modules/content-feed/web/PostCreate/constants.ts(1 hunks)packages/components/modules/content-feed/web/PostCreate/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostCreate/types.ts(1 hunks)packages/components/modules/content-feed/web/PostFooter/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostFooter/types.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/constants.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostForm/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostForm/types.ts(1 hunks)packages/components/modules/content-feed/web/PostHeader/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostHeader/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageDropzone/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageDropzone/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/types.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/types.ts(1 hunks)packages/components/modules/content-feed/web/PostItemImages/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/types.ts(1 hunks)packages/components/modules/content-feed/web/PostList/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostList/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/types.ts(1 hunks)packages/components/modules/content-feed/web/index.ts(1 hunks)packages/components/package.json(1 hunks)packages/components/schema.graphql(7 hunks)packages/components/tsup.config.ts(2 hunks)packages/design-system/components/web/icons/PillIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/ReplyIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/SharePostIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/index.ts(1 hunks)packages/design-system/tsup.config.ts(2 hunks)pnpm-workspace.yaml(1 hunks)
🧰 Additional context used
🧠 Learnings (4)
packages/components/modules/content-feed/web/PostFooter/types.ts (1)
Learnt from: davidbermudez-tsl
PR: silverlogic/baseapp-frontend#209
File: packages/components/modules/content-feed/web/ContentFeed/types.ts:1-1
Timestamp: 2025-04-09T22:06:40.026Z
Learning: The empty ContentFeedProps interface in packages/components/modules/content-feed/web/ContentFeed/types.ts will be populated with properties in a future PR rather than being converted to a type alias.
packages/components/modules/content-feed/web/PostHeader/types.ts (1)
Learnt from: davidbermudez-tsl
PR: silverlogic/baseapp-frontend#209
File: packages/components/modules/content-feed/web/ContentFeed/types.ts:1-1
Timestamp: 2025-04-09T22:06:40.026Z
Learning: The empty ContentFeedProps interface in packages/components/modules/content-feed/web/ContentFeed/types.ts will be populated with properties in a future PR rather than being converted to a type alias.
packages/components/modules/content-feed/web/PostItem/types.ts (1)
Learnt from: davidbermudez-tsl
PR: silverlogic/baseapp-frontend#209
File: packages/components/modules/content-feed/web/ContentFeed/types.ts:1-1
Timestamp: 2025-04-09T22:06:40.026Z
Learning: The empty ContentFeedProps interface in packages/components/modules/content-feed/web/ContentFeed/types.ts will be populated with properties in a future PR rather than being converted to a type alias.
packages/components/modules/content-feed/web/ContentFeed/types.ts (1)
Learnt from: davidbermudez-tsl
PR: silverlogic/baseapp-frontend#209
File: packages/components/modules/content-feed/web/ContentFeed/types.ts:1-1
Timestamp: 2025-04-09T22:06:40.026Z
Learning: The empty ContentFeedProps interface in packages/components/modules/content-feed/web/ContentFeed/types.ts will be populated with properties in a future PR rather than being converted to a type alias.
🧬 Code Graph Analysis (19)
packages/components/modules/content-feed/web/PostItem/index.tsx (2)
packages/components/modules/content-feed/web/PostItem/types.ts (1)
PostItemProps(3-5)packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts (1)
ContentPostFragmentQuery(3-24)
packages/components/modules/content-feed/web/PostCreate/constants.ts (1)
packages/components/modules/content-feed/web/PostCreate/types.ts (1)
ContentPostCreateForm(1-5)
packages/components/tsup.config.ts (1)
packages/design-system/tsup.config.ts (1)
esbuildOptions(12-17)
packages/components/modules/content-feed/web/PostImageSlide/index.tsx (3)
packages/components/modules/content-feed/web/PostImageSlide/types.tsx (1)
PostImageSlideProps(3-5)packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts (1)
ContentPostImageFragment(3-8)packages/components/modules/content-feed/web/PostImageSlide/styled.tsx (1)
ImageSlide(3-6)
packages/components/modules/content-feed/web/PostItemImages/index.tsx (2)
packages/components/modules/content-feed/web/PostItemImages/types.ts (1)
PostItemImagesProps(3-5)packages/components/modules/content-feed/web/PostItemImages/styled.tsx (1)
ImageCarouselContainer(3-9)
packages/components/modules/content-feed/web/PostImageDropzone/types.ts (1)
packages/components/modules/content-feed/web/PostCreate/types.ts (1)
ContentPostCreateForm(1-5)
packages/components/modules/content-feed/common/types.ts (1)
packages/components/modules/content-feed/web/ContentFeed/types.ts (3)
ContentPosts(10-10)ContentPostEdges(11-11)ContentPostNode(12-12)
packages/components/modules/content-feed/web/ContentFeed/types.ts (1)
packages/components/modules/content-feed/common/types.ts (3)
ContentPosts(3-3)ContentPostEdges(4-4)ContentPostNode(5-5)
packages/components/modules/content-feed/web/PostFooter/index.tsx (1)
packages/components/modules/content-feed/web/PostFooter/types.ts (1)
PostFooterProps(3-5)
packages/components/modules/content-feed/web/PostList/styled.tsx (1)
packages/components/modules/content-feed/web/PostForm/styled.tsx (3)
RootContainer(3-8)HeaderContainer(10-17)ButtonContainer(19-24)
packages/components/modules/content-feed/web/PostForm/index.tsx (2)
packages/components/modules/content-feed/web/PostForm/types.ts (1)
PostFormProps(20-25)packages/components/modules/content-feed/web/PostForm/styled.tsx (3)
RootContainer(3-8)HeaderContainer(10-17)ButtonContainer(19-24)
packages/components/modules/content-feed/web/PostForm/constants.ts (2)
packages/components/modules/content-feed/web/PostCreate/constants.ts (2)
DEFAULT_CONTENT_POST_CREATE_FORM_VALUES(5-9)CONTENT_POST_CREATE_FORM_VALIDATION(11-15)packages/components/modules/content-feed/web/PostForm/types.ts (2)
ContentPostCreateForm(3-7)ContentPostUpdateForm(9-14)
packages/components/modules/content-feed/web/PostImageDropzone/index.tsx (1)
packages/components/modules/content-feed/web/PostImageDropzone/types.ts (1)
PostImageDropzoneProps(5-7)
packages/components/modules/content-feed/web/PostCreate/index.tsx (6)
packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts (1)
useContentPostCreateMutation(22-23)packages/components/modules/content-feed/web/PostCreate/types.ts (2)
ContentPostCreateForm(1-5)UploadableContentPostFiles(7-9)packages/components/modules/content-feed/web/PostForm/types.ts (2)
ContentPostCreateForm(3-7)UploadableContentPostFiles(16-18)packages/components/modules/content-feed/web/PostCreate/constants.ts (2)
DEFAULT_CONTENT_POST_CREATE_FORM_VALUES(5-9)CONTENT_POST_CREATE_FORM_VALIDATION(11-15)packages/components/modules/content-feed/web/PostForm/constants.ts (2)
DEFAULT_CONTENT_POST_CREATE_FORM_VALUES(5-9)CONTENT_POST_CREATE_FORM_VALIDATION(11-15)packages/utils/functions/form/setFormRelayErrors/index.ts (1)
setFormRelayErrors(17-32)
packages/components/modules/content-feed/web/PostHeader/index.tsx (2)
packages/components/modules/content-feed/web/PostHeader/types.ts (1)
PostHeaderProps(3-5)packages/components/modules/profiles/common/graphql/fragments/ProfileItem.ts (1)
ProfileItemFragment(3-15)
packages/components/modules/content-feed/web/PostForm/styled.tsx (1)
packages/components/modules/content-feed/web/PostList/styled.tsx (3)
RootContainer(3-8)HeaderContainer(10-16)ButtonContainer(18-24)
packages/components/modules/content-feed/web/PostReactionButton/index.tsx (1)
packages/components/modules/content-feed/web/PostReactionButton/types.ts (1)
PostReactionButtonProps(3-5)
packages/components/modules/content-feed/web/PostForm/types.ts (1)
packages/components/modules/content-feed/web/PostCreate/types.ts (2)
ContentPostCreateForm(1-5)UploadableContentPostFiles(7-9)
packages/components/modules/content-feed/web/ContentFeed/index.tsx (1)
packages/components/modules/content-feed/web/ContentFeed/types.ts (1)
ContentFeedProps(6-8)
🔇 Additional comments (59)
packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts (1)
3-8:✅ Verification successful
GraphQL fragment looks good for image retrieval.
The fragment correctly defines the essential fields needed for displaying content post images. The structure follows Relay best practices by keeping the fragment focused on specific data needs.
However, consider whether any additional image metadata fields might be useful for the UI, such as:
- Image dimensions (width/height)
- Alt text for accessibility
- Caption or description
🏁 Script executed:
#!/bin/bash # Check if the ContentPostImage type has additional fields that might be useful echo "Checking ContentPostImage type definition for additional useful fields" fd -t f -e ts -e tsx -e graphql | xargs grep -l "type ContentPostImage" | xargs catLength of output: 45405
Verified ContentPostImageFragment – all available fields included
I checked the
ContentPostImageGraphQL type and it only exposes:
image: Stringpost: ContentPost!id: ID!(Relay global ID)pk: Int!Your fragment already pulls in both
pkandimage, which are the only fields available for image retrieval. There are currently no width/height, alt text or caption/description fields onContentPostImage. If you anticipate needing that metadata in the UI, you’ll need to extend the GraphQL schema accordingly.
- ContentPostImage fields:
id,pk,image- No
width/height,altText, orcaptionpresent- Schema extension required for any additional metadata
packages/components/modules/content-feed/web/PostReactionButton/types.ts (1)
1-5:❓ Verification inconclusive
Props interface follows type-safe patterns.
The interface correctly implements a type-safe approach using GraphQL fragment references, which is the recommended pattern for Relay components.
For completeness, consider whether the reaction button might need additional props for customization, such as:
- Size variant
- Disabled state
- Custom styling options
- Callback for reactions
🏁 Script executed:
#!/bin/bash # Check how the PostReactionButton component uses these props echo "Checking implementation of PostReactionButton" fd -t f -e tsx "PostReactionButton/index.tsx" | xargs catLength of output: 158
Confirm PostReactionButton Props Usage and Customization
I agree that the
PostReactionButtonPropsinterface is type‑safe and follows best practices by relying on the generatedReactionButton_target$keyfragment. For improved flexibility, consider whether you’ll need to support additional customization options:
- Size variants (e.g., “small” | “medium” | “large”)
- Disabled state
- Custom styling overrides (className, style)
- Reaction callback handlers (onReact)
I wasn’t able to locate
PostReactionButton/index.tsxin the codebase—please verify that the component exists at the expected path, that these props are properly forwarded, and that any new customization options are implemented and typed accordingly.packages/design-system/components/web/icons/PillIcon/index.tsx (1)
5-11: Icon implementation follows design system patterns.The PillIcon component correctly implements the design system's icon patterns using MUI's SvgIcon component with appropriate default styling.
packages/components/modules/content-feed/web/PostList/styled.tsx (4)
10-16: Review vertical spacing on header container
In thePostFormstyled file,HeaderContainerincluded amarginBottom. Here it’s missing. Please confirm if additional bottom margin is needed for consistency.
18-24: Double‑checkjustifyContenton ButtonContainer
UsingjustifyContent: 'space-between'withwidth: 'fit-content'might not space controls as expected. Verify against design or considerjustifyContent: 'center'plus the existinggap.
26-31: Good use of themed divider for list items
Leveragingtheme.palette.dividerfor the border ensures visual consistency across the app.
33-35: Approve padding for post header
Usingtheme.spacing(1, 5)aligns with MUI best practices and provides consistent padding.pnpm-workspace.yaml (1)
25-25:✅ Verification successful
Verify
react-multi-carouselcatalog entry
Ensure version2.8.6is published and correct:Expected output:
2.8.6
🏁 Script executed:
#!/bin/bash npm view react-multi-carousel@2.8.6 versionLength of output: 51
Confirmed: react-multi-carousel@2.8.6 is published
npm view react-multi-carousel@2.8.6 versionreturned2.8.6, so the entry in pnpm-workspace.yaml (line 25) is correct.packages/components/modules/content-feed/web/ContentFeed/index.tsx (2)
8-8: LGTM - Clean import of the new PostList component.The import aligns with the rest of the module structure and supports the implementation of the image viewing functionality.
12-12: Correctly implementing the preloaded query pattern.The component now properly accepts and passes the preloaded query data to the PostList component, enabling the rendering of content posts with images as specified in the PR objectives.
Also applies to: 36-36
packages/components/modules/content-feed/web/PostFooter/types.ts (1)
1-5: LGTM - Clean type definition.The interface correctly uses the generated GraphQL type for post data, ensuring type safety for the PostFooter component.
packages/components/modules/content-feed/web/PostImageSlide/types.tsx (1)
1-5: Correct typing and imports for PostImageSlideProps.The new
PostImageSlidePropsinterface properly references the generatedContentPostImageFragment$keyand the import path is accurate.packages/components/modules/content-feed/web/PostItemImages/types.ts (1)
1-5: ApprovePostItemImagesPropsdefinition.The
postprop is correctly typed asContentPost_post$dataand the import path aligns with the generated GraphQL types.packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts (1)
1-9: Validate GraphQL query setup.The
ContentPostDetailFragmentQuerycorrectly importsgraphqlfromreact-relayand spreads theContentPost_postfragment. Ensure this query is re-exported in the module’s public API (e.g., incommon/index.ts) so that downstream components can access it.packages/components/modules/content-feed/web/PostItem/types.ts (1)
1-5: ApprovePostItemPropsinterface.The
postRefprop is properly typed asContentPost_post$keyfor use with Relay’s fragment hooks, and the import path is correct.packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts (1)
1-8: ApproveContentPostsQuerydefinition.The paginated query parameters (
count,cursor,orderBy) and the fragment argument spread are correctly specified. Confirm thatContentPostsQueryis exposed via the module’s public API as intended.packages/components/modules/content-feed/common/index.ts (1)
4-6: Expose new GraphQL operations for content-feedRe-exporting
ContentPostsfragments and queries along withContentPostDetailaligns the common API surface with the newly introduced content-feed GraphQL modules, simplifying imports in your web components.packages/components/modules/content-feed/web/PostImageDropzone/types.ts (1)
1-7: Props interface is clear and type-safeThe
PostImageDropzonePropsinterface correctly types theformprop as aUseFormReturn<ContentPostCreateForm>, ensuring strong typing for form operations in the dropzone component.packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts (1)
10-11: Good approach using fragment spread!Replacing explicit field selection with the
ContentPost_postfragment spread is a best practice. This promotes reusability, maintains consistency across queries/mutations, and simplifies future maintenance—when the fragment is updated, all mutations using it will automatically reflect those changes.packages/components/modules/content-feed/common/types.ts (1)
1-5: Well-structured type definitionsThese type definitions provide strong typing for working with content post data structures. The use of
NonNullableand proper type narrowing through the GraphQL connection pattern (root → edges → nodes) shows good TypeScript practices.packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts (1)
3-24: Well-designed fragment with comprehensive field selectionThis fragment is well-structured with complete field selection for content posts:
- The
@refetchabledirective properly enables data refreshing- Includes nested connections for images with fragment spreads
- Contains profile information and reaction functionality
- Timestamps for proper content ordering and display
The fragment's comprehensiveness ensures consistent data fetching across components that use content posts.
packages/components/modules/content-feed/web/ContentFeed/types.ts (1)
6-8: ContentFeedProps populated as plannedThe interface has been populated with the
preloadedQueryproperty as indicated in the retrieved learnings. This correctly implements the Relay preloaded query pattern for better performance.packages/components/tsup.config.ts (3)
16-16: Good practice marking carousel dependencies as externalCorrectly marking
react-multi-carouseland its CSS as external dependencies ensures they won't be bundled with your code, preventing duplication across packages.Also applies to: 28-29
32-36:❓ Verification inconclusive
Verify build configuration choices for production use
Setting
minify: falseandsplitting: falsemight impact production performance. Disabling minification increases bundle size, while disabling code splitting prevents loading optimizations.Are these settings intentionally set for development purposes, or should they be conditional based on the environment?
🏁 Script executed:
#!/bin/bash # Check if these settings are consistent with other production configs grep -r "minify:" --include="*.ts" --include="*.js" packages/*/tsup.config.* grep -r "splitting:" --include="*.ts" --include="*.js" packages/*/tsup.config.*Length of output: 472
Review consistency of production build optimizations
Both
packages/components/tsup.config.tsandpackages/design-system/tsup.config.tshaveminify: falseandsplitting: false. These settings affect bundle size and loading performance in production.• packages/components/tsup.config.ts
• packages/design-system/tsup.config.tsPlease confirm whether disabling minification and code‑splitting across all environments is intentional. If you need production optimizations, consider making these flags conditional, for example:
minify: process.env.NODE_ENV === 'production', splitting: process.env.NODE_ENV === 'production',
32-32:✅ Verification successful
Verify browser compatibility with ES2024 target
Setting the target to 'es2024' enables newer JavaScript features but might limit compatibility with older browsers. Ensure this aligns with your browser support requirements.
🌐 Web query:
What browsers support ES2024 features?💡 Result:
Browser Support for ES2024 Features
Multiple sources confirm that the main ES2024 (ECMAScript 2024/ES15) features are already supported in all modern, stable browsers:
- Google Chrome: 117 and above
- Mozilla Firefox: 119 and above
- Microsoft Edge: 117 and above
- Apple Safari: 17.4 and above[1]
These versions cover the latest releases as of late 2024 and early 2025, which means almost all users with up-to-date browsers can utilize ES2024 features without additional configuration.
Summary Table
Feature Chrome 117+ Firefox 119+ Edge 117+ Safari 17.4+ ES2024 (ECMAScript 15) ✔️ ✔️ ✔️ ✔️ Notable ES2024 Features with Browser Support
- Promise.withResolvers: Manage external resolution and rejection of Promises.
- Object.groupBy / Map.groupBy: Group collections by key properties.
- Atomics.waitAsync: Safe asynchronous thread communication.
- String.isWellFormed / String.toWellFormed: String validation and normalization tools.
These features are already available in browsers and Node.js, so you can use them today in production environments[8].
"The newest version of the spec, ECMAScript 2024, includes seven new JavaScript features... All of these features are supported for JavaScript in browsers and server-side environments, so you can start using them today."[8]
Additional Compatibility Notes
- Most users running Chrome, Firefox, Edge, or Safari from mid-2024 onwards will have full ES2024 support.
- For older browsers or non-mainstream browsers, polyfills or transpilers (such as Babel) can provide fallback support[7].
- Testing in the latest stable versions of each browser is recommended to ensure full compatibility[5][7].
Conclusion
ES2024 (ECMAScript 2024) features are now natively supported in Chrome 117+, Firefox 119+, Edge 117+, and Safari 17.4+. This coverage ensures broad compatibility for new JavaScript features across the vast majority of devices and platforms in use today[1][4][8].
Citations:
- 1: https://dev.to/techelopment/ecmascript-a-collection-of-the-main-new-features-of-each-version-8n5
- 2: https://gist.github.com/Julien-Marcou/156b19aea4704e1d2f48adafc6e2acbf
- 3: https://caniuse.com/?search=es20
- 4: https://dev.to/delia_code/exploring-the-newest-features-in-javascript-es2024-jie
- 5: https://www.actionrocket.co/blog/browser-support-in-2024
- 6: https://web.dev/blog/web-platform-09-2024
- 7: https://blog.pixelfreestudio.com/ultimate-guide-to-cross-browser-compatibility-in-2024/
- 8: https://www.infoworld.com/article/2336858/ecmascript-2024-features-you-can-use-now.html
ES2024 target is broadly supported by modern browsers
All major, up‑to‑date browsers now support ES2024 (ECMAScript 15) features natively:
- Chrome 117+
- Firefox 119+
- Edge 117+
- Safari 17.4+
If your minimum supported browsers meet these versions, targeting
es2024is safe. For environments that must run in older or non‑mainstream browsers, continue using a lower target or ship polyfills/transpiled fallbacks.packages/components/modules/content-feed/web/PostItem/index.tsx (1)
24-31: Well-structured component with clear hierarchyThe component structure is clean and follows a logical layout with header, images, content, and footer. The MUI Stack component is appropriately used for layout.
packages/components/modules/content-feed/web/PostCreate/types.ts (1)
7-9: Excellent use of TypeScript template literal typesThe
UploadableContentPostFilestype cleverly uses template literal types to ensure only valid image keys can be used. This pattern enforces type safety and prevents typos.packages/components/modules/content-feed/web/PostFooter/index.tsx (1)
20-25: Implement handlers for Reply and Share buttons.The Reply and Share buttons are currently visual-only with no handlers implemented. These buttons should trigger appropriate actions based on the PR objective of enhancing user experience in the content feed.
Consider implementing these handlers or disabling the buttons if the functionality is planned for a future PR.
packages/components/modules/content-feed/web/PostForm/index.tsx (1)
12-12: Check the RootContainer styling in the imported component.According to the relevant code snippets, the
RootContainerstyled component has a typo in its style property:dispalyinstead ofdisplay. This might affect the layout rendering.Please verify the styling in the
PostForm/styled.tsxfile and fix the typo if present.packages/components/modules/content-feed/web/PostImageDropzone/index.tsx (1)
56-57:❓ Verification inconclusive
Ensure file size restrictions match backend capabilities.
The component allows multiple images with a 15MB size limit per file, but there's no check for total upload size. This might lead to issues if the backend has restrictions on the total upload size.
🏁 Script executed:
#!/bin/bash # Check if there are any backend constraints on total upload size rg -i --type=ts "upload.*size|size.*upload|max.*size|size.*limit" --glob "**/*.{ts,tsx,js,jsx}" | grep -v "maxFileSize"Length of output: 3379
🏁 Script executed:
#!/bin/bash # Locate and display the contents around the Dropzone implementation in PostImageDropzone FILE=$(fd -t f -p "PostImageDropzone/index.tsx") echo "File: $FILE" sed -n '1,200p' "$FILE"Length of output: 2634
Verify total upload payload size against backend
I didn’t find any code-level constraint on the combined size of all images in a post upload (we only enforce
maxFileSize={15}MB per file). To avoid runtime errors if your server imposes a limit on the total request payload, please:
- Confirm what maximum aggregate upload size the content‑feed API will accept.
- If there is a cap, add client‑side validation in PostImageDropzone (e.g. sum
files[].size) to enforce that total before callingform.setValue.packages/components/modules/content-feed/web/PostReactionButton/index.tsx (2)
1-13: LGTM! Good use of React patterns and component structure.The imports are well-organized and the component correctly leverages the design system components.
14-35: Well-implemented reaction button with proper accessibility.The component is implemented well with:
- Effective use of the render prop pattern to access reaction functionality
- Conditional rendering of the appropriate icon based on reaction state
- Good accessibility with aria-labels for both the button and the count
- Clean grid layout for positioning elements
packages/components/modules/content-feed/web/PostCreate/index.tsx (2)
19-28: LGTM! Good form setup with Zod validation.The form setup uses React Hook Form with Zod validation appropriately, and the mode is set to validate onBlur for a good user experience.
30-59: Well-structured form submission handler with proper error handling.The submission logic correctly:
- Prepares uploadable files from the form data
- Commits the mutation with the right variables
- Handles both success and error responses
- Provides user feedback via toast notifications
- Resets the form and navigates to the new post on success
packages/components/modules/content-feed/web/PostList/index.tsx (1)
52-68: LGTM! Well-implemented virtualized list with optimizations.The Virtuoso configuration is well done with:
- Window scrolling for seamless UX
- Appropriate overscan for performance
- Clean component composition
- Efficient end-reached handling for pagination
packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts (2)
6-31: LGTM - Well-structured GraphQL fragment for content posts paginationThe
ContentPostsFragmentQueryis well designed, following Relay best practices with proper pagination support, sensible defaults, and modular fragment composition.
33-37: LGTM - Clean hook implementationThe
useContentPostshook provides a clean wrapper around Relay's pagination functionality with proper typing.packages/components/modules/content-feed/web/PostForm/types.ts (1)
3-18: LGTM - Well-structured form interfacesThe interfaces for content post creation and updates are well-defined with appropriate optional fields and type unions for image handling.
packages/components/modules/content-feed/web/index.ts (9)
6-7: Exports for PostImageDropzone look good
The newPostImageDropzonecomponent and its types are correctly re‑exported for downstream consumers.
9-10: Exports for PostCreate look good
ThePostCreatecomponent and its type definitions are properly surfaced in the module’s public API.
12-13: Exports for PostItem look good
AddingPostItemand its types aligns with the new feed‑item rendering logic.
15-16: Exports for PostHeader look good
PostHeaderand its types are correctly made available.
18-19: Exports for PostFooter look good
PostFooterand its type exports are correctly added.
21-22: Exports for PostItemImages look good
PostItemImagesand its types are appropriately re‑exported.
24-25: Exports for PostImageSlide look good
PostImageSlideand its type definitions are correctly included.
27-27: Missing type export forPostList?
All other components have matchingexport type * fromlines. IfPostList/typesexists, please add aexport type * from './PostList/types'to maintain consistency.
29-30: Exports for PostReactionButton look good
PostReactionButtonand its types are correctly re‑exported.packages/components/schema.graphql (12)
484-498: Review nestedimagesfield design onContentPost
You’ve addedimages(offset, before, after, first, last, id, post). In a nested context, the parent post’s ID is already in scope—requiring apostargument could be redundant. Please confirm that the resolver signature expects this argument and that clients will not need to manually pass the post ID when queryingContentPost.images.
484-487: Approve reaction interface implementation
The addition ofcreated,modified, andisReactionsEnabledfields aligns with theReactionsInterfaceextension.
511-515: Approve newContentPostCreateInput
IntroducingisReactionsEnabled: Boolean!in the create input ensures clients explicitly opt in to reactions.
525-529: ApproveContentPostDeleteInput
The delete mutation input is well‑formed.
530-536: ApproveContentPostDeletePayload
The delete payload correctly returnsdeletedIdand mutation metadata.
575-580: ApproveContentPostUpdateInput
IncludingisReactionsEnabledin the update input mirrors the create API, which is consistent.
582-588: ApproveContentPostUpdatePayload
The update payload properly returns the updatedcontentPostnode.
849-852: Approve mutation additions
contentPostUpdateandcontentPostDeletemutations are correctly wired into theMutationtype.
1534-1537: ApprovecontentPostquery
Single‑post fetch by ID is in place and matches the new type.
1539-1547: ApprovecontentPostsroot query
Batch post querying with pagination andorderByis consistent with the schema conventions.
1548-1553: Approve image queries
ThecontentPostImageandcontentPostImagesqueries allow clients to fetch images independently and with filters.
1304-1313: ApproveProfile.contentPostsfield
Exposing a paginatedcontentPostsconnection onProfileis consistent with other collections on the type.
packages/components/modules/content-feed/web/PostCreate/constants.ts
Outdated
Show resolved
Hide resolved
packages/components/modules/content-feed/web/PostForm/styled.tsx
Outdated
Show resolved
Hide resolved
packages/components/modules/content-feed/web/PostItemImages/index.tsx
Outdated
Show resolved
Hide resolved
davidbermudez-tsl
force-pushed
the
BA-2452-ba-content-feed-viewing-image-posts
branch
2 times, most recently
from
7b35c12 to
bd24ee6
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/components/modules/content-feed/web/PostForm/styled.tsx (1)
4-4: Fix the typo in the CSS propertyThere's a typo in the
displayproperty:dispalyshould be corrected todisplay.export const RootContainer = styled(Box)(() => ({ - dispaly: 'flex', + display: 'flex', width: '600px', alignSelf: 'center', flexDirection: 'column', }))
🧹 Nitpick comments (5)
packages/components/schema.graphql (5)
484-487: Ensure ReactionsInterface compliance
TheContentPosttype now implementsReactionsInterfaceand exposesreactionsCount,reactions, andmyReaction. Please verify that:
- The underlying resolvers supply these fields consistently.
reactionsCountis populated (consider making it non-nullable if it’s always returned).- Fragments and UI queries have been updated to fetch the new reaction fields.
Also applies to: 495-497
491-491: Simplify image connection arguments
Theimagesfield now accepts bothidandpostargs, yet it’s already scoped to a specificContentPost. Consider removing the redundantidargument or renamingposttopostIdfor clarity.
1274-1283: ExposecontentPostsonProfile
A newcontentPostsconnection with pagination andorderBywas added. Verify that:
- The resolver supports all pagination args and ordering logic.
- Client queries (e.g., the profile feed) use this field instead of legacy endpoints.
1506-1519: New root-levelcontentPostqueries
You introducedcontentPost(id: ID!): ContentPostandcontentPosts(...)at the root. Please:
- Wire these to the correct resolvers and security/access checks.
- Consider replacing the raw
orderBy: Stringwith a typed enum for better schema safety.
1763-1790: Introduce hierarchicalReportType
A newReportTypeobject withparentTypeandsubTypesreplaces the flat enum. Ensure:
- Recursive resolution is performant (add caching or depth limits).
- The
targetObjectIdfilter onsubTypesis documented and type-correct (should it beIDinstead ofString?).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (47)
packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/index.ts(1 hunks)packages/components/modules/content-feed/common/types.ts(1 hunks)packages/components/modules/content-feed/web/ContentFeed/index.tsx(2 hunks)packages/components/modules/content-feed/web/ContentFeed/types.ts(1 hunks)packages/components/modules/content-feed/web/ContentFeedImage/types.ts(0 hunks)packages/components/modules/content-feed/web/NewContentPost/index.tsx(0 hunks)packages/components/modules/content-feed/web/PostCreate/constants.ts(1 hunks)packages/components/modules/content-feed/web/PostCreate/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostCreate/types.ts(1 hunks)packages/components/modules/content-feed/web/PostFooter/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostFooter/types.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/constants.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostForm/styled.tsx(2 hunks)packages/components/modules/content-feed/web/PostForm/types.ts(1 hunks)packages/components/modules/content-feed/web/PostHeader/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostHeader/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageDropzone/index.tsx(3 hunks)packages/components/modules/content-feed/web/PostImageDropzone/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/types.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/types.ts(1 hunks)packages/components/modules/content-feed/web/PostItemImages/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/types.ts(1 hunks)packages/components/modules/content-feed/web/PostList/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostList/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/types.ts(1 hunks)packages/components/modules/content-feed/web/index.ts(1 hunks)packages/components/package.json(1 hunks)packages/components/schema.graphql(10 hunks)packages/components/tsup.config.ts(3 hunks)packages/design-system/components/web/icons/PillIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/ReplyIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/SharePostIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/index.ts(1 hunks)packages/design-system/tsup.config.ts(2 hunks)pnpm-workspace.yaml(1 hunks)
💤 Files with no reviewable changes (2)
- packages/components/modules/content-feed/web/ContentFeedImage/types.ts
- packages/components/modules/content-feed/web/NewContentPost/index.tsx
✅ Files skipped from review due to trivial changes (5)
- pnpm-workspace.yaml
- packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts
- packages/design-system/components/web/icons/index.ts
- packages/components/modules/content-feed/web/PostItemImages/index.tsx
- packages/components/modules/content-feed/web/PostList/styled.tsx
🚧 Files skipped from review as they are similar to previous changes (38)
- packages/components/package.json
- packages/components/modules/content-feed/web/PostCreate/constants.ts
- packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts
- packages/components/modules/content-feed/web/PostHeader/types.ts
- packages/components/modules/content-feed/common/index.ts
- packages/components/modules/content-feed/web/PostItemImages/styled.tsx
- packages/components/modules/content-feed/web/ContentFeed/index.tsx
- packages/components/modules/content-feed/web/PostImageSlide/styled.tsx
- packages/components/modules/content-feed/web/PostImageSlide/types.tsx
- packages/components/modules/content-feed/web/PostItemImages/types.ts
- packages/design-system/tsup.config.ts
- packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts
- packages/components/tsup.config.ts
- packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts
- packages/components/modules/content-feed/web/PostImageDropzone/index.tsx
- packages/design-system/components/web/icons/ReplyIcon/index.tsx
- packages/design-system/components/web/icons/SharePostIcon/index.tsx
- packages/components/modules/content-feed/web/PostReactionButton/types.ts
- packages/design-system/components/web/icons/PillIcon/index.tsx
- packages/components/modules/content-feed/common/types.ts
- packages/components/modules/content-feed/web/PostFooter/types.ts
- packages/components/modules/content-feed/web/PostItem/types.ts
- packages/components/modules/content-feed/web/PostList/index.tsx
- packages/components/modules/content-feed/web/PostImageDropzone/types.ts
- packages/components/modules/content-feed/web/PostItem/index.tsx
- packages/components/modules/content-feed/web/PostForm/constants.ts
- packages/components/modules/content-feed/web/PostImageSlide/index.tsx
- packages/components/modules/content-feed/web/ContentFeed/types.ts
- packages/components/modules/content-feed/web/PostForm/index.tsx
- packages/components/modules/content-feed/web/PostFooter/index.tsx
- packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts
- packages/components/modules/content-feed/web/PostHeader/index.tsx
- packages/components/modules/content-feed/web/PostCreate/types.ts
- packages/components/modules/content-feed/web/PostForm/types.ts
- packages/components/modules/content-feed/web/index.ts
- packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts
- packages/components/modules/content-feed/web/PostReactionButton/index.tsx
- packages/components/modules/content-feed/web/PostCreate/index.tsx
🔇 Additional comments (7)
packages/components/modules/content-feed/web/PostForm/styled.tsx (1)
26-29: Looks good! SlideImage component added for carousel functionality.The new
SlideImagecomponent properly supports the image carousel functionality required by the PR, with appropriate styling to ensure images display correctly and prevent unwanted text selection.packages/components/schema.graphql (6)
511-514: AddisReactionsEnabledtoContentPostCreateInput
Introducing a required Boolean flag at creation time is critical, but make sure:
- Your server-side mutation resolver defaults
isReactionsEnabledappropriately.- Client-side forms and validation schemas include this new field.
1223-1232: UpdateProfileto implementReportsInterface
Profilenow implementsReportsInterfaceand exposesreportsCount: GenericScalar(replacing the oldJSONString!). Please confirm that:
- Resolvers have been updated to return a numeric count.
- Any existing client code or tests referring to the old JSON string format have been adjusted.
1314-1316: AddreportsandmyReportstoProfile
These fields allow fetching all reports and the current user’s report on a profile. Ensure that:
- Permissions are enforced so
myReportsonly returns a node for the authenticated user.- Connection edges honor pagination arguments.
1714-1714: MigratereportTypeto object type
SwappingreportTypefrom an enum toReportTypeallows richer metadata, but breaks existing fragments. Update all client fragments and document this change.
1732-1732: UsereportTypeIdinReportCreateInput
Replacing the enum field withreportTypeId: ID!requires updating client-side mutation calls and payload validation.
1758-1758: AddreportsCounttoReportsInterface
The interface now exposes a generic scalar count. Confirm all implementing types return this field and consider standardizing onIntif you don’t need non-integer counts.
davidbermudez-tsl
force-pushed
the
BA-2452-ba-content-feed-viewing-image-posts
branch
from
bd24ee6 to
840291c
Compare
davidbermudez-tsl
force-pushed
the
BA-2452-ba-content-feed-viewing-image-posts
branch
from
840291c to
cf767df
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
packages/components/modules/content-feed/web/PostCreate/types.ts (1)
1-1: Intentionally empty interface for future extension
The emptyPostCreateFormPropsis reserved for props that thePostCreatecomponent will accept in upcoming PRs (similar toContentFeedProps). To prevent the linter from flagging this (noEmptyInterface), consider adding a brief comment or disabling the rule on this line:// Will be populated with props in subsequent PRs /* eslint-disable-next-line @typescript-eslint/no-empty-interface */ export interface PostCreateFormProps {}🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
packages/components/schema.graphql (2)
484-497: ContentPost type extension: Verifyimagesargument redundancy and naming
TheContentPosttype now implementsReactionsInterfaceand addsisReactionsEnabled,reactionsCount,reactions, andmyReactionfields, which align with the interface. However, theimagesfield signature includes apost: IDargument that may be redundant since it is already scoped to the parent post. Consider removing or renaming this argument (e.g., topostId) to avoid confusion.
1763-1771: IntroduceReportTypeobject type
The newReportTypetype defines a hierarchical reporting taxonomy. Ensure that thesubTypesfield resolver efficiently handles large hierarchies and consider adding depth or filter args if performance becomes an issue.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (48)
packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/index.ts(1 hunks)packages/components/modules/content-feed/common/types.ts(1 hunks)packages/components/modules/content-feed/web/ContentFeed/index.tsx(2 hunks)packages/components/modules/content-feed/web/ContentFeed/types.ts(1 hunks)packages/components/modules/content-feed/web/ContentFeedImage/types.ts(0 hunks)packages/components/modules/content-feed/web/NewContentPost/constants.ts(0 hunks)packages/components/modules/content-feed/web/NewContentPost/index.tsx(0 hunks)packages/components/modules/content-feed/web/NewContentPost/types.ts(0 hunks)packages/components/modules/content-feed/web/PostCreate/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostCreate/types.ts(1 hunks)packages/components/modules/content-feed/web/PostFooter/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostFooter/types.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/constants.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostForm/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostForm/types.ts(1 hunks)packages/components/modules/content-feed/web/PostHeader/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostHeader/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageDropzone/index.tsx(4 hunks)packages/components/modules/content-feed/web/PostImageDropzone/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/types.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/types.ts(1 hunks)packages/components/modules/content-feed/web/PostItemImages/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/types.ts(1 hunks)packages/components/modules/content-feed/web/PostList/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostList/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/types.ts(1 hunks)packages/components/modules/content-feed/web/index.ts(1 hunks)packages/components/package.json(1 hunks)packages/components/schema.graphql(11 hunks)packages/components/tsup.config.ts(3 hunks)packages/design-system/components/web/icons/PillIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/ReplyIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/SharePostIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/index.ts(1 hunks)packages/design-system/tsup.config.ts(2 hunks)pnpm-workspace.yaml(1 hunks)
💤 Files with no reviewable changes (4)
- packages/components/modules/content-feed/web/ContentFeedImage/types.ts
- packages/components/modules/content-feed/web/NewContentPost/types.ts
- packages/components/modules/content-feed/web/NewContentPost/constants.ts
- packages/components/modules/content-feed/web/NewContentPost/index.tsx
✅ Files skipped from review due to trivial changes (2)
- packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts
- packages/components/modules/content-feed/web/PostItemImages/index.tsx
🚧 Files skipped from review as they are similar to previous changes (40)
- packages/components/modules/content-feed/web/PostForm/styled.tsx
- pnpm-workspace.yaml
- packages/components/package.json
- packages/components/modules/content-feed/web/PostFooter/types.ts
- packages/components/modules/content-feed/web/ContentFeed/index.tsx
- packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts
- packages/components/modules/content-feed/web/PostItem/types.ts
- packages/components/modules/content-feed/web/PostImageSlide/styled.tsx
- packages/design-system/components/web/icons/index.ts
- packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts
- packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts
- packages/components/modules/content-feed/common/index.ts
- packages/components/modules/content-feed/common/types.ts
- packages/components/modules/content-feed/web/PostHeader/types.ts
- packages/components/modules/content-feed/web/PostItemImages/styled.tsx
- packages/components/modules/content-feed/web/PostItemImages/types.ts
- packages/components/modules/content-feed/web/PostImageDropzone/index.tsx
- packages/components/modules/content-feed/web/PostReactionButton/index.tsx
- packages/design-system/components/web/icons/SharePostIcon/index.tsx
- packages/components/modules/content-feed/web/PostImageDropzone/types.ts
- packages/components/modules/content-feed/web/PostForm/index.tsx
- packages/components/modules/content-feed/web/PostReactionButton/types.ts
- packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts
- packages/components/modules/content-feed/web/PostImageSlide/types.tsx
- packages/components/modules/content-feed/web/PostFooter/index.tsx
- packages/components/tsup.config.ts
- packages/components/modules/content-feed/web/PostHeader/index.tsx
- packages/components/modules/content-feed/web/PostImageSlide/index.tsx
- packages/design-system/tsup.config.ts
- packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts
- packages/components/modules/content-feed/web/PostItem/index.tsx
- packages/components/modules/content-feed/web/PostCreate/index.tsx
- packages/components/modules/content-feed/web/PostForm/constants.ts
- packages/design-system/components/web/icons/ReplyIcon/index.tsx
- packages/components/modules/content-feed/web/index.ts
- packages/components/modules/content-feed/web/PostList/styled.tsx
- packages/components/modules/content-feed/web/ContentFeed/types.ts
- packages/components/modules/content-feed/web/PostForm/types.ts
- packages/design-system/components/web/icons/PillIcon/index.tsx
- packages/components/modules/content-feed/web/PostList/index.tsx
🧰 Additional context used
🧠 Learnings (1)
packages/components/modules/content-feed/web/PostCreate/types.ts (1)
Learnt from: davidbermudez-tsl
PR: silverlogic/baseapp-frontend#209
File: packages/components/modules/content-feed/web/ContentFeed/types.ts:1-1
Timestamp: 2025-04-09T22:06:40.026Z
Learning: The empty ContentFeedProps interface in packages/components/modules/content-feed/web/ContentFeed/types.ts will be populated with properties in a future PR rather than being converted to a type alias.
🪛 Biome (1.9.4)
packages/components/modules/content-feed/web/PostCreate/types.ts
[error] 1-1: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Build and Lint Packages
- GitHub Check: Component Test Packages
🔇 Additional comments (10)
packages/components/schema.graphql (10)
534-536: ContentPostImage: Confirm migration ofimagefield toFile
Theimagefield inContentPostImagenow returns aFiletype with mandatorywidthandheightargs instead of a simpleString. Ensure resolvers return the correctFileobject, and that downstream components handle this change.
1223-1232: Profile type: NormalizereportsCountfield type
Profilenow implementsReportsInterfaceand exposesreportsCount: GenericScalar. Other count fields (e.g.,followersCount,commentsCount) useInt. Confirm whetherGenericScalaris necessary here or ifIntwould better enforce type safety.
1274-1283: Profile.contentPosts: New paginated post list
ThecontentPostsfield onProfilereturns aContentPostConnectionwith pagination and ordering parameters. This aligns with the rootcontentPostsquery. Ensure the resolver supports seamless integration with the carousel UI and respects theorderByparameter.
1314-1315: Profile reporting fields: VerifymyReportsreturn type
Profilenow includesreports: ReportConnectionandmyReports: Report. Confirm thatmyReportsis intended to return a singleReport(the current user's report) rather than a connection, and consider renaming it tomyReportif singular.
1506-1519: Query: AddcontentPostandcontentPostsendpoints
The rootQuerytype now exposescontentPost(id: ID!): ContentPostandcontentPosts(...): ContentPostConnection. Ensure these queries are wired to the correct resolvers and that pagination args match those onProfile.contentPosts.
1714-1714: Report type: SwitchreportTypeto object relation
TheReporttype now usesreportType: ReportTypeinstead of an enum. Confirm that migrations and resolvers populate this field correctly, and update client code to consume the object instead of enum values.
1732-1732: ReportCreateInput: UsereportTypeIdinstead of enum
The mutation input now requiresreportTypeId: ID!rather thanReportTypes. Ensure the mutation resolvers validate the ID and that client code passes the correct identifier.
1758-1758: ReportsInterface: AlignreportsCountwith Profile implementation
TheReportsInterfaceusesreportsCount: GenericScalar. Verify that all implementors (e.g.,Profile,ContentPost) adopt this change and handle any JSON decoding, or consider switching back toIntfor consistency.
1773-1781: Define RelayReportTypeConnection
Standard connection pattern forReportType. Confirm that pagination logic andpageInfosupport work correctly for subtype listings.
1783-1790: Define RelayReportTypeEdge
TheReportTypeEdgepairs eachReportTypenode with a cursor for pagination. This follows Relay conventions and looks correct.
davidbermudez-tsl
force-pushed
the
BA-2452-ba-content-feed-viewing-image-posts
branch
from
cf767df to
e9b37e9
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/components/schema.graphql (1)
511-515: 🛠️ Refactor suggestionEnsure backward compatibility for
isReactionsEnabled
The new requiredisReactionsEnabledfield inContentPostCreateInputcould break existing post-creation clients. Align with the established pattern (e.g.,ChatRoomCreateInput) by making this field optional with a default offalse.input ContentPostCreateInput { content: String! - isReactionsEnabled: Boolean! + isReactionsEnabled: Boolean = false clientMutationId: String }
🧹 Nitpick comments (3)
packages/components/modules/content-feed/web/PostCreate/types.ts (1)
1-1: Consider adding documentation or properties to the empty interfaceThe
PostCreateFormPropsinterface is currently empty, which the static analysis tool flags as equivalent to{}. While this follows the team's pattern (as seen withContentFeedPropsin other files), it would be helpful to either:
- Add JSDoc comments explaining the future purpose of this interface and that it will be populated later, or
- Add the properties needed for the
PostCreatecomponent if they're already knownIf keeping it empty is intentional (to be populated in a future PR), you might want to add a TODO comment.
+/** + * Props for the PostCreate form component. + * @todo Add properties in a future PR + */ export interface PostCreateFormProps {}🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
packages/components/schema.graphql (2)
484-491: Refineimagesfield arguments on ContentPost
Theimagesfield onContentPosttakes bothid(image ID) andpost(post ID) arguments, but because this resolver is nested under a specificContentPost, thepostargument is redundant. Consider removingpostand renamingidtoimageIdfor clarity.
1763-1771: ReviewtargetObjectIdargument type onReportType.subTypes
ThesubTypesfield usestargetObjectId: Stringto filter by target object, but GraphQL IDs are typically represented with theIDscalar. Consider updatingtargetObjectId: IDfor consistency and type safety.- subTypes(..., topLevelOnly: Boolean, targetObjectId: String): ReportTypeConnection! + subTypes(..., topLevelOnly: Boolean, targetObjectId: ID): ReportTypeConnection!
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (48)
packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/index.ts(1 hunks)packages/components/modules/content-feed/common/types.ts(1 hunks)packages/components/modules/content-feed/web/ContentFeed/index.tsx(2 hunks)packages/components/modules/content-feed/web/ContentFeed/types.ts(1 hunks)packages/components/modules/content-feed/web/ContentFeedImage/types.ts(0 hunks)packages/components/modules/content-feed/web/NewContentPost/constants.ts(0 hunks)packages/components/modules/content-feed/web/NewContentPost/index.tsx(0 hunks)packages/components/modules/content-feed/web/NewContentPost/styled.tsx(0 hunks)packages/components/modules/content-feed/web/NewContentPost/types.ts(0 hunks)packages/components/modules/content-feed/web/PostCreate/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostCreate/types.ts(1 hunks)packages/components/modules/content-feed/web/PostFooter/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostFooter/types.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/constants.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostForm/types.ts(1 hunks)packages/components/modules/content-feed/web/PostHeader/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostHeader/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageDropzone/index.tsx(4 hunks)packages/components/modules/content-feed/web/PostImageDropzone/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/types.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/types.ts(1 hunks)packages/components/modules/content-feed/web/PostItemImages/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/types.ts(1 hunks)packages/components/modules/content-feed/web/PostList/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostList/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/types.ts(1 hunks)packages/components/modules/content-feed/web/index.ts(1 hunks)packages/components/package.json(1 hunks)packages/components/schema.graphql(11 hunks)packages/components/tsup.config.ts(3 hunks)packages/design-system/components/web/icons/PillIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/ReplyIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/SharePostIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/index.ts(1 hunks)packages/design-system/tsup.config.ts(2 hunks)pnpm-workspace.yaml(1 hunks)
💤 Files with no reviewable changes (5)
- packages/components/modules/content-feed/web/NewContentPost/styled.tsx
- packages/components/modules/content-feed/web/ContentFeedImage/types.ts
- packages/components/modules/content-feed/web/NewContentPost/constants.ts
- packages/components/modules/content-feed/web/NewContentPost/index.tsx
- packages/components/modules/content-feed/web/NewContentPost/types.ts
✅ Files skipped from review due to trivial changes (1)
- packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts
🚧 Files skipped from review as they are similar to previous changes (40)
- pnpm-workspace.yaml
- packages/components/modules/content-feed/web/PostItemImages/types.ts
- packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts
- packages/components/modules/content-feed/web/PostHeader/types.ts
- packages/design-system/tsup.config.ts
- packages/components/modules/content-feed/web/PostImageSlide/types.tsx
- packages/components/modules/content-feed/web/PostList/styled.tsx
- packages/components/modules/content-feed/web/PostFooter/types.ts
- packages/components/modules/content-feed/web/PostReactionButton/types.ts
- packages/components/package.json
- packages/components/modules/content-feed/web/PostImageSlide/styled.tsx
- packages/components/modules/content-feed/common/index.ts
- packages/components/modules/content-feed/web/PostImageDropzone/types.ts
- packages/components/tsup.config.ts
- packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts
- packages/components/modules/content-feed/common/types.ts
- packages/components/modules/content-feed/web/PostFooter/index.tsx
- packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts
- packages/components/modules/content-feed/web/PostForm/index.tsx
- packages/design-system/components/web/icons/index.ts
- packages/components/modules/content-feed/web/PostItem/types.ts
- packages/components/modules/content-feed/web/PostCreate/index.tsx
- packages/components/modules/content-feed/web/PostImageSlide/index.tsx
- packages/components/modules/content-feed/web/PostItem/index.tsx
- packages/components/modules/content-feed/web/PostItemImages/styled.tsx
- packages/components/modules/content-feed/web/PostForm/constants.ts
- packages/components/modules/content-feed/web/ContentFeed/index.tsx
- packages/design-system/components/web/icons/ReplyIcon/index.tsx
- packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts
- packages/design-system/components/web/icons/SharePostIcon/index.tsx
- packages/components/modules/content-feed/web/PostImageDropzone/index.tsx
- packages/components/modules/content-feed/web/PostList/index.tsx
- packages/design-system/components/web/icons/PillIcon/index.tsx
- packages/components/modules/content-feed/web/ContentFeed/types.ts
- packages/components/modules/content-feed/web/PostReactionButton/index.tsx
- packages/components/modules/content-feed/web/index.ts
- packages/components/modules/content-feed/web/PostHeader/index.tsx
- packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts
- packages/components/modules/content-feed/web/PostForm/types.ts
- packages/components/modules/content-feed/web/PostItemImages/index.tsx
🧰 Additional context used
🧠 Learnings (1)
packages/components/modules/content-feed/web/PostCreate/types.ts (1)
Learnt from: davidbermudez-tsl
PR: silverlogic/baseapp-frontend#209
File: packages/components/modules/content-feed/web/ContentFeed/types.ts:1-1
Timestamp: 2025-04-09T22:06:40.026Z
Learning: The empty ContentFeedProps interface in packages/components/modules/content-feed/web/ContentFeed/types.ts will be populated with properties in a future PR rather than being converted to a type alias.
🪛 Biome (1.9.4)
packages/components/modules/content-feed/web/PostCreate/types.ts
[error] 1-1: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
🔇 Additional comments (12)
packages/components/schema.graphql (12)
495-497: Consistent implementation of ReactionsInterface
TheContentPosttype now correctly implements all fields fromReactionsInterface(reactionsCount,reactions, andmyReaction), matching the interface contract.
535-535: Verify client compatibility for changedimagefield
Theimagefield onContentPostImagenow returns aFileobject instead of a plainString, requiring clients to select the.urlproperty and supplywidth/heightarguments. Ensure all existing queries and front-end components have been updated accordingly to avoid breaking changes.
1232-1232: UpdatereportsCountto useGenericScalar
SwitchingreportsCountfromJSONString!toGenericScalaraligns with the newReportsInterfacedefinition and provides more flexible scalar typing.
1274-1283: AddcontentPostsconnection toProfile
Introducing thecontentPostsfield onProfileenables fetching a paginated list of posts per user, which complements the newContentPostqueries. The pagination arguments align with existing patterns.
1314-1315: Implement reporting fields onProfile
Adding thereportsconnection andmyReportsfield alignsProfilewithReportsInterface, enabling both paginated access and the current user's report object.
1506-1509: IntroducecontentPostquery for fetching a single post
Adding thecontentPost(id: ID!)root field provides direct access to a specificContentPostby its ID. The nullable return type is consistent with other singular query patterns.
1510-1519: AddcontentPostsroot query for paginated posts
ThecontentPostsfield provides a paginated connection ofContentPostitems, supporting both cursor and offset-based pagination, along with optional ordering. This aligns with existing query patterns.
1713-1713: Verify migration from enum to object forreportType
reportTypewas changed from theReportTypesenum to theReportTypeobject, which could be a breaking change for existing clients. Ensure that theReportTypesenum has been removed and all queries/mutations have been updated to use the newReportTypetype.
1732-1732: Ensure clients update to usereportTypeId
TheReportCreateInputno longer accepts areportTypeenum value but requiresreportTypeId: ID!. Confirm that all client mutation definitions and generated TypeScript types have been updated accordingly.
1758-1758: UpdateReportsInterface.reportsCounttoGenericScalar
ChangingreportsCountfromJSONString!toGenericScalaraligns the interface with the schema-wideGenericScalarusage and simplifies serialization.
1773-1781: AddReportTypeConnectionto support pagination
TheReportTypeConnectiontype follows the Relay pagination pattern consistently with other connection types, providingpageInfo,edges, and counts.
1783-1790: AddReportTypeEdgefor Relay pagination
TheReportTypeEdgeproperly defines thenodeandcursor, completing the Relay connection contract forReportType.
davidbermudez-tsl
force-pushed
the
BA-2452-ba-content-feed-viewing-image-posts
branch
from
e9b37e9 to
d60eaf3
Compare
|
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
packages/components/schema.graphql (1)
1708-1717:⚠️ Potential issueBreaking change:
reportTypeswitched from enum to object type.Converting
Report.reportTypefrom anenumto aReportTypeobject will break clients expecting a string. To ease migration, consider adding a deprecated helper:type Report implements Node { - reportType: ReportType + reportType: ReportType + reportTypeKey: String! @deprecated(reason: "Use `reportType.key` instead.")
♻️ Duplicate comments (1)
packages/components/schema.graphql (1)
511-515:⚠️ Potential issueBackward compatibility break:
isReactionsEnabledis now required.Making
isReactionsEnablednon-nullable inContentPostCreateInputwill break existing clients omitting this field. To preserve backward compatibility, consider providing a default:-input ContentPostCreateInput { - content: String! - isReactionsEnabled: Boolean! - clientMutationId: String -} +input ContentPostCreateInput { + content: String! + isReactionsEnabled: Boolean = false + clientMutationId: String +}
🧹 Nitpick comments (4)
packages/components/modules/content-feed/web/PostCreate/types.ts (1)
1-1: Consider your approach for empty interfaces.The static analysis tool suggests using a type alias since this interface is currently empty. However, based on retrieved feedback, if you're planning to add properties to this interface in future PRs (similar to
ContentFeedProps), keeping it as an interface is appropriate.If you intend to populate this interface later:
// This is fine as is for future extension export interface PostCreateFormProps {}If not, consider following the static analysis recommendation:
export type PostCreateFormProps = {};🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
packages/components/schema.graphql (3)
484-497: Ensure GraphQL resolvers align with updatedContentPostfields.The
ContentPosttype now explicitly includes theReactionsInterfacefields (isReactionsEnabled,reactionsCount,reactions,myReaction) and introduces animagesconnection with a newpostargument. Please verify that:
- The resolver for
imagescorrectly handles filtering bypost.- All UI components and GraphQL fragments request
imageswith proper pagination arguments.- Argument naming is consistent—consider renaming
posttopostIdto match other ID conventions in the schema.
1274-1283: Implement and document the newcontentPostsconnection onProfile.You’ve added
contentPostsreturningContentPostConnection. Please ensure:
- Resolver pagination (
first,last,before,after,orderBy) is in place.- Schema or code comments describe valid
orderByvalues.- Client code consuming
profile.contentPostsis updated to handle the connection.
1763-1790: Add descriptions and refine pagination onReportTypedefinitions.The new
ReportType,ReportTypeConnection, andReportTypeEdgetypes need:
- Field descriptions for
key,label, andparentType.- Documentation for
subTypesarguments (topLevelOnly,targetObjectId).- A resolver for
subTypesthat filters bytargetObjectId.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (53)
packages/components/CHANGELOG.md(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/index.ts(1 hunks)packages/components/modules/content-feed/common/types.ts(1 hunks)packages/components/modules/content-feed/web/ContentFeed/index.tsx(2 hunks)packages/components/modules/content-feed/web/ContentFeed/types.ts(1 hunks)packages/components/modules/content-feed/web/ContentFeedImage/types.ts(0 hunks)packages/components/modules/content-feed/web/NewContentPost/constants.ts(0 hunks)packages/components/modules/content-feed/web/NewContentPost/index.tsx(0 hunks)packages/components/modules/content-feed/web/NewContentPost/styled.tsx(0 hunks)packages/components/modules/content-feed/web/NewContentPost/types.ts(0 hunks)packages/components/modules/content-feed/web/PostCreate/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostCreate/types.ts(1 hunks)packages/components/modules/content-feed/web/PostFooter/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostFooter/types.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/constants.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostForm/types.ts(1 hunks)packages/components/modules/content-feed/web/PostHeader/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostHeader/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageDropzone/index.tsx(4 hunks)packages/components/modules/content-feed/web/PostImageDropzone/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/types.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/types.ts(1 hunks)packages/components/modules/content-feed/web/PostItemImages/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/types.ts(1 hunks)packages/components/modules/content-feed/web/PostList/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostList/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/types.ts(1 hunks)packages/components/modules/content-feed/web/index.ts(1 hunks)packages/components/package.json(2 hunks)packages/components/schema.graphql(11 hunks)packages/components/tsup.config.ts(3 hunks)packages/design-system/CHANGELOG.md(1 hunks)packages/design-system/components/web/icons/PillIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/ReplyIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/SharePostIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/index.ts(1 hunks)packages/design-system/package.json(1 hunks)packages/design-system/tsup.config.ts(2 hunks)packages/wagtail/CHANGELOG.md(1 hunks)packages/wagtail/package.json(1 hunks)pnpm-workspace.yaml(1 hunks)
💤 Files with no reviewable changes (5)
- packages/components/modules/content-feed/web/ContentFeedImage/types.ts
- packages/components/modules/content-feed/web/NewContentPost/constants.ts
- packages/components/modules/content-feed/web/NewContentPost/styled.tsx
- packages/components/modules/content-feed/web/NewContentPost/index.tsx
- packages/components/modules/content-feed/web/NewContentPost/types.ts
✅ Files skipped from review due to trivial changes (7)
- packages/wagtail/package.json
- packages/components/CHANGELOG.md
- packages/design-system/package.json
- packages/design-system/CHANGELOG.md
- packages/wagtail/CHANGELOG.md
- packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts
- packages/components/modules/content-feed/web/PostItemImages/index.tsx
🚧 Files skipped from review as they are similar to previous changes (39)
- packages/components/modules/content-feed/web/PostHeader/types.ts
- pnpm-workspace.yaml
- packages/components/modules/content-feed/web/PostItemImages/types.ts
- packages/components/modules/content-feed/web/PostImageSlide/types.tsx
- packages/components/modules/content-feed/web/PostItem/types.ts
- packages/components/modules/content-feed/common/index.ts
- packages/components/modules/content-feed/web/PostImageSlide/styled.tsx
- packages/components/modules/content-feed/web/PostImageDropzone/types.ts
- packages/components/modules/content-feed/web/PostFooter/types.ts
- packages/components/modules/content-feed/web/PostReactionButton/types.ts
- packages/components/modules/content-feed/web/PostItemImages/styled.tsx
- packages/components/package.json
- packages/design-system/components/web/icons/PillIcon/index.tsx
- packages/design-system/components/web/icons/ReplyIcon/index.tsx
- packages/components/modules/content-feed/web/PostList/styled.tsx
- packages/design-system/components/web/icons/index.ts
- packages/components/modules/content-feed/web/ContentFeed/index.tsx
- packages/design-system/tsup.config.ts
- packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts
- packages/components/modules/content-feed/web/PostCreate/index.tsx
- packages/components/tsup.config.ts
- packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts
- packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts
- packages/components/modules/content-feed/web/PostImageDropzone/index.tsx
- packages/components/modules/content-feed/web/PostList/index.tsx
- packages/design-system/components/web/icons/SharePostIcon/index.tsx
- packages/components/modules/content-feed/web/PostImageSlide/index.tsx
- packages/components/modules/content-feed/web/ContentFeed/types.ts
- packages/components/modules/content-feed/web/PostForm/index.tsx
- packages/components/modules/content-feed/web/PostReactionButton/index.tsx
- packages/components/modules/content-feed/web/PostForm/types.ts
- packages/components/modules/content-feed/web/PostFooter/index.tsx
- packages/components/modules/content-feed/common/types.ts
- packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts
- packages/components/modules/content-feed/web/PostItem/index.tsx
- packages/components/modules/content-feed/web/PostHeader/index.tsx
- packages/components/modules/content-feed/web/index.ts
- packages/components/modules/content-feed/web/PostForm/constants.ts
- packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts
🧰 Additional context used
🧠 Learnings (1)
packages/components/modules/content-feed/web/PostCreate/types.ts (1)
Learnt from: davidbermudez-tsl
PR: silverlogic/baseapp-frontend#209
File: packages/components/modules/content-feed/web/ContentFeed/types.ts:1-1
Timestamp: 2025-04-09T22:06:40.026Z
Learning: The empty ContentFeedProps interface in packages/components/modules/content-feed/web/ContentFeed/types.ts will be populated with properties in a future PR rather than being converted to a type alias.
🪛 Biome (1.9.4)
packages/components/modules/content-feed/web/PostCreate/types.ts
[error] 1-1: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Component Test Packages
- GitHub Check: Build and Lint Packages
🔇 Additional comments (4)
packages/components/schema.graphql (4)
1232-1232: Validate type change forreportsCountonProfile.The
reportsCountfield onProfilewas updated toGenericScalar. Confirm that backend resolvers return a compatible scalar (e.g.,Intencoded as JSON) and regenerate client-side type definitions accordingly.
1506-1519: Add resolvers for newcontentPostandcontentPostsqueries.The root
Querynow includes:contentPost(id: ID!): ContentPost contentPosts(...): ContentPostConnectionVerify that:
- Corresponding resolver implementations exist and enforce authorization.
- Pagination and ordering parameters are respected.
- Automated tests cover both singular and list queries.
1755-1761: EnsureReportsInterfacechanges align with the new model.The interface now uses a
GenericScalarforreportsCountand addsmyReports. Verify that:
- All types implementing
ReportsInterfacesupply the updated fields.- Client-side schemas/TypeScript types are regenerated to match.
535-537:❓ Verification inconclusive
Verify usage of required dimensions in
ContentPostImage.image.The
imagefield now requireswidthandheightarguments. Ensure that:
- All GraphQL fragments (e.g.,
ContentPostImageFragment) specify these arguments.- Client components call
image(width:…, height:…).- Server resolvers correctly surface image variants at the requested dimensions.
Use this script to find fragment definitions missing dimensions:
🏁 Script executed:
#!/bin/bash set -e rg -n "ContentPostImageFragment" -A3 --glob "*ContentPostImage*"Length of output: 733
🏁 Script executed:
#!/bin/bash set -e # Show the full ContentPostImageFragment definition (20 lines after the fragment declaration) rg -n "fragment ContentPostImageFragment" -A20 packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.tsLength of output: 420
ContentPostImageFragment already defines required dimensions
The fragment in
packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts
includes:
@argumentDefinitions(width: { type: "Int", defaultValue: 600 }, height: { type: "Int", defaultValue: 0 })image(width: $width, height: $height) { url }No missing dimensions in that fragment.
Please also verify manually:
- All client‐side GraphQL queries that spread
...ContentPostImageFragmentsupply@arguments(width:…, height:…).- Any other fragments or inline
image(...)calls include bothwidthandheight.- Server resolvers for
ContentPostImage.imagecorrectly handle the newwidthandheightarguments and return the expected variants.
davidbermudez-tsl
force-pushed
the
BA-2452-ba-content-feed-viewing-image-posts
branch
from
d60eaf3 to
176e41d
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (52)
packages/components/CHANGELOG.md(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts(1 hunks)packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts(1 hunks)packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts(1 hunks)packages/components/modules/content-feed/common/index.ts(1 hunks)packages/components/modules/content-feed/common/types.ts(1 hunks)packages/components/modules/content-feed/web/ContentFeed/index.tsx(2 hunks)packages/components/modules/content-feed/web/ContentFeed/types.ts(1 hunks)packages/components/modules/content-feed/web/ContentFeedImage/types.ts(0 hunks)packages/components/modules/content-feed/web/NewContentPost/constants.ts(0 hunks)packages/components/modules/content-feed/web/NewContentPost/index.tsx(0 hunks)packages/components/modules/content-feed/web/NewContentPost/styled.tsx(0 hunks)packages/components/modules/content-feed/web/NewContentPost/types.ts(0 hunks)packages/components/modules/content-feed/web/PostCreate/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostCreate/types.ts(1 hunks)packages/components/modules/content-feed/web/PostFooter/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostFooter/types.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/constants.ts(1 hunks)packages/components/modules/content-feed/web/PostForm/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostForm/types.ts(1 hunks)packages/components/modules/content-feed/web/PostHeader/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostHeader/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageDropzone/index.tsx(4 hunks)packages/components/modules/content-feed/web/PostImageDropzone/types.ts(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostImageSlide/types.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItem/types.ts(1 hunks)packages/components/modules/content-feed/web/PostItemImages/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostItemImages/types.ts(1 hunks)packages/components/modules/content-feed/web/PostList/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostList/styled.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/index.tsx(1 hunks)packages/components/modules/content-feed/web/PostReactionButton/types.ts(1 hunks)packages/components/modules/content-feed/web/index.ts(1 hunks)packages/components/package.json(1 hunks)packages/components/schema.graphql(0 hunks)packages/components/tsup.config.ts(3 hunks)packages/design-system/CHANGELOG.md(1 hunks)packages/design-system/components/web/icons/PillIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/ReplyIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/SharePostIcon/index.tsx(1 hunks)packages/design-system/components/web/icons/index.ts(1 hunks)packages/design-system/tsup.config.ts(2 hunks)packages/wagtail/CHANGELOG.md(1 hunks)packages/wagtail/package.json(1 hunks)pnpm-workspace.yaml(1 hunks)
💤 Files with no reviewable changes (6)
- packages/components/schema.graphql
- packages/components/modules/content-feed/web/ContentFeedImage/types.ts
- packages/components/modules/content-feed/web/NewContentPost/styled.tsx
- packages/components/modules/content-feed/web/NewContentPost/types.ts
- packages/components/modules/content-feed/web/NewContentPost/constants.ts
- packages/components/modules/content-feed/web/NewContentPost/index.tsx
✅ Files skipped from review due to trivial changes (2)
- packages/design-system/components/web/icons/PillIcon/index.tsx
- packages/components/modules/content-feed/common/graphql/queries/ContentPostDetail.ts
🚧 Files skipped from review as they are similar to previous changes (43)
- packages/components/package.json
- packages/components/CHANGELOG.md
- packages/design-system/CHANGELOG.md
- packages/wagtail/package.json
- packages/design-system/tsup.config.ts
- packages/components/modules/content-feed/web/PostImageSlide/types.tsx
- packages/wagtail/CHANGELOG.md
- packages/components/modules/content-feed/web/PostImageSlide/styled.tsx
- packages/design-system/components/web/icons/index.ts
- packages/components/modules/content-feed/web/PostFooter/types.ts
- packages/components/modules/content-feed/web/PostHeader/types.ts
- pnpm-workspace.yaml
- packages/components/modules/content-feed/web/PostList/styled.tsx
- packages/components/modules/content-feed/web/PostItem/types.ts
- packages/components/modules/content-feed/common/index.ts
- packages/components/modules/content-feed/web/PostReactionButton/types.ts
- packages/components/modules/content-feed/web/PostItemImages/styled.tsx
- packages/components/modules/content-feed/web/ContentFeed/index.tsx
- packages/components/modules/content-feed/common/graphql/queries/ContentPosts.ts
- packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts
- packages/components/modules/content-feed/web/PostImageDropzone/types.ts
- packages/components/tsup.config.ts
- packages/components/modules/content-feed/web/ContentFeed/types.ts
- packages/components/modules/content-feed/web/PostImageDropzone/index.tsx
- packages/components/modules/content-feed/web/PostFooter/index.tsx
- packages/components/modules/content-feed/common/graphql/fragments/ContentPostImage.ts
- packages/design-system/components/web/icons/SharePostIcon/index.tsx
- packages/components/modules/content-feed/common/graphql/fragments/ContentPost.ts
- packages/design-system/components/web/icons/ReplyIcon/index.tsx
- packages/components/modules/content-feed/web/PostImageSlide/index.tsx
- packages/components/modules/content-feed/web/PostForm/index.tsx
- packages/components/modules/content-feed/web/PostCreate/index.tsx
- packages/components/modules/content-feed/web/PostItemImages/types.ts
- packages/components/modules/content-feed/web/PostItemImages/index.tsx
- packages/components/modules/content-feed/web/PostItem/index.tsx
- packages/components/modules/content-feed/common/types.ts
- packages/components/modules/content-feed/web/PostList/index.tsx
- packages/components/modules/content-feed/web/PostHeader/index.tsx
- packages/components/modules/content-feed/web/PostReactionButton/index.tsx
- packages/components/modules/content-feed/common/graphql/fragments/ContentPosts.ts
- packages/components/modules/content-feed/web/PostForm/constants.ts
- packages/components/modules/content-feed/web/PostForm/types.ts
- packages/components/modules/content-feed/web/index.ts
🧰 Additional context used
🧠 Learnings (1)
packages/components/modules/content-feed/web/PostCreate/types.ts (1)
Learnt from: davidbermudez-tsl
PR: silverlogic/baseapp-frontend#209
File: packages/components/modules/content-feed/web/ContentFeed/types.ts:1-1
Timestamp: 2025-04-09T22:06:40.026Z
Learning: The empty ContentFeedProps interface in packages/components/modules/content-feed/web/ContentFeed/types.ts will be populated with properties in a future PR rather than being converted to a type alias.
🪛 Biome (1.9.4)
packages/components/modules/content-feed/web/PostCreate/types.ts
[error] 1-1: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
anicioalexandre
left a comment
anicioalexandre
left a comment
There was a problem hiding this comment.
need a final rebase with master, we bumped up some versions
davidbermudez-tsl
force-pushed
the
BA-2452-ba-content-feed-viewing-image-posts
branch
from
176e41d to
baf0018
Compare
davidbermudez-tsl
force-pushed
the
BA-2452-ba-content-feed-viewing-image-posts
branch
from
baf0018 to
9d1790c
Compare
|
As a user, on the Baseapp Content Feed,I would like to View the images in a post that has images attached to it, In order to see images and any additional text shared by users..
Acceptance Criteria
Context
In this story we will implement the basic behaviors of a post that has an image in it. From being able to view images to scrolling the carrousel.
Business Rules
Given I am on the content feed page and a user has created a post with images, when I scroll through the content feed, then I should see the post with images displayed.
I should see the text content associated with the post as well.
Given I am viewing a post with multiple images in the content feed when I view the post then the images should be displayed in a carousel format.*
When I view the image carousel in the post, then the images should be displayed with the following behavior.
I should see a "Previous" arrow button on the left side of the carousel
I should see a "Next" arrow button on the right side of the carousel
Clicking the "Next" arrow should display the next image in the order
Clicking the "Previous" arrow should display the previous image in the order
The carousel should loop back to the first image after the last one is displayed
I should be able to navigate through all images in the post using these arrow buttons.
The image should be able to open in another tab, by right clicking and selecting "open in another tab".
Design Link: https://www.figma.com/design/XRD6wSl1m8Kz6XUcAy5CLp/BaseApp---WEB?node-id=2429-44307&node-type=frame&t=5TN6cVoKe9HL2Mvf-0
Approvd
https://app.approvd.io/projects/BA/stories/35375
Summary by CodeRabbit