diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 08f2b22..478a7b9 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,19 +1,45 @@
image: node:latest
+stages:
+ - build
+ - deploy
+
cache:
paths:
- node_modules/
-
+
before_script:
- apt-get update -y && apt-get upgrade -y
- - apt-get install rsync -y
- - mkdir -p ~/.ssh
- - echo -e "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
- - chmod 600 ~/.ssh/id_rsa
- - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
-
-test_execution:
+
+build:
+ stage: build
script:
- npm install
- npm run build
- - rsync -rvz build ryuuji@142.93.158.54:~
\ No newline at end of file
+ artifacts:
+ paths:
+ - build/
+
+deploy:
+ stage: deploy
+ script:
+ ## Install ssh-agent if not already installed
+ - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client git -y )'
+
+ ## Run ssh-agent (inside the build environment)
+ - eval $(ssh-agent -s)
+
+ ## Add the SSH key stored in SSH_PRIVATE_KEY variable to the agent store
+ - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
+
+ ## Create the SSH directory and give it the right permissions
+ - mkdir -p ~/.ssh
+ - chmod 700 ~/.ssh
+
+ ## Use ssh-keyscan to scan the keys of the private server
+ - ssh-keyscan "$REMOTE_HOST" >> ~/.ssh/known_hosts
+ - chmod 644 ~/.ssh/known_hosts
+
+ ## Sync the project to the deploy route
+ - apt-get install rsync -y
+ - rsync -rvz build "$DEPLOY_ROUTE"
diff --git a/src/app.jsx b/src/app.jsx
index 2b7eafa..c6cade3 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -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 (
-
- )
- }
-}
-export function Main() {
- return (
-
-
- Busca la musica que te gusta!
-
-
- )
-}
-
-export function NoRoute() {
- return (
-
-
Esa pagina no existe
-
- )
-}
diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
new file mode 100644
index 0000000..e48278b
--- /dev/null
+++ b/src/components/Nav.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+export class Nav extends React.Component {
+ render() {
+ return (
+
+ )
+ }
+}
diff --git a/src/components/Paginate.jsx b/src/components/Paginate.jsx
index 556ea17..980576d 100644
--- a/src/components/Paginate.jsx
+++ b/src/components/Paginate.jsx
@@ -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 (
+
+
+ « Anterior
+
+
+ );
+ if (page === RIGHT_PAGE) return (
+
+
+ Siguiente »
+
+
+ );
+ return (
+
+ {page}
+
+ );
+ })
return (
- {pages.map((page, index) => {
- if (page === LEFT_PAGE) return (
- -
-
- « Anterior
-
-
- );
- if (page === RIGHT_PAGE) return (
- -
-
- Siguiente »
-
-
- );
- return (
- -
- {page}
-
- );
- })}
+ {blocks}
);
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index e26a923..bf1d040 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -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() {
diff --git a/src/index.jsx b/src/index.jsx
index f3b8dab..a98a8cd 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -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 = () => (
+
+
+ Busca la musica que te gusta!
+
+
+)
+
+const NoRoute = () => (
+
+
Esa pagina no existe
+
+)
const App = () => (
-
-
-
-
-
+
+
+
+
+
+
+
+
);
ReactDOM.render(
diff --git a/src/services/search_service.js b/src/services/search_service.js
index ede4c6c..0b6c8bd 100644
--- a/src/services/search_service.js
+++ b/src/services/search_service.js
@@ -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}`;