fix/save playlist status ui (#23)

* chore: updated dependencies

* fix: fixed style auth page

* refactor: improved accessibility

* fix: fixed ui for saving status

* chore: fixed CI

* chore: fixed version node

* chore: updated readme

* chore: fixed test command

.github/workflows/push_ci.yml

@@ -11,24 +11,22 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
         with:
-          node-version: "16.x"
-      - name: Cache Node.js modules
-        uses: actions/cache@v2
+          version: 9
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
-          path: ~/.npm
-          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.OS }}-node-
-            ${{ runner.OS }}-
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install
+        env:
+          CI: true
       - name: Run Lint
-        run: npm run lint
+        run: pnpm lint
       - name: Run Typecheck
-        run: npm run type-check
+        run: pnpm type-check
       - name: Run Unit Test
-        run: npm run unit
+        run: pnpm unit

.nvmrc

@@ -1 +1 @@
-16
+20

README.md

@@ -1,52 +1,75 @@
 # GigPlayList
 
-> Set you up for your next Gig.
+> **Get ready for your next gig with a personalized playlist.**
 
-Check a live example @ [https://gigplaylist.sirlisko.com/the%20strokes](http://gigplaylist.sirlisko.com/the%20strokes)
+Check out a live demo: [https://gigplaylist.sirlisko.com/the%20strokes](http://gigplaylist.sirlisko.com/the%20strokes)
 
 ---
 
-The Website is powered by [Next.JS](https://nextjs.org/) and hosted in [Vercel](https://vercel.com/).
+## Overview
+
+GigPlayList is a web app that curates playlists for upcoming gigs based on setlists and artist data. Powered by [Next.js](https://nextjs.org/) and hosted on [Vercel](https://vercel.com/), it integrates with external APIs like SetListFM, Songkick, and Spotify to create tailored music experiences.
 
 ## Getting Started
 
-The app needs Node 16, if you have [NVM](https://github.com/nvm-sh/nvm) installed just run `nvm use` in your terminal.
+### Prerequisites
 
-Install the dependencies:
+- **Node.js 20+**
+  Make sure you have Node.js version 20 or higher installed. You can easily manage your Node versions using [NVM](https://github.com/nvm-sh/nvm).
+  Run `nvm use` to switch to the correct version.
 
-```bash
-npm install
-```
+- [**pnpm**](https://pnpm.io/)
+  is used as the package manager. You can install it globally using:
 
-Create your `.env` file from `.env.sample`. You will need to grab some API keys (see below for more info).
+  ```bash
+  npm install -g pnpm
+  ```
 
-### Run the development server
+### Installation
 
-```bash
-npm run dev
-```
+1. Install project dependencies:
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+   ```bash
+   pnpm install
+   ```
 
-### API keys
+2. Create a `.env` file by copying the `.env.sample` file:
 
-The following API keys are needed in order to have everything up and running:
+   ```bash
+   cp .env.sample .env
+   ```
 
-- [SetListFM](https://api.setlist.fm/docs/1.0/index.html)
+3. Obtain API keys from the services listed below and add them to your `.env` file.
 
-```bash
-export SETLISTFMAPIKEY={token}
-```
+### Running the Development Server
 
-- [Songkick](https://www.songkick.com/api_key_requests/new)
+To start the app in development mode, run:
 
 ```bash
-export SKAPI={token}
+pnpm dev
 ```
 
-- [Spotify Auth Token](https://developer.spotify.com)
+Then, open [http://localhost:3000](http://localhost:3000) in your browser to view the app.
 
-```bash
-export NEXT_PUBLIC_SPOTIFY_CLIENT_ID={clientId} // needs NEXT_PUBLIC as it needs to be accessed to the client
-export SPOTIFY_SECRET={clientSecret}
-```
+## API Keys Setup
+
+The following API keys are required to enable full functionality:
+
+- **[SetListFM API](https://api.setlist.fm/docs/1.0/index.html)**
+
+  ```bash
+  export SETLISTFMAPIKEY={your_token}
+  ```
+
+- **[Songkick API](https://www.songkick.com/api_key_requests/new)**
+
+  ```bash
+  export SKAPI={your_token}
+  ```
+
+- **[Spotify API](https://developer.spotify.com)**
+
+  ```bash
+  export NEXT_PUBLIC_SPOTIFY_CLIENT_ID={your_client_id} # needs NEXT_PUBLIC as it needs to be accessed to the client
+  export SPOTIFY_SECRET={your_client_secret}
+  ```

components/Home/Search.tsx

@@ -13,6 +13,9 @@ const Search = () => {
   return (
     <form className="w-full max-w-md mb-12" onSubmit={onFormSubmit}>
       <div className="relative">
+        <label htmlFor="search" className="sr-only">
+          Search for an artist:
+        </label>
         <input
           id="search"
           type="search"
@@ -26,6 +29,7 @@ const Search = () => {
         <button
           className="absolute right-4 top-1/2 transform -translate-y-1/2 text-white"
           type="submit"
+          aria-labelledby="search"
         >
           <SearchIcon />
         </button>

components/LoginBanner/LoginBanner.tsx

@@ -6,9 +6,10 @@ import { LogIn } from "lucide-react";
 
 interface Props {
   onCreatePlaylist?: () => void;
+  showDesc?: boolean;
 }
 
-const LoginBanner = ({ onCreatePlaylist }: Props) => {
+const LoginBanner = ({ onCreatePlaylist, showDesc }: Props) => {
   const [redirect, setRedirect] = useState<string>();
   const { user } = useAuth();
   const { isReady, asPath, push } = useRouter();
@@ -42,11 +43,13 @@ const LoginBanner = ({ onCreatePlaylist }: Props) => {
             </button>
           ) : (
             <div onClick={onClick}>
-              <button className="w-full max-w-xs mx-auto py-3 bg-green-500 text-white rounded-full font-bold hover:bg-green-600 transition-all flex items-center justify-center">
+              <button className="w-full max-w-xs mx-auto p-3 bg-green-500 text-white rounded-full font-bold hover:bg-green-600 transition-all flex items-center justify-center">
                 <LogIn size={18} className="mr-2" />
                 LOGIN TO SPOTIFY
               </button>
-              <p className="mt-2 text-sm opacity-75">to save your playlist</p>
+              {showDesc && (
+                <p className="mt-2 text-sm opacity-75">to save your playlist</p>
+              )}
             </div>
           )}
         </>

components/Result/Result.tsx

@@ -16,16 +16,8 @@ interface Props {
 }
 
 const Result = ({ artistName }: Props) => {
-  const {
-    artistData,
-    isLoading: isLoadingArtist,
-    isError: artistError,
-  } = useArtistData(artistName);
-  const {
-    tracks,
-    isError: trackError,
-    isLoading: isLoadingTracks,
-  } = useTracks(artistName);
+  const { artistData, isLoading: isLoadingArtist } = useArtistData(artistName);
+  const { tracks, isLoading: isLoadingTracks } = useTracks(artistName);
   const { events } = useEvents(artistName);
 
   const from = `rgba(${artistData?.palette?.DarkVibrant.rgb.join(",")},100)`;
@@ -53,7 +45,10 @@ const Result = ({ artistName }: Props) => {
       <div className="w-full max-w-2xl mx-auto">
         <header className="flex justify-between items-center mb-6">
           <Link href="/" passHref>
-            <button className="text-white hover:text-gray-300">
+            <button
+              className="text-white hover:text-gray-300"
+              aria-label="Go to homepage"
+            >
               <ArrowLeft size={24} />
             </button>
           </Link>

components/SavePlaylist/SavePlaylist.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import Spotify from "spotify-web-api-js";
-import { MdDownloading, MdCheckCircle } from "react-icons/md";
 
 import { useAuth } from "components/UserContext/UserContext";
 import LoginBanner from "components/LoginBanner/LoginBanner";
 import { matchSongs } from "utils/matchSongs";
 import { Track, ArtistData } from "types";
+import { CassetteTape, CircleCheckBig } from "lucide-react";
 
 interface SavePlaylistProps {
   artistData: ArtistData;
@@ -44,11 +44,16 @@ const SavePlaylist = ({
   return (
     <div className="text-center mb-8">
       {loading ? (
-        <MdDownloading />
+        <p className="m-12 text-lg font-medium flex items-center justify-center">
+          <CassetteTape className="mr-1 animate-bounce" /> Generating your
+          playlist...
+        </p>
       ) : done ? (
-        <MdCheckCircle />
+        <p className="m-12 text-lg font-medium flex items-center justify-center">
+          <CircleCheckBig className="mr-2" /> Playlist created!
+        </p>
       ) : (
-        <LoginBanner onCreatePlaylist={createPlaylist} />
+        <LoginBanner onCreatePlaylist={createPlaylist} showDesc />
       )}
     </div>
   );

components/Tracks/Tracks.tsx

@@ -109,6 +109,8 @@ const Tracks = ({ tracks, links, palette }: TracksProps) => {
                 <button
                   onClick={() => handlePreview(link.previewUrl, title)}
                   className={classNames("absolute left-0 top-0 h-full p-3")}
+                  aria-pressed={isPlaying}
+                  aria-label={isPlaying ? "Pause" : "Play"}
                 >
                   {isPlaying ? (
                     <PauseIcon
@@ -125,7 +127,7 @@ const Tracks = ({ tracks, links, palette }: TracksProps) => {
             </div>
             <div className="flex items-center space-x-2">
               {link?.uri && (
-                <a href={link.uri}>
+                <a href={link.uri} aria-label="Open song in Spotify">
                   <SpotifyLogo />
                 </a>
               )}