Fix #596: Implement favorite button functionality on podcast details … #633

ShreyasLakhani · 2025-10-01T04:02:20Z

Description

Fixes #596

Type of Change

New feature (e.g., new page, component, or functionality)
Bug fix (non-breaking change that fixes an issue)
UI/UX improvement (design, layout, or styling updates)
Performance optimization (e.g., code splitting, caching)
Documentation update (README, contribution guidelines, etc.)
Other (please specify):

Changes Made

Dependencies

No new dependencies introduced.
No version updates or configuration changes required.

Checklist

My code follows the style guidelines of this project.
I have tested my changes across major browsers and devices
My changes do not generate new console warnings or errors .
I ran npm run build and attached screenshot(s) in this PR.
This is already assigned Issue to me, not an unassigned issue.

Recode.Hive.-.Google.Chrome.2025-10-01.00-01-11.mp4

Recode.Hive.-.Google.Chrome.2025-10-01.00-38-17.mp4

…t details page

vercel · 2025-10-01T04:02:25Z

@ShreyasLakhani is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2025-10-01T04:02:31Z

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

Get free Consultation use code recode50 to get free: Mentorship for free.
Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.
Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

Copilot

Pull Request Overview

This PR implements favorite button functionality on podcast pages to fix issue #596. The changes add state management for favorites using localStorage, allowing users to mark podcasts as favorites and persist their selections across sessions.

Adds favorite state management with localStorage persistence
Updates favorite button UI to reflect current state with toggle functionality
Enhances CSS styling for favorite and share buttons with hover/active states

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 8 comments.

File	Description
src/pages/podcasts/index.tsx	Adds favorites state management and favorite button functionality to main podcasts listing
src/pages/podcasts/index.css	Updates styling for action buttons including favorite states and improved button interactions
src/pages/podcasts/details.tsx	Implements favorite toggle functionality on podcast details page
src/pages/podcasts/details.css	Adds styling for favorited state in navigation action buttons

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/pages/podcasts/index.tsx

src/pages/podcasts/index.css

src/pages/podcasts/details.tsx

Adez017 · 2025-10-01T04:24:24Z

@ShreyasLakhani ,resolve the suggestions by copilot

Adez017 · 2025-10-01T04:25:27Z

could you also share a screenshot or recoding for the same in the dark mode

ShreyasLakhani · 2025-10-01T04:36:09Z

@Adez017

Adez017 · 2025-10-01T04:38:45Z

@Adez017

ok @ShreyasLakhani

Adez017 · 2025-10-01T04:39:42Z

could you share the screenshot for dark mode @ShreyasLakhani

ShreyasLakhani · 2025-10-01T04:40:10Z

@Adez017 Yes I add. Do I need any changes?

Copilot

Pull Request Overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

src/pages/podcasts/index.tsx:1

The useEffect hook that resets currentPage is missing from the updated code. This could cause pagination issues when users change search terms or filters, as the page won't reset to 1.

import React, { useState } from 'react';

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-01T04:43:18Z

src/pages/podcasts/index.tsx

+                          className={`action-btn favorite unfavorited ${
+                            favorites.includes(podcast.id) ? "favorited" : ""
+                          }`}


The className logic is confusing - applying both 'unfavorited' and potentially 'favorited' classes. Consider using conditional logic: className={action-btn favorite ${favorites.includes(podcast.id) ? 'favorited' : 'unfavorited'}}

Suggested change

className={`action-btn favorite unfavorited ${

favorites.includes(podcast.id) ? "favorited" : ""

}`}

className={`action-btn favorite ${favorites.includes(podcast.id) ? 'favorited' : 'unfavorited'}`}

Copilot · 2025-10-01T04:43:18Z

src/pages/podcasts/index.css

+}
+
+.action-btn.favorite.unfavorited:hover {
+  background-color: rgba(123, 124, 128, 0.15);


The hover state for unfavorited buttons has the same background-color as the default state, making the hover effect invisible. Consider using a different color or opacity for the hover state.

Suggested change

background-color: rgba(123, 124, 128, 0.15);

background-color: rgba(123, 124, 128, 0.25); /* increased opacity for visible hover effect */

Copilot · 2025-10-01T04:43:19Z

src/pages/podcasts/details.tsx

+  <button
+    className="nav-action-button"
+    onClick={handleShare}
+    title="Share"
+  >


The handleShare function expects a podcast parameter but is being called without any arguments. This will cause a runtime error when the share button is clicked.

try to resolve this one

Adez017 · 2025-10-01T04:46:50Z

@Adez017 Yes I add. Do I need any changes?

we need to review the changes and will suggest . @ShreyasLakhani

Copilot

Pull Request Overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-01T05:17:37Z

src/pages/podcasts/index.tsx

+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedFilter, setSelectedFilter] = useState<
+    "all" | "episode" | "show" | "playlist"
+  >("all");


