Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: display user saved lists #1343

Merged
merged 59 commits into from
Aug 7, 2024
Merged

Conversation

kuck1
Copy link
Contributor

@kuck1 kuck1 commented Jul 22, 2024

Pull Request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no API changes)
  • Build-related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this introduce a breaking change?

  • Yes
  • No

Other information

Summary by CodeRabbit

  • New Features

    • Introduced components for managing and displaying saved lists of organizations and services.
    • Added localization support with new strings for improved user interactions and notifications.
    • Enhanced UI with responsive layouts and loading states for a better user experience.
    • Added a customizable confirmation modal for delete actions to improve user interaction.
  • Bug Fixes

    • Improved data synchronization to ensure the UI reflects the latest state of saved items, including timestamps for last updates.
  • Style

    • Introduced a new button variant for enhanced UI design flexibility and improved hover effects.

Copy link

vercel bot commented Jul 22, 2024

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

Name Status Preview Comments Updated (UTC)
inreach-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 7, 2024 6:27pm

Copy link
Contributor

coderabbitai bot commented Jul 22, 2024

Warning

Rate limit exceeded

@JoeKarow has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 0 minutes and 47 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

Commits

Files that changed from the base of the PR and between 9a742fd and 31e2e6c.

Walkthrough

This update significantly enhances a web application by improving the management of saved lists for organizations and services. It introduces new UI components for displaying saved items, adds localization support for better user feedback, expands routing capabilities, and refines the backend to return more detailed information in API responses. Collectively, these changes enhance user experience and interface responsiveness.

Changes

Files Change Summary
apps/app/public/locales/en/common.json Added multiple localization entries to improve UI messages related to resources and user interactions.
apps/app/src/pages/account/saved/[listId].tsx, apps/app/src/pages/account/saved/index.tsx Introduced SavedLists component for managing and displaying user’s saved lists, including data fetching and state management.
packages/api/router/savedLists/query.getById.handler.ts Enhanced getById function to include more comprehensive data retrieval with improved structure and error handling.
packages/ui/components/core/ActionButtons/Delete.tsx Introduced a customizable Delete button with confirmation modal for deletion actions.
packages/ui/components/core/Saved/SavedOrgResultCard.tsx, packages/ui/components/core/Saved/SavedServiceResultCard.tsx Added new components for displaying saved organizations and services with loading states and responsive design.
packages/ui/theme/variants/Button.ts, packages/ui/theme/variants/index.ts Introduced a new button variant, primaryLgRed, for enhanced styling options.

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
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>.
    • 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 show all the console.log statements in this repository.
    • @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 as 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.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

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.

@github-actions github-actions bot added 📦 app 📦 api automerge Enable Kodiak auto-merge kodiak: merge.method = 'squash' Kodiak will squash merge this PR. labels Jul 22, 2024
Copy link

relativeci bot commented Jul 22, 2024

#1170 Bundle Size — 3.54MiB (+0.99%).

31e2e6c(current) vs c62a26a dev#1167(baseline)

Warning

Bundle contains 5 duplicate packages – View duplicate packages

Bundle metrics  Change 7 changes Regression 2 regressions
                 Current
#1170
     Baseline
#1167
Regression  Initial JS 3.1MiB(+1.11%) 3.07MiB
No change  Initial CSS 9.54KiB 9.54KiB
Change  Cache Invalidation 49.02% 48.11%
Change  Chunks 67(+4.69%) 64
Change  Assets 80(+3.9%) 77
Change  Modules 2084(+1.31%) 2057
Regression  Duplicate Modules 362(+6.47%) 340
Change  Duplicate Code 9.91%(+5.2%) 9.42%
No change  Packages 209 209
No change  Duplicate Packages 5 5
Bundle size by type  Change 2 changes Regression 1 regression Improvement 1 improvement
                 Current
#1170
     Baseline
#1167
Regression  JS 3.42MiB (+1.04%) 3.39MiB
No change  Fonts 94.54KiB 94.54KiB
No change  CSS 9.54KiB 9.54KiB
Improvement  Other 8.69KiB (-4.35%) 9.09KiB
No change  IMG 8.57KiB 8.57KiB

Bundle analysis reportBranch IN-951-display-user-saved-listsProject dashboard


Generated by RelativeCIDocumentationReport issue

