Merge branch 'develop'

ce-itcr · Oct 10, 2021 · f229c3e · f229c3e
2 parents 065e27a + dd09a0d
commit f229c3e
Show file tree

Hide file tree

Showing 16 changed files with 112 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,8 @@
     "reactstrap": "^8.10.0",
     "styled-components": "^5.3.1",
     "universal-cookie": "^4.0.4",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "pm2": "^5.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/clients/ProfileClient.js b/src/clients/ProfileClient.js
@@ -1,9 +1,10 @@
 import axios from "axios";
 
 export class ProfileClient {
-    async getUserData(username) {
-        const url = "https://sheet.best/api/sheets/b5fc9c7a-0f86-43e6-a8c7-23881a278ddf/search?"
-        const response =  await axios(url, {params: {"username": username}})
+    async getUserData(username, password) {
+        const url = `https://karaokeapi.josevenegasv.com/karaoke/login/{"username":"` + username + `", "password":"` + password + `"}`
+        const response =  await axios(url)
+        //alert(JSON.stringify(response))
         return response
     }
 }

diff --git a/src/clients/SigninClient.js b/src/clients/SigninClient.js
@@ -2,8 +2,9 @@ import axios from "axios";
 
 export class SigninClient {
     async verifyUser(username, password) {
-        const url = "https://sheet.best/api/sheets/b5fc9c7a-0f86-43e6-a8c7-23881a278ddf/search?"
-        const response =  await axios(url, {params: {"username": username, "password": password}})
+        const url = `https://karaokeapi.josevenegasv.com/karaoke/login/{"username":"` + username + `", "password":"` + password + `"}`
+        const response =  await axios(url)
+        //alert(JSON.stringify(response))
         return response
     }
 }

diff --git a/src/clients/SongsClient.js b/src/clients/SongsClient.js
@@ -2,37 +2,37 @@ import axios from "axios";
 
 export class SongsClient {
     async getAllSongs() {
-        const url = "https://sheet.best/api/sheets/b5fc9c7a-0f86-43e6-a8c7-23881a278ddf/tabs/songs"
+        const url = "https://karaokeapi.josevenegasv.com/karaoke/getAllSongs"
         const response =  await axios(url)
         return response
     }
 
     async getSongById(songId){
-        const url = "https://sheet.best/api/sheets/b5fc9c7a-0f86-43e6-a8c7-23881a278ddf/tabs/songs/search?"
-        const response =  await axios(url, {params: {"id": songId}})
+        const url = `https://karaokeapi.josevenegasv.com/karaoke/getSong/{"id":"` + songId + `"}`
+        const response =  await axios(url)
         return response
     }
 
     async getSongsByName(songName){
-        const url = "https://sheet.best/api/sheets/b5fc9c7a-0f86-43e6-a8c7-23881a278ddf/tabs/songs/search?"
-        const response =  await axios(url, {params: {"songName": songName}})
+        const url = `https://karaokeapi.josevenegasv.com/karaoke/search/{"category":"songName", "filter":"` + songName + `"}`
+        const response =  await axios(url)
         return response
     }
 
     async getSongsByAuthor(songAuthor){
-        const url = "https://sheet.best/api/sheets/b5fc9c7a-0f86-43e6-a8c7-23881a278ddf/tabs/songs/search?"
-        const response =  await axios(url, {params: {"songAuthor": songAuthor}})
+        const url = `https://karaokeapi.josevenegasv.com/karaoke/search/{"category":"songAuthor", "filter":"` + songAuthor + `"}`
+        const response =  await axios(url)
         return response
     }
 
     async getSongsByAlbum(songAlbum){
-        const url = "https://sheet.best/api/sheets/b5fc9c7a-0f86-43e6-a8c7-23881a278ddf/tabs/songs/search?"
+        const url = `https://karaokeapi.josevenegasv.com/karaoke/search/{"category":"songAlbum", "filter":"` + songAlbum + `"}`
         const response =  await axios(url, {params: {"songAlbum": songAlbum}})
         return response
     }
 
     async getSongsByLyrics(songLyrics){
-        const url = "https://sheet.best/api/sheets/b5fc9c7a-0f86-43e6-a8c7-23881a278ddf/tabs/songs/search?"
+        const url = `https://karaokeapi.josevenegasv.com/karaoke/search/{"category":"songLRC", "filter":"` + songLyrics + `"}`
         const response =  await axios(url, {params: {"songLyrics": songLyrics}})
         return response
     }
@@ -42,9 +42,9 @@ export class SongsClient {
         const requestOptions = {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ "songName": songName,"songAuthor":songAuthor,"songAlbum":songAlbum,"creationAuthor":creationAuthor, "songMp3":songMP3, "songLRC":songLRC, "songCover":songCover})
+            body: JSON.stringify({"id":songName+"&"+songAuthor, "songName": songName,"songAuthor":songAuthor,"songAlbum":songAlbum,"creationAuthor":creationAuthor, "songMp3":songMP3, "songLRC":songLRC, "songCover":songCover})
         };
-        fetch('https://sheet.best/api/sheets/b5fc9c7a-0f86-43e6-a8c7-23881a278ddf/tabs/songs', requestOptions)
+        fetch('https://karaokeapi.josevenegasv.com/karaoke/createSong/', requestOptions)
             .then(
                 function(response) {
                 response.text().then(function(data) {
@@ -59,11 +59,11 @@ export class SongsClient {
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ "songMp3":songMP3, "songLRC":songLRC, "modificationAuthor":modificationAuthor})
         };
-        fetch('https://sheet.best/api/sheets/b5fc9c7a-0f86-43e6-a8c7-23881a278ddf/tabs/songs/id/' + songId, requestOptions)
+        fetch(`https://karaokeapi.josevenegasv.com/karaoke/updateSong/{"id":"` + songId + `"}`, requestOptions)
             .then(
                 function(response) {
                 response.text().then(function(data) {
-                    alert(data)
+                    //alert(data)
                 });
                 })   
     } 
@@ -74,11 +74,11 @@ export class SongsClient {
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify()
         };
-        fetch('https://sheet.best/api/sheets/b5fc9c7a-0f86-43e6-a8c7-23881a278ddf/tabs/songs/id/' + songId, requestOptions)
+        fetch(`https://karaokeapi.josevenegasv.com/karaoke/deleteSong/{"id":"` + songId + `"}`, requestOptions)
             .then(
                 function(response) {
                 response.text().then(function(data) {
-                    alert(data)
+                    //alert(data)
                 });
                 })   
     } 

diff --git a/src/components/app/AddSong/index.js b/src/components/app/AddSong/index.js
@@ -61,6 +61,7 @@ export class AddSong extends React.Component{
             toast.success('Canción creada exitosamente'),
             //window.location.assign('/app')
         );
+        window.location.assign("/app")
     }
 
 

