(refactor) Clean up code for landing page and mixtape search

src/app/landing/team/team-content.ts

@@ -17,7 +17,7 @@ export const TEAM_CONTENT: Object = {
     },
     {
       name: 'Jennica Goo',
-      role: 'Developer | Executive Homey',
+      role: 'Developer | Executive Homie',
       image: 'app/landing/team/images/smitten-jennica.png',
       githubImg: 'app/landing/team/images/github-icon.png',
       githubLink: 'https://github.com/jmg2107'

src/app/landing/team/team.component.css

@@ -29,15 +29,19 @@ h2:after {
   margin-bottom: 15px;
 }
 
-.icon {
-  margin-top: 10px;
-  width: 22px;
-}
-
 .name {
   font-weight: 700;
 }
 
 .role {
-  font-style: italic;
+  margin-bottom: 12px;
+}
+
+.fa-github {
+  font-size: 2em;
+  transition: color 0.4s;
+}
+
+.fa-github:hover {
+  color: #91204D;
 }

src/app/landing/team/team.component.html

@@ -9,7 +9,7 @@ <h2>{{content?.heading}}</h2>
       <p class="role">{{member?.role}}</p>
       <figure >
         <a href="{{member?.githubLink}}" target="_blank">
-          <img class="icon" src="{{member?.githubImg}}">
+          <i class="fa fa-github" aria-hidden="true"></i>
         </a>
       </figure>
     </div>

src/app/landing/testimonials/testimonials-content.ts

@@ -3,13 +3,13 @@ export const TESTIMONIALS_CONTENT: Object = {
   testimonials: [
     {
       user: 'Kim Kardashian',
-      testimonial: `So, um, like, when yeezy said: "hey we are gonna get married,"
-                    I said ok, but we need an app. Hahahaha yeah.....`,
+      testimonial: `So, um, like, when Yeezy said: "Hey, we are gonna get married,"
+                    I said "Okay, but we need an app." Hahahaha yeah.....`,
       image: 'app/landing/testimonials/images/smitten-kim.png'
     },
     {
       user: 'Kanye West',
-      testimonial: `That tha-tha-tha-that app smitten, is the shiz that helps me listen.
+      testimonial: `That tha-tha-tha-that app smitten, is the shiz that helps me listen,
                     makes our communication real nice, and helps us prevent dumb fights.`,
       image: 'app/landing/testimonials/images/smitten-kanye.png'
     }

src/app/landing/testimonials/testimonials.component.css

@@ -14,6 +14,7 @@
 .text {
   font-style: italic;
   margin-bottom: 25px;
+  text-transform: none;
   width: 470px;
 }
 

src/app/mixtape/search/index.ts

@@ -1,7 +1,7 @@
 /** components **/
 export { SoundCloudSearchComponent } from './search.component';
-export { SoundCloudSearchInputComponent } from './search-input.component';
-export { SoundCloudSearchResultsComponent } from './search-results.component';
+export { SoundCloudSearchInputComponent } from './input/search-input.component';
+export { SoundCloudSearchResultsComponent } from './results/search-results.component';
 
 /** services **/
 export { SearchSoundCloud } from './search.service';

src/app/mixtape/search/input/index.ts

@@ -0,0 +1,5 @@
+/** components **/
+export { SoundCloudSearchInputComponent } from './search-input.component';
+
+/** models **/
+export { SearchParams } from './search-params.model';

src/app/mixtape/search/search-input.component.css → src/app/mixtape/search/input/search-input.component.css

@@ -1,12 +1,12 @@
 input[type="text"] {
   border: 1px solid #E1E1E1;
   border-radius: 30px;
+  font-family: inherit;
+  font-size: 14px;
   height: 45px;
-  width: 300px;
   margin-top: 10px;
   padding: 0 20px;
-  font-family: inherit;
-  font-size: 14px;
+  width: 300px;
 }
 
 input:focus {

src/app/mixtape/search/input/search-input.component.ts

@@ -0,0 +1,55 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import 'rxjs/Rx';
+
+import { SearchParams } from './index';
+import { SearchSoundCloud } from '../search.service';
+import { Store } from '../../../store/store';
+
+@Component({
+  selector: 'sc-search-input',
+  templateUrl: 'app/mixtape/search/input/search-input.component.html',
+  styleUrls: ['app/mixtape/search/input/search-input.component.css'],
+  providers: [SearchSoundCloud]
+})
+export class SoundCloudSearchInputComponent implements OnInit {
+  resultMax: number;
+  search: SearchParams;
+
+  constructor(private store: Store,
+              private searchSoundCloud: SearchSoundCloud) {}
+
+  // SearchSoundCloud service makes POST request to server
+  // upon receiving search results via SoundCloud API, update state
+  onSubmit(searchParams: SearchParams) {
+    if (this.search.q) {
+      this.searchSoundCloud.search(searchParams)
+        .subscribe(
+          this.resultsHandler.bind(this),
+          error => console.log('error: ', error));
+    }
+    this.search.q = '';
+  }
+
+  ngOnInit() {
+    this.resultMax = 30;
+    this.search = {
+      q: '',
+      limit: this.resultMax
+    };
+  }
+
+  resultsHandler(results) {
+    const currentState = this.store.getState();
+    results = JSON.parse(results._body);
+
+    this.store.setState(
+      Object.assign({}, currentState, {
+        mixtape: {
+          playlist: currentState.mixtape.playlist,
+          // update 'searchResults'
+          searchResults: results
+        }
+      })
+    );
+  }
+}

src/app/mixtape/search/input/search-params.model.ts

@@ -0,0 +1,4 @@
+export class SearchParams {
+  q: string;
+  limit: number;
+}

src/app/mixtape/search/results/index.ts

@@ -0,0 +1,2 @@
+/** components **/
+export { SoundCloudSearchResultsComponent } from './search-results.component';

src/app/mixtape/search/search-results.component.css → src/app/mixtape/search/results/search-results.component.css

@@ -42,8 +42,8 @@ h2:after {
 }
 
 .glyphicon-plus {
-  cursor: pointer;
   color: #91204D;
+  cursor: pointer;
   font-size: 0.75em;
   margin-right: 7px;
 }
@@ -61,13 +61,13 @@ p {
 }
 
 img {
-  width: 50px;
   height: 50px;
+  width: 50px;
 }
 
 .truncate {
-  width: 300px;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  width: 300px;
+  white-space: nowrap;
 }

src/app/mixtape/search/results/search-results.component.ts

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/Rx';
+
+import { PlaylistService } from '../../shared/index';
+import { Song } from '../../shared/index';
+import { Store } from '../../../store/store';
+
+@Component({
+  selector: 'sc-search-results',
+  templateUrl: 'app/mixtape/search/results/search-results.component.html',
+  styleUrls: ['app/mixtape/search/results/search-results.component.css'],
+  providers: [PlaylistService]
+})
+export class SoundCloudSearchResultsComponent {
+  searchResults: Observable<Song[]>;
+
+  constructor(private store: Store,
+              private playlistService: PlaylistService) {
+    // listen for 'searchResults' state changes
+    // update 'this.searchResults' accordingly
+    this.store
+      .changes
+      .pluck('mixtape', 'searchResults')
+      .subscribe(
+        (searchResults: Observable<Song[]>) => this.searchResults = searchResults,
+        error => console.log('error: ', error));
+  }
+
+  // add song to playlist in database via POST request
+  // change 'playlist' state upon adding song
+  addSong(songData) {
+    this.playlistService.addToPlaylist(songData)
+      .subscribe(
+        this.addSongToPlaylistState.bind(this),
+        error => console.log('error: ', error));
+  }
+
+  addSongToPlaylistState(song) {
+    const currentState = this.store.getState();
+    song = [JSON.parse(song._body)];
+
+    this.store.setState(
+      Object.assign({}, currentState, {
+        mixtape: {
+          // add new song to 'playlist' state
+          playlist: [
+            ...currentState.mixtape.playlist,
+            ...song
+          ],
+          searchResults: currentState.mixtape.searchResults
+        }
+      })
+    );
+  }
+}

src/app/mixtape/search/search.component.css

@@ -1,6 +1,6 @@
 .search-container {
-  font-family: 'Open Sans', sans-serif;
   color: #343956;
+  font-family: 'Open Sans', sans-serif;
 }
 
 .input-container {

src/app/mixtape/search/search.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
-import { SoundCloudSearchInputComponent } from './search-input.component';
-import { SoundCloudSearchResultsComponent } from './search-results.component';
+import { SoundCloudSearchInputComponent } from './input/index';
+import { SoundCloudSearchResultsComponent } from './results/index';
 
 @Component({
   selector: 'sc-search-container',

src/app/mixtape/shared/index.ts

@@ -1,5 +1,5 @@
 /** services **/
 export { PlaylistService } from './playlist.service';
 
-/** interfaces **/
-export { Song } from './song';
+/** models **/
+export { Song } from './song.model';

src/app/mixtape/shared/playlist.service.ts

@@ -13,11 +13,10 @@ export class PlaylistService {
   }
 
   deleteSong(songData) {
-    console.log('sending server request to delete song');
     return this.apiService.post('/api/delete-song', songData);
   }
 
   getPlaylist() {
-    return this.apiService.post('/api/get-playlist', {get: 'playlist'});
+    return this.apiService.post('/api/get-playlist', {});
   }
 }