Merge pull request #368 from blueedgetechno/andrewstech-patch-1

Start store translations

Author: andrewstech

public/locales/en/translate.json

@@ -7,5 +7,17 @@
   "about.alsonot": "This is also not",
   "about.microsoftcopywrite": "Microsoft, Windows and Other demonstrated Products in this project are trademarks of the Microsoft group of companies",
   "about.understand": "Ok, I understand",
-  "about.contact": "contact"
+  "about.contact": "contact",
+  "store.featured-app": "Featured Apps",
+  "store.featured-app.info": "Take your experience to new heights with these must-have apps",
+  "store.featured-game": "Featured Games",
+  "store.featured-game.info": "Explore fun to play xbox games and find a new favorite",
+  "store.featured-film": "Featured Films",
+  "store.featured-film.info": "Rent or buy the latest hit films and watch them at home or on the go",
+  "store.free": "FREE",
+  "store.owned": "Owned",
+  "store.rent": "Rent",
+  "store.features": "Features",
+  "store.ratings": "Ratings and reviews".
+  "store.description": "Description"
 }

src/containers/applications/apps/store.js

@@ -5,6 +5,7 @@ import './assets/store.scss'
 import axios from 'axios'
 import storedata from './assets/store.json'
 import {installApp} from '../../../actions'
+import { useTranslation } from 'react-i18next';
 
 const geneStar = (item, rv=0)=>{
   var url = item.data.url,
@@ -41,6 +42,7 @@ export const MicroStore = ()=>{
   const [storeapps, setApps] = useState(storedata)
   const [fetchState, setFetch] = useState(0)
   const dispatch = useDispatch()
+  const { t, i18n } = useTranslation()
 
   const clickDispatch = (event)=>{
     var action = {
@@ -211,6 +213,7 @@ const DetailPage = ({app})=>{
   const stars = geneStar(app)
   const reviews = geneStar(app,1)
   const dispatch = useDispatch()
+  const { t, i18n } = useTranslation()
 
   const download = ()=>{
     setDown(1)
@@ -278,11 +281,11 @@ const DetailPage = ({app})=>{
           </div>
         ):null}
         <div className="briefcont py-2 pb-3">
-          <div className="text-xs font-semibold">Description</div>
+          <div className="text-xs font-semibold">{t('store.description')}</div>
           <div className="text-xs mt-4"><pre>{app.data.desc}</pre></div>
         </div>
         <div className="briefcont py-2 pb-3">
-          <div className="text-xs font-semibold">Ratings and reviews</div>
+          <div className="text-xs font-semibold">{t('store.ratings')}</div>
           <div className="flex mt-4 items-center">
             <div className="flex flex-col items-center">
               <div className="text-5xl reviewtxt font-bold">{stars}</div>
@@ -307,7 +310,7 @@ const DetailPage = ({app})=>{
           </div>
         </div>
         <div className="briefcont py-2 pb-3">
-          <div className="text-xs font-semibold">Features</div>
+          <div className="text-xs font-semibold">{t('store.features')}</div>
           <div className="text-xs mt-4"><pre>{app.data.feat}</pre></div>
         </div>
       </div>
@@ -320,6 +323,7 @@ const FrontPage = (props)=>{
   const apprib = useSelector(state => state.globals.apprib)
   const gamerib = useSelector(state => state.globals.gamerib)
   const movrib = useSelector(state => state.globals.movrib)
+  const { t, i18n } = useTranslation()
 
   return (
     <div className="pagecont w-full absolute top-0">
@@ -343,8 +347,8 @@ const FrontPage = (props)=>{
       <div id="apprib" className="frontCont amzApps my-8 py-20 w-auto mx-8 \
         flex justify-between noscroll overflow-x-scroll overflow-y-hidden">
         <div className="flex w-64 flex-col text-gray-100 h-full px-8">
-          <div className="text-xl">Featured Apps</div>
-          <div className="text-xs mt-2">Take your experience to new heights with these must-have apps</div>
+          <div className="text-xl">{t('store.featured-app')}</div>
+          <div className="text-xs mt-2">{t('store.featured-app.info')}</div>
         </div>
         <div className="flex w-max pr-8">
           {apprib && apprib.map((x,i)=>{
@@ -362,7 +366,7 @@ const FrontPage = (props)=>{
                   <Icon className={stars>4?"bluestar":""} fafa="faStar" width={6}/>
                   <div className="text-xss">{1+x.charCodeAt(3)%5}k</div>
                 </div>
-                <div className="text-xss mt-8">{x.charCodeAt(4)%2?"Free":"Owned"}</div>
+                <div className="text-xss mt-8">{x.charCodeAt(4)%2?"{t('store.free')}":"{t('store.owned')}"}</div>
               </div>
             )
           })}
@@ -372,8 +376,8 @@ const FrontPage = (props)=>{
       <div id="gamerib" className="frontCont amzGames my-8 py-20 w-auto mx-8 \
         flex justify-between noscroll overflow-x-scroll overflow-y-hidden">
         <div className="flex w-64 flex-col text-gray-100 h-full px-8">
-          <div className="text-xl">Featured Games</div>
-          <div className="text-xs mt-2">Explore fun to play xbox games and find a new favorite</div>
+          <div className="text-xl">{t('store.featured-game')}</div>
+          <div className="text-xs mt-2">{t('store.featured-game.info')}</div>
         </div>
         <div className="flex w-max pr-8">
           {gamerib && gamerib.map((x,i)=>{
@@ -391,7 +395,7 @@ const FrontPage = (props)=>{
                   <Icon className={stars>4?"bluestar":""} fafa="faStar" width={6}/>
                   <div className="text-xss">{1+x.charCodeAt(3)%5}k</div>
                 </div>
-                <div className="text-xss mt-8">{x.charCodeAt(4)%2?"Free":"Owned"}</div>
+                <div className="text-xss mt-8">{x.charCodeAt(4)%2?"{t('store.free')}":"{t('store.owned')}"}</div>
               </div>
             )
           })}
@@ -401,8 +405,8 @@ const FrontPage = (props)=>{
       <div id="movrib" className="frontCont amzMovies my-8 py-20 w-auto mx-8 \
         flex justify-between noscroll overflow-x-scroll overflow-y-hidden">
         <div className="flex w-64 flex-col text-gray-100 h-full px-8">
-          <div className="text-xl">Featured Films</div>
-          <div className="text-xs mt-2">Rent or buy the latest hit films and watch them at home or on the go</div>
+          <div className="text-xl">{t('store.featured-film')}</div>
+          <div className="text-xs mt-2">{t('store.featured-film.info')}</div>
         </div>
         <div className="flex w-max pr-8">
           {movrib && movrib.map((x,i)=>{
@@ -420,7 +424,7 @@ const FrontPage = (props)=>{
                   <Icon className={stars>4?"bluestar":""} fafa="faStar" width={6}/>
                   <div className="text-xss">{1+x.charCodeAt(3)%5}k</div>
                 </div>
-                <div className="text-xss mt-8">{x.charCodeAt(4)%2?"Rent":"Owned"}</div>
+                <div className="text-xss mt-8">{x.charCodeAt(4)%2?"{t('store.rent')}":"{t('store.owned')}"}</div>
               </div>
             )
           })}