From cd7742f78d9a0ce194db4a89ffbbf4b67606f25a Mon Sep 17 00:00:00 2001 From: Daniel Cortes Date: Thu, 4 Jun 2020 01:53:45 -0400 Subject: [PATCH] Funcionalidad con tabs Fue mas complicado de lo que pensaba, pero quedo bien y aprendi un poco mas en como pensar en react ~ --- TODO.md | 1 + package-lock.json | 14 +++ package.json | 1 + src/components/Search.jsx | 198 +++++++++++++++++++++++--------------- src/index.jsx | 4 +- 5 files changed, 142 insertions(+), 76 deletions(-) diff --git a/TODO.md b/TODO.md index e69de29..f227626 100644 --- a/TODO.md +++ b/TODO.md @@ -0,0 +1 @@ +Searchbar tendria que hacer callback de la query que se ejecuto, no ejecutarla el mismo diff --git a/package-lock.json b/package-lock.json index 1848afd..eab39e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3618,6 +3618,11 @@ "shallow-clone": "^0.1.2" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -10948,6 +10953,15 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-tabs": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.1.1.tgz", + "integrity": "sha512-HpySC29NN1BkzBAnOC+ajfzPbTaVZcSWzMSjk56uAhPC/rBGtli8lTysR4CfPAyEE/hfweIzagOIoJ7nu80yng==", + "requires": { + "clsx": "^1.1.0", + "prop-types": "^15.5.0" + } + }, "react-textarea-autosize": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz", diff --git a/package.json b/package.json index 80eab19..ad2ffdd 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-json-view": "^1.19.1", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", + "react-tabs": "^3.1.1", "typescript": "^3.7.5" }, "scripts": { diff --git a/src/components/Search.jsx b/src/components/Search.jsx index a989cec..79753fb 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -5,6 +5,8 @@ import {searchArtist} from "../services/search_service"; import SearchBar from "./SearchBar"; import Paginate from "./Paginate"; import {Link} from "react-router-dom"; +import {Tab, TabList, TabPanel, Tabs} from "react-tabs"; + class SearchArtist extends React.Component { render() { @@ -20,97 +22,143 @@ class SearchArtist extends React.Component { } } -class SearchList extends React.Component { +class SearchArtists extends React.Component { + constructor(props) { + super(props); + this.state = { artists: null, paginate: null, page: 1 } + } + + componentDidMount = _ => this.loadArtists(this.props.query, this.state.page); + + componentDidUpdate = (prevProps, prevState) => { + if(prevProps.query !== this.props.query || prevState.page !== this.state.page) { + this.setState({artists: null, paginate: null}) + this.loadArtists(this.props.query, this.state.page) + } + }; + + makeLink = page => `/search/artist?query=${this.state.query}&page=${page}`; + + handlePageChange = page => { + this.setState({artists: null, page: page}) + this.props.onPageChange(page); + } + + loadArtists = (query, page) => { + page = page ? page : 1; + + searchArtist(query, page).then((response) => { + console.log(response); + this.setState({ + artists: response.artists, + paginate: response.paginate + }) + }) + }; + + render = () => { + let artists =

Cargando...

; + if(this.state.artists) { + artists = this.state.artists.map((artist) => ); + } + + let paginate; + if(this.state.paginate){ + const total = this.state.paginate.total; + const currentPage = this.state.paginate.current_page; + const pageLimit = this.state.paginate.per_page; + + paginate = + } + + return ( + +
    + {artists} +
+ {paginate} + + ) + }; +} + +class SearchTabs extends React.Component { + constructor(props) { + super(props); + this.handleSelect = this.handleSelect.bind(this); + } + + nameToIndex(name) { + if(name === 'artist') return 0 + if(name === 'disc') return 1 + if(name === 'song') return 2 + else return 0; + } + + indexToName(index){ + if(index === 0) return 'artist' + if(index === 1) return 'disc' + if(index === 2) return 'song' + else return 'artist'; + } + + handleSelect(index) { + if (this.props.onTabChanged) this.props.onTabChanged(this.indexToName(index)) + } + + handlePageChange = (who) => (index) => { + this.props.onPageChange(who, index); + } + render() { - const artists = this.props.artists; - return
    - {artists.map((artist) => )} -
+ return ( + + + Artistas + Discos + Canciones + + +

Discos

 +

Canciones

 + + ) } } export class Search extends React.Component { constructor(props) { super(props); - - this.makeLink = this.makeLink.bind(this); - this.handlePageChange = this.handlePageChange.bind(this); - this.handleQueryChange = this.handleQueryChange.bind(this); - const parsed = queryString.parse(this.props.location.search); - this.state = { - artists: null, - paginate: null, + who: this.props.match.params['who'] ? this.props.match.params['who'] : 'artist', query: parsed.query, page: !isNaN(+parsed.page) ? +parsed.page : 1, }; } - componentDidMount() { - this.loadArtists(this.state.query, this.state.page); - } + navigateToState = () => { + const link = `/search/${this.state.who}?query=${this.state.query}&page=${this.state.page}`; + this.props.history.push(link); + }; - componentDidUpdate(prevProps, prevState, snapshot) { - if(prevState.query !== this.state.query || prevState.page !== this.state.page){ - this.loadArtists(this.state.query, this.state.page); - } - } + handleQueryChange = query => { + this.setState({query: query, page: 1}, this.navigateToState); + }; - makeLink(page) { - return `/search?query=${this.state.query}&page=${page}` - } + handleTabChange = name => { + this.setState({who: name, page: 1}, this.navigateToState); + }; - handlePageChange(page) { - this.props.history.push(this.makeLink(page)); - this.setState({page: page}); - } + handlePageChange = (who, page) => { + this.setState({who: who, page: page}, this.navigateToState); + }; - handleQueryChange(query) { - this.setState({query: query, page: 1}); - } - - render() { - let paginate = null; - let artists = null; - - if (this.state.paginate) { - const total = this.state.paginate.total; - const currentPage = this.state.paginate.current_page; - const pageLimit = this.state.paginate.per_page; - - paginate = - } - - if (this.state.artists) { - artists = ( - - - - ); - } - - return ( -
-

Busqueda

- - {artists ? artists :

Loading...

} - {paginate && paginate} -
- ); - } - - loadArtists(query, page) { - if (!page) { - page = 1; - } - - searchArtist(query, page).then((response) => { - this.setState({ - artists: response.artists, - paginate: response.paginate, - }) - }) - } + render = () => ( +
+

Búsqueda

+ + +
+ ); } diff --git a/src/index.jsx b/src/index.jsx index b67afd5..d8a2b56 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -3,8 +3,10 @@ import ReactDOM from 'react-dom'; import {Search} from './components/Search'; import SearchBar from "./components/SearchBar"; +import 'react-tabs/style/react-tabs.css' import './styles/reset.css'; import './styles/main.css'; + import {Nav} from "./components/Nav"; import {BrowserRouter, Switch, Route} from "react-router-dom"; @@ -30,7 +32,7 @@ const App = () => (