Feat/delete draft projec #4793
Feat/delete draft projec #4793
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe pull request introduces several changes across multiple files, primarily focusing on enhancing type safety in TypeScript, adding a new GraphQL mutation for deleting draft projects, and restructuring imports for better organization. It also integrates the Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 11
🧹 Outside diff range and nitpick comments (13)
src/components/views/userProfile/projectsTab/constants.ts (1)
6-9: LGTM: Well-structured constant with good use of enums. Consider adding a type annotation.The
projectsOrderconstant is well-defined and uses the imported enums correctly. Ordering projects by creation date in descending order is a logical default.For improved readability and type safety, consider adding a type annotation to the
projectsOrderconstant. Here's a suggested improvement:-export const projectsOrder = { +export const projectsOrder: { by: EOrderBy; direction: EDirection } = { by: EOrderBy.CreationDate, direction: EDirection.DESC, };src/components/views/userProfile/projectsTab/type.ts (3)
11-16: LGTM:EOrderByenum is well-defined.The
EOrderByenum provides a clear set of options for ordering criteria, which is useful for maintaining type safety when implementing sorting functionality. The naming convention is consistent, and the members cover common sorting criteria for project-related data.Consider adding a brief comment above the enum to describe its purpose and usage context. For example:
/** * Enum representing the available ordering criteria for projects. * Used in sorting and filtering operations. */ export enum EOrderBy { // ... (existing members) }
18-21: LGTM:IOrderinterface is well-structured.The
IOrderinterface effectively combines theEOrderByenum with the importedEDirectionenum, providing a flexible and type-safe way to specify ordering criteria. The naming conventions follow TypeScript best practices.Consider adding a brief comment above the interface to describe its purpose and usage context. For example:
/** * Interface representing the structure for specifying order criteria. * Used for sorting operations in project listings. */ export interface IOrder { // ... (existing properties) }
1-21: Overall, the changes enhance type safety and project management capabilities.The additions of
EOrderByenum andIOrderinterface provide a structured and type-safe way to handle project ordering, which aligns well with the PR objective of implementing features related to project management. These changes will likely improve code maintainability and reduce potential runtime errors related to ordering operations.As the project grows, consider creating a separate file for shared enums and interfaces if they are used across multiple components. This can help in maintaining a clean and modular code structure.
package.json (1)
81-81: Approve the addition of React Query devtools and suggest updating the main library.The addition of
@tanstack/react-query-devtoolsas a dev dependency is appropriate and will enhance the development experience. The version^5.58.0is compatible with the current@tanstack/react-queryversion.Consider updating the main
@tanstack/react-querylibrary to match the devtools version:- "@tanstack/react-query": "^5.45.1", + "@tanstack/react-query": "^5.58.0",This will ensure you have the latest features and bug fixes in both the main library and the devtools.
src/components/views/userProfile/projectsTab/ProjectItem.tsx (4)
29-29: Approved: NewrefetchProjectsproperty added toIProjectIteminterfaceThe addition of the
refetchProjectsproperty is a good improvement, allowing the component to trigger a refresh of the projects list. This is particularly useful for maintaining data consistency after operations like deleting a project.Consider using a more specific type for
refetchProjectsif possible:refetchProjects: () => Promise<void>;This assumes the refetch operation is asynchronous, which is typical for data fetching operations. If it's not asynchronous, the current type is fine.
Line range hint
47-62: Approved: Improved structure with newHeaderandTitlecomponentsThe introduction of the
Headercomponent and the replacement ofH2withTitleimprove the structure and potentially the styling of the project item. These changes should lead to better maintainability and consistency across the application.To ensure proper accessibility, consider adding an
aria-labelto theLinkcomponent:<Link href={`/project/${project.slug}`} aria-label={`View project: ${project.title}`}> <Title>{project.title}</Title> </Link>This will provide more context for screen reader users.
159-162: Approved: NewHeaderstyled component addedThe addition of the
Headerstyled component withmax-width: 100%andoverflow: hiddenis a good approach to handle potentially long content within the project header. This ensures that the layout remains consistent across different project items.Consider making the
max-widthproperty configurable:const Header = styled.div<{ $maxWidth?: string }>` max-width: ${props => props.$maxWidth || '100%'}; overflow: hidden; `;This allows for more flexibility if you need to adjust the max-width in different contexts.
164-166: Approved with suggestion: NewTitlestyled component addedThe new
Titlestyled component effectively handles long project titles by usingtext-overflow: ellipsisandoverflow: hidden. This ensures a consistent layout while indicating to users that there's more text if the title is too long to display fully.To improve accessibility and user experience, consider adding a title attribute to show the full text on hover:
const Title = styled(H2)` text-overflow: ellipsis; overflow: hidden; white-space: nowrap; // Add this to ensure text doesn't wrap `; // In the JSX: <Title title={project.title}>{project.title}</Title>This allows users to see the full title by hovering over it, which is especially useful for screen readers and when titles are truncated.
src/apollo/gql/gqlProjects.ts (1)
807-812: LGTM! Consider specifying the return type for clarity.The new
DELETE_DRAFT_PROJECTmutation aligns well with the PR objective of implementing a feature to delete draft projects. The mutation signature is consistent with other mutations in the file.For improved clarity and consistency, consider explicitly specifying the return type of the mutation. You can modify the mutation as follows:
export const DELETE_DRAFT_PROJECT = gql` mutation ($projectId: Float!) { - deleteDraftProject(projectId: $projectId) + deleteDraftProject(projectId: $projectId): Boolean! } `;This change makes it clear that the mutation returns a boolean value, indicating the success or failure of the operation.
src/components/views/userProfile/projectsTab/DeleteProjectModal.tsx (1)
46-48: Remove unnecessary 'async' keyword from 'handleRemoveProject'The
handleRemoveProjectfunction is declared asasyncbut does not contain anyawaitexpressions. Removing theasynckeyword can simplify the code.Apply this diff to remove the unnecessary
asynckeyword:- const handleRemoveProject = async () => { + const handleRemoveProject = () => { deleteProject(Number(project.id)); };src/components/views/userProfile/projectsTab/ProfileProjectsTab.tsx (1)
51-51: Consider handling errors fromuseQueryThe component currently handles loading and empty states but does not account for potential errors during data fetching. It would improve user experience to check for
isErrorfromuseQueryand display an appropriate error message when an error occurs.Suggestion:
Add a check for
isErrorand render an error message:{isError && <ErrorMessage />}Also applies to: 84-84
src/apollo/apolloClient.ts (1)
223-223: Consider More Specific Types forarrayMergeFunctionUsing
any[]fordestinationArrayandsourceArrayinarrayMergeprovides flexibility but may reduce type safety. Consider defining more specific types if possible.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (13)
- package.json (1 hunks)
- src/apollo/apolloClient.ts (9 hunks)
- src/apollo/gql/gqlProjects.ts (1 hunks)
- src/components/views/project/projectDonations/ProjectRecurringDonationTable.tsx (1 hunks)
- src/components/views/userProfile/UserProfile.view.tsx (0 hunks)
- src/components/views/userProfile/donationsTab/oneTimeTab/OneTimeDonationsTable.tsx (1 hunks)
- src/components/views/userProfile/donationsTab/oneTimeTab/OneTimeTab.tsx (1 hunks)
- src/components/views/userProfile/projectsTab/DeleteProjectModal.tsx (3 hunks)
- src/components/views/userProfile/projectsTab/ProfileProjectsTab.tsx (3 hunks)
- src/components/views/userProfile/projectsTab/ProjectItem.tsx (5 hunks)
- src/components/views/userProfile/projectsTab/constants.ts (1 hunks)
- src/components/views/userProfile/projectsTab/services.ts (1 hunks)
- src/components/views/userProfile/projectsTab/type.ts (1 hunks)
💤 Files not reviewed due to no reviewable changes (1)
- src/components/views/userProfile/UserProfile.view.tsx
🔇 Additional comments (28)
src/components/views/userProfile/projectsTab/constants.ts (2)
1-2: LGTM: Imports are well-organized and follow good practices.The imports are appropriately chosen for the constants defined in this file. The use of path alias ('@/') and local type imports ('./type') demonstrates good organization and maintainability.
4-4: LGTM: Clear constant definition. Verify the pagination value.The
userProjectsPerPageconstant is well-named and exported correctly. The value of 12 seems reasonable for pagination.Please verify that 12 projects per page aligns with the UI design and performance requirements. You can run the following script to check if this value is used consistently across the project:
src/components/views/userProfile/projectsTab/type.ts (1)
1-1: LGTM: Import statement is appropriate.The import of
EDirectionis correctly used in theIOrderinterface, maintaining type safety and consistency.src/components/views/userProfile/projectsTab/services.ts (2)
1-5: LGTM: Imports are appropriate and consistent.The imports are relevant to the function's purpose and follow a consistent style. They include necessary dependencies such as the Apollo client, types, GraphQL query, and constants.
7-11: LGTM: Function signature is well-defined and typed.The
fetchUserProjectsfunction signature is clear, concise, and properly typed. It correctly usesasyncand includes appropriate parameters for fetching user projects with pagination and ordering capabilities.src/components/views/userProfile/projectsTab/ProjectItem.tsx (2)
146-146: Approved:refetchProjectsprop added toDeleteProjectModalThe addition of the
refetchProjectsprop to theDeleteProjectModalcomponent is a good improvement. It allows the modal to trigger a refresh of the projects list after a project is deleted, ensuring that the UI stays in sync with the backend data.
156-157: Approved with query: Addedoverflow: hiddentoProjectContainerThe addition of
overflow: hiddento theProjectContainerstyled component can help maintain a consistent layout by preventing content from spilling outside the container.Could you please clarify the specific reason for adding this property? It's important to ensure that it doesn't unintentionally hide any important content. If there was a particular layout issue this is addressing, it would be helpful to document it in a comment.
src/components/views/userProfile/donationsTab/oneTimeTab/OneTimeDonationsTable.tsx (1)
26-26: LGTM! Verify import consistency across the project.The update to the import statement for
EOrderByandIOrderis a good change, potentially centralizing these types for better maintainability. This change doesn't affect the component's functionality as the type names remain the same.To ensure this change is consistent across the project, please run the following script:
This script will help identify any inconsistencies in the usage of these types across the project.
src/components/views/project/projectDonations/ProjectRecurringDonationTable.tsx (2)
Line range hint
228-228: Verify the usage ofEOrderBy.TokenAmountThere seems to be an inconsistency in the usage of
EOrderBy. The component usesEOrderBy.TokenAmount, but the local enumRecurringDonationSortFielddefinesflowRateinstead ofTokenAmount. This might lead to a type error or unexpected behavior.Please verify that
EOrderBy.TokenAmountis the correct enum value to use here. If not, consider updating it to match theRecurringDonationSortFieldenum. Run the following script to check the definition ofEOrderBy:#!/bin/bash # Description: Check the definition of EOrderBy # Test: Display the contents of the file containing EOrderBy cat src/components/views/userProfile/projectsTab/type.ts # Test: Search for TokenAmount in EOrderBy ast-grep --lang typescript --pattern 'enum EOrderBy { $$$TokenAmount$$$ }' src/components/views/userProfile/projectsTab/type.tsIf
TokenAmountis not found inEOrderBy, consider updating theSortIconusage to:<SortIcon order={order} title={RecurringDonationSortField.flowRate} />
34-34: LGTM! Verify the new import path.The import path for
EOrderByhas been updated, which appears to be part of a project structure refactoring. This change doesn't affect the component's functionality as the usage ofEOrderByremains the same.To ensure the new import path is correct, please run the following script:
This script will verify that
EOrderByis exported from the new file and that there are no remaining imports from the old path.src/components/views/userProfile/projectsTab/DeleteProjectModal.tsx (1)
39-41: Verify the necessity of refetching user data after project deletionAfter deleting the project, the code refetches the user's projects and dispatches
fetchUserByAddress. Please verify if both actions are required or if refetching the projects suffices to update the user interface.Run the following script to check where
fetchUserByAddressimpacts the UI:This will help determine if re-dispatching
fetchUserByAddressis essential after deleting a project.✅ Verification successful
Refetching user data after project deletion is necessary
After reviewing the codebase, dispatching
fetchUserByAddressis required to ensure that all user-related data is up-to-date. Therefore, bothrefetchProjects()anddispatch(fetchUserByAddress(walletAddress))are necessary to maintain the user interface's consistency.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Find components that rely on the user's data fetched by 'fetchUserByAddress'. # Test: Search for components using 'fetchUserByAddress'. Expect: Identify if re-dispatching is necessary. rg --type tsx "fetchUserByAddress"Length of output: 62
Script:
#!/bin/bash # Description: Find components that rely on the user's data fetched by 'fetchUserByAddress' within .tsx files. # Find all .tsx files and search for 'fetchUserByAddress' fd --extension tsx --type file | xargs rg "fetchUserByAddress"Length of output: 1229
src/components/views/userProfile/projectsTab/ProfileProjectsTab.tsx (7)
2-2: Approved addition ofuseStateimportThe import of
useStatefrom 'react' is appropriate for managing thepagestate within the component.
5-5: Integration ofuseQueryfrom '@tanstack/react-query'Adopting
useQueryfrom '@tanstack/react-query' enhances data fetching and state management, aligning with best practices.
15-16: Added necessary imports for data fetching functions and constantsThe imports of
fetchUserProjects,projectsOrder, anduserProjectsPerPageare correctly introduced and used appropriately in the component.
67-73: Approved rendering of project items for the user's accountRendering
ProjectItemcomponents for the user's own projects is appropriate and correctly implemented.
77-77: Approved rendering of project cards for other usersMapping over
data?.projectsto renderProjectCardcomponents displays other users' projects effectively.
88-88: Approved usage oftotalCountinPaginationcomponentPassing
data?.totalCount || 0to thePaginationcomponent ensures it functions correctly even ifdatais undefined.
90-90: Approved usage ofuserProjectsPerPageconstantUsing
userProjectsPerPageforitemPerPageimproves consistency and maintainability across the application.src/apollo/apolloClient.ts (10)
2-7: Improved Type Safety with Explicit ImportsGood job on explicitly importing
ApolloClient,InMemoryCache,ApolloLink, andNormalizedCacheObjectfrom@apollo/client. This enhances type safety and code clarity.
22-22: Explicitly TypingapolloClientEnhances ClarityDefining
apolloClientasApolloClient<NormalizedCacheObject> | undefinedimproves type safety and makes the code more self-documenting.
29-29: Refined Parameter Type forparseHeadersFunctionUpdating the
rawHeadersparameter type fromanytostringin theparseHeadersfunction enhances type safety and reduces the risk of runtime errors.
34-34: Explicit Typing oflineinforEachLoopSpecifying
lineasstringin theforEachloop improves type checking and ensures that string methods are safely applied.
36-36: Safe Handling ofundefinedwith Optional ChainingUsing optional chaining on
parts.shift()safely handles potentialundefinedvalues before calling.trim(), preventing possible runtime errors.
59-63: Resolved TypeScript Error by CastingxhrCasting
xhrtoXMLHttpRequestwhen accessingresponseTextfixes the TypeScript error, ensuring proper type usage and access to theresponseTextproperty.
97-98: Explicit Return Type forcreateApolloClientFunctionDefining the return type as
ApolloClient<NormalizedCacheObject>for thecreateApolloClientfunction enhances type safety and clarity.
208-211: Improved Type Annotations ininitializeApolloFunctionSpecifying the
initialStateparameter type asanyand the return type asApolloClient<NormalizedCacheObject>improves type clarity and prevents potential type-related issues.
242-246: Explicit Typing of Parameters inaddApolloStateFunctionSpecifying the
clientparameter asApolloClient<NormalizedCacheObject>enhances type safety and makes the function's contract clearer.
261-262: Explicitly Typed ExportedclientInstanceDefining the exported
clientwith the explicit typeApolloClient<NormalizedCacheObject>improves the module's interface and ensures consistent usage across the codebase.
src/components/views/userProfile/projectsTab/DeleteProjectModal.tsx
Outdated
Show resolved
Hide resolved
src/components/views/userProfile/projectsTab/DeleteProjectModal.tsx
Outdated
Show resolved
Hide resolved
src/components/views/userProfile/projectsTab/DeleteProjectModal.tsx
Outdated
Show resolved
Hide resolved
src/components/views/userProfile/projectsTab/ProfileProjectsTab.tsx
Outdated
Show resolved
Hide resolved
Summary by CodeRabbit
Release Notes
New Features
DELETE_DRAFT_PROJECTfor deleting draft projects.refetchProjectsprop to theDeleteProjectModalfor refreshing project lists after deletion.fetchUserProjectsto retrieve user projects with pagination and ordering.Improvements
ProfileProjectsTabto utilizereact-queryfor improved data fetching.Bug Fixes
EOrderByandIOrderto streamline component dependencies.Chores
@tanstack/react-query-devtoolsfor improved development experience.