Skip to content

Commit

Permalink
Merge pull request #181 from heatherpark/style/code-cleanup
Browse files Browse the repository at this point in the history
(refactor) Clean up code for landing page and mixtape search
  • Loading branch information
jmg2107 authored Aug 26, 2016
2 parents 812ca2b + 94b3bae commit a10211c
Show file tree
Hide file tree
Showing 22 changed files with 153 additions and 121 deletions.
2 changes: 1 addition & 1 deletion src/app/landing/team/team-content.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
16 changes: 10 additions & 6 deletions src/app/landing/team/team.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion src/app/landing/team/team.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/app/landing/testimonials/testimonials-content.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
Expand Down
1 change: 1 addition & 0 deletions src/app/landing/testimonials/testimonials.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
.text {
font-style: italic;
margin-bottom: 25px;
text-transform: none;
width: 470px;
}

Expand Down
4 changes: 2 additions & 2 deletions src/app/mixtape/search/index.ts
Original file line number Diff line number Diff line change
@@ -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';
5 changes: 5 additions & 0 deletions src/app/mixtape/search/input/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/** components **/
export { SoundCloudSearchInputComponent } from './search-input.component';

/** models **/
export { SearchParams } from './search-params.model';
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
55 changes: 55 additions & 0 deletions src/app/mixtape/search/input/search-input.component.ts
Original file line number Diff line number Diff line change
@@ -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
}
})
);
}
}
4 changes: 4 additions & 0 deletions src/app/mixtape/search/input/search-params.model.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export class SearchParams {
q: string;
limit: number;
}
2 changes: 2 additions & 0 deletions src/app/mixtape/search/results/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/** components **/
export { SoundCloudSearchResultsComponent } from './search-results.component';
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@ h2:after {
}

.glyphicon-plus {
cursor: pointer;
color: #91204D;
cursor: pointer;
font-size: 0.75em;
margin-right: 7px;
}
Expand All @@ -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;
}
56 changes: 56 additions & 0 deletions src/app/mixtape/search/results/search-results.component.ts
Original file line number Diff line number Diff line change
@@ -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
}
})
);
}
}
44 changes: 0 additions & 44 deletions src/app/mixtape/search/search-input.component.ts

This file was deleted.

50 changes: 0 additions & 50 deletions src/app/mixtape/search/search-results.component.ts

This file was deleted.

2 changes: 1 addition & 1 deletion src/app/mixtape/search/search.component.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.search-container {
font-family: 'Open Sans', sans-serif;
color: #343956;
font-family: 'Open Sans', sans-serif;
}

.input-container {
Expand Down
4 changes: 2 additions & 2 deletions src/app/mixtape/search/search.component.ts
Original file line number Diff line number Diff line change
@@ -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',
Expand Down
4 changes: 2 additions & 2 deletions src/app/mixtape/shared/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/** services **/
export { PlaylistService } from './playlist.service';

/** interfaces **/
export { Song } from './song';
/** models **/
export { Song } from './song.model';
3 changes: 1 addition & 2 deletions src/app/mixtape/shared/playlist.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', {});
}
}
File renamed without changes.

0 comments on commit a10211c

Please sign in to comment.