move GraphQL queries to own folder

client/src/components/artist/ArtistTopTracks/index.tsx

@@ -1,32 +1,30 @@
 import * as React from 'react';
 import { ConnectHOC, Client, query } from 'urql';
 import { playTrack, setArtistViewingTopTracks } from '../../../store';
+import { ArtistTopTracksQuery } from '../../../queries';
 
 interface Props {
-  client: Client
-  id: string,
-  tracks: ArtistTopTrack[]
+  client: Client;
+  id: string;
+  tracks: ArtistTopTrack[];
 }
 
 const Track = props => {
   const playArtistTrack = () => {
     playTrack(props.track);
-  }
+  };
 
   const { name } = props.track;
 
-  return (
-    <div onClick={playArtistTrack}>
-      { name }
-    </div>
-  );
-}
+  return <div onClick={playArtistTrack}>{name}</div>;
+};
 
 class ArtistTopTracks extends React.PureComponent<Props, {}> {
   public componentDidMount() {
     const { client, id } = this.props;
 
-    client.executeQuery(query(GetArtistTopTracks, { id }), true)
+    client
+      .executeQuery(query(ArtistTopTracksQuery, { id }), true)
       .then((res: any) => {
         setArtistViewingTopTracks(res.data.artistTopTracks.tracks);
       });
@@ -35,29 +33,12 @@ class ArtistTopTracks extends React.PureComponent<Props, {}> {
     const { tracks } = this.props;
     return (
       <div>
-        { tracks.map((track, i) => (
+        {tracks.map((track, i) => (
           <Track key={i} track={track} />
         ))}
       </div>
-    )
+    );
   }
 }
 
 export default ConnectHOC()(ArtistTopTracks);
-
-const GetArtistTopTracks = `
-  query($id: String) {
-    artistTopTracks(id: $id) {
-      tracks {
-        album {
-          images {
-            url
-          }
-        }
-        duration_ms
-        name
-        uri
-      }
-    }
-  }
-`;

client/src/components/search/SearchInput/index.tsx

@@ -2,10 +2,15 @@ import * as React from 'react';
 import { ConnectHOC, Client, query } from 'urql';
 import { updateSearchResults } from '../../../store';
 import { navigate } from '@reach/router';
+import { SearchQuery } from '../../../queries';
 import './style.css';
 
-interface ISearchProps { client: Client }
-interface ISearchState { query: string }
+interface ISearchProps {
+  client: Client;
+}
+interface ISearchState {
+  query: string;
+}
 
 export class Search extends React.Component<ISearchProps, ISearchState> {
   public input;
@@ -17,14 +22,16 @@ export class Search extends React.Component<ISearchProps, ISearchState> {
   public render() {
     return (
       <div className="search">
-        <div className="search-input-info">Search for an album, songs or playlists</div>
-        <input 
-          type="text" 
-          name="searchQuery" 
-          onChange={this.handleChange} 
-          onKeyPress={this.handleKeyPress} 
+        <div className="search-input-info">
+          Search for an album, songs or playlists
+        </div>
+        <input
+          type="text"
+          name="searchQuery"
+          onChange={this.handleChange}
+          onKeyPress={this.handleKeyPress}
           placeholder="Start typing..."
-          ref={r => this.input = r}
+          ref={r => (this.input = r)}
         />
       </div>
     );
@@ -33,80 +40,26 @@ export class Search extends React.Component<ISearchProps, ISearchState> {
     const { client } = this.props;
     const { query: inputQuery } = this.state;
 
-    client.executeQuery(query(LookupSearch, { query: inputQuery }), true)
+    client
+      .executeQuery(query(SearchQuery, { query: inputQuery }), true)
       .then((res: any) => {
         updateSearchResults(res.data.search);
         navigate('/search');
       });
-  }
+  };
   private handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { target } = e;
     const { value } = target;
 
     this.setState({
-      query: value
+      query: value,
     });
-  }
+  };
   private handleKeyPress = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
       this.handleSearch();
     }
-  }
-}
-
-const LookupSearch = `
-query($query: String) {
-  search(query: $query) {
-    albums {
-      items {
-        uri
-        artists {
-          name
-        }
-        id
-        name
-        images {
-          url
-        }
-      }
-    }
-    artists {
-      items {
-        id
-        name
-        images {
-          url
-        }
-      }
-    }
-    playlists {
-      items {
-        id
-        name
-        images {
-          url
-        }
-        owner {
-          id
-        }
-        uri
-      }
-    }
-    tracks {
-      items {
-        album {
-          name
-        }
-        artists {
-          name
-        }
-        duration_ms
-        name
-        uri
-      }
-    }
-  }
+  };
 }
-`;
 
 export default ConnectHOC()(Search);

client/src/pages/Album/index.tsx

