types added to auth and player contexts

.env

@@ -0,0 +1,3 @@
+EXPO_PUBLIC_CLIENT_ID="45803018c87d4b2b9f95ec38e79f5a9f"
+EXPO_PUBLIC_SCOPE="playlist-read-private user-read-private user-read-email user-read-playback-state user-modify-playback-state app-remote-control"
+EXPO_PUBLIC_CLIENT_SECRET="3b5bf406c52e48e982ad9466ee22f139"

components/Login.tsx

@@ -1,12 +1,12 @@
-import { FC, useEffect, useState } from "react"
+import { useEffect } from "react"
 import * as Linking from "expo-linking"
 import { getAuthUrl } from "../utils"
 import { Button } from "react-native"
 import { useAuthContext } from "../context"
 
 export const Login: React.FC = () => {
-	const { getToken, setInitUrl, isAuthorized } = useAuthContext()
-	let url = Linking.useURL()
+	const { getToken, isAuthorized } = useAuthContext()
+	const url = Linking.useURL()
 
 	const authUrl = getAuthUrl(url)
 
@@ -15,7 +15,6 @@ export const Login: React.FC = () => {
 			const temp_url: URL = new URL(url)
 			const { searchParams } = temp_url
 			const code: string = decodeURIComponent(searchParams.get("code"))
-			// console.log(code, "code")
 			if (code != "null" && !isAuthorized) {
 				console.log("URLLL", url.split("?")[0])
 				getToken(code, url.split("?")[0])

components/Playlists.tsx

@@ -3,15 +3,13 @@ import { useAuthContext } from "../context"
 import { getCurrentUserPlaylists } from "../utils/currentUser"
 import { Playlist } from "../utils/currentUser"
 import { useState, useEffect } from "react"
-import { getSongsFromPlaylist } from "../utils"
-import { usePlaylistContext, usePlaylistContextValues } from "../context/PlaylistContext"
+import { usePlaylistContext } from "../context/PlaylistContext"
 
 export const Playlists: React.FC = () => {
 	const { tokenData } = useAuthContext()
 	const {handleSongsData} = usePlaylistContext()
 	const [playlistsArrOfObj, setplaylistsArrOfObj] = useState([])
-	const [selectedPlaylist, setSelectedPlaylist] = useState(null)
-	const [loading, setLoading] = useState(true)
+
 
 	const getPressedPlaylist = (name: string) => {
 		const { href } = playlistsArrOfObj.find((playlist) => playlist.name == name)

context/AuthContext.tsx

@@ -1,13 +1,21 @@
 import { createContext, useContext, useState } from "react"
 import { Buffer } from "buffer"
-export const AuthContext = createContext(null)
 
-type TokenData = {
+export type TokenData = {
 	refresh_token: string
 	access_token: string
-	expires_in: string
+	expires_in: number
 }
 
+type AuthContextType = {
+	isAuthorized: boolean
+	getToken: (code: string, redirected_uri: string) => Promise<void>
+	tokenData: TokenData
+	refreshToken: () => Promise<void>
+}
+
+export const AuthContext = createContext<AuthContextType>(null)
+
 export const useAuthContext = () => {
 	const context = useContext(AuthContext)
 	if (!context) {
@@ -19,20 +27,15 @@ export const useAuthContext = () => {
 }
 
 export const useAuthContextValues = () => {
-	const [initUrl, setInitUrl] = useState("")
 	const [isAuthorized, setIsAuthorized] = useState(false)
-	const [tokenRequest, setTokenRequest] = useState({
+	const [tokenData, setTokenData] = useState<TokenData | null>(null)
+	const tokenRequest = {
 		client_id: "45803018c87d4b2b9f95ec38e79f5a9f",
 		grant_type: "authorization_code",
 		secret_client: "3b5bf406c52e48e982ad9466ee22f139",
-	})
-	const [tokenData, setTokenData] = useState<TokenData | null>(null)
-
-	const getToken: (arg1: string, arg2: string) => void = async (
-		code,
-		redirected_url
-	) => {
+	}
 
+	const getToken = async (code: string, redirected_uri: string) => {
 		const authOptions = {
 			method: "POST",
 			headers: {
@@ -46,7 +49,7 @@ export const useAuthContextValues = () => {
 			body: new URLSearchParams({
 				grant_type: "authorization_code",
 				code: code,
-				redirect_uri: redirected_url,
+				redirect_uri: redirected_uri,
 			}).toString(),
 		}
 
@@ -55,7 +58,7 @@ export const useAuthContextValues = () => {
 			authOptions
 		)
 
-		response.json().then((data) => {
+		response.json().then((data:TokenData) => {
 			console.log("data", data)
 			setTokenData({
 				refresh_token: data.refresh_token,
@@ -66,8 +69,7 @@ export const useAuthContextValues = () => {
 		})
 	}
 
-	const refreshToken: () => void = async () => {
-
+	const refreshToken = async () => {
 		const authOptions = {
 			method: "POST",
 			headers: {
@@ -84,13 +86,11 @@ export const useAuthContextValues = () => {
 			}).toString(),
 		}
 
-
-
 		const response = await fetch(
 			"https://accounts.spotify.com/api/token",
 			authOptions
 		)
-
+		console.log("Refresh token response", response)
 		response.json().then((data) => {
 			setTokenData((prevTokenData) => {
 				console.log(data.access_token)
@@ -101,14 +101,11 @@ export const useAuthContextValues = () => {
 				}
 			})
 		})
-
 	}
 	return {
 		isAuthorized,
 		getToken,
-		tokenRequest,
 		tokenData,
-		setInitUrl,
 		refreshToken,
 	}
 }

context/PlayerContext.tsx

@@ -1,6 +1,25 @@
 import { createContext, useContext, useState } from "react"
+import { SongType } from "./PlaylistContext"
+
+export type Device = {
+	id: string
+	name: string
+}
+
+export type PlayerContextType ={
+	getDevices: (token:string) => Promise<void>,
+	devices: Device[],
+	playSong:  (song: SongType, token: string, currentDevice:Device) => Promise<void>,
+	pausePlayer: (token:string, currentDevice:Device) => Promise<void>,
+	handleEndOfSong: (token:string) => Promise<number>,
+}
 
-export const PlayerContext = createContext(null)
+
+type PlaybackStateType = {
+	progress_ms: number
+}
+
+export const PlayerContext = createContext<PlayerContextType>(null)
 
 export const usePlayerContext = () => {
 	const context = useContext(PlayerContext)
@@ -10,10 +29,15 @@ export const usePlayerContext = () => {
 	return context
 }
 
+
+
+
+
 export const usePlayerContextValues = () => {
-	const [devices, setDevices] = useState([])
-	const [currentDevice, setCurrDevice] = useState(null)
-	const getDevices = async (token:string) => {
+	const [devices, setDevices] = useState<Device[]>([])
+
+
+	const getDevices = async (token: string) => {
 		await (
 			await fetch(`https://api.spotify.com/v1/me/player/devices`, {
 				headers: {
@@ -24,7 +48,7 @@ export const usePlayerContextValues = () => {
 			.json()
 			.then((data) => {
 				setDevices(
-					data.devices.map((device) => {
+					data.devices.map((device: Device) => {
 						return {
 							id: device.id,
 							name: device.name,
@@ -34,7 +58,7 @@ export const usePlayerContextValues = () => {
 			})
 	}
 
-	const playSong = async (song, token) => {
+	const playSong = async (song: SongType, token: string, currentDevice:Device) => {
 		if (currentDevice) {
 			//add to queue
 			await fetch(
@@ -60,8 +84,8 @@ export const usePlayerContextValues = () => {
 		}
 	}
 
-	const pausePlayer = async (token) => {
-		if (currentDevice){
+	const pausePlayer = async (token:string, currentDevice:Device) => {
+		if (currentDevice) {
 			await fetch(`https://api.spotify.com/v1/me/player/pause`, {
 				method: "PUT",
 				headers: {
@@ -74,24 +98,22 @@ export const usePlayerContextValues = () => {
 		}
 	}
 
-
-	const handleEndOfSong = async (token) => {
-		const {progress_ms} = await (await fetch(`https://api.spotify.com/v1/me/player`, {
+	const handleEndOfSong = async (token:string) => {
+		const data:PlaybackStateType = await (
+			await fetch(`https://api.spotify.com/v1/me/player`, {
 				headers: {
 					Authorization: "Bearer " + token,
 				},
-			})).json()
+			})
+		).json()
 
-		return progress_ms
-
+		return data.progress_ms
 	}
 	return {
 		getDevices,
 		devices,
-		setCurrDevice,
-		currentDevice,
 		playSong,
 		pausePlayer,
-		handleEndOfSong
+		handleEndOfSong,
 	}
 }

context/PlaylistContext.tsx

@@ -65,7 +65,6 @@ export const usePlaylistContextValues = () => {
 		const tempoArr = delete_id
 			? matchingTempoObj[key].filter((idTempo) => idTempo[0] != delete_id)
 			: matchingTempoObj[key]
-		console.log(tempoArr)
 
 		if (tempoArr.length) {
 			const randomTrack = Math.floor(Math.random() * tempoArr.length)

context/index.ts

@@ -1 +1,3 @@
-export * from './AuthContext'
+export * from './AuthContext'
+export * from './PlayerContext'
+export * from './PlaylistContext'

package.json

@@ -27,7 +27,8 @@
     "react-native-web": "~0.19.6",
     "react-query": "^3.39.3",
     "typescript": "^5.1.3",
-    "expo-sensors": "~12.3.0"
+    "expo-sensors": "~12.3.0",
+    "@react-native-async-storage/async-storage": "1.18.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

pages/Main.tsx

@@ -5,7 +5,6 @@ import { Text } from "react-native"
 import { useEffect } from "react"
 import { usePlaylistContext } from "../context/PlaylistContext"
 import { RunPage } from "./RunPage"
-import { PlayerContext, usePlayerContextValues } from "../context/PlayerContext"
 export const Main: React.FC = () => {
 	const { isAuthorized, refreshToken, tokenData } = useAuthContext()
 	const { isPicked } = usePlaylistContext()
@@ -22,7 +21,6 @@ export const Main: React.FC = () => {
 	if (isPicked) {
 		return <RunPage />
 	}
-	console.log(isPicked)
 	return (
 		<>
 			<Playlists />