MultiLanguage Support && ReactJS 16.2.0

package.json

@@ -5,8 +5,8 @@
   "private": true,
   "dependencies": {
     "firebase": "^4.8.1",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-firebaseui": "^1.0.10",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",

src/components/AlbumTab/AlbumTab.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './AlbumTab.css';
+import {Translate} from '../lang/Translate';
 import {playerLink} from '../playerLink';
 import Track from '../Track';
 import AlbumCover from '../AlbumCover';
@@ -52,9 +53,8 @@ class AlbumTab extends React.Component {
 							<div className="name">
 								{this.state.album.title}
 							</div>
-							<div className="play play_album" 
-								onClick={() => playerLink.playTracks(this.state.tracks)}>
-								Play
+							<div className="play play_album" onClick={() => playerLink.playTracks(this.state.tracks)}>
+								<Translate word='PLAY'/>
 							</div>
 						</div>
 					</div>

src/components/ArtistTab/ArtistTab.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './ArtistTab.css';
+import {Translate} from '../lang/Translate';
 import {playerLink} from '../playerLink';
 import ArtistTabAlbum from './ArtistTabAlbum';
 import {fetchArtist, fetchAlbumsByArtist, fetchTracksByArtist, checkFavorites} from '../../calls.js';
@@ -41,12 +42,12 @@ class ArtistTab extends React.Component {
 								{this.state.artist.name}
 							</div>
 							<div className="play" onClick={() => playerLink.playTracks(this.state.tracks)}>
-								Play
+								<Translate word='PLAY'/>
 							</div>
 						</div>
 					</div>
 					<div className="sub_banner">
-						{this.state.albums ? this.state.albums.length : 0} albums indexed
+						{this.state.albums ? this.state.albums.length : 0} <Translate word='ALBUMS_INDEXED'/>
 					</div>
 					<div className="albums">
 						{this.renderAlbums()}

src/components/FavoritesTab/FavoritesTab.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './FavoritesTab.css';
+import {Translate} from '../lang/Translate';
 import {config} from '../../config/default.js';
 import {playerLink} from '../playerLink';
 import Track from '../Track';
@@ -28,15 +29,15 @@ class FavoritesTab extends React.Component {
 					<div className="banner">
 						<div className="details_container">
 							<div className="name">
-								Favorites
+								<Translate word='FAVORITES'/>
 							</div>
 							<div className="play" onClick={() => playerLink.playTracks(this.state.tracks)}>
-								Play
+								<Translate word='PLAY'/>
 							</div>
 						</div>
 					</div>
 					<div className="sub_banner">
-						{this.state.tracks.length} tracks in Favorites
+						{this.state.tracks.length} <Translate word='TRACKS_FAVORITED'/>
 					</div>
 					<div className="tracks">
 						{this.renderTracks()}

src/components/PlayerTab/PlayerTab.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './PlayerTab.css';
+import {Translate} from '../lang/Translate';
 import {config} from '../../config/default.js';
 import Track from '../Track';
 import {playerLink} from '../playerLink';
@@ -46,8 +47,8 @@ class PlayerTab extends React.Component {
 		return (
 				<div className="tab player_tab">
 					<div className="views">
-						<div className={this.state.view==='history'?'active':''} onClick={this.setHistory}>History</div>
-						<div className={this.state.view==='next'?'active':''} onClick={this.setPlayerTracks}>Next</div>
+						<div className={this.state.view==='history'?'active':''} onClick={this.setHistory}><Translate word='PLAYER_HISTORY'/></div>
+						<div className={this.state.view==='next'?'active':''} onClick={this.setPlayerTracks}><Translate word='PLAYER_NEXT'/></div>
 					</div>
 					<div className="tracks">
 						{this.renderTracks(this.state.tracks)}

src/components/RandomTab/RandomTab.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import './RandomTab.css';
 import {config} from '../../config/default.js';
+import {Translate} from '../lang/Translate';
 import RandomTabArtist from './RandomTabArtist';
 import RandomTabAlbum from './RandomTabAlbum';
 import {fetchPaginatedArtists, fetchPaginatedAlbums} from '../../calls';
@@ -34,13 +35,13 @@ class RandomTab extends React.Component {
 				<div className="tab random_tab">
 					<div className="title"></div>
 					<div className="albums">
-						<div className="title">Albums</div>
+						<div className="title"><Translate word='ALBUMS'/></div>
 						<div className="results">
 							{this.renderAlbums()}
 						</div>
 					</div>
 					<div className="artists">
-						<div className="title">Artists</div>
+						<div className="title"><Translate word='ARTISTS'/></div>
 						<div className="results">
 							{this.renderArtists()}
 						</div>

src/components/SearchTab/SearchTab.css

@@ -1,14 +1,9 @@
 .search_tab{
 }
 
-.search_tab .banner{
-	background-color: #0c0c0c;
-	margin-bottom: 30px;
-}
-
 .search_tab .banner .search{
     padding: 10px;
-    width: 50%;
+    width: 70%;
     border-radius: 5px;
     border: none;
     background-color: #121314;
@@ -17,6 +12,11 @@
     margin-bottom: 25px;
 	margin-left: 30px;
 	margin-top: 30px;
+	margin-right: 30px;
+}
+
+.search_tab .banner .search:focus{
+    outline: none;
 }
 .search_tab .all-results .title{
 	font-weight: bold;
@@ -145,12 +145,9 @@
 	float:right;
 }
 @media (max-width: 800px) {
-	.search_tab .banner {
-		margin: 25px;
-	}
 	.search_tab .banner .search {
-		width: auto;
-		padding: 10px;
+		width: 100vw;
+		padding: 15px;
 		margin: 0;
 	}
 	.search_tab .all-results {

src/components/SearchTab/SearchTab.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './SearchTab.css';
+import {translate} from '../lang/Translate';
 import SearchTabArtist from './SearchTabArtist';
 import SearchTabAlbum from './SearchTabAlbum';
 import Track from '../Track';
@@ -42,7 +43,7 @@ class SearchTab extends React.Component {
 		return (
 				<div className="tab search_tab">
 					<div className="banner">
-						<input className="search" tabIndex="1" onKeyPress={this.search} placeholder="Type to find music" pattern=".{3,25}" type="text"/>
+						<input className="search" tabIndex="1" onKeyPress={this.search} placeholder={translate('SEARCH_INPUT')} pattern=".{3,25}" type="text"/>
 					</div>
 					{this.renderResults()}
 				</div>

src/components/Sidebar.js

@@ -1,17 +1,38 @@
 import React from 'react';
 import { Link } from 'react-router-dom'
+import {Translate} from './lang/Translate';
 import SidebarElement from './SidebarElement';
 import {userLink} from './userLink';
 
 class Sidebar extends React.Component {
 	render() {
 		return (
 			<div className="sidebar">
-				<Link to="/"><SidebarElement id="sidebar-home" icon="fa fa-home" text="Home"/></Link>
-				<Link to="/search"><SidebarElement id="sidebar-search" icon="fa fa-search" text="Search"/></Link>
-				<Link to="/favorites"><SidebarElement id="sidebar-favorites" icon="fa fa-heart" text="Favs"/></Link>
-				<Link to="/player"><SidebarElement id="sidebar-player" icon="fa fa-suitcase" text="Player"/></Link>
-				<Link to="/"><SidebarElement onclick={userLink.signOut} id="sidebar-logout" icon="fa fa-sign-out" text="Exit"/></Link>
+				<Link to="/">
+				<SidebarElement id="sidebar-home" icon="fa fa-home" >
+					<Translate word='HOME'/>
+				</SidebarElement>
+				</Link>
+				<Link to="/search">
+					<SidebarElement id="sidebar-search" icon="fa fa-search">
+						<Translate word='SEARCH'/>
+					</SidebarElement>
+				</Link>
+				<Link to="/favorites">
+					<SidebarElement id="sidebar-favorites" icon="fa fa-heart">
+						<Translate word='FAVORITES_SHORT'/>
+					</SidebarElement>
+				</Link>
+				<Link to="/player">
+					<SidebarElement id="sidebar-player" icon="fa fa-suitcase">
+						<Translate word='PLAYER'/>
+					</SidebarElement>
+				</Link>
+				<Link to="/">
+					<SidebarElement onclick={userLink.signOut} id="sidebar-logout" icon="fa fa-sign-out">
+						<Translate word='EXIT'/>
+					</SidebarElement>
+				</Link>
 			</div>
 		);
 	}

src/components/SidebarElement.js

@@ -5,7 +5,7 @@ class SidebarElement extends React.Component {
 		return (
 			<div onClick={this.props.onclick} className="sidebar-element" id={this.props.id}>
 				<i className={this.props.icon}></i>
-				<span>{this.props.text}</span>
+				<span>{this.props.children}</span>
 			</div>
 		);
 	}

src/components/UserAccess/SignInScreen.js

@@ -2,6 +2,7 @@ import {config} from '../../config/default.js';
 import React from 'react';
 import { FirebaseAuth } from 'react-firebaseui';
 import firebase from 'firebase';
+import {Translate} from '../lang/Translate';
 import {userLink} from '../userLink';
 import './firebaseui-overrides.global.css';
 import './UserAccess.css';
@@ -11,18 +12,13 @@ firebase.initializeApp(config.firebase);
 
 class SignInScreen extends React.Component {
 
-  // Configure FirebaseUI.
   uiConfig = {
-    // Popup signin flow rather than redirect flow.
-    // redirect || popup
     signInFlow: 'redirect',
-    // We will display Google and Facebook as auth providers.
     signInOptions: [
       firebase.auth.GoogleAuthProvider.PROVIDER_ID,
       firebase.auth.FacebookAuthProvider.PROVIDER_ID,
       firebase.auth.TwitterAuthProvider.PROVIDER_ID
     ],
-    // Sets the CatalogueApp `signedIn` state property to `true` once signed in.
     callbacks: {
       signInSuccess: userLink.signInSuccessCallback
     }
@@ -32,18 +28,18 @@ class SignInScreen extends React.Component {
       return (
         <div className="wrapper">
           <div className="panel">
-            <h1>Catalogue Music</h1>
+            <h1><Translate word='APP_NAME'/></h1>
             <div className="social">
               <FirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
             </div>
           </div>
           <div className="panel">
-            <h2>Access</h2>
-            <p>Log in with your social network of choice and start playing with zero cost from now and forever.</p>
-            <h2>Artists</h2>
-            <p>We are working to involve the artists and collaborate with them in reaching their audience. We believe in the possibility of a self-sustainable platform and in the commitment between users and musicians.</p>
-            <h2>Technology</h2>
-            <p>Our goal is to offer a premium quality service with minimum latency and cutting-edge technology.</p>
+            <h2><Translate word='FIRST_TITLE'/></h2>
+            <p><Translate word='FIRST_PARAGRAPH'/></p>
+            <h2><Translate word='SECOND_TITLE'/></h2>
+            <p><Translate word='SECOND_PARAGRAPH'/></p>
+            <h2><Translate word='THIRD_TITLE'/></h2>
+            <p><Translate word='THIRD_PARAGRAPH'/></p>
             <a href="https://github.com/wjsc" rel="noopener noreferrer" target="_blank">https://github.com/wjsc</a>
           </div>
         </div>

src/components/lang/Translate.js

@@ -0,0 +1,8 @@
+import en from './en.js';
+import es from './es.js';
+const languages = {en, es};
+const userLanguage = (navigator.language || navigator.userLanguage).substr(0,2);
+export const Translate = ({word}) => translate(word);
+export const translate = (word) => languages[userLanguage] ?
+    languages[userLanguage][word]
+    : languages['en'][word];

src/components/lang/en.js

@@ -0,0 +1,23 @@
+export default {
+    APP_NAME: 'Catalogue Music',
+    FIRST_TITLE : 'Access',
+    FIRST_PARAGRAPH : 'Log in with your social network of choice and start playing with zero cost from now and forever.',
+    SECOND_TITLE : 'Artists',
+    SECOND_PARAGRAPH : 'We are working to involve the artists and collaborate with them in reaching their audience. We believe in the possibility of a self-sustainable platform and in the commitment between users and musicians.',
+    THIRD_TITLE : 'Technology',
+    THIRD_PARAGRAPH : 'Our goal is to offer a premium quality service with minimum latency and cutting-edge technology.',
+    ARTISTS: 'Artists',
+    ALBUMS: 'Albums',
+    HOME: 'Home',
+    SEARCH: 'Search',
+    FAVORITES_SHORT: 'Favs',
+    PLAYER: 'Player',
+    EXIT: 'Exit',
+    PLAY: 'Play',
+    ALBUMS_INDEXED: 'album/s in Catalogue',
+    SEARCH_INPUT: 'Type to find music',
+    PLAYER_HISTORY: 'History',
+    PLAYER_NEXT: 'Next',
+    FAVORITES: 'Favorites',
+    TRACKS_FAVORITED: 'tracks favorited'
+}

src/components/lang/es.js

@@ -0,0 +1,23 @@
+export default {
+    APP_NAME: 'Catalogue Music',
+    FIRST_TITLE : 'Acceso',
+    FIRST_PARAGRAPH : 'Ingresá con tu red social preferida y escuchá sin límites ahora mismo y por siempre.',
+    SECOND_TITLE : 'Artistas',
+    SECOND_PARAGRAPH : 'Estamos trabajando para involucrar a los artistas y ayudarlos a llegar a su audiencia. Creemos en la posibilidad de una plataforma auto-sustentable y en el compromiso mutuo entre usuarios y artistas.',
+    THIRD_TITLE : 'Tecnología',
+    THIRD_PARAGRAPH : 'Nuestro objetivo es ofrecer un servicio de calidad, con latencia mínima y la última tecnología.',
+    ARTISTS: 'Artistas',
+    ALBUMS: 'Álbums',
+    HOME: 'Inicio',
+    SEARCH: 'Buscar',
+    FAVORITES_SHORT: 'Favs',
+    PLAYER: 'Player',
+    EXIT: 'Salir',
+    PLAY: 'Play',
+    ALBUMS_INDEXED: 'álbum/s en Catalogue',
+    SEARCH_INPUT: 'Escribe para buscar música',
+    PLAYER_HISTORY: 'Historial',
+    PLAYER_NEXT: 'Próximo',
+    FAVORITES: 'Favoritos',
+    TRACKS_FAVORITED: 'canciones en Favoritos'
+}