diff --git a/src/components/app/EditSong/index.js b/src/components/app/EditSong/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormInput,FormLabel, FormButton} from '../../login/Signin/SigninElements';    
+import { FormInput, FormInputBlocked, FormLabelBottom, FormLabel, FormButton} from '../../login/Signin/SigninElements';    
 import { InfoWrapper, InfoContainer2, Form } from './../AddSong/AddSongElements';
 import { SongsClient } from '../../../clients/SongsClient';
 import ProgressBar from '../../utils/ProgressBar';
@@ -46,20 +46,39 @@ export class EditSong extends React.Component{
         reader.readAsText(e.target.files[0])
       }
 
+
     editSong = async() => {
+
         console.log(this.state.form);
-        const data = this.state.form;
-        this.songsClient.updateSong(data.songId,data.songMP3, data.songLRC, data.modificationAuthor).then(
+        alert(this.state.form.songLRC)
+        if(this.state.form.songLRC  === ''){
+          this.state.form.songLRC = this.props.songsData.songLRC;
+          const data = this.state.form;
+          this.songsClient.updateSong(data.songId,data.songMP3, data.songLRC, data.modificationAuthor).then(
             toast.success('Canción actualizada exitosamente')
-        );
+          );
+          window.location.assign("/app")
+        } else if(this.state.form.songMP3 === ''){
+          this.state.form.songMP3 = this.props.songsData.songMP3;
+          const data = this.state.form;
+          this.songsClient.updateSong(data.songId,data.songMP3, data.songLRC, data.modificationAuthor).then(
+            toast.success('Canción actualizada exitosamente')
+          );
+          window.location.assign("/app")
+        } else{
+          const data = this.state.form;
+          this.songsClient.updateSong(data.songId,data.songMP3, data.songLRC, data.modificationAuthor).then(
+            toast.success('Canción actualizada exitosamente')
+          );
+          window.location.assign("/app")
+        }
     }
 
     removeSong = async() => {
         const data = this.state.form;
-        this.songsClient.deleteSong(data.songId).then(
-            toast.success('Canción eliminada exitosamente')
-        );
-        window.location.assign("/")
+        this.songsClient.deleteSong(data.songId);
+        toast.success('Canción eliminada exitosamente')
+        window.location.assign("/app")
     }
 
 
