Playlist detailssss

fresatto · Jun 11, 2019 · e6fbebe · e6fbebe
1 parent cc34756
commit e6fbebe
Show file tree

Hide file tree

Showing 19 changed files with 717 additions and 107 deletions.
diff --git a/README.md b/README.md
@@ -7,4 +7,5 @@ Cópia do spotify utilizando ReactJS e Redux
 1. Clone o repositório.
 2. Abra o terminal e acesse o diretório.
 3. Execute `npm install` ou `yarn install`, para instalar as dependências.
-4. Execute `npm start` ou `yarn start`, para executar o projeto.
+4. Execute o comando `json-server server.json -p 3001 -w -d 500` para rodar o "back-end", caso não funcione execute `yarn global add json-server` ou `npm install -g json-server` e tente novamente.
+5. Execute `npm start` ou `yarn start`, para executar o projeto.
diff --git a/package.json b/package.json
@@ -3,13 +3,20 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
+		"axios": "^0.19.0",
 		"node-sass": "^4.12.0",
 		"rc-slider": "^8.6.11",
 		"react": "^16.8.6",
 		"react-dom": "^16.8.6",
 		"react-icons": "^3.7.0",
+		"react-redux": "^7.0.3",
 		"react-router-dom": "^5.0.1",
 		"react-scripts": "3.0.1",
+		"reactotron-react-js": "^3.3.1",
+		"reactotron-redux": "^3.1.1",
+		"reactotron-redux-saga": "^4.2.2",
+		"redux": "^4.0.1",
+		"redux-saga": "^1.0.2",
 		"styled-components": "^4.2.1"
 	},
 	"homepage": "https://gabrielfresatto.github.io/spotify/",

diff --git a/server.json b/server.json
@@ -0,0 +1,75 @@
+{
+	"playlists": [
+		{
+			"id": 1,
+			"title": "Saudade das antigas",
+			"description": "Músicas antigas que vão te lembrar dos melhores momentos.",
+			"thumbnail": "https://s3-sa-east-1.amazonaws.com/gonative/linkin_park.jpg"
+		},
+		{
+			"id": 2,
+			"title": "In Too Deep",
+			"description": "As melhores músicas do POP clássico em uma única playlist.",
+			"thumbnail": "https://s3-sa-east-1.amazonaws.com/gonative/foo_fighters.jpg"
+		},
+		{
+			"id": 3,
+			"title": "Salad Days",
+			"description": "Animar seu dia nunca foi tão fácil, ouça essas músicas e tenha um dia mais feliz!",
+			"thumbnail": "https://s3-sa-east-1.amazonaws.com/gonative/alok.jpg"
+		},
+		{
+			"id": 4,
+			"title": "Só elas",
+			"description": "As melhores cantoras POP reunidas em uma playlist pra você.",
+			"thumbnail": "https://s3-sa-east-1.amazonaws.com/gonative/linkin_park.jpg"
+		}
+	],
+	"songs": [
+		{
+			"id": 0,
+			"title": "Papercut",
+			"author": "Linkin Park",
+			"album": "Hybrid Theory",
+			"file": "https://s3-sa-east-1.amazonaws.com/gonative/1.mp3",
+			"thumbnail": "https://s3-sa-east-1.amazonaws.com/gonative/linkin_park.jpg",
+			"playlistId": 1
+		},
+		{
+			"id": 1,
+			"title": "One Step Closer",
+			"author": "Linkin Park",
+			"album": "Hybrid Theory",
+			"file": "https://s3-sa-east-1.amazonaws.com/gonative/2.mp3",
+			"thumbnail": "https://s3-sa-east-1.amazonaws.com/gonative/linkin_park.jpg",
+			"playlistId": 2
+		},
+		{
+			"id": 2,
+			"title": "With You",
+			"author": "Linkin Park",
+			"album": "Hybrid Theory",
+			"file": "https://s3-sa-east-1.amazonaws.com/gonative/3.mp3",
+			"thumbnail": "https://s3-sa-east-1.amazonaws.com/gonative/linkin_park.jpg",
+			"playlistId": 3
+		},
+		{
+			"id": 3,
+			"title": "Points of Authority",
+			"author": "Linkin Park",
+			"album": "Hybrid Theory",
+			"file": "https://s3-sa-east-1.amazonaws.com/gonative/4.mp3",
+			"thumbnail": "https://s3-sa-east-1.amazonaws.com/gonative/linkin_park.jpg",
+			"playlistId": 4
+		},
+		{
+			"id": 4,
+			"title": "Crawling",
+			"author": "Linkin Park",
+			"album": "Hybrid Theory",
+			"file": "https://s3-sa-east-1.amazonaws.com/gonative/5.mp3",
+			"thumbnail": "https://s3-sa-east-1.amazonaws.com/gonative/linkin_park.jpg",
+			"playlistId": 4
+		}
+	]
+}
diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,40 @@
 import React from 'react'
 import './App.scss'
