Updating .gitlab-ci.yml

.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:~
+  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"

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 (
-            <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>
-    )
-}

src/components/Nav.jsx

@@ -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>
+        )
+    }
+}

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)
-                // handle: (1) < {5 6} [7] {8 9} (10)
+            if (hasLeftSpill && !hasRightSpill) {
-                case (hasLeftSpill && !hasRightSpill): {
+                const extraPages = range(startPage - spillOffset, startPage - 1);
-                    const extraPages = range(startPage - spillOffset, startPage - 1);
+                pages = [LEFT_PAGE, ...extraPages, ...pages];
-                    pages = [LEFT_PAGE, ...extraPages, ...pages];
-                    break;
-                }
-
                 // handle: (1) {2 3} [4] {5 6} > (10)
-                case (!hasLeftSpill && hasRightSpill): {
+            } else if (!hasLeftSpill && hasRightSpill) {
-                    const extraPages = range(endPage + 1, endPage + spillOffset);
+                const extraPages = range(endPage + 1, endPage + spillOffset);
-                    pages = [...pages, ...extraPages, RIGHT_PAGE];
+                pages = [...pages, ...extraPages, RIGHT_PAGE];
-                    break;
-                }
-
                 // handle: (1) < {4 5} [6] {7 8} > (10)
-                case (hasLeftSpill && hasRightSpill):
+            } else if (hasLeftSpill && hasRightSpill) {
-                default: {
+                pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];
-                    pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];
-                    break;
-                }
             }
 
             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) => {
+                    {blocks}
-                        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>
-                        );
-                    })}
                 </ul>
             </Fragment>
         );

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() {

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 = () => (
+    <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>
-        <Main path='/'/>
+        <Nav/>
-        <Search path='/search'/>
+        <Router>
-        <NoRoute default/>
+            <Main path='/'/>
-    </Router>
+            <Search path='/search'/>
+            <NoRoute default/>
+        </Router>
+    </main>
 );
 
 ReactDOM.render(

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}`;