Improve access token handling

index.js

@@ -6,11 +6,14 @@ import {AppRegistry} from 'react-native';
 import App from './src/App';
 import {name as appName} from './app.json';
 import {AuthProvider} from './src/contexts/AuthContext';
+import {StrictMode} from 'react';
 
 const Root = () => (
-  <AuthProvider>
-    <App />
-  </AuthProvider>
+  <StrictMode>
+    <AuthProvider>
+      <App />
+    </AuthProvider>
+  </StrictMode>
 );
 
 AppRegistry.registerComponent(appName, () => Root);

src/App.tsx

@@ -11,7 +11,7 @@ import Header from './components/headers/Header';
 type Screen = 'playlists' | 'tracks' | 'compare';
 
 function App(): React.JSX.Element {
-  const isAuthenticated = useAuth();
+  const {isAuthenticated} = useAuth();
   const [selectedPlaylists, setSelectedPlaylists] = useState<SpotifyPlaylist[]>(
     [],
   );
@@ -60,7 +60,7 @@ function App(): React.JSX.Element {
 
   return (
     <>
-      <Header title={'SuperSetlist'} images={[]} />
+      <Header title={'SuperSetlist'} imageUris={[]} />
       {isAuthenticated && screen !== 'playlists' && (
         <BackToPlaylistsButton clearAllPlaylists={clearAllPlaylists} />
       )}

src/components/AuthButton.tsx

@@ -1,7 +1,10 @@
 import {Pressable, StyleSheet, Text} from 'react-native';
 import {SPOTIFY_GREEN} from '../theme/colors';
 import {useAuth} from '../contexts/AuthContext';
-import {AuthButtonProps} from '../types/SpotifyPlaylistProps';
+
+type AuthButtonProps = {
+  clearAllPlaylists: () => void;
+};
 
 export default function AuthButton({clearAllPlaylists}: AuthButtonProps) {
   const {login, logout, isAuthenticated} = useAuth();

src/components/BackToPlaylistsButton.tsx

@@ -1,6 +1,9 @@
 import {Pressable, StyleSheet, Text} from 'react-native';
 import {SPOTIFY_GREEN} from '../theme/colors';
-import {BackToPlaylistsButtonProps} from '../types/SpotifyPlaylistProps';
+
+type BackToPlaylistsButtonProps = {
+  clearAllPlaylists: () => void;
+};
 
 export default function BackToPlaylistsButton({
   clearAllPlaylists,

src/components/CompareTracks.tsx

@@ -1,58 +1,71 @@
-import {useState, useEffect, useMemo} from 'react';
-import {SpotifyTrack} from '../types/SpotifyPlaylist';
+import {useMemo} from 'react';
+import {SpotifyPlaylist, SpotifyTrack} from '../types/SpotifyPlaylist';
 import Tracks from './Tracks';
-import {getPlaylistTracks} from '../services/trackService';
-import {useAuth} from '../contexts/AuthContext';
-import {SpotifyTracksComparisonProps} from '../types/SpotifyPlaylistProps';
 import {View, StyleSheet} from 'react-native';
 import {getSharedTracks} from '../utils/trackUtils';
 import PlaylistHeader from './headers/PlaylistHeader';
 import CompareTracksHeader from './headers/CompareTracksHeader';
+import ErrorMessage from './ErrorMessage';
+import {useFetchTracks} from '../hooks/useFetchSpotify';
+import Loader from './Loader';
+
+type SpotifyTracksComparisonProps = {
+  selectedPlaylists: SpotifyPlaylist[];
+};
 
 export default function TracksComparison({
   selectedPlaylists,
 }: SpotifyTracksComparisonProps) {
   const [leftPlaylist, rightPlaylist] = selectedPlaylists;
-  const [leftTracks, setLeftTracks] = useState<SpotifyTrack[]>([]);
-  const [rightTracks, setRightTracks] = useState<SpotifyTrack[]>([]);
-  const {auth} = useAuth();
-  const accessToken = auth?.accessToken;
 
-  const sharedTracks = useMemo(
-    () => getSharedTracks(leftTracks, rightTracks),
-    [leftTracks, rightTracks],
-  );
+  const {
+    data: leftTracks,
+    error: leftError,
+    isLoading: leftIsLoading,
+  } = useFetchTracks(leftPlaylist.id);
+  const {
+    data: rightTracks,
+    error: rightError,
+    isLoading: rightIsLoading,
+  } = useFetchTracks(rightPlaylist.id);
 
-  useEffect(() => {
-    if (!accessToken || !leftPlaylist || !rightPlaylist) {
-      setLeftTracks([]);
-      setRightTracks([]);
-      return;
-    }
-    Promise.all([
-      getPlaylistTracks(leftPlaylist.id, accessToken),
-      getPlaylistTracks(rightPlaylist.id, accessToken),
-    ])
-      .then(([lData, rData]) => {
-        setLeftTracks(lData);
-        setRightTracks(rData);
-      })
-      .catch(console.error);
-  }, [accessToken, leftPlaylist.id, rightPlaylist.id]);
+  const sharedTracks = useMemo(() => {
+    if (!leftTracks || !rightTracks) return null;
+    return getSharedTracks(leftTracks, rightTracks);
+  }, [leftTracks, rightTracks]);
+
+  const renderCompareTracksColumn = (
+    playlist: SpotifyPlaylist,
+    tracks: SpotifyTrack[] | null,
+    error: Error | null,
+    isLoading: boolean,
+  ) => (
+    <View style={styles.column}>
+      <PlaylistHeader spotifyPlaylist={playlist} />
+      <Loader isLoading={isLoading} />
+      <ErrorMessage error={error} />
+      {tracks && <Tracks spotifyTracks={tracks} size={'small'} />}
+    </View>
+  );
 
   return (
     <>
       <CompareTracksHeader spotifyPlaylists={selectedPlaylists} />
-      <Tracks spotifyTracks={sharedTracks} />
+      <Loader isLoading={leftIsLoading || rightIsLoading} />
+      {sharedTracks && <Tracks spotifyTracks={sharedTracks} />}
       <View style={styles.container}>
-        <View style={styles.column}>
-          <PlaylistHeader spotifyPlaylist={leftPlaylist} />
-          <Tracks spotifyTracks={leftTracks} size={'small'} />
-        </View>
-        <View style={styles.column}>
-          <PlaylistHeader spotifyPlaylist={rightPlaylist} />
-          <Tracks spotifyTracks={rightTracks} size={'small'} />
-        </View>
+        {renderCompareTracksColumn(
+          leftPlaylist,
+          leftTracks,
+          leftError,
+          leftIsLoading,
+        )}
+        {renderCompareTracksColumn(
+          rightPlaylist,
+          rightTracks,
+          rightError,
+          rightIsLoading,
+        )}
       </View>
     </>
   );

src/components/ErrorMessage.tsx

@@ -0,0 +1,27 @@
+import {View, Text, StyleSheet} from 'react-native';
+
+type ErrorMessageProps = {
+  error: Error | null;
+};
+
+export default function ErrorMessage({error}: ErrorMessageProps) {
+  if (!error) return null;
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>{error.message}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+    backgroundColor: '#fdecea', // light red
+    borderRadius: 4,
+    marginVertical: 4,
+  },
+  text: {
+    color: '#b00020', // dark red
+    fontSize: 14,
+  },
+});

src/components/Loader.tsx

@@ -0,0 +1,13 @@
+import {ActivityIndicator} from 'react-native';
+import {SPOTIFY_GREEN} from '../theme/colors';
+
+type LoaderProps = {
+  isLoading: boolean;
+  size?: 'small' | 'large';
+};
+
+export default function Loader({isLoading, size = 'large'}: LoaderProps) {
+  return (
+    <>{isLoading && <ActivityIndicator size={size} color={SPOTIFY_GREEN} />}</>
+  );
+}

src/components/Playlist.tsx

@@ -1,13 +1,21 @@
 import {Image, Pressable, StyleSheet, Text, View} from 'react-native';
 import {PLAYLIST_BG} from '../theme/colors';
-import {SpotifyPlaylistProps} from '../types/SpotifyPlaylistProps';
+import {SpotifyPlaylistActions} from '../types/SpotifyPlaylistProps';
+import {SpotifyPlaylist} from '../types/SpotifyPlaylist';
+import {getUriFromImages} from '../utils/spotifyImages';
+
+type SpotifyPlaylistProps = SpotifyPlaylistActions & {
+  spotifyPlaylist: SpotifyPlaylist;
+  isSelected: boolean;
+};
 
 export default function Playlist({
   spotifyPlaylist,
   isSelected,
   updateSelectedPlaylists,
   focusPlaylist,
 }: SpotifyPlaylistProps) {
+  const imageUri = getUriFromImages(spotifyPlaylist.images);
   const getBackgroundColor = (pressed: boolean) => {
     if (pressed) return PLAYLIST_BG.pressed;
     return isSelected ? PLAYLIST_BG.selected : PLAYLIST_BG.default;
@@ -22,10 +30,9 @@ export default function Playlist({
         },
       ]}>
       <View style={styles.container}>
-        <Image
-          source={{uri: spotifyPlaylist.images[0]?.url}}
-          style={{width: 100, height: 100}}
-        />
+        {imageUri && (
+          <Image source={{uri: imageUri}} style={{width: 100, height: 100}} />
+        )}
         <View style={styles.textContainer}>
           <Text style={styles.name}>{spotifyPlaylist.name}</Text>
           <Text style={styles.description}>{spotifyPlaylist.description}</Text>

src/components/PlaylistTracks.tsx

@@ -1,32 +1,24 @@
-import {useEffect, useState} from 'react';
-import {SpotifyPlaylist, SpotifyTrack} from '../types/SpotifyPlaylist';
-import {getPlaylistTracks} from '../services/trackService';
-import {useAuth} from '../contexts/AuthContext';
+import {SpotifyPlaylist} from '../types/SpotifyPlaylist';
 import Tracks from './Tracks';
 import {View, StyleSheet} from 'react-native';
 import PlaylistHeader from './headers/PlaylistHeader';
+import ErrorMessage from './ErrorMessage';
+import {useFetchTracks} from '../hooks/useFetchSpotify';
+import Loader from './Loader';
 
 type PlaylistTracksProps = {
   spotifyPlaylist: SpotifyPlaylist;
 };
 
 export default function PlaylistTracks({spotifyPlaylist}: PlaylistTracksProps) {
-  const [tracks, setTracks] = useState<SpotifyTrack[]>([]);
-  const {auth} = useAuth();
-  const accessToken = auth?.accessToken;
-
-  useEffect(() => {
-    if (!accessToken || !spotifyPlaylist) return;
-
-    getPlaylistTracks(spotifyPlaylist.id, accessToken)
-      .then(setTracks)
-      .catch(console.error);
-  }, [accessToken, spotifyPlaylist.id]);
+  const {data: tracks, error, isLoading} = useFetchTracks(spotifyPlaylist.id);
 
   return (
     <View style={styles.column}>
       <PlaylistHeader spotifyPlaylist={spotifyPlaylist} />
-      <Tracks spotifyTracks={tracks} />
+      <Loader isLoading={isLoading} />
+      <ErrorMessage error={error} />
+      {tracks && <Tracks spotifyTracks={tracks} />}
     </View>
   );
 }

src/components/Playlists.tsx

@@ -1,44 +1,42 @@
-import {useEffect, useState} from 'react';
 import {SpotifyPlaylist} from '../types/SpotifyPlaylist';
-import {SpotifyPlaylistsProps} from '../types/SpotifyPlaylistProps';
-import {getPlaylists} from '../services/playlistService';
+import {SpotifyPlaylistActions} from '../types/SpotifyPlaylistProps';
 import Playlist from './Playlist';
 import Header from './headers/Header';
-import {useAuth} from '../contexts/AuthContext';
 import {FlatList} from 'react-native';
+import ErrorMessage from './ErrorMessage';
+import {useFetchPlaylists} from '../hooks/useFetchSpotify';
+import Loader from './Loader';
+
+type SpotifyPlaylistsProps = SpotifyPlaylistActions & {
+  selectedPlaylists: SpotifyPlaylist[];
+};
 
 export default function Playlists({
   selectedPlaylists,
   updateSelectedPlaylists,
   focusPlaylist,
 }: SpotifyPlaylistsProps) {
-  const [playlists, setPlaylists] = useState<SpotifyPlaylist[] | null>(null);
-  const {auth} = useAuth();
-  const accessToken = auth?.accessToken;
-
-  useEffect(() => {
-    if (!accessToken) {
-      setPlaylists(null);
-      return;
-    }
-    getPlaylists(accessToken).then(setPlaylists).catch(console.error);
-  }, [accessToken]);
+  const {data: playlists, error, isLoading} = useFetchPlaylists();
 
   return (
     <>
-      <Header title={'All Playlists'} images={[]} />
-      <FlatList
-        data={playlists}
-        renderItem={({item}) => (
-          <Playlist
-            spotifyPlaylist={item}
-            isSelected={!!selectedPlaylists.some(p => p.id === item.id)}
-            updateSelectedPlaylists={updateSelectedPlaylists}
-            focusPlaylist={focusPlaylist}
-          />
-        )}
-        keyExtractor={item => item.id}
-      />
+      <Header title={'All Playlists'} imageUris={[]} />
+      <Loader isLoading={isLoading} />
+      <ErrorMessage error={error} />
+      {playlists && (
+        <FlatList
+          data={playlists}
+          renderItem={({item}) => (
+            <Playlist
+              spotifyPlaylist={item}
+              isSelected={!!selectedPlaylists.some(p => p.id === item.id)}
+              updateSelectedPlaylists={updateSelectedPlaylists}
+              focusPlaylist={focusPlaylist}
+            />
+          )}
+          keyExtractor={item => item.id}
+        />
+      )}
     </>
   );
 }

src/components/Track.tsx

@@ -1,5 +1,11 @@
 import {Image, StyleSheet, Text, View} from 'react-native';
-import {SpotifyTrackProps} from '../types/SpotifyPlaylistProps';
+import {SpotifyTrack} from '../types/SpotifyPlaylist';
+import {getUriFromImages} from '../utils/spotifyImages';
+
+type SpotifyTrackProps = {
+  spotifyTrack: SpotifyTrack;
+  size?: 'small' | 'large';
+};
 
 const IMAGE_SIZE_MAP = {
   small: 65,
@@ -10,13 +16,16 @@ export default function Track({
   spotifyTrack,
   size = 'large',
 }: SpotifyTrackProps) {
+  const imageUri = getUriFromImages(spotifyTrack.album.images);
   const imageSize = IMAGE_SIZE_MAP[size];
   return (
     <View style={styles.container}>
-      <Image
-        source={{uri: spotifyTrack.album.images[0]?.url}}
-        style={{width: imageSize, height: imageSize}}
-      />
+      {imageUri && (
+        <Image
+          source={{uri: imageUri}}
+          style={{width: imageSize, height: imageSize}}
+        />
+      )}
       <View style={styles.textContainer}>
         <Text style={styles.name}>{spotifyTrack.name}</Text>
         <Text style={styles.description}>{spotifyTrack.artists[0].name}</Text>