Improve translation code

.github/workflows/build.yml

@@ -24,7 +24,7 @@ jobs:
               env:
                   FIREBASE_CONFIG: ${{ secrets.FIREBASE_CONFIG }}
               run: |
-                  echo $FIREBASE_CONFIG > src/components/Server/config.json
+                  echo $FIREBASE_CONFIG > src/components/Server/firebase/config.json
             - name: Portpolio Build...
               run: |
                   npm install

.github/workflows/main.yml

@@ -23,7 +23,7 @@ jobs:
               env:
                   FIREBASE_CONFIG: ${{ secrets.FIREBASE_CONFIG }}
               run: |
-                  echo $FIREBASE_CONFIG > src/components/Server/config.json
+                  echo $FIREBASE_CONFIG > src/components/Server/firebase/config.json
             - name: Build SASS -> CSS
               run: |
                   npm install

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "neonkid-portpolio",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"private": true,
 	"dependencies": {
 		"@types/jest": "24.0.18",
@@ -11,6 +11,8 @@
 		"bootstrap": "^4.3.1",
 		"bootstrap-validator": "^0.11.9",
 		"firebase": "^7.2.1",
+		"i18next": "^19.3.2",
+		"i18next-browser-languagedetector": "^4.0.2",
 		"ionicons": "^4.6.3",
 		"isotope-layout": "^3.0.6",
 		"jquery": "^3.4.1",
@@ -22,9 +24,9 @@
 		"prop-types": "^15.7.2",
 		"react": "^16.10.2",
 		"react-dom": "^16.10.2",
-		"react-intl": "^3.3.2",
+		"react-i18next": "^11.3.3",
 		"react-moment": "^0.9.6",
-		"react-scripts": "3.3.0",
+		"react-scripts": "^3.4.0",
 		"react-scroll": "^1.7.14",
 		"react-typed": "^1.2.0",
 		"rss-parser": "^3.7.3",
@@ -55,6 +57,7 @@
 		]
 	},
 	"devDependencies": {
+		"@testing-library/react": "^10.0.1",
 		"@types/bootstrap": "^4.3.1",
 		"@types/bootstrap-validator": "^0.11.2",
 		"@types/isotope-layout": "^3.0.8",

src/components/Header/index.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
+import { Translation } from 'react-i18next';
 import { observer, inject } from 'mobx-react';
-import { FormattedMessage } from 'react-intl';
 
 import * as Inject from '../../stores/MenuStateStore';
 import './styles.css';
@@ -42,33 +42,39 @@ class Header extends Component {
 		return (
 			<div className={menuItemState ? 'inline-header showx' : 'inline-header'}>
 				<span className="status">Neon K.I.D</span>
-				<ul className="inline-header-menu">
-					<li
-						className={resumeState ? 'resume menu-item active' : 'resume menu-item'}
-						onClick={showResumeContent}
-					>
-						<FormattedMessage id="menu-resume" />
-					</li>
-
-					<li
-						className={portfolioState ? 'portfolio menu-item active' : 'portfolio menu-item'}
-						onClick={showPortfolioContent}
-					>
-						<FormattedMessage id="menu-portfolio" />
-					</li>
-					<li className={blogState ? 'blog menu-item active' : 'blog menu-item'} onClick={showBlogContent}>
-						<FormattedMessage id="menu-blog" />
-					</li>
-					<li
-						className={contactState ? 'contact menu-item active' : 'contact menu-item'}
-						onClick={showContact}
-					>
-						<FormattedMessage id="menu-contact" />
-					</li>
-					<li id="close" className="menu-item" onClick={closeBtnClick}>
-						<i className="ion-ios-close"></i>
-					</li>
-				</ul>
+				<Translation>
+					{(t, { i18n, lng }, ready) => (
+						<ul className="inline-header-menu">
+							<li
+								className={resumeState ? 'resume menu-item active' : 'resume menu-item'}
+								onClick={showResumeContent}
+							>
+								{ready ? t('menu-resume') : 'default'}
+							</li>
+							<li
+								className={portfolioState ? 'portfolio menu-item active' : 'portfolio menu-item'}
+								onClick={showPortfolioContent}
+							>
+								{ready ? t('menu-portfolio') : 'default'}
+							</li>
+							<li
+								className={blogState ? 'blog menu-item active' : 'blog menu-item'}
+								onClick={showBlogContent}
+							>
+								{ready ? t('menu-blog') : 'default'}
+							</li>
+							<li
+								className={contactState ? 'contact menu-item active' : 'contact menu-item'}
+								onClick={showContact}
+							>
+								{ready ? t('menu-contact') : 'default'}
+							</li>
+							<li id="close" className="menu-item" onClick={closeBtnClick}>
+								<i className="ion-ios-close"></i>
+							</li>
+						</ul>
+					)}
+				</Translation>
 			</div>
 		);
 	}

src/components/Home/ContactForm/ContactModal/index.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { injectIntl, IntlFormatters, WrappedComponentProps } from 'react-intl';
+import { Translation } from 'react-i18next';
 
 type cmProps = {
 	title?: string;
 	message?: string;
 	id: string;
-	intl?: IntlFormatters;
 };
 
-const ContactModal = ({ title, message, id, intl }: cmProps & WrappedComponentProps) => {
+const ContactModal = ({ title, message, id }: cmProps) => {
 	return (
 		<div className="modal" role="dialog" id={id} aria-hidden="true">
 			<div className="modal-dialog modal-dialog-centered" role="dialog">
@@ -20,14 +19,18 @@ const ContactModal = ({ title, message, id, intl }: cmProps & WrappedComponentPr
 						<p>{message}</p>
 					</div>
 					<div className="modal-footer">
-						<button type="button" className="btn btn-default" data-dismiss="modal">
-							{intl.formatMessage({ id: 'con-form-ok-btn' })}
-						</button>
+						<Translation>
+							{(t, { i18n, lng }, ready) => (
+								<button type="button" className="btn btn-default" data-dismiss="modal">
+									{t('con-form-ok-btn')}
+								</button>
+							)}
+						</Translation>
 					</div>
 				</div>
 			</div>
 		</div>
 	);
 };
 
-export default injectIntl(ContactModal);
+export default ContactModal;