@@ -1,8 +1,14 @@
 import * as React from 'react';
 import { ConnectHOC, Client, query } from 'urql';
 import { IRouteProps } from '../../routing';
-import { Consumer, selectAlbumViewing, setAlbumViewing, selectTrackDetails } from '../../store';
+import {
+  Consumer,
+  selectAlbumViewing,
+  setAlbumViewing,
+  selectTrackDetails,
+} from '../../store';
 import { AlbumInfo, Track } from '../../components/album';
+import { AlbumQuery } from '../../queries';
 import './style.css';
 
 interface Props extends IRouteProps {
@@ -14,17 +20,20 @@ export class Album extends React.PureComponent<Props, {}> {
   public componentDidMount() {
     const { client, id } = this.props;
 
-    client.executeQuery(query(GetAlbum, { id }), true)
-      .then((res: any) => {
-        setAlbumViewing(res.data.album);
-      });
+    client.executeQuery(query(AlbumQuery, { id }), true).then((res: any) => {
+      setAlbumViewing(res.data.album);
+    });
   }
   public render() {
     return (
       <Consumer select={[selectAlbumViewing, selectTrackDetails]}>
         {(albumViewing: any, trackDetails) => {
           const { tracks } = albumViewing;
-          const { track_window: { current_track: { uri } } } = trackDetails;
+          const {
+            track_window: {
+              current_track: { uri },
+            },
+          } = trackDetails;
           return (
             <div className="album-viewer">
               <div className="album-viewer__left">
@@ -33,7 +42,7 @@ export class Album extends React.PureComponent<Props, {}> {
 
               <div className="album-viewer__right">
                 <ol className="album-track-list">
-                  { tracks.items.map((track, i) => (
+                  {tracks.items.map((track, i) => (
                     <Track
                       isPlaying={track.uri === uri}
                       key={i}
@@ -43,35 +52,11 @@ export class Album extends React.PureComponent<Props, {}> {
                 </ol>
               </div>
             </div>
-          )
+          );
         }}
       </Consumer>
     );
   }
 }
 
 export default ConnectHOC()(Album);
-
-const GetAlbum = `
-  query($id: String) {
-    album(id: $id) {
-      uri
-      artists {
-        id
-        name
-      }
-      images {
-        url
-      }
-      name
-      release_date
-      tracks {
-        items {
-          duration_ms
-          name
-          uri
-        }
-      }
-    }
-  }
-`;

client/src/pages/Artist/index.tsx

@@ -3,6 +3,7 @@ import { ConnectHOC, Client, query } from 'urql';
 import { IRouteProps } from '../../routing';
 import { Consumer, selectArtistViewing, setArtistViewing } from '../../store';
 import { ArtistTopTracks } from '../../components/artist';
+import { ArtistQuery, ArtistBioQuery } from '../../queries';
 import './style.css';
 
 interface Props extends IRouteProps {
@@ -14,12 +15,12 @@ export class ArtistPage extends React.PureComponent<Props, {}> {
   public componentDidMount() {
     const { client, id } = this.props;
 
-    client.executeQuery(query(GetArtist, { id }), true)
-      .then((res: any) => {
-        setArtistViewing(res.data.artist);
-      });
+    client.executeQuery(query(ArtistQuery, { id }), true).then((res: any) => {
+      setArtistViewing(res.data.artist);
+    });
 
-    client.executeQuery(query(GetArtistBio, { id}), true)
+    client
+      .executeQuery(query(ArtistBioQuery, { id }), true)
       .then((res: any) => {
         console.log('artist bio', res);
       });
@@ -29,12 +30,19 @@ export class ArtistPage extends React.PureComponent<Props, {}> {
     return (
       <Consumer select={[selectArtistViewing]}>
         {(artistViewing: any) => {
-          const { images: [{ url }], name, tracks } = artistViewing;
+          const {
+            images: [{ url }],
+            name,
+            tracks,
+          } = artistViewing;
 
           return (
             <div className="artist-viewer">
               <div className="main-view-container">
-                <div className="artist-viewer__header" style={{ backgroundImage: `url(${url})` }}>
+                <div
+                  className="artist-viewer__header"
+                  style={{ backgroundImage: `url(${url})` }}
+                >
                   <div className="header-image-test">test</div>
                 </div>
                 <p>{name}</p>
@@ -49,24 +57,3 @@ export class ArtistPage extends React.PureComponent<Props, {}> {
 }
 
 export default ConnectHOC()(ArtistPage);
-
-const GetArtist = `
-  query($id: String) {
-    artist(id: $id) {
-      images {
-        url
-      }
-      name
-    }
-  }
-`;
-
-const GetArtistBio = `
-  query($id: String) {
-    artistBio(id: $id) {
-      headerImages {
-        url
-      }
-    }
-  }
-`