Cache control + TEST_USER_CACHE_TOKEN

lib/useAPI.ts

@@ -18,25 +18,35 @@ const timestamps = () => ({
 	timestamp: new Date().getTime(),
 })
 
+const generateUserCacheToken = () =>
+	'AMPUAPIUID' + String(Date.now()) + '-' + String(Math.random() * 100000)
+let userCacheToken = generateUserCacheToken()
+const updateUserCacheToken = () => {
+	userCacheToken = generateUserCacheToken()
+	return userCacheToken
+}
+const getUserCacheToken = () =>
+	process.env.TEST_USER_CACHE_TOKEN || userCacheToken
+
 export default function useAPI() {
 	const { logged, isAuthorized, getInstance } = useMusicKitContext()
 
 	const intercept = () => {
 		// Set the Music-Token token for any request
 		api.interceptors.request.use(function (config) {
-			if (process.env.TEST_USER_TOKEN) {
+			if (userCacheToken)
+				config.headers['User-Cache-Token'] = getUserCacheToken()
+
+			if (process.env.TEST_USER_TOKEN)
 				config.headers['Authorization'] =
 					`Bearer ${process.env.TEST_USER_TOKEN}`
-			}
-			if (process.env.TEST_USER_MUSIC_TOKEN) {
+			if (process.env.TEST_USER_MUSIC_TOKEN)
 				config.headers['Music-Token'] =
 					process.env.TEST_USER_MUSIC_TOKEN
-			}
 
-			if (logged || isAuthorized()) {
+			if (logged || isAuthorized())
 				config.headers['Music-Token'] =
 					getInstance().musicUserToken || ''
-			}
 
 			return config
 		})
@@ -186,6 +196,10 @@ export default function useAPI() {
 		...axios,
 		api: api,
 		//
+		userCacheToken,
+		getUserCacheToken,
+		updateUserCacheToken,
+		//
 		get: get,
 		post: post,
 		put: put,

next.config.mjs

@@ -26,6 +26,7 @@ const nextConfig = {
 		// musicKit
 		MUSICKIT_VERSION: "3",
 		// tests
+		TEST_USER_CACHE_TOKEN: process.env.TEST_USER_CACHE_TOKEN,
 		TEST_USER_TOKEN: process.env.TEST_USER_TOKEN,
 		TEST_USER_MUSIC_TOKEN: process.env.TEST_USER_MUSIC_TOKEN,
 	}, ...withPWA({

src/components/Elements/ProfileLink/ProfileLink.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'framework7-react'
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import styles from './ProfileLink.module.css'
 import { LinkProps } from 'framework7-react/components/link.js'
 import { IoPersonCircleOutline } from 'react-icons/io5'
@@ -26,17 +26,26 @@ const ProfileLink = ({
 		setIsLogged(isAuthorized() || logged)
 	}, [isAuthorized, logged])
 
+	const checkLogged = useCallback(
+		() => isAuthorized() || logged,
+		[isAuthorized, logged]
+	)
+
+	let myIntervalId = null as NodeJS.Timeout | null
 	useEffect(() => {
-		const checkLogged = () => isAuthorized() || logged
+		myIntervalId && clearInterval(myIntervalId)
 
-		const intervalId = setInterval(() => {
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		myIntervalId = setInterval(() => {
 			if (checkLogged() !== isLogged) {
 				setIsLogged(checkLogged())
 			}
 		}, 500)
-		return () => clearInterval(intervalId)
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [])
+
+		return () => {
+			myIntervalId && clearInterval(myIntervalId)
+		}
+	}, [isLogged])
 
 	const linkProps = () => {
 		if (popup) {

src/components/Pages/ProfilePage.tsx

@@ -98,11 +98,24 @@ const ProfilePage = ({ popup = false }: ProfilePageProps) => {
 
 			{/* <BlockTitle>Authentication</BlockTitle> */}
 			<List inset strong>
-				<ListButton
-					title={`Apple Music ${isLogged ? 'Logout' : 'Login'}`}
-					color={isLogged ? 'red' : 'blue'}
-					onClick={isLogged ? handleLogout : handleLogin}
-				/>
+				{/* <ListButton
+						title={`Apple Music ${isLogged ? 'Logout' : 'Login'}`}
+						color={isLogged ? 'red' : 'blue'}
+						onClick={isLogged ? handleLogout : handleLogin}
+					/> */}
+				{isLogged ? (
+					<ListButton
+						title={`Apple Music Logout`}
+						color={'red'}
+						onClick={handleLogout}
+					/>
+				) : (
+					<ListButton
+						title={`Apple Music Login`}
+						color={'blue'}
+						onClick={handleLogin}
+					/>
+				)}
 				<ListButton title="Logout" color="red" onClick={logout} />
 			</List>