skrd/musiclist-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updating .gitlab-ci.yml

Browse Source
This commit is contained in:
Daniel Cortes
2020-06-02 05:09:26 -04:00
parent d13836eff2
commit 61c931c715
7 changed files with 111 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/app.jsx
View File

@@ -1,34 +1,4 @@
import React from "react";
import React, {Fragment} from "react";
import SearchBar from "./components/SearchBar";
export class Nav extends React.Component {
render() {
return (
<nav className='nav'>
<h1>MusicList</h1>
<ul className='nav-links'>
<li className='link'><a href='/login'>Iniciar Sesion</a></li>
<li className='link'><a href='/signup'>Registrate</a></li>
</ul>
</nav>
)
}
}
export function Main() {
return (
<main>
<Nav/>
<h1>Busca la musica que te gusta!</h1>
<SearchBar/>
</main>
)
}
export function NoRoute() {
return (
<div>
<h1>Esa pagina no existe</h1>
</div>
)
}

15
src/components/Nav.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from "react";
export class Nav extends React.Component {
render() {
return (
<nav className='nav'>
<h1>MusicList</h1>
<ul className='nav-links'>
<li className='link'><a href='/login'>Iniciar Sesion</a></li>
<li className='link'><a href='/signup'>Registrate</a></li>
</ul>
</nav>
)
}
}

76
src/components/Paginate.jsx
View File

@@ -92,7 +92,6 @@ export class Paginate extends Component {
const totalBlocks = totalNumbers + 2;
if (totalPages > totalBlocks) {
const startPage = Math.max(2, currentPage - pageNeighbours);
const endPage = Math.min(totalPages - 1, currentPage + pageNeighbours);
@@ -107,27 +106,17 @@ export class Paginate extends Component {
const hasRightSpill = (totalPages - endPage) > 1;
const spillOffset = totalNumbers - (pages.length + 1);
switch (true) {
// handle: (1) < {5 6} [7] {8 9} (10)
case (hasLeftSpill && !hasRightSpill): {
const extraPages = range(startPage - spillOffset, startPage - 1);
pages = [LEFT_PAGE, ...extraPages, ...pages];
break;
}
// handle: (1) < {5 6} [7] {8 9} (10)
if (hasLeftSpill && !hasRightSpill) {
const extraPages = range(startPage - spillOffset, startPage - 1);
pages = [LEFT_PAGE, ...extraPages, ...pages];
// handle: (1) {2 3} [4] {5 6} > (10)
case (!hasLeftSpill && hasRightSpill): {
const extraPages = range(endPage + 1, endPage + spillOffset);
pages = [...pages, ...extraPages, RIGHT_PAGE];
break;
}
} else if (!hasLeftSpill && hasRightSpill) {
const extraPages = range(endPage + 1, endPage + spillOffset);
pages = [...pages, ...extraPages, RIGHT_PAGE];
// handle: (1) < {4 5} [6] {7 8} > (10)
case (hasLeftSpill && hasRightSpill):
default: {
pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];
break;
}
} else if (hasLeftSpill && hasRightSpill) {
pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];
}
return [1, ...pages, totalPages];
@@ -143,32 +132,35 @@ export class Paginate extends Component {
const currentPage = this.state.currentPage;
const pages = this.fetchPageNumbers();
const blocks = pages.map((page, index) => {
if (page === LEFT_PAGE) return (
<li key={page} className="page-item">
<a className="page-link" href={this.makePageLink(this.state.currentPage - 1)}
onClick={this.handleMoveLeft}>
<span>&laquo; Anterior</span>
</a>
</li>
);
if (page === RIGHT_PAGE) return (
<li key={page} className="page-item">
<a className="page-link" href={this.makePageLink(this.state.currentPage + 1)}
onClick={this.handleMoveRight}>
<span>Siguiente &raquo;</span>
</a>
</li>
);
return (
<li key={page} className={`page-item ${currentPage === page ? 'active' : ''}`}>
<a className="page-link" href={this.makePageLink(index)}
onClick={this.handleClick(page)}>{page}</a>
</li>
);
})
return (
<Fragment>
<ul className="pagination">
{pages.map((page, index) => {
if (page === LEFT_PAGE) return (
<li key={page} className="page-item">
<a className="page-link" href={this.makePageLink(this.state.currentPage - 1)} onClick={this.handleMoveLeft}>
<span>&laquo; Anterior</span>
</a>
</li>
);
if (page === RIGHT_PAGE) return (
<li key={page} className="page-item">
<a className="page-link" href={this.makePageLink(this.state.currentPage + 1)} onClick={this.handleMoveRight}>
<span>Siguiente &raquo;</span>
</a>
</li>
);
return (
<li key={page} className={`page-item ${currentPage === page ? 'active' : ''}`}>
<a className="page-link" href={this.makePageLink(index)}
onClick={this.handleClick(page)}>{page}</a>
</li>
);
})}
{blocks}
</ul>
</Fragment>
);

4
src/components/Search.jsx
View File

@@ -9,10 +9,6 @@ import {Paginate} from "./Paginate";
class SearchList extends React.Component {
constructor(props) {
super(props);
this.buildList(this.props.artists);
}
buildList(artists) {
}
render() {

32
src/index.jsx
View File

@@ -1,18 +1,36 @@
import React from 'react';
import React, {Fragment} from 'react';
import ReactDOM from 'react-dom';
import {Main, NoRoute} from "./app";
import {Search} from './components/Search';
import {Router} from "@reach/router";
import SearchBar from "./components/SearchBar";
import './styles/reset.css';
import './styles/main.css';
import {Nav} from "./components/Nav";
const Main = () => (
<Fragment>
<Nav/>
<h1>Busca la musica que te gusta!</h1>
<SearchBar/>
</Fragment>
)
const NoRoute = () => (
<div>
<h1>Esa pagina no existe</h1>
</div>
)
const App = () => (
<Router>
<Main path='/'/>
<Search path='/search'/>
<NoRoute default/>
</Router>
<main>
<Nav/>
<Router>
<Main path='/'/>
<Search path='/search'/>
<NoRoute default/>
</Router>
</main>
);
ReactDOM.render(

2
src/services/search_service.js
View File

@@ -1,6 +1,6 @@
import axios from 'axios'
let baseUrl = 'http://localhost:8000/api/brainz';
let baseUrl = 'https://musiclist.danielcortes.xyz/api/brainz';
export async function searchArtist(query, page) {
const url = `${baseUrl}/artist?query=${query}&page=${page}`;