WIP: Improve back option

[kkatusic]

• Allow users to return to the same position while going back & forth on the project details / all projects list #3417

Summary by CodeRabbit

• New Features

  • Introduced a unique ID property for the CardBody component to enhance accessibility and styling.
  • Implemented an infinite scrolling feature in the ProjectsIndex for dynamic loading of project data.
  • Added support for connecting with the Safe wallet, enhancing wallet connectivity options.

• Improvements

  • Enhanced pagination handling and loading state management through the use of React Query's useInfiniteQuery hook.
  • Improved responsiveness of the ProjectGIVbackToast component for better layout on larger screens.

• Bug Fixes

  • Streamlined UI updates during data fetching by leveraging built-in flags for better user experience.
  • Adjusted tab activation logic in the DonationCard component for Endaoment projects to improve user experience.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
giveth-dapps-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 16, 2024 3:08pm

[coderabbitai]

Walkthrough

The updates to the project management components enhance data fetching and user experience through the implementation of React Query. Notably, the ProjectsIndex component now utilizes useInfiniteQuery for improved pagination and loading efficiency, while the ProjectCard component gains unique IDs for better accessibility. These changes simplify state management, enhance type safety, and streamline the overall control flow of the application.

Changes

Files	Change Summary
package.json	Updated versions of @web3modal/wagmi from ^5.0.7 to ^5.1.7 and wagmi from ^2.11.3 to ^2.12.10.
src/components/project-card/ProjectCard.tsx	Added an id property to CardBody, dynamically generated from the slug variable for better DOM identification.
src/components/views/projects/ProjectsIndex.tsx	Transitioned to useInfiniteQuery for fetching projects, introduced Page interface, and updated pagination handling with better state management and loading indicators.
src/components/views/donate/DonationCard.tsx	Introduced isEndaomentProject boolean to modify tab activation logic based on project type.
src/components/views/project/ProjectGIVbackToast.tsx	Adjusted ButtonWrapper width to 100% for responsiveness and updated media query breakpoint for layout changes.
src/wagmiConfigs.ts	Added a new wallet connector, safe, to enhance wallet connection options with specific allowed domains.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ProjectsIndex
    participant API

    User->>ProjectsIndex: Scroll to bottom
    ProjectsIndex->>API: fetchProjects(pageParam)
    API-->>ProjectsIndex: Return new project data
    ProjectsIndex->>User: Display new projects

Loading

🐇 In the meadow, hopping with glee,
New IDs and queries, oh what a spree!
Projects flow in, a stream so divine,
With each little card, how they brightly shine!
So let’s cheer for the code, both nifty and bright,
A leap into progress, oh what a delight! 🌼✨

Possibly related PRs

• Upgrades web3modal #4401: This PR updates the version of @web3modal/wagmi in package.json, which is directly related to the version updates made in the main PR for the same dependency.
• Hotfix - fix stellar doante card UI #4734: This PR also updates the versions of @web3modal/wagmi and wagmi in package.json, matching the changes made in the main PR.

---

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?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  -- I pushed a fix in commit <commit_id>, please review it.
  -- Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  -- @coderabbitai generate unit testing code for this file.
  -- @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  -- @coderabbitai generate interesting stats about this repository and render them as a table.
  -- @coderabbitai read src/utils.ts and generate unit testing code.
  -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  -- @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 2

[kkatusic]

@MohammadPCh just don't forget this :)

[alireza-sharifpour]

Thanks @kkatusic!
I checked it but I noticed something.

I filtered the QF projects but the number of total

projects didn't change, can you take a look?

[coderabbitai]

Actionable comments posted: 0

Outside diff range and nitpick comments (1)

src/components/views/donate/DonationCard.tsx (1)

97-103: Approve commenting out the code for now, but track the feature refinement separately.

Commenting out the useEffect logic that sets the default tab based on project type is a good temporary measure while the feature is being polished. It prevents unintended behavior for Endaoment projects.

However, to ensure this feature is reintroduced properly, consider creating a separate issue or task to track its refinement and re-enablement. This will help maintain visibility on the intended behavior without cluttering the current code.

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 89ba8a4 and a341c98.

Files ignored due to path filters (2)

• public/images/banners/qf-round/giv-palooza.svg is excluded by !**/*.svg
• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

Files selected for processing (5)

• package.json (2 hunks)
• src/components/project-card/ProjectCard.tsx (1 hunks)
• src/components/views/donate/DonationCard.tsx (2 hunks)
• src/components/views/project/ProjectGIVbackToast.tsx (2 hunks)
• src/wagmiConfigs.ts (2 hunks)

Files skipped from review due to trivial changes (2)

• package.json
• src/components/project-card/ProjectCard.tsx

Additional comments not posted (4)

src/wagmiConfigs.ts (1)

31-33: LGTM!

The addition of the safe connector with the allowedDomains property is a great enhancement to the wallet connectivity options. It improves user experience and security by allowing users to connect through the Safe wallet, while restricting connections to the Safe application hosted at app.safe.global.

src/components/views/donate/DonationCard.tsx (1)

56-56: LGTM!

The isEndaomentProject variable is a clear and concise way to determine if the project is an Endaoment project based on the organization label. The naming is intuitive and the logic is straightforward.

src/components/views/project/ProjectGIVbackToast.tsx (2)

330-330: LGTM!

Changing the width from a fixed value to 100% is a good practice for improving responsiveness. This allows the button wrapper to adapt to the width of its parent container, enhancing the layout across different screen sizes.

---

357-357: Verify the layout on larger screens.

Updating the media query breakpoint from tablet to laptopL is a design decision that aims to improve the user interface on larger devices. This change implies that the flex-direction will change from column to row at a larger screen size compared to the previous breakpoint.

Please ensure that the new breakpoint aligns with the intended design and provides an optimal user experience across different screen sizes. Verify the layout on larger screens to confirm that the change achieves the desired outcome.

[kkatusic]

Thanks @kkatusic! I checked it but I noticed something.

I filtered the QF projects but the number of total projects didn't change, can you take a look?

Found some time again to check this, when you @alireza-sharifpour found time please can you review it again? thx

[coderabbitai]

Actionable comments posted: 0

Outside diff range and nitpick comments (1)

src/components/views/projects/ProjectsIndex.tsx (1)

150-172: Remove console logs before merging.

The code segment looks good overall, but there are a couple of console logs that should be removed before merging to production:

console.log('lastPage', lastPage);
console.log('someData', someData);

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between a341c98 and e2b9ae3.

Files selected for processing (1)

• src/components/views/projects/ProjectsIndex.tsx (10 hunks)

Additional comments not posted (5)

src/components/views/projects/ProjectsIndex.tsx (5)

Line range hint 1-12:

---

Line range hint 25-46:

---

58-65: LGTM!

The Page interface is a good addition to provide a structured type for the data returned by the fetchProjects function. It improves type safety and code readability.

---

68-81: LGTM!

The code segment properly initializes the necessary state variables and hooks for the component. The use of useQueryClient and the initialization of totalPages and totalCount based on the _totalCount prop are appropriate.

---

99-138: LGTM!

The fetchProjects function is well-structured and handles the data fetching logic effectively. It constructs the necessary variables for the GraphQL query, updates the relevant state variables with the fetched data, and returns an object that follows the Page interface. The use of useCallback for memoization is a good optimization.