Use zustand instead of redux

[bastiendmt]

#281

[Copilot]

Pull Request Overview

This PR replaces the existing Redux-based state management with a Zustand store, updating store setup, hooks, components, and tests accordingly.

• Introduces a central useAppStore with initial state and async actions via Zustand
• Removes Redux slices, store configuration, and related hooks
• Updates components (App, Player, PlaylistDetail, SongItem) and their tests to use Zustand and a new test-utils factory

Reviewed Changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/store/zustand-store.ts	Adds Zustand store, interfaces, state, and actions
src/store/test-utils.ts	Adds factory and mock setup for testing Zustand store
src/store/store.ts	Removes Redux store configuration
src/pages/PlaylistDetail/SongItem/SongItem.tsx	Switches SongItem to use Zustand hook
src/pages/PlaylistDetail/PlaylistDetail.tsx	Updates PlaylistDetail to fetch via Zustand
src/pages/PlaylistDetail/PlaylistDetail.spec.tsx	Migrates tests to mock Zustand store
src/components/Player/Player.tsx	Updates Player component to use Zustand actions
src/components/Player/Player.spec.tsx	Adjusts Player tests for Zustand
src/App.tsx	Replaces Redux hooks with Zustand equivalents
package.json	Removes Redux dependencies, adds Zustand

Comments suppressed due to low confidence (3)

src/components/Player/Player.tsx:16

• [nitpick] The variable name audioEml is unclear; consider renaming to audioRef or audioElem for clarity.

  const audioEml = useRef<ElementRef<'audio'>>(null);

src/pages/PlaylistDetail/SongItem/SongItem.tsx:14

• [nitpick] The interface name SongItemPros seems like a typo; rename it to SongItemProps to follow the common Props suffix convention.

const SongItem = ({ song, index, current }: SongItemPros) => {

src/pages/PlaylistDetail/PlaylistDetail.spec.tsx:60

• This test only asserts that the loader is gone; consider adding an assertion that the error message or NotFound component is rendered when error is set.

  test('should render error state when there is an error', async () => {

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud