[f] 186 - Hide snippets from the feed

[giahung68]

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced new hooks for managing snippet actions: liking, hiding, and unhiding snippets.
  • Added a new component for toggling snippet visibility with confirmation prompts.
  • Enhanced PublicSnippet component with improved error handling and user experience.
  • Added tooltip functionality to SnippetCard and SearchInterface for better user interaction.

• Bug Fixes

  • Improved error handling across various components to ensure better user feedback.

• Refactor

  • Significant restructuring of the SnippetDetail and SnippetCard components for better maintainability and clarity.
  • Updated data fetching methods to use a modular API approach.

• Documentation

  • Enhanced TypeScript definitions for snippets, improving type safety and structure.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This pull request introduces significant changes across various components and hooks in the codebase. It adds new asynchronous functions for managing snippets using a Supabase backend, enhances the PublicSnippet component with improved data handling, and introduces a new SnippetVisibilityToggle component. Additionally, custom hooks for liking and managing snippet visibility are added. The overall structure of the components is refined, including better error handling and user experience improvements, particularly in the rendering of snippets and their associated actions.

Changes

File	Change Summary
src/api/api.ts	New file with functions: fetchSnippet, fetchSnippets, likeSnippet, hideSnippet, unhideSnippet, and fetchPublicSnippet for managing snippets with error handling.
src/components/PublicSnippet.tsx	Modified to use usePublicSnippet for data fetching, improved error handling, removed interface definition, and refactored download functionality into separate handler functions.
src/components/SearchInterface.tsx	Added TooltipProvider for tooltips on SnippetCard, improved readability of div element.
src/components/SnippetCard.tsx	Enhanced with tooltips for like/dislike buttons, added isStarred state, and refactored event handling for starring snippets.
src/components/SnippetDetail.tsx	Reorganized imports, added state management for isAdmin, improved like status handling, and refined rendering logic.
src/components/ui/hide-button.tsx	Introduced SnippetVisibilityToggle component for managing snippet visibility with confirmation prompts.
src/hooks/usePermission.tsx	New file with useIsAdmin hook for fetching user roles from Supabase.
src/hooks/useSnippetActions.ts	New file with hooks: useLikeSnippet, useHideSnippet, and useUnhideSnippet for managing snippet interactions with optimistic updates.
src/hooks/useSnippets.tsx	Significant refactor, updated imports, removed several interfaces, added usePublicSnippet, and changed default pageSize in useSnippets.
src/layouts/AuthenticatedLayout.tsx	Minor class name adjustment in JSX, maintaining existing logic for session and user data management.
src/types/snippet.ts	New interfaces and types added for better type safety in snippet-related data management, including Context, AudioFileInfo, Upvoter, Label, ConfidenceScore, and others.

Possibly related PRs

• [f] 091 - Infinite scroll for snippets page #37: [f] 091 - Infinite scroll for snippets page - Introduces an infinite scroll feature for snippets, relevant to fetching and displaying snippets.
• [f] Filter for the snippets #47: [f] Filter for the snippets - Updates filtering logic in the sidebar, connecting to snippet management.
• [f] ver155 - Persist snippet query params #119: [f] ver155 - Persist snippet query params - Modifies sidebar management and filtering logic, related to snippet handling.
• [f] 140 - Update snippet card #120: [f] 140 - Update snippet card - Enhances snippet card functionality, particularly in managing like and dislike counts.
• [f] 141 - Political spectrum filter #123: [f] 141 - Political spectrum filter - Introduces a political spectrum filter, relevant to snippet filtering and management.
• [f] 179 - Vote count for feed #151: [f] 179 - Vote count for feed - Focuses on managing like and dislike counts for snippets, aligning with snippet interaction features.

Suggested reviewers

• nlgthuan

Poem

🐰 In the meadow where snippets play,
New features hop in bright array.
With likes and hides, they dance and twirl,
A toggle here, a fetch to unfurl.
So let us cheer with joy and glee,
For snippets thrive, as they should be! 🌼

---

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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @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.