Copy link
Contributor

github-actions bot commented Jul 22, 2024

📦 Next.js Bundle Analysis for @weareinreach/app

This analysis was generated by the Next.js Bundle Analysis action. 🤖

New Page Added

The following page was added to the bundle from the code in this PR:

Page Size (compressed) First Load % of Budget (575 KB)
/account/saved/[listId] 274.42 KB 679.24 KB 118.13%

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load % of Budget (575 KB)
/account/saved 272.46 KB 677.29 KB 117.79% (🔴 +47.04%)
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

Copy link

alwaysmeticulous bot commented Jul 22, 2024

🤖 No test run has been triggered as your Meticulous project has been deactivated (since you haven't viewed any test results in a while). Click here to reactivate.

Last updated for commit 31e2e6c. This comment will update as new commits are pushed.

Signed-off-by: InReach [bot] <108850934+InReach-svc@users.noreply.github.com>
@JoeKarow JoeKarow changed the title Adding saved list UI main organization saved page feat: display user saved lists Jul 24, 2024
@kuck1 kuck1 marked this pull request as ready for review August 6, 2024 20:09
@kuck1 kuck1 removed the in-progress Issue is currently being worked on by a developer. label Aug 6, 2024
@kuck1
Copy link
Contributor Author

kuck1 commented Aug 6, 2024

Hey @JoeKarow I think we're getting pretty close with this one

@kuck1
Copy link
Contributor Author

kuck1 commented Aug 6, 2024

@coderabbitai summary

Copy link
Contributor

coderabbitai bot commented Aug 6, 2024

Actions performed

Summary regeneration triggered.

Copy link
Contributor

coderabbitai bot commented Aug 6, 2024

Walkthrough

The recent updates enhance the user interface and functionality of the application by introducing new localization strings, React components for managing saved lists, and improved data retrieval methods. The changes ensure a better user experience with clearer notifications and more dynamic interactions, alongside robust session management and API enhancements.

Changes

File Path Change Summary
apps/app/public/locales/en/common.json Added new localization entries for user notifications and actions.
apps/app/src/pages/account/saved/[listId].tsx, apps/app/src/pages/account/saved/index.tsx Introduced SavedLists component for managing saved organizations and services, with data fetching and user interactions.
apps/app/src/types/nextjs-routes.d.ts Added dynamic route declaration for saved lists with listId parameter.
packages/api/router/savedLists/query.getAll.handler.ts, packages/api/router/savedLists/query.getById.handler.ts Enhanced data retrieval by adding updatedAt field and refining input schema for list queries.
packages/ui/components/core/ActionButtons/Save.tsx Improved cache invalidation logic after saving or deleting items.
packages/ui/components/core/Saved/SavedOrgResultCard.tsx, packages/ui/components/core/Saved/SavedServiceResultCard.tsx Created components for displaying saved organizations and services with loading states and responsive design.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SavedLists
    participant API
    participant Cache

    User->>SavedLists: Fetch saved lists
    SavedLists->>API: Retrieve saved lists
    API-->>SavedLists: Return saved lists
    SavedLists->>User: Display saved lists

    User->>SavedLists: Save or delete item
    SavedLists->>API: Perform save/delete operation
    API-->>SavedLists: Confirm operation
    SavedLists->>Cache: Invalidate saved list cache
    Cache-->>SavedLists: Refresh cache
    SavedLists->>User: Update displayed lists
Loading

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
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>.
    • 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 show all the console.log statements in this repository.
    • @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 as 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.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 2f94c16 and 00ecb5f.

Files selected for processing (2)
  • apps/app/src/pages/account/saved/[listId].tsx (1 hunks)
  • packages/ui/components/core/Saved/SavedOrgResultCard.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • apps/app/src/pages/account/saved/[listId].tsx
  • packages/ui/components/core/Saved/SavedOrgResultCard.tsx

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 00ecb5f and 9a742fd.

Files selected for processing (10)
  • apps/app/public/locales/en/common.json (7 hunks)
  • apps/app/src/pages/account/saved/[listId].tsx (1 hunks)
  • packages/api/router/savedLists/query.getById.handler.ts (1 hunks)
  • packages/ui/components/core/ActionButtons/Delete.tsx (1 hunks)
  • packages/ui/components/core/ActionButtons/Print.tsx (1 hunks)
  • packages/ui/components/core/ActionButtons/index.tsx (2 hunks)
  • packages/ui/components/core/Saved/SavedOrgResultCard.tsx (1 hunks)
  • packages/ui/components/core/Saved/SavedServiceResultCard.tsx (1 hunks)
  • packages/ui/theme/variants/Button.ts (1 hunks)
  • packages/ui/theme/variants/index.ts (1 hunks)
Files skipped from review as they are similar to previous changes (5)
  • apps/app/public/locales/en/common.json
  • apps/app/src/pages/account/saved/[listId].tsx
  • packages/api/router/savedLists/query.getById.handler.ts
  • packages/ui/components/core/Saved/SavedOrgResultCard.tsx
  • packages/ui/components/core/Saved/SavedServiceResultCard.tsx
Additional comments not posted (6)
packages/ui/components/core/ActionButtons/index.tsx (2)

3-3: Import statement for Delete component looks good.

The Delete component is correctly imported from the appropriate path.


16-16: Export statement for ActionButtons.Delete looks good.

The Delete component is correctly assigned to ActionButtons.Delete.

packages/ui/components/core/ActionButtons/Print.tsx (1)

15-16: Conditional assignment for onClick looks good.

The onClick handler is correctly assigned window.print only if window is defined, preventing potential errors in non-browser environments.

packages/ui/components/core/ActionButtons/Delete.tsx (1)

1-63: Implementation of Delete component looks good.

The Delete component correctly includes a modal confirmation dialog for delete actions. The use of useDisclosure and useCustomVariant hooks is appropriate, and the component handles delete actions as expected.

packages/ui/theme/variants/index.ts (1)

57-57: LGTM! Ensure the new variant is used correctly in the codebase.

The addition of primaryLgRed to variantNames is correct and consistent with the existing variants.

However, verify that the new variant is used appropriately in the codebase.

Verification successful

The new variant primaryLgRed is used appropriately in the codebase.

  • Defined in packages/ui/theme/variants/Button.ts
  • Added to variantNames in packages/ui/theme/variants/index.ts
  • Used in packages/ui/components/core/ActionButtons/Delete.tsx
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of the new variant `primaryLgRed` in the codebase.

# Test: Search for the usage of the new variant. Expect: Occurrences of `primaryLgRed`.
rg --type js --type ts -A 5 'primaryLgRed'

Length of output: 1451

packages/ui/theme/variants/Button.ts (1)

77-85: LGTM! Ensure the new variant is used correctly in the codebase.

The addition of primaryLgRed to the Button component is correct and consistent with the existing variants. The styles follow best practices.

However, verify that the new variant is used appropriately in the codebase.

Verification successful

The new variant primaryLgRed is correctly integrated and used in the codebase.

  • Definition: packages/ui/theme/variants/Button.ts
  • Reference: packages/ui/theme/variants/index.ts
  • Usage: packages/ui/components/core/ActionButtons/Delete.tsx

The addition of primaryLgRed is consistent with existing variants and follows best practices for styling and usage.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of the new variant `primaryLgRed` in the codebase.

# Test: Search for the usage of the new variant. Expect: Occurrences of `primaryLgRed`.
rg --type js --type ts -A 5 'primaryLgRed'

Length of output: 1451

@JoeKarow JoeKarow force-pushed the IN-951-display-user-saved-lists branch from 9a47ab8 to ad60349 Compare August 7, 2024 18:22
@JoeKarow JoeKarow force-pushed the IN-951-display-user-saved-lists branch from ad60349 to 31e2e6c Compare August 7, 2024 18:23
Copy link

sonarqubecloud bot commented Aug 7, 2024

@JoeKarow
Copy link
Collaborator

JoeKarow commented Aug 7, 2024

@coderabbitai resolve

Copy link
Contributor

coderabbitai bot commented Aug 7, 2024

Actions performed

Comments resolved.

@kodiakhq kodiakhq bot merged commit bc586ae into dev Aug 7, 2024
22 checks passed
@kodiakhq kodiakhq bot deleted the IN-951-display-user-saved-lists branch August 7, 2024 18:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📦 api 📦 app automerge Enable Kodiak auto-merge kodiak: merge.method = 'squash' Kodiak will squash merge this PR. new-feature New features or options. 📦 ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants