From d40fc733a472a3e27bb70b532d8dbfd7e4c97b13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20R=C3=A4diker?= <git@flra.eu>
Date: Thu, 7 Sep 2023 22:41:25 +0200
Subject: [PATCH] Simplify login and make tracks selectable

---
 package.json           |   2 +-
 src/Main.tsx           |  63 ++++++++++++++++
 src/api.tsx            |   3 +-
 src/app/app.tsx        | 159 ++++++++++++++++++++++++-----------------
 src/app/components.tsx |  73 +++++++++++++++----
 src/app/util.tsx       |  17 +++--
 src/home.tsx           |  26 +++----
 src/index.tsx          |  11 +--
 8 files changed, 241 insertions(+), 113 deletions(-)
 create mode 100644 src/Main.tsx

diff --git a/package.json b/package.json
index f4b85e8..72607b1 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
-		"build": "vite build && mkdir -p ./dist/app && cp ./dist/index.html ./dist/app/index.html",
+		"build": "vite build",
 		"preview": "vite preview"
 	},
 	"dependencies": {
diff --git a/src/Main.tsx b/src/Main.tsx
new file mode 100644
index 0000000..7de682e
--- /dev/null
+++ b/src/Main.tsx
@@ -0,0 +1,63 @@
+import { IRedirectionStrategy, SpotifyApi } from "@spotify/web-api-ts-sdk"
+import { useEffect, useState } from "preact/hooks"
+import { createApiClient } from "./api"
+import App from "./app/app"
+import Home from "./home"
+
+export default function Main() {
+  const [spotify, setSpotify] = useState<SpotifyApi>(null)
+  const [authError, setAuthError] = useState<string>(null)
+
+  useEffect(() => {
+    // check if user is already authenticated
+    ;(async () => {
+      try {
+        // do not redirect here, since this means user is not authenticated, do nothing instead
+        class NoRedirectionStrategy implements IRedirectionStrategy {
+          public async redirect(_targetUrl: string | URL): Promise<void> {
+            return
+          }
+          public async onReturnFromRedirect(): Promise<void> {}
+        }
+        const sdk = createApiClient(new NoRedirectionStrategy())
+        const { authenticated } = await sdk.authenticate()
+        if (authenticated && !spotify) {
+          setSpotify(sdk)
+        }
+      } catch (e) {
+        console.info("User is not authenticated", e)
+      }
+    })()
+  }, [])
+
+  if (spotify) {
+    return (
+      <App
+        onLogout={() => {
+          spotify.logOut()
+          setSpotify(null)
+        }}
+        spotify={spotify}
+      />
+    )
+  }
+
+  return (
+    <Home
+      authError={authError}
+      onLogin={async () => {
+        try {
+          const sdk = createApiClient()
+          const { authenticated } = await sdk.authenticate()
+          if (authenticated) {
+            // this should never be reached since authenticate redirects
+            setSpotify(sdk)
+          }
+        } catch (e: Error | unknown) {
+          console.error(e)
+          setAuthError(e.toString() || "")
+        }
+      }}
+    />
+  )
+}
diff --git a/src/api.tsx b/src/api.tsx
index 349c496..caf1753 100644
--- a/src/api.tsx
+++ b/src/api.tsx
@@ -23,7 +23,7 @@ export const createApiClient = (
     import.meta.env.VITE_SPOTIFY_CLIENT_ID,
     import.meta.env.PROD
       ? import.meta.env.VITE_SPOTIFY_REDIRECT_URI
-      : "http://localhost:3000/app",
+      : "http://localhost:3000",
     Scopes.playlistRead,
     config,
   )
@@ -35,7 +35,6 @@ async function* getPaginatedItems<T>(
 ): AsyncGenerator<{ total: number; item: T }> {
   let resp = await firstResponse
   const items = resp.items
-  let counter = 1
   for (let item of items) {
     yield Promise.resolve({ total: resp.total, item })
   }
diff --git a/src/app/app.tsx b/src/app/app.tsx
index 1768973..018b2b0 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -1,11 +1,6 @@
 import { SpotifyApi } from "@spotify/web-api-ts-sdk"
-import { route } from "preact-router"
 import { useEffect, useState } from "preact/hooks"
-import {
-  IRedirectionStrategy,
-  User,
-} from "../../node_modules/@spotify/web-api-ts-sdk/src/types"
-import { createApiClient } from "../api"
+import { User } from "../../node_modules/@spotify/web-api-ts-sdk/src/types"
 import Scaffold from "../scaffold"
 import { PlaylistsView } from "./components"
 import {
@@ -15,43 +10,26 @@ import {
 } from "./util"
 import noScooterCircle from "/img/no_scooter_circle.svg?url"
 
-export default function App(_props: any) {
+export default function App({
+  onLogout,
+  spotify,
+}: {
+  onLogout: () => void
+  spotify: SpotifyApi
+}) {
   const [user, setUser] = useState<User>(null)
   const [scanProgress, setScanProgress] = useState<PlaylistScanProgress>({
     progress: 0,
     currentPlaylistName: null,
   })
-  const [replaces, setReplaces] = useState<{
-    spotify: SpotifyApi
-    playlists: ScannedPlaylist[]
-  }>(null)
+  const [playlists, setPlaylists] = useState<ScannedPlaylist[]>(null)
 
   useEffect(() => {
     ;(async () => {
-      // do not redirect here, since this means user is not authenticated
-      // route to Home instead
-      class HomeRedirectionStrategy implements IRedirectionStrategy {
-        public async redirect(_targetUrl: string | URL): Promise<void> {
-          route("/")
-        }
-        public async onReturnFromRedirect(): Promise<void> {}
-      }
-      const spotify = createApiClient(new HomeRedirectionStrategy())
-      const accessToken = await spotify.authenticate()
-      if (accessToken.access_token === "") {
-        route("/")
-      } else {
-        const user = await spotify.currentUser.profile()
-        setUser(user)
-
-        const playlists = await scanUserPlaylists(
-          spotify,
-          user,
-          setScanProgress,
-        )
-
-        setReplaces({ playlists, spotify })
-      }
+      const user = await spotify.currentUser.profile()
+      setUser(user)
+      const playlists = await scanUserPlaylists(spotify, user, setScanProgress)
+      setPlaylists(playlists)
     })()
   }, [])
 
@@ -68,37 +46,17 @@ export default function App(_props: any) {
           <div class="my-2 inline-block">Taylor’s Version</div>
         </div>
         <div class="float-right my-2 inline-block align-middle">
-          <LogOutButton
-            user={user}
-            onLogOut={() => {
-              localStorage.removeItem(
-                "spotify-sdk:AuthorizationCodeWithPKCEStrategy:token",
-              )
-              route("/")
-            }}
-          />
+          <LogOutButton user={user} onLogout={onLogout} />
         </div>
       </header>
-      {replaces == null ? (
-        <div class="text-center">
-          <div class="mb-2 text-lg">Scanning your playlists...</div>
-          <div class="h-2 w-44 rounded-full bg-neutral-600">
-            <div
-              class="h-full rounded-full bg-[#1db954]"
-              style={{ width: `${scanProgress.progress * 100}%` }}
-            ></div>
-          </div>
-          <div class="text-neutral-400">
-            {scanProgress.currentPlaylistName || <>&nbsp;</>}
-          </div>
-        </div>
+      {playlists == null ? (
+        <ScanProgress scanProgress={scanProgress} />
       ) : (
-        <div class="w-full grow p-5">
-          <PlaylistsView
-            playlists={replaces.playlists}
-            spotify={replaces.spotify}
-          />
-        </div>
+        <PlaylistEditor
+          playlists={playlists}
+          onUpdatePlaylists={p => setPlaylists(p)}
+          spotify={spotify}
+        />
       )}
     </Scaffold>
   )
@@ -106,17 +64,17 @@ export default function App(_props: any) {
 
 function LogOutButton({
   user,
-  onLogOut,
+  onLogout,
 }: {
   user: User
-  onLogOut: () => void
+  onLogout: () => void
 }) {
   const profileImage =
     user && user.images.reduce((p, c) => (p.width < c.width ? c : p))
   return (
     <button
       class="rounded-full bg-[#555555] p-2 text-sm font-semibold sm:text-xl"
-      onClick={onLogOut}
+      onClick={onLogout}
     >
       <span class="flex items-center gap-2">
         <img
@@ -128,3 +86,72 @@ function LogOutButton({
     </button>
   )
 }
+
+const ScanProgress = ({
+  scanProgress,
+}: {
+  scanProgress: PlaylistScanProgress
+}) => {
+  return (
+    <div class="text-center">
+      <div class="mb-2 text-lg">Scanning your playlists...</div>
+      <div class="h-2 w-44 rounded-full bg-neutral-600">
+        <div
+          class="h-full rounded-full bg-[#1db954]"
+          style={{ width: `${scanProgress.progress * 100}%` }}
+        ></div>
+      </div>
+      <div class="text-neutral-400">
+        {scanProgress.currentPlaylistName || <>&nbsp;</>}
+      </div>
+    </div>
+  )
+}
+
+const PlaylistEditor = ({
+  playlists,
+  onUpdatePlaylists,
+  spotify,
+}: {
+  playlists: ScannedPlaylist[]
+  onUpdatePlaylists: (playlists: ScannedPlaylist[]) => void
+  spotify: SpotifyApi
+}) => {
+  return (
+    <div class="w-full grow p-5">
+      <PlaylistsView
+        playlists={playlists}
+        spotify={spotify}
+        onSelectPlaylist={(playlistIndex: number, selected: boolean) => {
+          onUpdatePlaylists(
+            playlists.map((p, i) => ({
+              ...p,
+              replacements: p.replacements.map(r => ({
+                ...r,
+                selected: i === playlistIndex ? selected : r.selected,
+              })),
+            })),
+          )
+        }}
+        onSelectTrack={(
+          playlistIndex: number,
+          trackIndex: number,
+          selected: boolean,
+        ) => {
+          onUpdatePlaylists(
+            playlists.map((p, i) => ({
+              ...p,
+              replacements: p.replacements.map(r => ({
+                ...r,
+                selected:
+                  i === playlistIndex && r.position === trackIndex
+                    ? selected
+                    : r.selected,
+              })),
+            })),
+          )
+        }}
+      />
+    </div>
+  )
+}
diff --git a/src/app/components.tsx b/src/app/components.tsx
index 5563afd..4ee4fa2 100644
--- a/src/app/components.tsx
+++ b/src/app/components.tsx
@@ -7,14 +7,22 @@ import { ScannedPlaylist, TrackReplacement } from "./util"
 export const PlaylistsView = ({
   playlists,
   spotify,
+  onSelectPlaylist,
+  onSelectTrack,
 }: {
   playlists: ScannedPlaylist[]
   spotify: SpotifyApi
+  onSelectPlaylist: (playlistIndex: number, selected: boolean) => void
+  onSelectTrack: (
+    playlistIndex: number,
+    trackIndex: number,
+    selected: boolean,
+  ) => void
 }) => {
   const [extended, setExtended] = useState<string>(null)
   return (
     <div class="mx-auto w-full max-w-7xl">
-      {playlists.map(playlist => (
+      {playlists.map((playlist, i) => (
         <PlaylistView
           playlist={playlist}
           isExtended={extended === playlist.id}
@@ -23,6 +31,10 @@ export const PlaylistsView = ({
               ? setExtended(null)
               : setExtended(playlist.id)
           }
+          onSelectPlaylist={selected => onSelectPlaylist(i, selected)}
+          onSelectTrack={(trackIndex, selected) =>
+            onSelectTrack(i, trackIndex, selected)
+          }
           spotify={spotify}
         />
       ))}
@@ -34,11 +46,15 @@ const PlaylistView = ({
   playlist,
   isExtended,
   onToggle,
+  onSelectPlaylist,
+  onSelectTrack,
   spotify,
 }: {
   playlist: ScannedPlaylist
   isExtended: boolean
   onToggle: () => void
+  onSelectPlaylist: (selected: boolean) => void
+  onSelectTrack: (trackIndex: number, selected: boolean) => void
   spotify: SpotifyApi
 }) => {
   const ref = useRef<HTMLDivElement>()
@@ -47,38 +63,63 @@ const PlaylistView = ({
     if (isExtended) ref.current.scrollIntoView({ behavior: "smooth" })
   }, [isExtended])
 
+  const isAllSelected = playlist.replacements.every(r => r.selected)
+  const isIndeterminate =
+    !isAllSelected && playlist.replacements.some(r => r.selected)
+
   return (
     <div
-      class="mb-7 w-full cursor-pointer rounded-lg bg-[#202020] p-3 hover:bg-[#282828]"
-      onClick={() => onToggle()}
+      class="mb-7 w-full rounded-lg bg-[#202020] hover:bg-[#282828]"
       ref={ref}
     >
-      <div class="sticky top-0 flex items-center gap-5 bg-inherit p-4">
+      <div
+        class="sticky top-0 flex cursor-pointer items-center gap-5 bg-inherit p-7"
+        onClick={() => onToggle()}
+      >
         {playlist.images[0] ? (
           <img src={playlist.images[0].url} class="h-24 w-24" />
         ) : (
           <PlaylistPlaceholderIcon class="h-24 w-24" />
         )}
 
-        <div class="text-2xl">{playlist.name}</div>
-      </div>
-      {isExtended && (
-        <div class="p-4">
-          {playlist.replacements.map(r => {
-            return <ReplacementView replacement={r} spotify={spotify} />
-          })}
+        <div class="grow text-2xl">{playlist.name}</div>
+        <div class="flex h-12 w-12 items-center justify-center self-center">
+          <input
+            type="checkbox"
+            class="h-6 w-6 cursor-pointer"
+            checked={isAllSelected}
+            indeterminate={isIndeterminate}
+            onChange={e => onSelectPlaylist(e.currentTarget.checked)}
+            onClick={e => e.stopPropagation()}
+          />
         </div>
-      )}
+      </div>
+      <div class="p-7 pt-4" hidden={!isExtended}>
+        {playlist.replacements.map(r => {
+          return (
+            <ReplacementView
+              replacement={r}
+              selected={r.selected}
+              spotify={spotify}
+              onSelect={selected => onSelectTrack(r.position, selected)}
+            />
+          )
+        })}
+      </div>
     </div>
   )
 }
 
 const ReplacementView = ({
   replacement,
+  selected,
   spotify,
+  onSelect,
 }: {
   replacement: TrackReplacement
+  selected: boolean
   spotify: SpotifyApi
+  onSelect: (selected: boolean) => void
 }) => {
   const TrackView = ({ track }: { track: Track }) => (
     <div class="flex min-w-0 gap-3">
@@ -139,6 +180,14 @@ const ReplacementView = ({
           </div>
         </div>
       </div>
+      <div class="flex h-12 w-12 items-center justify-center self-center">
+        <input
+          type="checkbox"
+          class="h-6 w-6 cursor-pointer"
+          checked={selected}
+          onChange={e => onSelect(e.currentTarget.checked)}
+        />
+      </div>
     </div>
   )
 }
diff --git a/src/app/util.tsx b/src/app/util.tsx
index a6e29a0..8db7aae 100644
--- a/src/app/util.tsx
+++ b/src/app/util.tsx
@@ -1,5 +1,6 @@
 import { SpotifyApi } from "@spotify/web-api-ts-sdk"
 import {
+  PlaylistedTrack,
   SimplifiedPlaylist,
   Track,
   User,
@@ -15,6 +16,7 @@ export interface TrackReplacement {
   position: number
   stolen: Track
   taylorsVersionId: string
+  selected: boolean
 }
 
 export interface ScannedPlaylist extends PlaylistWithTracks {
@@ -31,10 +33,10 @@ const TAYLORS_VERSIONS: {
 } = _TAYLORS_VERSIONS_JSON
 
 const getTrackReplacements = (
-  playlist: PlaylistWithTracks,
+  tracks: PlaylistedTrack[],
 ): TrackReplacement[] => {
   let replacements: TrackReplacement[] = []
-  playlist.tracks.forEach((t, i) => {
+  tracks.forEach((t, i) => {
     if (t.track.type === "track") {
       const track = t.track as Track
       const taylorsVersion = TAYLORS_VERSIONS[track.external_ids.isrc]
@@ -43,6 +45,7 @@ const getTrackReplacements = (
           position: i + 1,
           stolen: track,
           taylorsVersionId: taylorsVersion.replacements[0].id,
+          selected: true,
         })
       }
     }
@@ -67,7 +70,7 @@ export async function scanUserPlaylists(
           spotify,
           playlist,
         )
-        const replacements = getTrackReplacements(playlistWithTracks)
+        const replacements = getTrackReplacements(playlistWithTracks.tracks)
         if (replacements.length > 0) {
           return { ...playlistWithTracks, replacements }
         }
@@ -90,8 +93,12 @@ export async function scanUserPlaylists(
 
   return (await Promise.allSettled(promises))
     .map(result => {
-      if (result.status === "fulfilled") return result.value
-      throw Error(result.reason)
+      if (result.status === "fulfilled") {
+        return result.value
+      } else {
+        console.error("Playlist scan failed")
+        return null
+      }
     })
     .filter(p => p != null)
 }
diff --git a/src/home.tsx b/src/home.tsx
index a700404..12378e6 100644
--- a/src/home.tsx
+++ b/src/home.tsx
@@ -1,14 +1,16 @@
-import { route } from "preact-router"
 import { useState } from "preact/hooks"
-import { AccessToken } from "../node_modules/@spotify/web-api-ts-sdk/src/types"
-import { createApiClient } from "./api"
 import Scaffold from "./scaffold"
 import noScooterCircle from "/img/no_scooter_circle.svg?url"
 import spotifyWhite from "/img/spotify_white.svg?url"
 
-export default function Home(_props: any) {
+export default function Home({
+  authError,
+  onLogin,
+}: {
+  authError: string
+  onLogin: () => void
+}) {
   const [isLoading, setIsLoading] = useState(false)
-  const [authError, setAuthError] = useState<string>(null)
 
   return (
     <Scaffold>
@@ -33,21 +35,11 @@ export default function Home(_props: any) {
             onClick={async () => {
               if (isLoading) return
               setIsLoading(true)
-              setAuthError(null)
-              let accessToken: AccessToken
               try {
-                accessToken = await createApiClient().authenticate()
-              } catch (e) {
-                console.error(e)
-                setAuthError(e.toString() || "")
+                onLogin()
+              } finally {
                 setIsLoading(false)
-                return
               }
-              if (accessToken.access_token !== "") {
-                // if authenticate did not redirect, user is already authenticated
-                route("/app")
-              }
-              setIsLoading(false)
             }}
           >
             <span class="flex items-center gap-4 text-2xl">
diff --git a/src/index.tsx b/src/index.tsx
index aa1215b..8aaa3b5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,14 +1,5 @@
 import { render } from "preact"
-import Router from "preact-router"
-import App from "./app/app"
-import Home from "./home"
+import Main from "./Main"
 import "./index.css"
 
-const Main = () => (
-  <Router>
-    <Home path="/" />
-    <App path="/app" />
-  </Router>
-)
-
 render(<Main />, document.getElementById("app"))