+import { Provider } from 'react-redux'
 import { BrowserRouter } from 'react-router-dom'
 
+// Reactotron
+import './config/reactotron'
+// Consts
+import store from './store'
+
+// Rotas
+import Routes from './routes'
+
+// Components
 import Sidebar from './components/Sidebar'
-import Player from './components/Player'
 import Header from './components/Header'
+import Player from './components/Player'
+
+// Styles
 import { Wrapper, Container, Content } from './styles/components'
-import Routes from './routes'
 function App() {
+	console.tron.log('teste')
 	return (
-		<BrowserRouter>
-			<Wrapper>
-				<Container>
-					<Sidebar />
-					<Content>
-						<Header />
-						<Routes />
-					</Content>
-				</Container>
-				<Player />
-			</Wrapper>
-		</BrowserRouter>
+		<Provider store={store}>
+			<BrowserRouter>
+				<Wrapper>
+					<Container>
+						<Sidebar />
+						<Content>
+							<Header />
+							<Routes />
+						</Content>
+					</Container>
+					<Player />
+				</Wrapper>
+			</BrowserRouter>
+		</Provider>
 	)
 }
 

diff --git a/src/components/Loading/index.js b/src/components/Loading/index.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Container, Spinner } from './styles'
+import LoadingIncon from '../../assets/images/loading.svg'
+
+const Loading = () => (
+	<Container>
+		<Spinner src={LoadingIncon} alt="Loading" />
+	</Container>
+)
+
+export default Loading
diff --git a/src/components/Loading/styles.js b/src/components/Loading/styles.js
@@ -0,0 +1,21 @@
+import styled, { keyframes } from 'styled-components'
+
+const rotate360 = keyframes`
+	from {
+		transform: rotate(0deg)
+	}
+
+	to {
+		transform: rotate(360deg)
+	}
+`
+export const Container = styled.section`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+`
+export const Spinner = styled.img`
+	animation: ${rotate360} 2s linear infinite;
+`
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
@@ -1,38 +1,67 @@
-import React from 'react'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
 
+import { Creators as PlaylistsAction } from '../../store/ducks/playlists'
 // Styles
 import { Container, Group, GroupTitle, NewPlayList, GroupItem } from './styles'
 
 // Images
 import add_playlist from '../../assets/images/add_playlist.svg'
 
