refactor(WIP): follow / unfollow and comments handling #330
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Updated `LoaderContainer` to extend `BoxProps` for improved type safety. - Added a new `LoaderContainerProps` interface with a `show` prop. - Modified `styled(Box)` to use the `LoaderContainerProps` interface for stricter prop validation.
- Add `followers` slice in `src/redux/followers/index.ts` to manage followers and followings state. - Update `src/redux/reducer.ts` to include the new `followersReducer`. - Refactor `ProfileFollowers` and `ProfileFollowing` components to use Redux state instead of direct API calls. - Enhance `UserProfileView` to dispatch and fetch followers and followings data into the Redux store. - Update `follow-unfollow-button.tsx` to dynamically update Redux state upon follow/unfollow actions.
- **src/redux/comments/index.ts**: - Added `comments` and `pendingComments` to the state. - Introduced reducers: `addComment`, `addPendingComment`, and `updateCommentStatus`. - Added respective actions to `commentsSlice`. - **src/sections/publication/publication-details-comment-form.tsx**: - Implemented logic to handle pending comments. - Dispatch `addPendingComment` upon submission. - Updated comment status to "confirmed" after successful posting. - **src/sections/publication/publication-comments-list.tsx**: - Introduced `pendingComments` integration into the comment list. - Pending comments are displayed at the top of the list.
This was
linked to
issues
Dec 17, 2024
There was a problem hiding this comment.
Copilot reviewed 5 out of 10 changed files in this pull request and generated 2 comments.
Files not reviewed (5)
- src/redux/reducer.ts: Evaluated as low risk
- src/components/login-modal/LoaderDuringCreationProfile.tsx: Evaluated as low risk
- src/components/follow-unfollow-button.tsx: Evaluated as low risk
- src/sections/user/profile-followers.tsx: Evaluated as low risk
- src/sections/publication/publication-details-comment-form.tsx: Evaluated as low risk
src/redux/comments/index.ts
Outdated
| updateCommentStatus: (state, action: PayloadAction<{ publicationId: string; commentId: string; status: string }>) => { | ||
| const { publicationId, commentId, status } = action.payload; | ||
| const comment = state.comments[publicationId]?.find(comment => comment.id === commentId); | ||
| state.comments[publicationId] = state.comments[publicationId].filter(comment => comment.id !== commentId); |
There was a problem hiding this comment.
The updateCommentStatus reducer removes the comment from the state.comments array but does not update its status. Ensure the comment's status is updated correctly.
Suggested change
| state.comments[publicationId] = state.comments[publicationId].filter(comment => comment.id !== commentId); | |
| if (comment) comment.status = status; |
Copilot is powered by AI, so mistakes are possible. Review output carefully before use.
| @@ -37,7 +38,13 @@ export default function PostCommentList({ publicationId: id, showReplies }: Prop | |||
|
|
|||
| if (error) return <p>Error loading comments: {error.message}</p>; | |||
|
|
|||
| const commentsFiltered = (comments ?? []) | |||
| // Join the comments with the pending comments but append the pending comments at the beginning of the list | |||
| const commentsWithPending = pendingComments[id] ? [...pendingComments[id], ...(comments ?? [])] : comments; | |||
There was a problem hiding this comment.
The commentsWithPending variable should default to an empty array if comments are null or undefined to avoid potential runtime errors.
Suggested change
| const commentsWithPending = pendingComments[id] ? [...pendingComments[id], ...(comments ?? [])] : comments; | |
| const commentsWithPending = pendingComments[id] ? [...pendingComments[id], ...(comments ?? [])] : (comments ?? []); |
Copilot is powered by AI, so mistakes are possible. Review output carefully before use.
- Updated `useProfileFollowers` and `useProfileFollowing` to use optional chaining (`profile?.id`) to prevent potential errors when `profile` is undefined. - Ensured better runtime stability by addressing edge cases with null or undefined `profile`.
- `src/sections/publication/NeonPaperContainer.tsx`: Removed mouse event handlers and reduced `--border-gap` for better UI consistency. - `src/sections/publication/publication-details-comment-form.tsx`: Simplified the shape of the `pendingComment` object, removing unnecessary fields. - `src/components/publication-detail-main.tsx`: Updated `zIndex` values to resolve UI layering issues. - `src/sections/publication/publication-comment-item.tsx`: Dynamically switched between `NeonPaperContainer` and `Paper` for pending comments and added visual feedback for pending comment states.
…mments - Updated `IconHeart` color to use `rgba(255,255,255,0.5)` when `isPendingComment` is true. - Ensures better visual distinction for pending comments in the UI.
- Removed the unused `updateCommentStatus` import in `src/sections/publication/publication-details-comment-form.tsx`. - Code cleanup ensures better readability and avoids unnecessary dependency inclusion.
- Removed the unused import, `LoaderDuringCreationProfile`, from `src/layouts/dashboard/layout.tsx`. - Cleaned up the JSX by deleting the unnecessary `<LoaderDuringCreationProfile />` component rendering. - Simplified the dashboard layout for better readability and reduced overhead.
- Added `currentStep` to the auth slice state in `src/redux/auth/index.ts`. - Updated `toggleModalCreationProfile` to reset `currentStep` when the modal is closed. - Updated `setProfileCreationStep` to track the current step dynamically in `currentStep`. - Introduced `resetCurrentStep` action to explicitly reset the `currentStep` to 0.
- Updated `NeonPaperContainer` to accept a `padding` prop for dynamic padding customization. - Modified the default padding in `NeonPaper` to `0.7rem` and allowed it to be overridden. - Adjusted the internal styles to use the new `padding` prop in place of hardcoded values.
- Added `getButtonLabel` function in `profile-form-view.tsx` for dynamic button labeling based on mode and step. - Replaced `LoadingButton` with custom button wrapped in `NeonPaper` or `Box` based on current step. - Integrated `useSelector` to access `currentStep` from Redux store to control UI behavior. - Removed unused `LoadingButton` import.
- Updated `src/sections/publication/publication-new-wizard.tsx` to use `useSelector` for session retrieval. - Modified `src/sections/user/profile-header.tsx`, replacing `useSession` with `useSelector`. - Refactored session fetching in `src/components/poster/variants/poster-top-titles.tsx` using `useSelector`. - Updated `src/hooks/*` files to consistently utilize `useSelector` instead of `useSession`. - Standardized session handling across all relevant components and sections to remove redundancy.
- Removed `useSession` import from Lens protocol in `modal.tsx` since it wasn't used in the file. - Added `onClick` handler to `BackdropProps` to handle potential user interactions with the modal backdrop.
- Add `closeLoginModal` dispatch call to profile creation success. - Ensure login modal closes on profile creation errors for consistent UX. - Add debug `console.log` statements to provide clearer runtime feedback. These changes improve user experience and aid debugging during development.
- Added an additional filter to exclude profiles missing `displayName` or `bio` properties in `view.tsx`. - Updated `CarouselCreators` to use the newly filtered profiles (`filteredProfiles`). - Included a debug log for `filteredCompletedProfiles` for better traceability.
- Introduced `LensClient` from `@lens-protocol/client` to manage profiles. - Added a new `handleHideUnhideProfile` function to hide a user's profile using `LensClient`. - Implemented an effect to fetch and log managed profiles on session change. - Updated the Profile Header UI to include a button for hiding/unhiding the profile.
…to app/refactor/follow-comments
- **NeonPaperContainer.tsx**: - Added `borderRadius` prop to NeonPaperContainer, enabling customizable border radius with a default fallback value. - **account-popover.tsx**: - Integrated NeonPaper with a dynamic rainbow gradient effect around the user avatar when `metadataIsPending` is true. - Enhanced layout styling by aligning elements vertically in the Box component.
…to app/refactor/follow-comments
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces several changes to the Redux state management and components related to handling followers, followings, and comments. The key changes include the addition of new Redux slices for followers and followings, updates to the comments slice, and modifications to various components to utilize the new state management.
Redux State Management Enhancements:
src/redux/followers/index.ts: Introduced a new Redux slice for managing followers and followings, including actions for setting, adding, and removing followings.src/redux/comments/index.ts: Expanded the comments slice to includecommentsandpendingCommentsstates, and added actions for adding comments, pending comments, and updating comment status. [1] [2] [3]src/redux/reducer.ts: Integrated the new followers reducer into the root reducer.Component Updates:
src/components/follow-unfollow-button.tsx: Updated the component to dispatch actions for adding and removing followings upon follow/unfollow actions. [1] [2]src/components/login-modal/LoaderDuringCreationProfile.tsx: Extended theLoaderContainerstyled component to accept ashowprop and added theLoaderContainerPropsinterface. [1] [2] [3]src/sections/publication/publication-comments-list.tsx: Modified to include pending comments in the comments list. [1] [2]src/sections/publication/publication-details-comment-form.tsx: Updated to dispatch actions for adding pending comments and updating comment status. [1] [2] [3] [4]src/sections/user/profile-followers.tsx: Refactored to use the followers state from Redux instead of fetching data directly. [1] [2]src/sections/user/profile-following.tsx: Refactored to use the followings state from Redux instead of fetching data directly.src/sections/user/view/user-profile-view.tsx: Added dispatching of followers and followings to the Redux store and updated the component to use the stored state. [1] [2] [3] [4] [5]