vanilla search view built

assets/search-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>

deploy/linux/spotube/spotube.desktop

@@ -4,5 +4,5 @@ Name=Spotube
 Exec=AppRun
 Icon=default
 Comment=A music streaming app combining the power of Spotify & Youtube
-Terminal=false
+Terminal=true
 Categories=Music;

package.json

@@ -10,7 +10,8 @@
     "dev": "TSC_WATCHFILE=UseFsEvents webpack --mode=development",
     "start": "qode ./dist/index.js",
     "start:trace": "qode ./dist/index.js --trace",
-    "debug": "qode --inspect ./dist/index.js"
+    "debug": "qode --inspect ./dist/index.js",
+    "pack": "nodegui-packer -p ./dist"
   },
   "dependencies": {
     "@nodegui/nodegui": "^0.27.0",

src/components/Search.tsx

@@ -0,0 +1,67 @@
+import { QIcon } from "@nodegui/nodegui";
+import { LineEdit, ScrollArea, Text, View } from "@nodegui/react-nodegui";
+import React, { useState } from "react";
+import { QueryCacheKeys } from "../conf";
+import showError from "../helpers/showError";
+import useSpotifyQuery from "../hooks/useSpotifyQuery";
+import { search } from "../icons";
+import { PlaylistCard } from "./Home";
+import { TrackButton, TrackTableIndex } from "./PlaylistView";
+import IconButton from "./shared/IconButton";
+
+function Search() {
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const { data: searchResults, isError, refetch } = useSpotifyQuery<SpotifyApi.SearchResponse>(
+    QueryCacheKeys.search,
+    (spotifyApi) => spotifyApi.search(searchQuery, ["playlist", "track"]).then((res) => res.body),
+    { enabled: false }
+  );
+
+  async function handleSearch() {
+    try {
+      await refetch();
+    } catch (error) {
+      showError(error, "[Failed to search through spotify]: ");
+    }
+  }
+
+  return (
+    <View style="flex: 1; flex-direction: 'column'; padding: 5px;">
+      <View>
+        <LineEdit
+          style="width: '65%'; margin: 5px;"
+          placeholderText="Search spotify"
+          on={{
+            textChanged(t) {
+              setSearchQuery(t);
+            },
+          }}
+        />
+        <IconButton enabled={searchQuery.length > 0} icon={new QIcon(search)} on={{ clicked: handleSearch }} />
+      </View>
+      <ScrollArea style="flex: 1;">
+        <View style="flex-direction: 'column'; flex: 1;">
+          <View style="flex: 1; flex-direction: 'column';">
+            <Text>{`<h2>Songs</h2>`}</Text>
+            <TrackTableIndex />
+            {searchResults?.tracks?.items.map((track, index) => (
+              <TrackButton active={false} index={index} track={track} on={{}} onTrackClick={() => {}} />
+            ))}
+          </View>
+          <View style="flex: 1; flex-direction: 'column';">
+            <Text>{`<h2>Playlists</h2>`}</Text>
+            <ScrollArea style="flex: 1;">
+              <View style="flex-direction: 'row'; align-items: 'center'; flex-wrap: 'wrap'; width: 330px;">
+                {searchResults?.playlists?.items.map((playlist) => (
+                  <PlaylistCard playlist={playlist} />
+                ))}
+              </View>
+            </ScrollArea>
+          </View>
+        </View>
+      </ScrollArea>
+    </View>
+  );
+}
+
+export default Search;

src/components/TabMenu.tsx

@@ -12,6 +12,7 @@ function TabMenu() {
       <TabMenuItem url="/home" title="Browse" />
       <TabMenuItem url="/library" title="Library" />
       <TabMenuItem url="/currently" title="Currently Playing" />
+      <TabMenuItem url="/search" title="Search"/>
     </View>
   );
 }

src/conf.ts

@@ -15,5 +15,6 @@ export enum QueryCacheKeys{
   genrePlaylists="genrePlaylists",
   playlistTracks="playlistTracks",
   userPlaylists = "user-palylists",
-  userSavedTracks = "user-saved-tracks"
+  userSavedTracks = "user-saved-tracks",
+  search="search"
 }

src/icons.ts

@@ -7,6 +7,7 @@ import _heartRegular from "../assets/heart-regular.svg"
 import _heart from "../assets/heart-solid.svg"
 import _random from "../assets/random-solid.svg"
 import _stop from "../assets/stop-solid.svg"
+import _search from "../assets/search-solid.svg";
 
 export const play = _play;
 export const pause = _pause;
@@ -16,4 +17,5 @@ export const forward = _forward;
 export const heartRegular = _heartRegular;
 export const heart = _heart;
 export const random = _random;
-export const stop = _stop;
+export const stop = _stop;
+export const search = _search;

src/routes.tsx

@@ -8,6 +8,7 @@ import PlaylistGenreView from "./components/PlaylistGenreView";
 import TabMenu from "./components/TabMenu";
 import CurrentPlaylist from "./components/CurrentPlaylist";
 import Library from "./components/Library";
+import Search from "./components/Search";
 
 function Routes() {
   const { isLoggedIn } = useContext(authContext);
@@ -32,6 +33,7 @@ function Routes() {
           <Login />
         )}
       </Route>
+      <Route path="/search"><Search/></Route>
       <Route path="/currently">
         <CurrentPlaylist />
       </Route>