Fixed: <Switch> inifinite loop

Added: prefrencesContext
Edited: PlaylistCard for enabling images

src/app.tsx

@@ -12,14 +12,16 @@ import express from "express";
 import open from "open";
 import spotifyApi from "./initializations/spotifyApi";
 import showError from "./helpers/showError";
-import fs from "fs"
+import fs from "fs";
 import path from "path";
 import { confDir } from "./conf";
 import spotubeIcon from "../assets/icon.svg";
+import preferencesContext, { PreferencesContextProperties } from "./context/preferencesContext";
 
-export enum CredentialKeys {
+export enum LocalStorageKeys {
   credentials = "credentials",
   refresh_token = "refresh_token",
+  preferences = "user-preferences",
 }
 
 export interface Credentials {
@@ -42,6 +44,11 @@ const queryClient = new QueryClient({
   },
 });
 
+const initialPreferences: PreferencesContextProperties = {
+  playlistImages: false,
+};
+
+//* Application start
 function RootApp() {
   const windowRef = useRef<QMainWindow>();
   const [currentTrack, setCurrentTrack] = useState<CurrentTrack>();
@@ -75,16 +82,28 @@ function RootApp() {
     },
     [currentTrack]
   );
-
+  // cache
+  const cachedPreferences = localStorage.getItem(LocalStorageKeys.preferences);
+  const cachedCredentials = localStorage.getItem(LocalStorageKeys.credentials);
+  // state
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
   const [credentials, setCredentials] = useState<Credentials>({ clientId: "", clientSecret: "" });
+  const [preferences, setPreferences] = useState<PreferencesContextProperties>(() => {
+    if (cachedPreferences) {
+      return JSON.parse(cachedPreferences);
+    }
+    return initialPreferences;
+  });
   const [access_token, setAccess_token] = useState<string>("");
   const [currentPlaylist, setCurrentPlaylist] = useState<CurrentPlaylist>();
-  const cachedCredentials = localStorage.getItem(CredentialKeys.credentials);
 
   useEffect(() => {
     setIsLoggedIn(!!cachedCredentials);
   }, []);
+  // just saves the preferences
+  useEffect(() => {
+    localStorage.setItem(LocalStorageKeys.preferences, JSON.stringify(preferences));
+  }, [preferences]);
 
   useEffect(() => {
     const onWindowClose = () => {
@@ -100,7 +119,7 @@ function RootApp() {
   });
   // for user code login
   useEffect(() => {
-    if (isLoggedIn && credentials && !localStorage.getItem(CredentialKeys.refresh_token)) {
+    if (isLoggedIn && credentials && !localStorage.getItem(LocalStorageKeys.refresh_token)) {
       const app = express();
       app.use(express.json());
 
@@ -110,7 +129,7 @@ function RootApp() {
           spotifyApi.setClientSecret(credentials.clientSecret);
           const { body: authRes } = await spotifyApi.authorizationCodeGrant(req.query.code);
           setAccess_token(authRes.access_token);
-          localStorage.setItem(CredentialKeys.refresh_token, authRes.refresh_token);
+          localStorage.setItem(LocalStorageKeys.refresh_token, authRes.refresh_token);
           return res.end();
         } catch (error) {
           console.error("Failed to fullfil code grant flow: ", error);
@@ -141,6 +160,7 @@ function RootApp() {
     <Window ref={windowRef} on={windowEvents} windowState={WindowState.WindowMaximized} windowIcon={winIcon} windowTitle="Spotube" minSize={minSize}>
       <MemoryRouter>
         <authContext.Provider value={{ isLoggedIn, setIsLoggedIn, access_token, setAccess_token, ...credentials }}>
+          <preferencesContext.Provider value={{ ...preferences, setPreferences }}>
             <playerContext.Provider value={{ currentPlaylist, currentTrack, setCurrentPlaylist, setCurrentTrack }}>
               <QueryClientProvider client={queryClient}>
                 <View style={`flex: 1; flex-direction: 'column'; align-items: 'stretch';`}>
@@ -149,6 +169,7 @@ function RootApp() {
                 </View>
               </QueryClientProvider>
             </playerContext.Provider>
+          </preferencesContext.Provider>
         </authContext.Provider>
       </MemoryRouter>
     </Window>

src/components/Login.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from "react";
 import { LineEdit, Text, Button, View } from "@nodegui/react-nodegui";
 import authContext from "../context/authContext";
-import { CredentialKeys, Credentials } from "../app";
+import { LocalStorageKeys, Credentials } from "../app";
 
 function Login() {
   const { setIsLoggedIn } = useContext(authContext);
@@ -55,7 +55,7 @@ function Login() {
         on={{
           clicked: () => {
             localStorage.setItem(
-              CredentialKeys.credentials,
+              LocalStorageKeys.credentials,
               JSON.stringify({
                 clientId: credentials.clientId,
                 clientSecret: credentials.clientSecret,

src/components/Settings.tsx

@@ -1,14 +1,20 @@
 import { Text, View } from "@nodegui/react-nodegui";
-import React from "react";
+import React, { useContext } from "react";
-import Switch from "./shared/Switch";
+import preferencesContext from "../context/preferencesContext";
+import Switch, { SwitchProps } from "./shared/Switch";
 
 function Settings() {
+  const { setPreferences, ...preferences } = useContext(preferencesContext)
   return (
     <View style="flex: 1; flex-direction: 'column'; justify-content: 'flex-start';">
       <Text>{`<center><h2>Settings</h2></center>`}</Text>
       <View style="width: '100%'; flex-direction: 'column'; justify-content: 'flex-start';">
-        <SettingsCheckTile title="Use images instead of colors for playlist" subtitle="This will increase memory usage" />
+        <SettingsCheckTile
-        <SettingsCheckTile title="Some unknown settings" />
+          checked={preferences.playlistImages}
+          title="Use images instead of colors for playlist"
+          subtitle="This will increase memory usage"
+          onChange={(checked) => setPreferences({ ...preferences, playlistImages: checked })}
+        />
       </View>
     </View>
   );
@@ -19,9 +25,11 @@ export default Settings;
 interface SettingsCheckTileProps {
   title: string;
   subtitle?: string;
+  checked: boolean;
+  onChange?: SwitchProps["onChange"];
 }
 
-export function SettingsCheckTile({ title, subtitle = "" }: SettingsCheckTileProps) {
+export function SettingsCheckTile({ title, subtitle = "", onChange, checked }: SettingsCheckTileProps) {
   return (
     <View style="flex: 1; align-items: 'center'; padding: 15px 0; justify-content: 'space-between';">
       <Text>
@@ -30,7 +38,7 @@ export function SettingsCheckTile({ title, subtitle = "" }: SettingsCheckTilePro
           <p>${subtitle}</p>
         `}
       </Text>
-      <Switch checked/>
+      <Switch checked={checked} onChange={onChange} />
     </View>
   );
 }

src/components/shared/PlaylistCard.tsx

@@ -1,22 +1,26 @@
-import { CursorShape, QIcon, QMouseEvent } from '@nodegui/nodegui';
+import { CursorShape, QIcon, QMouseEvent } from "@nodegui/nodegui";
-import { Text, View } from '@nodegui/react-nodegui';
+import { Text, View } from "@nodegui/react-nodegui";
-import React, { useContext, useMemo, useState } from 'react'
+import React, { useContext, useMemo, useState } from "react";
-import { useHistory } from 'react-router';
+import { useHistory } from "react-router";
-import { QueryCacheKeys } from '../../conf';
+import { QueryCacheKeys } from "../../conf";
-import playerContext from '../../context/playerContext';
+import playerContext from "../../context/playerContext";
-import { generateRandomColor, getDarkenForeground } from '../../helpers/RandomColor';
+import preferencesContext from "../../context/preferencesContext";
-import showError from '../../helpers/showError';
+import { generateRandomColor, getDarkenForeground } from "../../helpers/RandomColor";
-import usePlaylistReaction from '../../hooks/usePlaylistReaction';
+import showError from "../../helpers/showError";
-import useSpotifyQuery from '../../hooks/useSpotifyQuery';
+import usePlaylistReaction from "../../hooks/usePlaylistReaction";
-import { heart, heartRegular, pause, play } from '../../icons';
+import useSpotifyQuery from "../../hooks/useSpotifyQuery";
-import { audioPlayer } from '../Player';
+import { heart, heartRegular, pause, play } from "../../icons";
-import IconButton from './IconButton';
+import { audioPlayer } from "../Player";
+import CachedImage from "./CachedImage";
+import IconButton from "./IconButton";
 
 interface PlaylistCardProps {
   playlist: SpotifyApi.PlaylistObjectSimplified;
 }
 
 const PlaylistCard = ({ playlist }: PlaylistCardProps) => {
+  const preferences = useContext(preferencesContext);
+  const thumbnail = playlist.images[0].url;
   const { id, description, name, images } = playlist;
   const history = useHistory();
   const [hovered, setHovered] = useState(false);
@@ -31,7 +35,7 @@ const PlaylistCard = ({ playlist }: PlaylistCardProps) => {
     try {
       const { data: tracks, isSuccess } = await refetch();
       if (currentPlaylist?.id !== id && isSuccess && tracks) {
-        setCurrentPlaylist({ tracks, id, name, thumbnail: images[0].url });
+        setCurrentPlaylist({ tracks, id, name, thumbnail });
         setCurrentTrack(tracks[0].track);
       } else {
         await audioPlayer.stop();
@@ -46,7 +50,7 @@ const PlaylistCard = ({ playlist }: PlaylistCardProps) => {
   function gotoPlaylist(native?: any) {
     const key = new QMouseEvent(native);
     if (key.button() === 1) {
-      history.push(`/playlist/${id}`, { name, thumbnail: images[0].url });
+      history.push(`/playlist/${id}`, { name, thumbnail });
     }
   }
 
@@ -54,14 +58,16 @@ const PlaylistCard = ({ playlist }: PlaylistCardProps) => {
   const color = useMemo(() => getDarkenForeground(bgColor1), [bgColor1]);
 
   const playlistStyleSheet = `
-    #playlist-container{
+    #playlist-container, #img-container{
       width: 150px;
-      flex-direction: column;
       padding: 10px;
-      min-height: 150px;
-      background-color: ${bgColor1};
-      border-radius: 5px;
       margin: 5px;
+      flex-direction: column;
+      background-color: ${bgColor1};
+    }
+    #playlist-container{
+      border-radius: 5px;
+      min-height: 150px;
     }
     #playlist-container:hover{
       border: 1px solid green;
@@ -70,34 +76,16 @@ const PlaylistCard = ({ playlist }: PlaylistCardProps) => {
       border: 5px solid green;
     }
   `;
+  const playlistAction = `
+    position: absolute;
+    bottom: 30px;
+    background-color: ${color};
+  `;
 
-  return (
+  const playlistActions = (
-    <View
-      id="playlist-container"
-      cursor={CursorShape.PointingHandCursor}
-      styleSheet={playlistStyleSheet}
-      on={{
-        MouseButtonRelease: gotoPlaylist,
-        HoverEnter() {
-          setHovered(true);
-        },
-        HoverLeave() {
-          setHovered(false);
-        },
-      }}>
-      {/* <CachedImage src={thumbnail} maxSize={{ height: 150, width: 150 }} scaledContents alt={name} /> */}
-      <Text style={`color: ${color};`} wordWrap on={{ MouseButtonRelease: gotoPlaylist }}>
-        {`
-          <center>
-            <h3>${name}</h3>
-            <p>${description}</p>
-          </center>
-        `}
-      </Text>
-      {(hovered || currentPlaylist?.id === id) && (
     <>
       <IconButton
-            style={`position: absolute; bottom: 30px; left: '55%'; background-color: ${color};`}
+        style={preferences.playlistImages ? "" : playlistAction + "left: '55%'"}
         icon={new QIcon(isFavorite(id) ? heart : heartRegular)}
         on={{
           clicked() {
@@ -106,8 +94,8 @@ const PlaylistCard = ({ playlist }: PlaylistCardProps) => {
         }}
       />
       <IconButton
+        style={preferences.playlistImages ? "" : playlistAction + "left: '80%'"}
         icon={new QIcon(currentPlaylist?.id === id ? pause : play)}
-            style={`position: absolute; bottom: 30px; left: '80%'; background-color: ${color};`}
         on={{
           clicked() {
             handlePlaylistPlayPause();
@@ -115,7 +103,41 @@ const PlaylistCard = ({ playlist }: PlaylistCardProps) => {
         }}
       />
     </>
-      )}
+  );
+  const hovers = {
+    HoverEnter() {
+      setHovered(true);
+    },
+    HoverLeave() {
+      setHovered(false);
+    },
+  };
+
+  return (
+    <View
+      id={preferences.playlistImages ? "img-container" : "playlist-container"}
+      cursor={CursorShape.PointingHandCursor}
+      styleSheet={playlistStyleSheet}
+      on={{
+        MouseButtonRelease: gotoPlaylist,
+        ...hovers,
+      }}>
+      {preferences.playlistImages && <CachedImage src={thumbnail} maxSize={{ height: 150, width: 150 }} scaledContents alt={name} />}
+
+      <Text style={`color: ${color};`} wordWrap on={{ MouseButtonRelease: gotoPlaylist, ...hovers }}>
+        {`
+          <center>
+            <h3>${name}</h3>
+            <p>${description}</p>
+          </center>
+        `}
+      </Text>
+
+      {(hovered || currentPlaylist?.id === id) && !preferences.playlistImages && playlistActions}
+      {preferences.playlistImages &&
+        <View style="flex: 1; justify-content: 'space-around';">{playlistActions}
+        </View>
+      }
     </View>
   );
 };

src/components/shared/Switch.tsx

@@ -3,20 +3,22 @@ import { Slider } from "@nodegui/react-nodegui";
 import { CheckBoxProps } from "@nodegui/react-nodegui/dist/components/CheckBox/RNCheckBox";
 import React, { useEffect, useState } from "react";
 
-interface SwitchProps extends Omit<CheckBoxProps, "on" |"icon" | "text">{
+export interface SwitchProps extends Omit<CheckBoxProps, "on" | "icon" | "text"> {
-  onChange?(checked:boolean): void
+  onChange?(checked: boolean): void;
 }
 
-function Switch({ checked, onChange, ...props }: SwitchProps) {
+function Switch({ checked: derivedChecked, onChange, ...props }: SwitchProps) {
-  const [value, setValue] = useState<0|1>(0);
+  const [checked, setChecked] = useState<boolean>(false);
 
   useEffect(() => {
-    setValue(checked ? 1 : 0);
+    if (derivedChecked) {
-  }, [checked])
+      setChecked(derivedChecked);
+    }
+  }, []);
 
   return (
     <Slider
-      value={value}
+      value={checked ? 1 : 0}
       hasTracking
       mouseTracking
       orientation={Orientation.Horizontal}
@@ -30,13 +32,13 @@ function Switch({ checked, onChange, ...props }: SwitchProps) {
         MouseButtonRelease(native: any) {
           const mouse = new QMouseEvent(native);
           if (mouse.button() === 1) {
-            setValue(value===1?0:1)
+            setChecked(!checked);
-          }
-        }
-      }
           }
+        },
+      }}
       {...props}
-    />);
+    />
+  );
 }
 
 export default Switch;

src/context/preferencesContext.ts

@@ -0,0 +1,15 @@
+import React, { Dispatch, SetStateAction } from "react";
+
+export interface PreferencesContextProperties {
+  playlistImages: boolean;
+}
+export interface PreferencesContext extends PreferencesContextProperties {
+  setPreferences: Dispatch<SetStateAction<PreferencesContextProperties>>;
+}
+
+const preferencesContext = React.createContext<PreferencesContext>({
+  playlistImages: false,
+  setPreferences() { }
+});
+
+export default preferencesContext;

src/hooks/useSpotifyApi.ts

@@ -1,6 +1,6 @@
 import chalk from "chalk";
 import { useContext, useEffect } from "react";
-import { CredentialKeys } from "../app";
+import { LocalStorageKeys } from "../app";
 import authContext from "../context/authContext";
 import showError from "../helpers/showError";
 import spotifyApi from "../initializations/spotifyApi";
@@ -13,7 +13,7 @@ function useSpotifyApi() {
     isLoggedIn,
     setAccess_token,
   } = useContext(authContext);
-  const refreshToken = localStorage.getItem(CredentialKeys.refresh_token);
+  const refreshToken = localStorage.getItem(LocalStorageKeys.refresh_token);
 
   useEffect(() => {
     if (isLoggedIn && clientId && clientSecret && refreshToken) {