diff --git a/jam-ui/cypress/integration/layout/navigation.spec.js b/jam-ui/cypress/integration/layout/navigation.spec.js index bb561f20c..a14827598 100644 --- a/jam-ui/cypress/integration/layout/navigation.spec.js +++ b/jam-ui/cypress/integration/layout/navigation.spec.js @@ -68,5 +68,22 @@ describe("Top Navigation", () => { }) }) + describe('locale switch', () => { + beforeEach(() => { + cy.stubAuthenticate() + cy.visit('/') + }) + + it("translate", () => { + cy.get('.card-header').contains('Home page') + cy.get('[data-testid=langSwitch]').contains('ES').click() + cy.get('.card-header').contains('Página de inicio') + cy.get('.card-header').should('not.contain', 'Home page') + cy.get('[data-testid=langSwitch]').contains('EN').click() + cy.get('.card-header').contains('Home page') + cy.get('.card-header').should('not.contain', 'Página de inicio') + }) + }) + }); diff --git a/jam-ui/package-lock.json b/jam-ui/package-lock.json index 86a81f498..a6aab32b7 100644 --- a/jam-ui/package-lock.json +++ b/jam-ui/package-lock.json @@ -9923,6 +9923,14 @@ } } }, + "html-parse-stringify": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", + "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", + "requires": { + "void-elements": "3.1.0" + } + }, "html-webpack-plugin": { "version": "4.0.0-beta.11", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz", @@ -10067,6 +10075,14 @@ "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" }, + "i18next": { + "version": "21.3.3", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.3.3.tgz", + "integrity": "sha512-Wv5arCT9pK35nfhOzTdS64T7JpPcoqnkOEidxc4zF0DZ8KetpvmnkO+uWkXy+DFz6zWzPX7U9bIemwBqpFRprw==", + "requires": { + "@babel/runtime": "^7.12.0" + } + }, "iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -15666,6 +15682,25 @@ "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.11.1.tgz", "integrity": "sha512-lBt428oU03dNUF5qZy5xqEdANaH3L/ilKWQS2t8wD6zF7FypOv46kEkZmg+oHf3n2xgeGYJgbMIGtYExsfKJ8A==" }, + "react-i18next": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.12.0.tgz", + "integrity": "sha512-M9BT+hqVG03ywrl+L7CK74ugK+4jIo7AeKJ17+g9BoqJz2+/aVbs8SIVXT4KMQ1rjIdcw+GcSRDy1CXjcz6tLQ==", + "requires": { + "@babel/runtime": "^7.14.5", + "html-parse-stringify": "^3.0.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz", + "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, "react-image-lightbox": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.1.tgz", @@ -19342,6 +19377,11 @@ "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" }, + "void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=" + }, "w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/jam-ui/package.json b/jam-ui/package.json index 54d6d51c4..855ec40e9 100644 --- a/jam-ui/package.json +++ b/jam-ui/package.json @@ -29,6 +29,7 @@ "emoji-mart": "^3.0.0", "fuse.js": "^6.4.3", "google-maps-react": "^2.0.6", + "i18next": "^21.3.3", "is_js": "^0.9.0", "leaflet": "^1.7.1", "leaflet.markercluster": "^1.4.1", @@ -53,6 +54,7 @@ "react-es6-progressbar.js": "^1.1.0", "react-flatpickr": "^3.10.6", "react-hook-form": "^7.11.1", + "react-i18next": "^11.12.0", "react-image-lightbox": "^5.1.1", "react-image-video-lightbox": "^2.0.1", "react-leaflet": "^2.7.0", diff --git a/jam-ui/src/components/dashboard/JKDashboardLoadingIndicator.js b/jam-ui/src/components/dashboard/JKDashboardLoadingIndicator.js index ffb2eea35..3133f792a 100644 --- a/jam-ui/src/components/dashboard/JKDashboardLoadingIndicator.js +++ b/jam-ui/src/components/dashboard/JKDashboardLoadingIndicator.js @@ -1,9 +1,12 @@ -import React from 'react' +import React from 'react'; +import { useTranslation } from 'react-i18next'; function JKDashboardLoadingIndicator() { + const {t} = useTranslation(); + return (
- Loading... + {t('loading', {ns: 'common'})}...
) } diff --git a/jam-ui/src/components/dashboard/JKHomePage.js b/jam-ui/src/components/dashboard/JKHomePage.js index 3eaab6d5a..48bbe7c34 100644 --- a/jam-ui/src/components/dashboard/JKHomePage.js +++ b/jam-ui/src/components/dashboard/JKHomePage.js @@ -1,13 +1,15 @@ import React from 'react'; import { Card, CardBody } from 'reactstrap'; import FalconCardHeader from '../common/FalconCardHeader'; +import { useTranslation } from "react-i18next"; const JKHome = () => { + const {t} = useTranslation() return ( - + -

Dashboard - Home

+ ); diff --git a/jam-ui/src/components/footer/JKFooter.js b/jam-ui/src/components/footer/JKFooter.js index 3f14c9ecb..0376b1897 100644 --- a/jam-ui/src/components/footer/JKFooter.js +++ b/jam-ui/src/components/footer/JKFooter.js @@ -2,19 +2,24 @@ import React from 'react'; import { Col, Row } from 'reactstrap'; import { version } from '../../config'; -const JKFooter = () => ( - -); +const JKFooter = () => { + + + return ( + + ); +}; export default JKFooter; diff --git a/jam-ui/src/components/navbar/JKLangSwitch.js b/jam-ui/src/components/navbar/JKLangSwitch.js new file mode 100644 index 000000000..a96c55f32 --- /dev/null +++ b/jam-ui/src/components/navbar/JKLangSwitch.js @@ -0,0 +1,25 @@ +import React from 'react'; +import classNames from 'classnames'; +import { useTranslation } from 'react-i18next'; +import { Button } from "reactstrap"; + +function JKLocaleSwitch() { + const { t, i18n } = useTranslation(); + + function changeLanguage(e) { + i18n.changeLanguage(e.target.value); + } + + return ( + + ); +} + +export default JKLocaleSwitch; diff --git a/jam-ui/src/components/navbar/JKNavbarVertical.js b/jam-ui/src/components/navbar/JKNavbarVertical.js index e48cd8322..78d162f3c 100644 --- a/jam-ui/src/components/navbar/JKNavbarVertical.js +++ b/jam-ui/src/components/navbar/JKNavbarVertical.js @@ -13,9 +13,10 @@ import NavbarTopDropDownMenus from './NavbarTopDropDownMenus'; import NavbarVerticalMenu from './NavbarVerticalMenu'; //import ToggleButton from './ToggleButton'; -const JKNavbarVertical = ({ navbarStyle }) => { - const navBarRef = useRef(null); +const JKNavbarVertical = ({ navbarStyle }) => { + + const navBarRef = useRef(null); const { showBurgerMenu, isNavbarVerticalCollapsed, diff --git a/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js b/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js index 2bd2360cf..74ea5d156 100644 --- a/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js +++ b/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js @@ -2,6 +2,7 @@ import React, { useContext } from 'react'; import { Nav, NavItem, NavLink, UncontrolledTooltip, NavbarText } from 'reactstrap'; import ProfileDropdown from './JKProfileDropdown'; import NotificationDropdown from './JKNotificationDropdown'; +import LangSwitch from './JKLangSwitch'; //import SettingsAnimatedIcon from './SettingsAnimatedIcon'; //import CartNotification from './CartNotification'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -10,11 +11,13 @@ import AppContext from '../../context/Context'; import classNames from 'classnames'; import { navbarBreakPoint } from '../../config'; //import { useSelector } from 'react-redux'; +import { useTranslation } from "react-i18next"; const TopNavRightSideNavItem = () => { //const notifications = useSelector(state => state.notification.notifications.slice(0, 5)); + const {t} = useTranslation(); const { isTopNav, isCombo } = useContext(AppContext); return ( @@ -22,9 +25,9 @@ const TopNavRightSideNavItem = () => { {/* */} - Keep JamKazam Improving: + {t('keep_jamkazam_improving', {ns: 'common'})}: - Subscribe + {t('subscribe', {ns: 'common'})} {(isCombo || isTopNav) && ( @@ -37,7 +40,7 @@ const TopNavRightSideNavItem = () => { )} {/* */} - + diff --git a/jam-ui/src/components/page/JKPeople.js b/jam-ui/src/components/page/JKPeople.js index 21f793ff5..66c84762a 100644 --- a/jam-ui/src/components/page/JKPeople.js +++ b/jam-ui/src/components/page/JKPeople.js @@ -4,6 +4,7 @@ import { Alert, Card, CardBody, Col, Row, Button, Form } from 'reactstrap'; import Loader from '../common/Loader'; import FalconCardHeader from '../common/FalconCardHeader'; import { isIterableArray } from '../../helpers/utils'; +import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import { fetchPeople } from '../../store/features/peopleSlice'; @@ -18,6 +19,7 @@ const JKPeople = ({ className }) => { const [resetFilter, setResetFilter] = useState(false) const peopleListRef = useRef(); const dispatch = useDispatch(); + const {t} = useTranslation(); const people = useSelector(state => state.people.people); const totalPages = useSelector(state => state.people.totalPages); @@ -77,15 +79,15 @@ const JKPeople = ({ className }) => {
diff --git a/jam-ui/src/components/page/JKPeopleList.js b/jam-ui/src/components/page/JKPeopleList.js index 67d3d406a..83121e452 100644 --- a/jam-ui/src/components/page/JKPeopleList.js +++ b/jam-ui/src/components/page/JKPeopleList.js @@ -2,20 +2,22 @@ import React from 'react'; import { Table } from 'reactstrap'; import JKPerson from './JKPerson'; import PropTypes from 'prop-types'; +import {useTranslation} from 'react-i18next' const JKPeopleList = ({ people }) => { + const {t} = useTranslation() return ( <> - + - + - + diff --git a/jam-ui/src/components/page/JKPerson.js b/jam-ui/src/components/page/JKPerson.js index 8a6b4e74c..476a5baac 100644 --- a/jam-ui/src/components/page/JKPerson.js +++ b/jam-ui/src/components/page/JKPerson.js @@ -6,6 +6,7 @@ import { useAuth } from '../../context/AuthContext'; import { truncate } from '../../helpers/utils'; import { fetchPerson } from '../../store/features/peopleSlice' import { useDispatch, useSelector } from 'react-redux' +import { useTranslation } from "react-i18next"; import JKProfileSidePanel from '../profile/JKProfileSidePanel'; import JKProfileAvatar from '../profile/JKProfileAvatar'; @@ -21,6 +22,7 @@ const JKPerson = props => { const { currentUser } = useAuth(); const [showSidePanel, setShowSidePanel] = useState(false); const dispatch = useDispatch() + const {t} = useTranslation() const user = useSelector(state => state.people.people.find(p => p.id === id)) const toggleMoreDetails = async (e) => { @@ -48,18 +50,18 @@ const JKPerson = props => {
- Latency To Me: + {t('person_attributes.latency_to_me', {ns: 'people'})}:
- Last Active: + {t('person_attributes.last_active', {ns: 'people'})}:
@@ -81,7 +83,7 @@ const JKPerson = props => { - + @@ -92,20 +94,20 @@ const JKPerson = props => {
- Latency To Me: + {t('person_attributes.latency_to_me', {ns: 'people'})}:
- Last Active: + {t('person_attributes.last_active', {ns: 'people'})}:
-
Instruments
+
{t('person_attributes.instruments', {ns: 'people'})}
-
Instruments
+
{t('person_attributes.instruments', {ns: 'people'})}
@@ -124,7 +126,7 @@ const JKPerson = props => { - + @@ -140,12 +142,4 @@ JKPerson.propTypes = { viewMode: PropTypes.string }; -// const JKPersonAvator = ({ url }) => { -// if (url) { -// return ; -// } else { -// return ; -// } -// }; - export default JKPerson; diff --git a/jam-ui/src/components/profile/JKProfileSidePanel.js b/jam-ui/src/components/profile/JKProfileSidePanel.js index 5aeaf094c..a1da4dca8 100644 --- a/jam-ui/src/components/profile/JKProfileSidePanel.js +++ b/jam-ui/src/components/profile/JKProfileSidePanel.js @@ -8,6 +8,7 @@ import { Modal, ModalBody, ModalHeader } from 'reactstrap'; import ScrollBarCustom from '../common/ScrollBarCustom'; import { useAuth } from '../../context/AuthContext'; +import { useTranslation } from "react-i18next"; import JKProfileAvatar from './JKProfileAvatar'; import JKProfileInstrumentsList from './JKProfileInstrumentsList'; @@ -27,7 +28,8 @@ const JKProfileSidePanel = props => { const { show, setShow, user, latencyData } = props; const { currentUser } = useAuth(); const toggle = () => setShow(!show); - + const {t} = useTranslation(); + const joinedDate = () => { return moment(new Date(user.created_at_timestamp * 1000)).format('MM-DD-YYYY'); }; @@ -62,27 +64,27 @@ const JKProfileSidePanel = props => { {user && (

- Latency to Me: + {t('person_attributes.latency_to_me', {ns: 'people'})}:
- Location: {`${user.city}, ${user.country}`} + {t('person_attributes.location', {ns: 'people'})}: {`${user.city}, ${user.country}`}
- Skill Level: + {t('person_attributes.skill_level', {ns: 'people'})}:
- Joined JamKazam: {joinedDate()} + {t('person_attributes.joined_jamkazam', {ns: 'people'})}: {joinedDate()}
- Last Active: + {t('person_attributes.last_active', {ns: 'people'})}:

{user.biography && user.biography.length > 0 && (
-
About
+
{t('person_attributes.about', {ns: 'people'})}

{user.biography}

)} {user.instruments && user.instruments.length && (
-
Instruments
+
{t('person_attributes.instruments', {ns: 'people'})}
)} @@ -90,7 +92,7 @@ const JKProfileSidePanel = props => { {user.genres && user.genres.length > 0 && (

-
Genres
+
{t('person_attributes.genres', {ns: 'people'})}
)} @@ -98,7 +100,7 @@ const JKProfileSidePanel = props => { {user.bands && user.bands.length > 0 && (

-
Bands
+
{t('person_attributes.bands', {ns: 'people'})}
{user.bands.map(band => (

@@ -111,7 +113,7 @@ const JKProfileSidePanel = props => { {user.performance_samples && user.performance_samples.length > 0 && (

)} @@ -119,13 +121,13 @@ const JKProfileSidePanel = props => { {user.online_presences && user.online_presences.length > 0 && (

-
Online Presence
+
{t('person_attributes.online_presence', {ns: 'people'})}
)}
-
Interests
+
{t('person_attributes.interests', {ns: 'people'})}
{currentUser && ( @@ -135,17 +137,17 @@ const JKProfileSidePanel = props => { user={user} addContent={ <> - Add Friend{' '} + {t('add_friend', {ns: 'people'})}{' '} } removeContent={ <> - Disconnect + {t('disconnect', {ns: 'people'})} } />{' '} - Send Message + {t('send_message', {ns: 'people'})}
)} diff --git a/jam-ui/src/i18n/config.js b/jam-ui/src/i18n/config.js new file mode 100644 index 000000000..68aba7b1a --- /dev/null +++ b/jam-ui/src/i18n/config.js @@ -0,0 +1,35 @@ +import i18n from 'i18next'; +import { initReactI18next } from "react-i18next"; + +import commonTranslationsEN from './locales/en/common.json' +import homeTranslationsEN from './locales/en/home.json' +import peopleTranslationsEN from './locales/en/people.json' + +import commonTranslationsES from './locales/es/common.json' +import homeTranslationsES from './locales/es/home.json' +import peopleTranslationsES from './locales/es/people.json' + +i18n.use(initReactI18next).init({ + fallbackLng: 'en', + lng: 'en', + resources: { + en: { + //translations: require('./locales/en/translations.json') + common: commonTranslationsEN, + home: homeTranslationsEN, + people: peopleTranslationsEN + }, + es: { + //translations: require('./locales/es/translations.json') + common: commonTranslationsES, + home: homeTranslationsES, + people: peopleTranslationsES + } + }, + //ns: ['translations'], + defaultNS: 'common' +}); + +i18n.languages = ['en', 'es']; + +export default i18n; \ No newline at end of file diff --git a/jam-ui/src/i18n/locales/en/common.json b/jam-ui/src/i18n/locales/en/common.json new file mode 100644 index 000000000..3e5b03bcd --- /dev/null +++ b/jam-ui/src/i18n/locales/en/common.json @@ -0,0 +1,12 @@ +{ + "keep_jamkazam_improving": "Keep JamKazam Improving", + "subscribe": "Subscribe", + "loading": "Loading", + "more": "More", + "actions": "Actions", + "navigation": { + "home": "Home", + "friends": "Friends", + "help": "Help" + } +} \ No newline at end of file diff --git a/jam-ui/src/i18n/locales/en/home.json b/jam-ui/src/i18n/locales/en/home.json new file mode 100644 index 000000000..219a538d1 --- /dev/null +++ b/jam-ui/src/i18n/locales/en/home.json @@ -0,0 +1,3 @@ +{ + "page_title": "Home page" +} \ No newline at end of file diff --git a/jam-ui/src/i18n/locales/en/people.json b/jam-ui/src/i18n/locales/en/people.json new file mode 100644 index 000000000..50901c309 --- /dev/null +++ b/jam-ui/src/i18n/locales/en/people.json @@ -0,0 +1,24 @@ +{ + "page_title": "Find New Friends", + "update_search": "Update Search", + "reset_filters": "Reset Filters", + "view_profile": "View profile", + "add_friend": "Add Friends", + "disconnect": "Disconnect", + "send_message": "Send Message", + "person_attributes": { + "name": "Name", + "about": "About", + "instruments": "Instruments", + "latency_to_me": "Latency To Me", + "last_active": "Last Active", + "location": "Location", + "skill_level": "Skill Level", + "joined_jamkazam": "Joined JamKazam", + "genres": "Genres", + "bands": "Bands", + "performance_samples": "Performance Samples", + "online_presence": "Online Presence", + "interests": "Interests" + } +} \ No newline at end of file diff --git a/jam-ui/src/i18n/locales/en/translations.json b/jam-ui/src/i18n/locales/en/translations.json new file mode 100644 index 000000000..ee87e2cc9 --- /dev/null +++ b/jam-ui/src/i18n/locales/en/translations.json @@ -0,0 +1,4 @@ +{ + "keep_jamkazam_improving": "Keep Jamkazam Improving", + "subscribe": "Subscribe" +} \ No newline at end of file diff --git a/jam-ui/src/i18n/locales/es/common.json b/jam-ui/src/i18n/locales/es/common.json new file mode 100644 index 000000000..c5731d029 --- /dev/null +++ b/jam-ui/src/i18n/locales/es/common.json @@ -0,0 +1,7 @@ +{ + "keep_jamkazam_improving": "Mantenga JamKazam mejorando", + "subscribe": "Suscribir", + "loading": "Cargando", + "actions": "Comportamiento", + "more": "Más" +} \ No newline at end of file diff --git a/jam-ui/src/i18n/locales/es/home.json b/jam-ui/src/i18n/locales/es/home.json new file mode 100644 index 000000000..0dc490c6c --- /dev/null +++ b/jam-ui/src/i18n/locales/es/home.json @@ -0,0 +1,3 @@ +{ + "page_title": "Página de inicio" +} \ No newline at end of file diff --git a/jam-ui/src/i18n/locales/es/people.json b/jam-ui/src/i18n/locales/es/people.json new file mode 100644 index 000000000..964248cdc --- /dev/null +++ b/jam-ui/src/i18n/locales/es/people.json @@ -0,0 +1,24 @@ +{ + "page_title": "Encontrar nuevas amigas", + "update_search": "Actualizar búsqueda", + "reset_filters": "Restablecer filtros", + "view_profile": "Ver perfil", + "add_friend": "Agregar amiga", + "disconnect": "Desconectar", + "send_message": "Enviar mensaje", + "person_attributes": { + "name": "Nombre", + "about": "Sobre", + "instruments": "Instrumentos", + "latency_to_me": "Latencia para mí", + "last_active": "Último activo", + "location": "Localización", + "skill_level": "Nivel de habilidad", + "joined_jamkazam": "Se unió a JamKazam", + "genres": "Géneros", + "bands": "Bandas", + "performance_samples": "Muestras de rendimiento", + "online_presence": "Presencia en línea", + "interests": "Intereses" + } +} \ No newline at end of file diff --git a/jam-ui/src/i18n/locales/es/translations.json b/jam-ui/src/i18n/locales/es/translations.json new file mode 100644 index 000000000..66464e43a --- /dev/null +++ b/jam-ui/src/i18n/locales/es/translations.json @@ -0,0 +1,4 @@ +{ + "keep_jamkazam_improving": "Mantenga Jamkazam mejorando", + "subscribe": "Suscribir" +} \ No newline at end of file diff --git a/jam-ui/src/index.js b/jam-ui/src/index.js index 9e7546251..af89c624c 100644 --- a/jam-ui/src/index.js +++ b/jam-ui/src/index.js @@ -6,6 +6,7 @@ import ReactDOM from 'react-dom'; import App from './App'; import Main from './Main'; import './helpers/initFA'; +import './i18n/config'; ReactDOM.render(
Name{t('person_attributes.name', {ns: 'people'})} - About + {t('person_attributes.about', {ns: 'people'})} Instruments{t('person_attributes.instruments', {ns: 'people'})}Action{t('actions', {ns: 'common'})}
{truncate(biography, 200)} {biography && biography.length > 200 && ( - {' '} more » + {' '} {t('more', {ns: 'common'})} » )}