Updating .gitlab-ci.yml

2020-06-02 05:09:26 -04:00
parent d13836eff2
commit 61c931c715
7 changed files with 111 additions and 94 deletions
--- 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:~
+  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"
--- 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 (
-            <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>
-    )
-}
--- a/src/components/Nav.jsx
+++ b/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>
+        )
+    }
+}
--- 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 (
+                <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>
        );
--- 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() {
--- 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 = () => (
+    <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(
--- 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}`;