Skip to content

Commit

Permalink
Download queue display + empty state
Browse files Browse the repository at this point in the history
  • Loading branch information
nukeop committed Apr 9, 2019
1 parent 8784d8e commit 27a25b6
Show file tree
Hide file tree
Showing 8 changed files with 73 additions and 31 deletions.
7 changes: 5 additions & 2 deletions app/components/Downloads/DownloadsItem/index.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Table } from 'semantic-ui-react';
import _ from 'lodash';

import styles from './styles.scss';

const DownloadsItem = props => {
const {
item
} = props;console.log(props.item);
} = props;

return (
<Table.Row>
<Table.Cell>
{ item.status }
</Table.Cell>
<Table.Cell>
{ item.artist.name } - { item.name }
{ _.get(item, 'track.artist.name') } - { _.get(item, 'track.name') }
</Table.Cell>
<Table.Cell>
{ item.completion }
</Table.Cell>
</Table.Row>
);
Expand Down
2 changes: 1 addition & 1 deletion app/components/Downloads/DownloadsList/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const DownloadsList = props => {
const {
items
} = props;
console.log(items);

return (
<Table inverted>
<Table.Header>
Expand Down
39 changes: 32 additions & 7 deletions app/components/Downloads/index.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,45 @@
import React from 'react';
import PropTypes from 'prop-types';
import Header from '../Header';
import FontAwesome from 'react-fontawesome';

import Header from '../Header';
import DownloadsList from './DownloadsList';

import styles from './styles.scss';

const EmptyState = () => {
return (
<div className={styles.empty_state}>
<FontAwesome name='download'/>
<h2>
Downloads are empty.
</h2>
<div>
Add something to your download queue and you'll see it here!
</div>
</div>
);
};

const Downloads = props => {
return (
<div className={styles.downloads_container}>
<Header>
Downloads
</Header>
<DownloadsList
items={ props.downloads }
/>

{
props.downloads.length === 0 &&
<EmptyState />
}
{
props.downloads.length > 0 &&
<React.Fragment>
<Header>
Downloads
</Header>
<DownloadsList
items={ props.downloads }
/>
</React.Fragment>
}
</div>
);
};
Expand Down
9 changes: 8 additions & 1 deletion app/components/Downloads/styles.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
.downloads_container {
@import '../../mixin.scss';

.downloads_container {
position: relative;
height: 100%;

.empty_state {
@include emptyState;
}
}
22 changes: 3 additions & 19 deletions app/components/LyricsView/styles.scss
Original file line number Diff line number Diff line change
@@ -1,27 +1,11 @@
@import '../../mixin.scss';

.lyrics_view {
position: relative;
height: 100%;

.empty_state {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;

height: 100%;

.fa {
font-size: 72px;
}

h2 {
font-size: 48px;
font-weight: normal;
}

div {
font-size: 20px;
}
@include emptyState;
}

.lyrics_text{
Expand Down
1 change: 1 addition & 0 deletions app/containers/DownloadsContainer/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux';
import Downloads from '../../components/Downloads';

const DownloadsContainer = props => {
console.log(props);
return (
<Downloads
downloads={ props.downloads }
Expand Down
22 changes: 22 additions & 0 deletions app/mixin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,25 @@
text-overflow: ellipsis;
white-space: nowrap;
}

@mixin emptyState {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;

height: 100%;

.fa {
font-size: 72px;
}

h2 {
font-size: 48px;
font-weight: normal;
}

div {
font-size: 20px;
}
}
2 changes: 1 addition & 1 deletion app/reducers/downloads.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function DownloadsReducer(state=initialState, action) {
switch (action.type) {
case ADD_TO_DOWNLOADS:
return Object.assign({}, state, {
downloads: _.concat(state.downloads, action.payload.track)
downloads: _.concat(state.downloads, action.payload.item)
});
default:
return state;
Expand Down

0 comments on commit 27a25b6

Please sign in to comment.