From 3beaa13073f0618227954ff8f9afc468d766dd7e Mon Sep 17 00:00:00 2001 From: Cesar Mendivil Date: Tue, 15 Oct 2024 09:57:39 -0700 Subject: [PATCH] Refactorizar e eficientar codigo de traducciones --- src/components/Software/About.jsx | 43 +++++----- src/components/Software/Blog.jsx | 30 ++++--- src/components/Software/Header.jsx | 26 +++--- src/components/Software/Pricing.jsx | 45 +++++++--- src/components/Software/Services.jsx | 5 +- src/pages/index.jsx | 2 +- static/data/about.json | 71 ++++++++++++---- static/data/blog.json | 121 +++++++++++++++++++-------- static/data/header.json | 50 ++++++----- static/data/plans.json | 50 ++++++++++- 10 files changed, 303 insertions(+), 140 deletions(-) diff --git a/src/components/Software/About.jsx b/src/components/Software/About.jsx index eeb9769..0884b94 100644 --- a/src/components/Software/About.jsx +++ b/src/components/Software/About.jsx @@ -1,16 +1,13 @@ -import React,{ useEffect, useState } from 'react'; +import React,{ useEffect, useState,useContext } from 'react'; import { Link } from 'gatsby'; -import DOMPurify from 'dompurify'; -import { useIntl, FormattedMessage } from "gatsby-plugin-intl"; import api from '../../common/api'; +import { LanguageContext } from 'context/LanguageContext'; import UrlHelper from '../../common/urlHelper'; const About = () => { - const intl = useIntl(); - const about_title1= DOMPurify.sanitize(intl.formatMessage({ id: "about_title1" }).trim().replace(/^"|"$/g, '')); - const about_title5= DOMPurify.sanitize(intl.formatMessage({ id: "about_title5" }).trim().replace(/^"|"$/g, '')); - const [dataAbout, setAboutData] = useState({numbers: [], features: []}); - const urlHelper = new UrlHelper(intl.locale); + const { currentLanguage } = useContext(LanguageContext); + const [dataAbout, setAboutData] = useState({numbers: [], features: [], translations: []}); + const urlHelper = new UrlHelper(currentLanguage); useEffect(() => { const fetchData = async () => { @@ -23,7 +20,9 @@ const About = () => { }; fetchData(); - }, []); + }, [currentLanguage]); + + const getTranslation = (translations, key) => translations.map(t => t[key][currentLanguage]).join(''); return (
@@ -35,7 +34,7 @@ const About = () => {

{ number.value }

- {intl.locale === 'en' ? number.title2 : number.title } + { number.title && number.title[currentLanguage] }
)) @@ -45,20 +44,20 @@ const About = () => {
-
+
- {intl.formatMessage({ id: "about_title2" })} + {getTranslation(dataAbout.translations, 'about_title2')}
- {intl.formatMessage({ id: "about_title3" })} + {getTranslation(dataAbout.translations, 'about_title3')}
- {intl.formatMessage({ id: "about_title4" })} + {getTranslation(dataAbout.translations, 'about_title4')}
- - + + {getTranslation(dataAbout.translations, 'more_about')}
@@ -70,19 +69,19 @@ const About = () => {
-
+
- {intl.formatMessage({ id: "about_title6" })} + {getTranslation(dataAbout.translations, 'about_title6')}
    { - dataAbout.features.map((feature, index) => (
  • {intl.locale === 'en' ? feature.titleEn : feature.titleEs}
    • )) + dataAbout.features.map((feature, index) => (
  • {feature.title && feature.title[currentLanguage]}
    • )) }
- - {intl.formatMessage({ id: "about_title7" })} + + {getTranslation(dataAbout.translations, 'about_title7')}
@@ -95,6 +94,4 @@ const About = () => {
) } - - export default About \ No newline at end of file diff --git a/src/components/Software/Blog.jsx b/src/components/Software/Blog.jsx index 733f8c0..1133649 100644 --- a/src/components/Software/Blog.jsx +++ b/src/components/Software/Blog.jsx @@ -1,15 +1,13 @@ -import React,{ useEffect, useState } from 'react'; +import React,{ useEffect, useState,useContext } from 'react'; import { Link } from 'gatsby'; -import DOMPurify from 'dompurify'; -import data from 'data/Software/blog.json'; -import { useIntl } from "gatsby-plugin-intl"; import api from '../../common/api'; +import { LanguageContext } from '../../context/LanguageContext'; + const Blog = () => { - const intl = useIntl(); - //const blog_title1= DOMPurify.sanitize(intl.formatMessage({ id: "blog_title1" }).trim().replace(/^"|"$/g, '')); + const { currentLanguage } = useContext(LanguageContext); const [dataBlog, setBlogs] = useState({blogs: [], faq: [],clients: [],text_traductions:[]}); - const blog_titleResult = intl.locale === 'es' ? dataBlog.text_traductions.blog_title1_es : dataBlog.text_traductions.en.blog_title1_en; + const blog_titleResult = dataBlog.text_traductions[currentLanguage] && dataBlog.text_traductions[currentLanguage].blog_title1; useEffect(() => { const fetchData = async () => { @@ -31,11 +29,11 @@ const Blog = () => {
- {intl.locale === 'es' ? dataBlog.text_traductions.all_articles_es : dataBlog.text_traductions.all_articles_en} + {dataBlog.text_traductions[currentLanguage] && dataBlog.text_traductions[currentLanguage].all_articles}
{ dataBlog.blogs.map((post, i) => ( -
+
@@ -45,18 +43,18 @@ const Blog = () => {
- { intl.locale === 'es' ? post.type.es : post.type.en } + {post.type && post.type[currentLanguage]} - { intl.locale === 'es' ? post.time_es : post.time_en } + { post.time && post.time[currentLanguage]} -
{ intl.locale === 'es' ? post.title_es : post.title_en }
+
{ post.title && post.title[currentLanguage]}
@@ -85,19 +83,19 @@ const Blog = () => {

- { item.answer } + { item.answer && item.answer[currentLanguage] }
)) } - {intl.locale === 'es' ? dataBlog.text_traductions.see_more_es : dataBlog.text_traductions.see_more_en} + {dataBlog.text_traductions[currentLanguage] && dataBlog.text_traductions[currentLanguage].see_more}
diff --git a/src/components/Software/Header.jsx b/src/components/Software/Header.jsx index 075f3e3..83d7c26 100644 --- a/src/components/Software/Header.jsx +++ b/src/components/Software/Header.jsx @@ -1,13 +1,9 @@ -import React, { useEffect, useState } from 'react'; -import { useIntl } from "gatsby-plugin-intl"; +import React, { useEffect, useState, useContext } from 'react'; import api from '../../common/api'; - +import { LanguageContext } from '../../context/LanguageContext'; const Header = () => { - const intl = useIntl(); - const [headers, setHeaders] = useState({es:[], en:[]}); - //const header_1= DOMPurify.sanitize(intl.formatMessage({ id: "header_1" }).trim().replace(/^"|"$/g, '')); - const header_1Result = intl.locale === 'es' ? headers.es.header_1 : headers.en.header_1 - + const { currentLanguage } = useContext(LanguageContext); + const [headers, setHeaders] = useState([]); useEffect(() => { const fetchData = async () => { try { @@ -19,37 +15,37 @@ const Header = () => { }; fetchData(); - }, []); + }, [], [currentLanguage]); + const getTranslation = (headers, key) => headers.map(t => t[key][currentLanguage]).join(''); return ( -
-

+

-
{intl.locale === 'es' ? headers.es.header_2 : headers.en.header_2}{intl.locale === 'es' ? headers.es.header_3 : headers.en.header_3}
+
{getTranslation(headers, 'header_2')}{getTranslation(headers, 'header_3')}
- +
diff --git a/src/components/Software/Pricing.jsx b/src/components/Software/Pricing.jsx index d0ee9e1..94fdf64 100644 --- a/src/components/Software/Pricing.jsx +++ b/src/components/Software/Pricing.jsx @@ -1,8 +1,33 @@ -import React from 'react'; +import React,{ useEffect, useState,useContext } from 'react'; import { Link } from 'gatsby'; -import plans from 'data/Software/plans.json'; +import { LanguageContext } from '../../context/LanguageContext'; +import api from '../../common/api'; + const Pricing = () => { + const { currentLanguage } = useContext(LanguageContext); + const [plansData, setPlansData] = useState({ plans: [], text_traductions: {} }); + + + useEffect(() => { + const fetchData = async () => { + try { + const response = await api.get('plan','plans.json'); + setPlansData(response); + } catch (error) { + console.error(error); + } + }; + + fetchData(); + }, []); + + const { plans, text_traductions } = plansData; + + if (!plansData || plansData.length === 0) { + return
Loading...
; + } + return (
@@ -11,18 +36,16 @@ const Pricing = () => {
-

Affordable Price

+

{text_traductions.title && text_traductions.title[currentLanguage]} {text_traductions.title2 && text_traductions.title2[currentLanguage]}

- Kick-start your project with our pricing plan. We handle all the practical aspects - related to hiring and hosting your team at our premises, thus saving you half a cost - and a lot of efforts. Lorem ispum dolor sit amet + {text_traductions.subtitle1 && text_traductions.subtitle1[currentLanguage]} - Not find your plan, need a tailored-plan?
Contact us now! + {text_traductions.subtitle2 && text_traductions.subtitle2[currentLanguage]}
{text_traductions.contact && text_traductions.contact[currentLanguage]} {text_traductions.us_now && text_traductions.us_now[currentLanguage]} - Our Services + {text_traductions.our_services_button && text_traductions.our_services_button[currentLanguage]}
@@ -35,12 +58,12 @@ const Pricing = () => {
-

{ plan.title } { plan.recommended && Recommended }

+

{ plan.title } { plan.recommended && {text_traductions.recommend && text_traductions.recommend[currentLanguage]} }

{ plan.description }
{ plan.price }
- per month + {text_traductions.per_month && text_traductions.per_month[currentLanguage]}
@@ -56,7 +79,7 @@ const Pricing = () => {
- Get Started Now + {text_traductions.get_started_now && text_traductions.get_started_now[currentLanguage]}
diff --git a/src/components/Software/Services.jsx b/src/components/Software/Services.jsx index fd64207..e325aba 100644 --- a/src/components/Software/Services.jsx +++ b/src/components/Software/Services.jsx @@ -1,7 +1,6 @@ import React ,{ useEffect, useState }from 'react'; import { Link } from 'gatsby'; import { useIntl } from "gatsby-plugin-intl"; -//import services from '/static/data/services.json'; import api from '../../common/api'; const Services = () => { @@ -25,7 +24,7 @@ const Services = () => {
-

{intl.formatMessage({ id: "our_main" })} {intl.formatMessage({ id: "services" })}

{intl.formatMessage({ id: "see_full_services" })} +

{intl.formatMessage({ id: "our_main" })} {intl.formatMessage({ id: "services" })}

{/* {intl.formatMessage({ id: "see_full_services" })} */}
{ @@ -40,7 +39,7 @@ const Services = () => {
{intl.locale === 'en' ? service.details_en : service.details_es}
- {intl.formatMessage({ id: "see_projects" })} + {/* {intl.formatMessage({ id: "see_projects" })} */}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 32f6639..440c2b6 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -9,7 +9,7 @@ import Services from 'components/Software/Services'; import About from 'components/Software/About'; import Projects from 'components/Software/Projects'; import Pricing from 'components/Software/Pricing'; -import Team from 'components/Software/Team'; +//import Team from 'components/Software/Team'; import Blog from 'components/Software/Blog'; import ChatBanner from 'components/Software/ChatBanner'; import Footer from 'components/Software/Footer'; diff --git a/static/data/about.json b/static/data/about.json index 132ff4d..546e715 100644 --- a/static/data/about.json +++ b/static/data/about.json @@ -3,38 +3,81 @@ "numbers": [ { "value": "50", - "title": "Proyectos realizados", - "title2":"Projects done" + "title": {"es":"Proyectos completados","en":"Projects done"} }, { "value": "165", - "title": "Clientes satisfechos", - "title2":"satisfied clients" + "title": {"es":"Clientes satisfechos","en":"satisfied clients"} }, { "value": "5", - "title": "años de experiencia", - "title2":"years of experience" + "title": {"es":"años de experiencia","en":"years of experience"} } ], "features": [ { - "titleEs":"Últimas soluciones de TI e integración con Blockchain", - "titleEn":"Latest IT Solutions & Integration With Blockchain" + "title":{ + "es":"Últimas soluciones de TI e integración con Blockchain", + "en":"Latest IT Solutions & Integration With Blockchain" + } }, { - "titleEs":"Soporte para más de 100 pasarelas de pago", - "titleEn":"Over 100+ Payment Gateways Support" + "title":{ + "es":"Soporte para más de 100 pasarelas de pago", + "en":"Over 100+ Payment Gateways Support" + } }, { - "titleEs":"Máquina de IA y aprendizaje profundo", - "titleEn":"AI Machine & Deep Learning" + "title":{ + "es":"Máquina de IA y aprendizaje profundo", + "en":"AI Machine & Deep Learning" + } }, { - "titleEs":"Soporte dedicado 24/7", - "titleEn":"Dedicated Support 24/7" + "title":{ + "es":"Soporte dedicado 24/7", + "en":"Dedicated Support 24/7" + } } + ], + "translations": [ + { + "about_title1":{ + "es":"

Nextream’s Misión & Vision

", + "en":"

Nextream’s Mission & Vision

" + }, + "about_title2":{ + "es":"“Sólo cuando funcionan mal las máquinas te recuerdan lo poderosas que son.”", + "en":"“Solving problems with machines is like remembering the powerful things that are.”" + }, + "about_title3":{ + "es":" Nextream Co es el socio elegido por muchas de las empresas, pymes y desafíos tecnológicos líderes del mundo. Ayudamos a las empresas a aumentar su valor mediante el desarrollo de software personalizado, diseño de productos, control de calidad y servicios de consultoría.", + "en":"Nextream Co is the chosen partner for many of the world's leading companies, SMEs and technological challenges. We help companies increase their value through custom software development, product design, quality control and consulting services." + }, + "about_title4":{ + "es":" Nextream está especializado en servicios tecnológicos y relacionados con TI como ingeniería de producto, gestión de garantías, construcción de nube, etc.", + "en":"Nextream is specialized in technical services and related to TI, including product management, warranty management, cloud building, etc." + }, + "about_title5":{ + "es":"

Nextream’s Tecnología

", + "en":"

Nextream’s Technology

" + }, + "about_title6":{ + "es":"Nuestro equipo puede ayudarlo a transformar su negocio a través de las últimas capacidades tecnológicas para mantenerse a la vanguardia.", + "en":"Our team can help you to transform your business into the most technological capabilities to stay ahead of the curve." + }, + "about_title7":{ + "es":"Cómo trabajamos", + "en":"How we work" + }, + "more_about":{ + "es":"Más sobre nosotros", + "en":"More About Us" + } + + } + ] } } \ No newline at end of file diff --git a/static/data/blog.json b/static/data/blog.json index c111301..aa8ef2f 100644 --- a/static/data/blog.json +++ b/static/data/blog.json @@ -7,57 +7,102 @@ "en": "tips & tricks", "es": "trucos & tips" }, - "time_en": "12 Days ago", - "title_en": "How To Become A Python Develop Expert", - "type_es": "trucos & tips", - "time_es": "Hace 12 días", - "title_es": "Cómo convertirse en un experto en desarrollo de Python", + "time": { + "en": "12 Days ago", + "es": "Hace 12 día" + }, + "title":{ + "en": "How To Become A Python Develop Expert", + "es": "Cómo convertirse en un experto en desarrollo de Python" + }, "userImage": "a", "username": "Admin" }, { "cover": "/assets/img/blog/7.png", - "type_en": "News", - "time_en": "5 Days ago", - "title_en": "AI With Fingerprint", - "type_es": "Noticias", - "time_es": "Hace 5 días", - "title_es": "IA con huella digital", + "type": { + "en": "News", + "es": "Noticias" + }, + "time": { + "en": "5 Days ago", + "es": "Hace 5 días" + }, + "title":{ + "en": "AI With Fingerprint", + "es": "IA con huella digital" + }, "userImage": "a", "username": "Admin" }, { "cover": "/assets/img/blog/8.png", - "type_en": "tips & tricks", - "time_en": "1 month ago", - "title_en": "Solutions For Big Data Issue, Expert Perspective", - "type_es": "trucos & tips", - "time_es": "Hace 1 mes", - "title_es": "Soluciones para el problema de Big Data, perspectiva de expertos", + "type": { + "en": "tips & tricks", + "es": "trucos & tips" + }, + "time": { + "en": "1 month ago", + "es": "Hace 1 mes" + }, + "title":{ + "en": "Solutions For Big Data Issue, Expert Perspective", + "es": "Soluciones para el problema de Big Data, perspectiva de expertos" + }, "userImage": "a", "username": "Admin" } ], "faq": [ { - "question": "How Benefit That I Got When Choose Basic Plan?", - "answer": "Through the collaboration with customers in discussing needs and demand, we're able to attain mutual understanding, gain customer trust to offer appropriate advice" + "question":{ + "es": "¿Cómo beneficio que obtengo al elegir el plan básico?", + "en": "How Benefit That I Got When Choose Basic Plan?" + }, + "answer":{ + "es": "A través de la colaboración con los clientes en la discusión de necesidades y demandas, podemos lograr una comprensión mutua, ganar la confianza del cliente para ofrecer consejos apropiados", + "en": "Through the collaboration with customers in discussing needs and demand, we're able to attain mutual understanding, gain customer trust to offer appropriate advice" + } }, { - "question": "Can I Pay With Paypal or Payoneer?", - "answer": "Through the collaboration with customers in discussing needs and demand, we're able to attain mutual understanding, gain customer trust to offer appropriate advice" + "question":{ + "es": "¿Puedo pagar con Paypal o Payoneer?", + "en": "Can I Pay With Paypal or Payoneer?" + }, + "answer":{ + "es": "A través de la colaboración con los clientes en la discusión de necesidades y demandas, podemos lograr una comprensión mutua, ganar la confianza del cliente para ofrecer consejos apropiados", + "en": "Through the collaboration with customers in discussing needs and demand, we're able to attain mutual understanding, gain customer trust to offer appropriate advice" + } }, { - "question": "How Long For A Standard Project?", - "answer": "Through the collaboration with customers in discussing needs and demand, we're able to attain mutual understanding, gain customer trust to offer appropriate advice" + "question":{ + "es": "¿Cuanto tiempo dura un proyecto estandar?", + "en": "How Long For A Standard Project?" + }, + "answer":{ + "es": "A través de la colaboración con los clientes en la discusión de necesidades y demandas, podemos lograr una comprensión mutua, ganar la confianza del cliente para ofrecer consejos apropiados", + "en": "Through the collaboration with customers in discussing needs and demand, we're able to attain mutual understanding, gain customer trust to offer appropriate advice" + } }, { - "question": "How About Data Security & NDA Agreement?", - "answer": "Through the collaboration with customers in discussing needs and demand, we're able to attain mutual understanding, gain customer trust to offer appropriate advice" - }, + "question":{ + "es": "¿Cual es el acuerdo de seguridad de datos y NDA?", + "en": "How About Data Security & NDA Agreement?" + }, + "answer":{ + "es": "A través de la colaboración con los clientes en la discusión de necesidades y demandas, podemos lograr una comprensión mutua, ganar la confianza del cliente para ofrecer consejos apropiados", + "en": "Through the collaboration with customers in discussing needs and demand, we're able to attain mutual understanding, gain customer trust to offer appropriate advice" + } + }, { - "question": "Can We Make An Own Tailored-AI ?", - "answer": "Through the collaboration with customers in discussing needs and demand, we're able to attain mutual understanding, gain customer trust to offer appropriate advice" + "question":{ + "es": "¿Puedo hacer un propio Tailored-AI ?", + "en": "Can We Make An Own Tailored-AI ?" + }, + "answer":{ + "es": "A través de la colaboración con los clientes en la discusión de necesidades y demandas, podemos lograr una comprensión mutua, ganar la confianza del cliente para ofrecer consejos apropiados", + "en": "Through the collaboration with customers in discussing needs and demand, we're able to attain mutual understanding, gain customer trust to offer appropriate advice" + } } ], "clients": [ @@ -69,14 +114,18 @@ "/assets/img/logos/6.png" ], "text_traductions":{ - "blog_title1_es":"

Nextream Noticias

", - "all_articles_es":"Ver artículos", - "by_es":"Por", - "see_more_es":"Ver Más", - "blog_title1_en":"

Nextream's Journal

", - "all_articles_en":"All Articles", - "by_en":"By", - "see_more_en":"See More" + "es":{ + "blog_title1":"

Nextream Noticias

", + "all_articles":"Ver artculos", + "by":"Por", + "see_more":"Ver Más" + }, + "en":{ + "blog_title1":"

Nextream's Journal

", + "all_articles":"All Articles", + "by":"By", + "see_more":"See More" + } } } diff --git a/static/data/header.json b/static/data/header.json index b66787b..524bc75 100644 --- a/static/data/header.json +++ b/static/data/header.json @@ -1,23 +1,35 @@ { - "headers":{ - "es": { - "header_1":"Haz tu vida más fácil con la ayuda de Nextream", - "header_2":"Ayudamos a las empresas a aumentar su valor mediante el desarrollo de software personalizado, diseño de productos, control de calidad y servicios de consultoría.", - "header_3":"Nos pondremos en contacto en 24h.", - "get_free_quotes": "¡Obtenga una cotización gratuita!", - "your_email":"Su correo electrónico *", - "inquiry_about":"Su consulta sobre", - "request_a_consultation":"¡Solicite una consulta!" - }, - "en": { - "get_free_quotes": "Get Free Quotes!", - "header_1":" Make your life easier with help from Nextream", - "header_2":"We help businesses elevate their value through custom software development, product design, QA & consultancy services.", - "header_3":"We’ll contact back in 24h", - "your_email":"Su correo electrónico *", - "inquiry_about":"Your inquiry about", - "request_a_consultation":"Request a consultation!" + "headers":[ + { + "header_1":{ + "es":"Haz tu vida más fácil con la ayuda de Nextream", + "en":"Make your life easier with help from Nextream" + }, + "header_2":{ + "es":"Ayudamos a las empresas a aumentar su valor mediante el desarrollo de software personalizado, diseño de productos, control de salud y servicios de consultoría.", + "en":"We help businesses elevate their value through custom software development, product design, QA & consultancy services." + }, + "header_3":{ + "es":"Nos pondremos en contacto en 24h.", + "en":"We’ll contact back in 24h" + }, + "get_free_quotes": { + "es":"¡Obtenga una cotización gratuita!", + "en":"Get Free Quotes!" + }, + "your_email":{ + "es":"Su correo electrónico *", + "en":"Your email *" + }, + "inquiry_about":{ + "es":"Su consulta sobre", + "en":"Your inquiry about" + }, + "request_a_consultation":{ + "es":"¡Solicite una consulta!", + "en":"Request a consultation!" + } } - } + ] } \ No newline at end of file diff --git a/static/data/plans.json b/static/data/plans.json index cee9cac..9e96fba 100644 --- a/static/data/plans.json +++ b/static/data/plans.json @@ -1,4 +1,6 @@ -[ +{ + "plan":{ + "plans": [ { "title": "Standard", "description": "Basic features", @@ -22,4 +24,48 @@ "Cloud Hosting & Domain" ] } -] \ No newline at end of file +], +"text_traductions":{ + "our_services_button":{ + "es":"Nuestros Servicios", + "en":"Our Services" + }, + "subtitle1":{ + "en":"Kick-start your project with our pricing plan. We handle all the practical aspects related to hiring and hosting your team at our premises, thus saving you half a cost and a lot of efforts. Lorem ispum dolor sit amet", + "es":"Inicie su proyecto con nuestro plan de precios. Nos encargamos de todos los aspectos prácticos relacionados con la contratación y el alojamiento de su equipo en nuestras instalaciones, ahorrándole así la mitad de los costos y muchos esfuerzos. Lorem ispum dolor sit amet" + }, + "subtitle2":{ + "en":"Not find your plan, need a tailored-plan? ", + "es":"No encuentre su plan, necesita un plan ajustado? " + }, + "contact":{ + "en":"Contact", + "es":"Contacte" + }, + "us_now":{ + "en":"us now!", + "es":"con nosotros!" + }, + "title2":{ + "es":"Accesible", + "en":"Price" + }, + "title":{ + "es":"Precio", + "en":"Affordable" + }, + "recommend":{ + "es":"Recomendado", + "en":"Recomended" + }, + "per_month":{ + "es":"por mes", + "en":"per month" + }, + "get_started_now":{ + "es":"Comience ahora", + "en":"Get Started Now" + } + } +} +}