[nitpick] Inconsistent quote style. The codebase should use consistent quotes throughout - either single quotes (') or double quotes ("). Consider using single quotes to match the existing pattern in the file.

Suggested change

>("all");

>('all');

Copilot · 2025-10-01T05:17:37Z

src/pages/podcasts/index.tsx

+                            e.preventDefault();
+                            e.stopPropagation();
+                            e.nativeEvent.stopImmediatePropagation();


Multiple event propagation prevention methods are redundant. e.nativeEvent.stopImmediatePropagation() is unnecessary when e.stopPropagation() is already used, and handleFavorite already calls event.stopPropagation(). Consider simplifying to just e.stopPropagation() or move all event handling to the handleFavorite function.

Suggested change

e.preventDefault();

e.stopPropagation();

e.nativeEvent.stopImmediatePropagation();

Copilot · 2025-10-01T05:17:37Z

src/pages/podcasts/details.tsx

  };

-  const handleShare = async () => {
+  const handleShare = async (podcast?: PodcastData) => {


The function parameter podcast is optional but the function body doesn't handle the undefined case. This will cause runtime errors when accessing podcast.type and podcast.spotifyUrl if no podcast is passed.

Suggested change

const handleShare = async (podcast?: PodcastData) => {

const handleShare = async (podcast?: PodcastData) => {

if (!podcast) {

// Optionally, show an error or do nothing

return;

}

ShreyasLakhani · 2025-10-01T05:18:42Z

@Adez017 I apologize for the accidental deletion of the header.css file in my previous commit. I have restored the file.

Adez017

looks good to me .

Adez017 · 2025-10-01T05:24:53Z

@sanjay-kv , take a look . i thinks its ready

sanjay-kv · 2025-10-01T13:13:11Z

@Adez017

Its good that you took the review work . i have added you to the codeowners list, regarding your resume review i will do this friday.

vercel · 2025-10-01T13:13:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
recode-website	Ready	Preview	Comment	Oct 1, 2025 1:14pm

Fix recodehive#596: Implement favorite button functionality on podcas…

7eafcc7

…t details page

Copilot AI review requested due to automatic review settings October 1, 2025 04:02

github-actions bot added level 1 10 points recode this is label for leaderboard labels Oct 1, 2025

Copilot AI reviewed Oct 1, 2025

View reviewed changes

Adez017 added the don't-merge faced conflict issue or other dev related issue, dont merge PR label Oct 1, 2025

remove comments and spaces

92a2e0c

Adez017 removed the don't-merge faced conflict issue or other dev related issue, dont merge PR label Oct 1, 2025

Delete src/components/header/header.css

b74455e

Copilot AI review requested due to automatic review settings October 1, 2025 04:42

Copilot AI reviewed Oct 1, 2025

View reviewed changes

Adez017 assigned ShreyasLakhani Oct 1, 2025

Adez017 added hacktoberfest-accepted gssoc25 level 2 30 points and removed level 1 10 points labels Oct 1, 2025

Restore header.css and fix handleShare call in podcasts/details.tsx

a872569

Adez017 requested a review from sanjay-kv October 1, 2025 05:13

Restore header.css file to prevent accidental deletion

ec21f07

ShreyasLakhani requested review from Adez017 and Copilot October 1, 2025 05:16

Copilot AI reviewed Oct 1, 2025

View reviewed changes

Adez017 approved these changes Oct 1, 2025

View reviewed changes

sanjay-kv approved these changes Oct 1, 2025

View reviewed changes

sanjay-kv added this to @recode-web Oct 1, 2025

sanjay-kv moved this to In Progress in @recode-web Oct 1, 2025

sanjay-kv added this to the recode:launch 3.0 milestone Oct 1, 2025

vercel bot deployed to Preview October 1, 2025 13:14 View deployment

sanjay-kv merged commit 32af870 into recodehive:main Oct 1, 2025
3 checks passed

github-project-automation bot moved this from In Progress to Done in @recode-web Oct 1, 2025

ShreyasLakhani mentioned this pull request Oct 1, 2025

🐞[Bug]: The like functionality in the podcast is not working #622

Closed

4 tasks

Adez017 mentioned this pull request Oct 2, 2025

Like functionality works with updated css #656

Closed

	background-color: rgba(123, 124, 128, 0.15);
	background-color: rgba(123, 124, 128, 0.25); /* increased opacity for visible hover effect */

	e.preventDefault();
	e.stopPropagation();
	e.nativeEvent.stopImmediatePropagation();

Fix #596: Implement favorite button functionality on podcast details … #633

Fix #596: Implement favorite button functionality on podcast details … #633

Conversation

ShreyasLakhani commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Changes Made

Dependencies

Checklist

Uh oh!

vercel bot commented Oct 1, 2025

Uh oh!

github-actions bot commented Oct 1, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Adez017 commented Oct 1, 2025

Uh oh!

Adez017 commented Oct 1, 2025

Uh oh!

ShreyasLakhani commented Oct 1, 2025

Uh oh!

Adez017 commented Oct 1, 2025

Uh oh!

Adez017 commented Oct 1, 2025

Uh oh!

ShreyasLakhani commented Oct 1, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Adez017 Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Adez017 commented Oct 1, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

ShreyasLakhani commented Oct 1, 2025

Uh oh!

Adez017 left a comment

Choose a reason for hiding this comment

Uh oh!

Adez017 commented Oct 1, 2025

Uh oh!

sanjay-kv commented Oct 1, 2025

Uh oh!

ShreyasLakhani commented Oct 1, 2025 •

edited

Loading

vercel bot commented Oct 1, 2025 •

edited

Loading