Albums View: Implement

src/App/index.tsx

@@ -1,10 +1,12 @@
-import { ScrollWheel, Screen } from "components";
-import React from "react";
-import styled, { createGlobalStyle } from "styled-components";
-import WindowProvider from "services/window";
-import AudioProvider from "services/audio";
-import Interface from "./Interface";
-import Audio from "./Audio";
+import React from 'react';
+
+import { Screen, ScrollWheel } from 'components';
+import AudioProvider from 'services/audio';
+import WindowProvider from 'services/window';
+import styled, { createGlobalStyle } from 'styled-components';
+
+import Audio from './Audio';
+import Interface from './Interface';
 
 const GlobalStyles = createGlobalStyle`
    body {
@@ -19,15 +21,14 @@ const GlobalStyles = createGlobalStyle`
 `;
 
 const Container = styled.div`
-  height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
 `;
 
 const Shell = styled.div`
   position: relative;
-  height: 100%;
+  height: 100vh;
   max-height: 36.5em;
   width: 370px;
   border-radius: 30px;
@@ -39,7 +40,7 @@ const Shell = styled.div`
   ${Screen.SM} {
     @media screen and (max-height: 750px) {
       border-radius: 0;
-      max-height: none;
+      -webkit-box-reflect: unset;
     }
   }
 `;

src/App/views/AlbumsView/index.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+
+import { useQuery } from '@apollo/react-hooks';
+import { gql } from 'apollo-boost';
+import { SelectableList, SelectableListOption } from 'components';
+import { useScrollHandler } from 'hooks';
+import { getUrlFromPath } from 'utils';
+
+import ViewOptions, { AlbumView } from '../';
+
+type AlbumsQuery = {
+  albums: [
+    {
+      artist: string;
+      album: string;
+      artwork: string;
+    }
+  ];
+};
+
+const ALBUMS = gql`
+  {
+    albums {
+      artist
+      album
+      artwork
+    }
+  }
+`;
+
+const AlbumsView = () => {
+  const { loading, error, data } = useQuery<AlbumsQuery>(ALBUMS);
+  const [options, setOptions] = useState<SelectableListOption[]>([]);
+
+  useEffect(() => {
+    if (data && data.albums && !error) {
+      setOptions(
+        data.albums.map(result => ({
+          label: result.album,
+          value: () => <AlbumView name={result.album} />,
+          image: getUrlFromPath(result.artwork),
+          viewId: ViewOptions.album.id
+        }))
+      );
+    }
+  }, [data, error]);
+
+  const [index] = useScrollHandler(ViewOptions.albums.id, options);
+
+  return (
+    <SelectableList loading={loading} options={options} activeIndex={index} />
+  );
+};
+
+export default AlbumsView;

src/App/views/HomeView/index.tsx

@@ -1,9 +1,11 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { SelectableList, SelectableListOption } from "components";
-import { useScrollHandler } from "hooks";
-import ViewOptions, { MusicView, ArtistsView, GamesView } from "App/views";
-import { useAudioService } from "services/audio";
-import NowPlayingView from "../NowPlayingView";
+import React, { useCallback, useEffect, useState } from 'react';
+
+import ViewOptions, { GamesView, MusicView } from 'App/views';
+import { SelectableList, SelectableListOption } from 'components';
+import { useScrollHandler } from 'hooks';
+import { useAudioService } from 'services/audio';
+
+import NowPlayingView from '../NowPlayingView';
 
 const strings = {
   nowPlaying: "Now Playing"
@@ -16,11 +18,6 @@ const HomeView = () => {
       value: () => <MusicView />,
       viewId: ViewOptions.music.id
     },
-    {
-      label: "Artists",
-      value: () => <ArtistsView />,
-      viewId: ViewOptions.artists.id
-    },
     {
       label: "Games",
       value: () => <GamesView />,

src/App/views/MusicView/index.tsx

@@ -1,15 +1,22 @@
-import React from "react";
-import { SelectableList, SelectableListOption } from "components";
-import { useScrollHandler } from "hooks";
-import ViewOptions from "..";
-import { ArtistsView } from "App/views";
+import React from 'react';
+
+import { AlbumsView, ArtistsView } from 'App/views';
+import { SelectableList, SelectableListOption } from 'components';
+import { useScrollHandler } from 'hooks';
+
+import ViewOptions from '../';
 
 const MusicView = () => {
   const options: SelectableListOption[] = [
     {
       label: "Artists",
       value: () => <ArtistsView />,
       viewId: ViewOptions.artists.id
+    },
+    {
+      label: "Albums",
+      value: () => <AlbumsView />,
+      viewId: ViewOptions.albums.id
     }
   ];
   const [index] = useScrollHandler(ViewOptions.music.id, options);

src/App/views/index.ts

@@ -2,6 +2,7 @@ export { default as HomeView } from "./HomeView";
 export { default as MusicView } from "./MusicView";
 export { default as ArtistsView } from "./ArtistsView";
 export { default as ArtistView } from "./ArtistView";
+export { default as AlbumsView } from "./AlbumsView";
 export { default as AlbumView } from "./AlbumView";
 export { default as NowPlayingView } from "./NowPlayingView";
 export { default as GamesView } from "./GamesView";
@@ -28,6 +29,7 @@ export const ViewOptions: Record<string, ViewOption> = {
   // Fullscreen Views
   artists: { id: "artists", title: "Artists", type: WINDOW_TYPE.FULL },
   artist: { id: "artist", title: "Artist", type: WINDOW_TYPE.FULL },
+  albums: { id: "albums", title: "Albums", type: WINDOW_TYPE.FULL },
   album: { id: "album", title: "Album", type: WINDOW_TYPE.FULL },
   nowPlaying: {
     id: "nowPlaying",

src/components/SelectableList/index.tsx

@@ -20,6 +20,7 @@ export interface SelectableListOption {
 const Container = styled.div`
   width: 100%;
   overflow: auto;
+  -webkit-overflow-scrolling: touch;
 `;
 
 interface Props {