Merge pull request #1 from arkajyotiadhikary/dev-1

Dev 1

client/package.json

@@ -13,6 +13,7 @@
     "@expo/vector-icons": "^14.0.0",
     "@react-navigation/native": "^6.1.14",
     "@react-navigation/stack": "^6.3.25",
+    "@reduxjs/toolkit": "^2.2.1",
     "@types/axios": "^0.14.0",
     "axios": "^1.6.7",
     "expo": "~50.0.8",
@@ -24,7 +25,8 @@
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-track-player": "^4.0.1",
-    "react-native-web": "^0.19.10"
+    "react-native-web": "^0.19.10",
+    "react-redux": "^9.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

client/src/App.tsx

@@ -5,22 +5,28 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 const stack = createStackNavigator();
 
+// state store
+import { Provider } from "react-redux";
+import { store } from "./store";
+
 // screens
 import Home from "./screens/Home";
 import Auth from "./screens/Auth";
 
 export default function App() {
     return (
-        <NavigationContainer>
-            <stack.Navigator
-                initialRouteName="Home"
-                screenOptions={{
-                    headerShown: false,
-                }}
-            >
-                <stack.Screen name="Home" component={Home} />
-                <stack.Screen name="Auth" component={Auth} />
-            </stack.Navigator>
-        </NavigationContainer>
+        <Provider store={store}>
+            <NavigationContainer>
+                <stack.Navigator
+                    initialRouteName="Home"
+                    screenOptions={{
+                        headerShown: false,
+                    }}
+                >
+                    <stack.Screen name="Home" component={Home} />
+                    <stack.Screen name="Auth" component={Auth} />
+                </stack.Navigator>
+            </NavigationContainer>
+        </Provider>
     );
 }

client/src/components/Home/HomeAudioPlayer.tsx

@@ -1,29 +1,33 @@
 import React, { FC } from "react";
-import { View, Image, Text, TouchableOpacity } from "react-native";
+import {
+    View,
+    Image,
+    Text,
+    TouchableOpacity,
+    ImageSourcePropType,
+} from "react-native";
 import { Entypo } from "@expo/vector-icons";
-
-// test image for now for song player
-import img from "../../../assets/images/Logo.jpg";
+import { useSelector } from "react-redux";
 
 import styles from "../../styles/Home/HomeAudioPlayer";
+import { RootState } from "../../store";
 
 const HomeAudioPlayer: FC = () => {
+    const { title, artist, artwork } = useSelector(
+        (state: RootState) => state.songReducer
+    );
+
     return (
         <View style={styles.container}>
-            {/* music cover art */}
             <View>
-                {/*
-                    in future the song will be at the state from there we
-                    will be able to get the image
-                */}
-                <Image source={img} style={styles.musicArt} />
+                <Image
+                    source={artwork as ImageSourcePropType}
+                    style={styles.musicArt}
+                />
             </View>
             <View>
-                {/* song name */}
-                <Text>Test Music Name</Text>
-                {/* artist */}
-                <Text>Test Artist Name</Text>
-                {/* play pause btn */}
+                <Text>{title}</Text>
+                <Text>{artist}</Text>
             </View>
             <View style={styles.playBtnHolder}>
                 <TouchableOpacity style={styles.playBtn}>

client/src/components/Home/PlayerList.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useState, useEffect } from "react";
-import { View, FlatList, ImageSourcePropType } from "react-native";
+import React, { FC, useState } from "react";
+import { View, FlatList, TouchableOpacity } from "react-native";
 import TrackPlayer, {
     useTrackPlayerEvents,
     Event,

client/src/components/Home/PlayerListItem.tsx

@@ -6,7 +6,8 @@ import {
     Image,
     ImageSourcePropType,
 } from "react-native";
-
+import { useDispatch } from "react-redux";
+import { setCurrentPlayingSong } from "../../features/song/songSlice";
 import styles from "../../styles/Home/PlayerListItem";
 import { Foundation } from "@expo/vector-icons";
 
@@ -25,21 +26,36 @@ const PlayerListItem: FC<PlayerListItemProps> = ({
     coverArtPath,
     isCurrent,
 }) => {
+    const dispatch = useDispatch();
+
+    const handlePress = (): void => {
+        dispatch(
+            setCurrentPlayingSong({
+                artist: artist ? artist : "",
+                title: title ? title : "",
+                artwork: coverArtPath as string,
+                audioIndex: index,
+            })
+        );
+    };
+
     return (
-        <View style={styles.item}>
-            <View style={styles.trackDetails}>
-                <Image style={styles.coverArt} source={coverArtPath} />
-                <View style={styles.details}>
-                    <Text style={styles.title}>{title}</Text>
-                    <Text>{artist}</Text>
+        <TouchableOpacity onPress={handlePress}>
+            <View style={styles.item}>
+                <View style={styles.trackDetails}>
+                    <Image style={styles.coverArt} source={coverArtPath} />
+                    <View style={styles.details}>
+                        <Text style={styles.title}>{title}</Text>
+                        <Text>{artist}</Text>
+                    </View>
+                </View>
+                <View style={styles.btn}>
+                    <TouchableOpacity>
+                        <Foundation name="play" color="black" />
+                    </TouchableOpacity>
                 </View>
             </View>
-            <View style={styles.btn}>
-                <TouchableOpacity>
-                    <Foundation name="play" color="black" />
-                </TouchableOpacity>
-            </View>
-        </View>
+        </TouchableOpacity>
     );
 };
 

client/src/features/song/songSlice.ts

@@ -0,0 +1,36 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { ImageSourcePropType } from "react-native";
+import logo from "../../../assets/images/Logo.jpg";
+
+export interface CurrentPlayingSong {
+    title: string;
+    artist: string;
+    artwork: string | number;
+    audioIndex: number;
+}
+
+const initialState: CurrentPlayingSong = {
+    title: "Test",
+    artist: "Test",
+    artwork: logo,
+    audioIndex: -1,
+};
+
+const songSlice = createSlice({
+    name: "song",
+    initialState,
+    reducers: {
+        setCurrentPlayingSong(
+            state,
+            action: PayloadAction<CurrentPlayingSong>
+        ) {
+            state.title = action.payload.title;
+            state.artist = action.payload.artist;
+            state.artwork = action.payload.artwork;
+            state.audioIndex = action.payload.audioIndex;
+        },
+    },
+});
+
+export const { setCurrentPlayingSong } = songSlice.actions;
+export default songSlice.reducer;