@@ -84,16 +103,19 @@ export class EditSong extends React.Component{
                 <ProgressBar></ProgressBar>
 
                 <Form action="#">
-                          <FormLabel htmlFor="for">Nombre </FormLabel>
-                          <FormInput name="songName" readOnly type="text" value={song.songName} />
+                          <FormLabel htmlFor="for">Nombre</FormLabel>
+                          <FormLabelBottom >***** Espacio no editable</FormLabelBottom>
+                          <FormInputBlocked name="songName" readOnly type="text" value={song.songName} />
                           <FormLabel htmlFor="for">Artista</FormLabel>
-                          <FormInput name="songAuthor" type="text" readOnly value={song.songAuthor} />
+                          <FormLabelBottom >***** Espacio no editable</FormLabelBottom>
+                          <FormInputBlocked name="songAuthor" type="text" readOnly value={song.songAuthor} />
                           <FormLabel htmlFor="for">Album</FormLabel>
-                          <FormInput name="songAlbum" type="text" readOnly value={song.songAlbum}/>
+                          <FormLabelBottom >***** Espacio no editable</FormLabelBottom>
+                          <FormInputBlocked name="songAlbum" type="text" readOnly value={song.songAlbum}/>
                           <FormLabel htmlFor="for">Link a canción en formato Mp3</FormLabel>
-                          <FormInput name="songMP3" type="text" />
+                          <FormInput name="songMP3" type="text"  onChange={this.handleChange}/>
                           <FormLabel htmlFor="for">Letra de canción en formato LRC</FormLabel>
-                          <FormInput name="songMP3" type="file" required onChange={(e) => this.showFile(e)}/>
+                          <FormInput name="songLRC" type="file" required onChange={(e) => this.showFile(e)}/>
                           <FormButton type="button" onClick={this.editSong} >Modificar Canción</FormButton>
 
                       </Form>

diff --git a/src/components/app/Home/HomeScreenElements.js b/src/components/app/Home/HomeScreenElements.js
@@ -19,6 +19,8 @@ export const InfoContainer2 = styled.div`
 `
 export const InfoContainer3 = styled.div`
   color: #fff;
+  margin-top: 100px;
+  margin-bottom: 100px;
   background: ${({lightBg}) => (lightBg ? "#fff" : "#fff")};
   justify-content: space-between;
 

diff --git a/src/components/app/Home/index.js b/src/components/app/Home/index.js
@@ -81,7 +81,6 @@ export class HomeScreen extends Component{
         switch (this.state.selectedOption) {
           case 'songName':
             const responseName = await this.songsClient.getSongsByName(this.state.inputText);
-            //console.log(response.data)
             if(responseName.data.length === 0){
               this.setState({
                 songsData: responseName.data

diff --git a/src/components/app/Player/SongsLyrics/index.js b/src/components/app/Player/SongsLyrics/index.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { InfoContainer } from "../../Home/HomeScreenElements";
 import Lyric from "./lyric";
 
 const SongsLyrics = (props) => {
@@ -9,7 +10,7 @@ const SongsLyrics = (props) => {
 
   const update = () => {
     setCurrentTime(currentTime + 1000);
-    console.log("update");
+    //console.log("update");
   };
 
   useEffect(() => {
@@ -20,9 +21,9 @@ const SongsLyrics = (props) => {
   }, [currentTime]);
 
   return (
-    <div>
-      <Lyric currentTime={currentTime} songLyrics={songLyrics}/>
-    </div>
+      <InfoContainer>
+        <Lyric currentTime={currentTime} songLyrics={songLyrics}/>
+      </InfoContainer>
   );
 }
 

diff --git a/src/components/app/Player/SongsLyrics/lyric.js b/src/components/app/Player/SongsLyrics/lyric.js
@@ -1,5 +1,7 @@
 import React, { useRef, useCallback } from "react";
 import { Lrc, LrcLine } from "@mebtte/react-lrc";
+import { animateScroll as scroll} from 'react-scroll';
+
 
 const style = {
   wrapper: {
@@ -22,29 +24,37 @@ const style = {
 
 const Wrapper = ({ songLyrics, currentTime }) => {
   const lrcRef = useRef();
+
+
   const onCurrentLineChange = useCallback((lrcLine, index) => {
     console.log("\n");
     console.log(lrcLine, index);
+    scroll.scrollMore(15);
   }, []);
 
+
+
   return (
     <div style={style.wrapper}>
       <div >
       <Lrc
         className="lrc"
         lrc={songLyrics}
-        currentTime={currentTime}
-        onCurrentLineChange={onCurrentLineChange}
-        style={style.lrc}
+        currentTime={currentTime }
+        onCurrentLineChange= {onCurrentLineChange}
+        style={{ overflow: 'hidden !important' }}
         ref={lrcRef}
-        intervalOfRecoveringAutoScrollAfterUserScroll={0}
       >
         {(line, active) => (
           <LrcLine
             key={line.millisecond}
             style={{
               ...style.line,
-              color: active ? "red" : "black"
+              textAlign: 'center',
+              padding: '10px 0',
+              color: active ? 'red' : 'black',
+              transform: `scale(${active ? 1.2 : 1})`,
+              transition: 'transform 300ms'
             }}
           >
             {line.content}

diff --git a/src/components/app/Player/index.js b/src/components/app/Player/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { InfoContainer, InfoContainer2, InfoContainer3, InfoWrapper } from '../Home/HomeScreenElements';
+import { InfoContainer2, InfoContainer3, InfoWrapper } from '../Home/HomeScreenElements';
 import PlayerBottom from './PlayerBottom';
 import SongsLyrics from './SongsLyrics';
 import ProgressBar from '../../utils/ProgressBar';
@@ -15,16 +15,14 @@ export class Player extends React.Component {
     src = localStorage.getItem('songMp3');
 
     render(){
-
+        //alert(JSON.stringify(this.props.songData))
         const lyrics = this.props.songData.songLRC;
         console.log(lyrics)
         localStorage.setItem('songLyrics', lyrics)
-
         if(!this.props.songData){
             return(<></>)
         }
 
-
         return (
             <div >
                 <InfoContainer2 lightBg='false' id='background'>

diff --git a/src/components/login/Signin/SigninElements.js b/src/components/login/Signin/SigninElements.js
@@ -90,6 +90,13 @@ export const FormLabel = styled.label`
   font-size: 14px;
   color: #fff;
 `
+export const FormLabelBottom = styled.label`
+  margin-left: auto; 
+  margin-right: 0;  
+  margin-bottom: 8px;
+  font-size: 10px;
+  color: #1db954;
+`
 
 export const FormInput = styled.input`
   padding: 16px 16px;
@@ -98,6 +105,14 @@ export const FormInput = styled.input`
   border-radius: 4px;
 `
 
+export const FormInputBlocked = styled.input`
+  background: #cecece;
+  padding: 16px 16px;
+  margin-bottom: 32px;
+  border: none;
+  border-radius: 4px;
+`
+
 export const FormInputBig = styled.input`
   float:right;
   height:50px;

diff --git a/src/components/login/Signin/index.js b/src/components/login/Signin/index.js
@@ -36,9 +36,11 @@ class Signin extends Component {
 
   login = async() => {
       localStorage.setItem('currentUsername', this.state.form.username);
+      localStorage.setItem('currentPassword', this.state.form.password);
       const response = await this.signinClient.verifyUser(this.state.form.username, this.state.form.password);
-      console.log(response);
+      localStorage.setItem('userType', response.data.userType)
 
+
       if(response.data.length === 0){
           toast.error("Nombre de usuario o contraseña incorrecta.");
           // console.log("No existe el usuario");

diff --git a/src/pages/appCreate.js b/src/pages/appCreate.js
@@ -21,12 +21,12 @@ export class AppCreate extends Component{
   }  
 
   async loadProfileData(){
-    const newData = await this.profileClient.getUserData(localStorage.getItem('currentUsername'));
-    //console.log(newData);
+    const newData = await this.profileClient.getUserData(localStorage.getItem('currentUsername'), localStorage.getItem('currentPassword'));
+    console.log(newData);
     this.setState({
-      profileData: newData.data['0'].userType
+      profileData: newData.data.userType
     });
-    localStorage.setItem('userType', newData.data['0'].userType)
+    localStorage.setItem('userType', newData.data.userType)
   }