-const Sidebar = () => (
-	<Container>
-		<Group>
-			<GroupItem>Navegar</GroupItem>
-			<GroupItem>Radio</GroupItem>
-		</Group>
-		<Group>
-			<GroupTitle>Sua biblioteca</GroupTitle>
-			<GroupItem>Seu Daily Mix</GroupItem>
-			<GroupItem>Tocados recentemente</GroupItem>
-			<GroupItem>Músicas</GroupItem>
-			<GroupItem>Albúns</GroupItem>
-			<GroupItem>Artistas</GroupItem>
-			<GroupItem>Estações</GroupItem>
-			<GroupItem>Arquivos locais</GroupItem>
-			<GroupItem>Podcasts</GroupItem>
-		</Group>
-		<Group>
-			<GroupTitle>Playlists</GroupTitle>
-			<GroupItem>AVE</GroupItem>
-			<GroupItem>As mais braba</GroupItem>
-		</Group>
-		<NewPlayList>
-			<img src={add_playlist} alt="Adicionar nova playlist" />
-			Nova playlist
-		</NewPlayList>
-	</Container>
-)
-
-export default Sidebar
+// Component
+import Loading from '../../components/Loading'
+
+class Sidebar extends Component {
+	componentDidMount() {
+		this.props.getPlaylistsRequest()
+	}
+
+	render() {
+		return (
+			<Container>
+				<Group>
+					<GroupItem>Navegar</GroupItem>
+					<GroupItem>Radio</GroupItem>
+				</Group>
+				<Group>
+					<GroupTitle>Sua biblioteca</GroupTitle>
+					<GroupItem>Seu Daily Mix</GroupItem>
+					<GroupItem>Tocados recentemente</GroupItem>
+					<GroupItem>Músicas</GroupItem>
+					<GroupItem>Albúns</GroupItem>
+					<GroupItem>Artistas</GroupItem>
+					<GroupItem>Estações</GroupItem>
+					<GroupItem>Arquivos locais</GroupItem>
+					<GroupItem>Podcasts</GroupItem>
+				</Group>
+				<Group>
+					<GroupTitle>Playlists</GroupTitle>
+					{!!this.props.playlists.data.length ? (
+						this.props.playlists.data.map(playlist => (
+							<GroupItem key={playlist.id}>{playlist.title}</GroupItem>
+						))
+					) : (
+						<Loading />
+					)}
+				</Group>
+				<NewPlayList>
+					<img src={add_playlist} alt="Adicionar nova playlist" />
+					Nova playlist
+				</NewPlayList>
+			</Container>
+		)
+	}
+}
+
+const mapStateToProps = state => ({
+	playlists: state.playlists,
+})
+
+const mapDispatchToProps = dispatch =>
+	bindActionCreators(PlaylistsAction, dispatch)
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(Sidebar)
diff --git a/src/config/reactotron.js b/src/config/reactotron.js
@@ -0,0 +1,12 @@
+import Reactotron from 'reactotron-react-js'
+import { reactotronRedux } from 'reactotron-redux'
+import sagaPlugin from 'reactotron-redux-saga'
+const reactotron = Reactotron.configure({ name: 'Spotify Fresattinho' })
+	.use(reactotronRedux())
+	.use(sagaPlugin())
+	.connect()
+
+reactotron.clear()
+console.tron = reactotron
+
+export default Reactotron
diff --git a/src/pages/browse/index.js b/src/pages/browse/index.js
@@ -1,18 +1,49 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { Container, Title, List, Playlist } from './styles'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import Loading from '../../components/Loading'
+import { Creators as PlaylistActions } from '../../store/ducks/playlists'
 
-const Browse = () => (
-	<Container>
-		<Title>Navegar</Title>
+class Browse extends Component {
+	componentDidMount() {
+		this.props.getPlaylistsRequest()
+	}
 
-		<List>
-			<Playlist to="/playlists/1">
-				<img src="https://upload.wikimedia.org/wikipedia/pt/thumb/b/bf/Red_Hot_Chili_Peppers_-_Blood_Sugar_Sex_Magik.jpg/220px-Red_Hot_Chili_Peppers_-_Blood_Sugar_Sex_Magik.jpg" />
-				<strong>Red hot chili peppers</strong>
-				<p>Lorem ipsum</p>
-			</Playlist>
-		</List>
-	</Container>
-)
+	render() {
+		const { playlists } = this.props
+		return (
+			<Container>
+				<Title>Navegar</Title>
+				{!!playlists.data.length ? (
+					<List>
+						{playlists.data.map(playlist => (
+							<Playlist
+								key={playlist.id}
+								to={`/playlists/${playlist.id}`}
+							>
+								<img src={playlist.thumbnail} alt={playlist.title} />
+								<strong>{playlist.title}</strong>
+								<p>{playlist.description}</p>
+							</Playlist>
+						))}
+					</List>
+				) : (
+					<Loading />
+				)}
+			</Container>
+		)
+	}
+}
 
-export default Browse
+const mapStateToProps = state => ({
+	playlists: state.playlists,
+})
+
+const mapDispatchToProps = dispatch =>
+	bindActionCreators(PlaylistActions, dispatch)
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(Browse)