Merge pull request #3 from MigHerCas/step3/wrap-up

Step3: Wrap up.

Author: MigHerCas

Diff for: package.json

@@ -11,24 +11,15 @@
     "lint": "tsc --noEmit && eslint --fix src/**/*.ts{,x}"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/enzyme": "^3.10.8",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
     "node-sass": "4.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.0",
     "react-test-renderer": "^17.0.1",
-    "typescript": "^4.0.3",
-    "web-vitals": "^0.2.4"
+    "typescript": "^4.0.3"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.7.0",

Diff for: src/App.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { TrackItem } from './api/track';
 import Grid from './components/layout/Grid';
 import Header from './components/layout/Header';
 import PlaylistsPanel from './components/PlaylistsPanel';
+import ErrorModal from './components/shared/ErrorModal';
 import TracksPanel from './components/TracksPanel';
 import useToken from './hooks/useToken';
 
@@ -12,12 +13,24 @@ const {
 } = process.env;
 
 export default function App(): JSX.Element {
-  const { accessToken } = useToken(
+  const { accessToken, accessError } = useToken(
     REACT_APP_SPOTIFY_ACCOUNT_TOKEN_API_URL,
     REACT_APP_SPOTIFY_AUTH_HEADER
   );
   const [selectedPlaylist, setSelectedPlaylist] = useState<string>('');
   const [selectedTracks, setSelectedTracks] = useState<TrackItem[]>([]);
+  const firstTrackRef = React.createRef<HTMLButtonElement>();
+
+  useEffect(() => {
+    if (firstTrackRef.current) {
+      // Added timeout to fit playlist item animation (300ms)
+      setTimeout(() => firstTrackRef?.current?.focus(), 300);
+    }
+  }, [firstTrackRef]);
+
+  if (accessError) {
+    return <ErrorModal error={accessError} />;
+  }
 
   return (
     <div className="App">
@@ -29,7 +42,7 @@ export default function App(): JSX.Element {
           setSelectedPlaylistId={setSelectedPlaylist}
           setSelectedTracks={setSelectedTracks}
         />
-        <TracksPanel tracks={selectedTracks} />
+        <TracksPanel tracks={selectedTracks} firstTrackRef={firstTrackRef} />
       </Grid>
     </div>
   );

Diff for: src/api/error.d.ts

@@ -0,0 +1 @@
+export type ApiError = 'Access error' | 'Fetch error' | '';

Diff for: src/components/PlaylistItem.tsx renamed to src/components/PlaylistComponent.tsx

@@ -2,6 +2,7 @@ import React, { Dispatch, SetStateAction } from 'react';
 import { TrackItem } from '../api/track';
 import { AccessToken } from '../api/user';
 import usePlaylist from '../hooks/usePlaylist';
+import ErrorModal from './shared/ErrorModal';
 
 interface Props {
   playlistId: string;
@@ -18,10 +19,23 @@ export default function PlaylistComponent({
   setSelectedPlaylistId,
   setSelectedTracks,
 }: Props): JSX.Element {
-  const { playlist } = usePlaylist(accessToken, playlistId);
+  const { playlist, playlistLoading, playlistError } = usePlaylist(
+    accessToken,
+    playlistId
+  );
+
   const { id, name, description, images, collaborative, tracks } = playlist;
 
+  const handleClick = () => {
+    setSelectedPlaylistId(id);
+    setSelectedTracks(tracks.items);
+  };
+
   // If playlist data has been fetched
+  if (playlistError) {
+    return <ErrorModal error={playlistError} />;
+  }
+
   if (id !== '') {
     return (
       <li className="playlist__item">
@@ -31,24 +45,26 @@ export default function PlaylistComponent({
           className={`playlist__button padding-default radius--big ${
             selectedPlaylistId === id ? 'selected' : ''
           }`}
-          onClick={() => {
-            setSelectedPlaylistId(id);
-            setSelectedTracks(tracks.items);
-          }}
+          onClick={handleClick}
         >
           <div className="playlist__image-wrapper">
             <img src={images[0].url} alt="Alt text" />
           </div>
           <div className="playlist__details">
-            <h2 className="playlist__title">{name}</h2>
+            <h2 className="playlist__title">
+              {playlistLoading ? 'Loading...' : name}
+            </h2>
             <h3 className="playlist__subtitle">
               {collaborative ? 'Collaborative' : 'Non collaborative'}
             </h3>
-            <p className="playlist__description">{description}</p>
+            <p className="playlist__description">
+              {playlistLoading ? 'Loading...' : description}
+            </p>
           </div>
         </button>
       </li>
     );
   }
-  return <p>Loading</p>;
+
+  return <></>;
 }

Diff for: src/components/PlaylistsPanel.tsx

@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction } from 'react';
 import { TrackItem } from '../api/track';
 import { AccessToken } from '../api/user';
 import DEFAULT_PLAYLISTS_IDS from '../constants/constants';
-import PlaylistComponent from './PlaylistItem';
+import PlaylistComponent from './PlaylistComponent';
 
 interface Props {
   accessToken: AccessToken;

Diff for: src/components/TrackComponent.tsx

@@ -1,29 +1,48 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import { Artist } from '../api/track';
 
 interface Props {
   trackName: string;
   artists: Artist[];
+  firstTrack: boolean;
+  firstTrackRef: RefObject<HTMLButtonElement>;
 }
 
+interface TrackButtonProps {
+  children: React.ReactNode;
+}
+
+type Ref = HTMLButtonElement;
+
 export default function TrackComponent({
   trackName,
   artists,
+  firstTrack = false,
+  firstTrackRef,
 }: Props): JSX.Element {
-  return (
-    <li className="track__item">
+  const TrackButton = React.forwardRef<Ref, TrackButtonProps>(
+    ({ children }: TrackButtonProps, ref) => (
       <button
         type="button"
+        ref={firstTrack ? ref : null}
         className="track__button padding-default radius--big"
       >
+        {children}
+      </button>
+    )
+  );
+
+  return (
+    <li className="track__item">
+      <TrackButton ref={firstTrackRef}>
         <h2 className="track__title">{trackName}</h2>
         {artists &&
           artists.map(({ id, name }) => (
             <h3 key={id} className="track__subtitle">
               {name}
             </h3>
           ))}
-      </button>
+      </TrackButton>
     </li>
   );
 }

Diff for: src/components/TracksPanel.tsx

@@ -1,24 +1,30 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import { TrackItem } from '../api/track';
 import TrackComponent from './TrackComponent';
 
 interface Props {
   tracks: TrackItem[];
+  firstTrackRef: RefObject<HTMLButtonElement>;
 }
 
-export default function TracksPanel({ tracks }: Props): JSX.Element {
+export default function TracksPanel({
+  tracks,
+  firstTrackRef,
+}: Props): JSX.Element {
   return (
     <section className="panel tracks-panel">
       <ol className="scrolling-wrapper padding-default shadow--dark radius--big">
         {tracks &&
-          tracks.map((trackItem) => {
+          tracks.map((trackItem, index) => {
             const { track } = trackItem;
 
             return (
               <TrackComponent
                 key={track.id}
                 trackName={track.name}
                 artists={track.artists}
+                firstTrack={index === 0}
+                firstTrackRef={firstTrackRef}
               />
             );
           })}

Diff for: src/components/shared/ErrorModal.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { ApiError } from '../../api/error';
+
+interface Props {
+  error: ApiError;
+}
+export default function ErrorModal({ error }: Props): JSX.Element {
+  let errorTitle;
+  let errorDescription;
+
+  switch (error) {
+    case 'Access error':
+      errorTitle = 'Something failed while trying to authenticate';
+      errorDescription =
+        'This might be caused by a network error or a login issue, check it out!';
+      break;
+    case 'Fetch error':
+      errorTitle = 'Something failed while trying to fetch a playlist.';
+      errorDescription = 'You better checkout your requested playlists ids!';
+      break;
+    default:
+  }
+
+  useEffect(() => {
+    document.querySelector('body')?.classList.add('locked-by-modal');
+  }, []);
+
+  return (
+    <div className="error-modal">
+      <h1 className="error-title">{errorTitle}</h1>
+      <h2 className="error-description">{errorDescription}</h2>
+    </div>
+  );
+}

Diff for: src/hooks/usePlaylist.ts

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react';
+import { ApiError } from '../api/error';
 import { PlaylistItem } from '../api/playlist';
 import { AccessToken } from '../api/user';
 import NullyPlaylist from '../utils';
 
 type PlaylistHookReturn = {
   playlist: PlaylistItem;
   playlistLoading: boolean;
-  playlistError: boolean;
+  playlistError: ApiError;
 };
 
 const { REACT_APP_SPOTIFY_PLAYLIST_URL } = process.env;
@@ -17,13 +18,13 @@ const usePlaylist = (
 ): PlaylistHookReturn => {
   const [playlist, setPlaylist] = useState<PlaylistItem>(NullyPlaylist);
   const [playlistLoading, setIsLoading] = useState(false);
-  const [playlistError, setIsError] = useState(false);
+  const [playlistError, setIsError] = useState<ApiError>('');
 
   useEffect(() => {
     const url = `${REACT_APP_SPOTIFY_PLAYLIST_URL}/${playlistId}`;
 
     const fetchPlaylist = async (): Promise<void> => {
-      setIsError(false);
+      setIsError('');
       setIsLoading(true);
 
       try {
@@ -35,6 +36,11 @@ const usePlaylist = (
         });
 
         const apiResponse = await response;
+
+        if (!apiResponse.ok) {
+          setIsError('Fetch error');
+        }
+
         const playlistItem: PlaylistItem = await apiResponse.json();
         setPlaylist(playlistItem);
         setIsLoading(false);

Diff for: src/hooks/useToken.ts

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
+import { ApiError } from '../api/error';
 import { AccessToken, AccessTokenResponse } from '../api/user';
 
 type UseTokenHookReturn = {
   accessToken: AccessToken | undefined;
   accessIsLoading: boolean;
-  accessError: boolean;
+  accessError: ApiError;
 };
 
 const useToken = (
@@ -13,12 +14,12 @@ const useToken = (
 ): UseTokenHookReturn => {
   const [accessToken, setAccessToken] = useState<AccessToken>();
   const [accessIsLoading, setAccessIsLoading] = useState(false);
-  const [accessError, setAccessError] = useState(false);
+  const [accessError, setAccessError] = useState<ApiError>('');
 
   useEffect(() => {
     const url = `${REACT_APP_SPOTIFY_ACCOUNT_TOKEN_API_URL}`;
     const getAccessToken = async (): Promise<void> => {
-      setAccessError(false);
+      setAccessError('');
       setAccessIsLoading(true);
 
       try {
@@ -36,7 +37,7 @@ const useToken = (
         setAccessToken(accessTokenResponse.access_token);
         setAccessIsLoading(false);
       } catch (error) {
-        setAccessError(error);
+        setAccessError('Access error');
       }
     };
 

Diff for: src/scss/_base.scss

@@ -21,6 +21,10 @@ body {
   scroll-behavior: smooth;
 }
 
+body.locked-by-modal {
+  overflow: hidden;
+}
+
 /*
   * Reset top margins on titles that are first-child.
 */