From e78b08122b3378fdfde31d6df7003ede593f854a Mon Sep 17 00:00:00 2001 From: Negar Date: Tue, 5 Sep 2023 10:00:11 +0100 Subject: [PATCH 1/9] config i18next for translation --- src/i18nextConfig.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/i18nextConfig.js diff --git a/src/i18nextConfig.js b/src/i18nextConfig.js new file mode 100644 index 00000000..a04453dd --- /dev/null +++ b/src/i18nextConfig.js @@ -0,0 +1,33 @@ +import i18n from "i18next"; +import { initReactI18next } from "react-i18next"; + +i18n + .use(initReactI18next) // passes i18n down to react-i18next + .init({ + resources: { + en: { + translation: require("./locales/en/translation.json"), + }, + pt: { + translation: require("./locales/pt/translation.json"), + }, + fr: { + translation: require("./locales/fr/translation.json"), + }, + it: { + translation: require("./locales/it/translation.json"), + }, + es: { + translation: require("./locales/es/translation.json"), + }, + de: { + translation: require("./locales/de/translation.json"), + }, + }, + lng: "en", // Set the default language + fallbackLng: "en", // Fallback language if a translation is missing + interpolation: { + escapeValue: false, // React already escapes by default + }, + returnNull: false, + }); From c467da9983205b4e099d7b721842fa22c5c75e68 Mon Sep 17 00:00:00 2001 From: Negar Date: Tue, 5 Sep 2023 10:00:57 +0100 Subject: [PATCH 2/9] created customized hook to get user's IP --- src/hooks/useIPInfo.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/hooks/useIPInfo.js diff --git a/src/hooks/useIPInfo.js b/src/hooks/useIPInfo.js new file mode 100644 index 00000000..1832fcba --- /dev/null +++ b/src/hooks/useIPInfo.js @@ -0,0 +1,26 @@ +import { useEffect, useState } from "react"; +import axios from "axios"; + +function useIPInfo() { + const [ipInfo, setIpInfo] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + // Fetch IP information + axios + .get("https://ipapi.co/json/") + .then((response) => { + console.log(response); + setIpInfo(response.data); + setLoading(false); + }) + .catch((error) => { + setError(error); + setLoading(false); + }); + }, []); + return { ipInfo, loading, error }; +} + +export default useIPInfo; From 0aaa6412db30513b52867502019edda63c3786af Mon Sep 17 00:00:00 2001 From: Negar Date: Tue, 5 Sep 2023 10:02:12 +0100 Subject: [PATCH 3/9] added different languages --- src/locales/de/translation.json | 3 +++ src/locales/en/translation.json | 3 +++ src/locales/es/translation.json | 3 +++ src/locales/fr/translation.json | 3 +++ src/locales/it/translation.json | 3 +++ src/locales/pt/translation.json | 3 +++ 6 files changed, 18 insertions(+) create mode 100644 src/locales/de/translation.json create mode 100644 src/locales/en/translation.json create mode 100644 src/locales/es/translation.json create mode 100644 src/locales/fr/translation.json create mode 100644 src/locales/it/translation.json create mode 100644 src/locales/pt/translation.json diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json new file mode 100644 index 00000000..2acd42e9 --- /dev/null +++ b/src/locales/de/translation.json @@ -0,0 +1,3 @@ +{ + "BEFORE-I-DIE": "Bevor ich sterbe" +} diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json new file mode 100644 index 00000000..e838e96f --- /dev/null +++ b/src/locales/en/translation.json @@ -0,0 +1,3 @@ +{ + "BEFORE-I-DIE": "Before I die" +} diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json new file mode 100644 index 00000000..c6810578 --- /dev/null +++ b/src/locales/es/translation.json @@ -0,0 +1,3 @@ +{ + "BEFORE-I-DIE": "Antes de morir" +} diff --git a/src/locales/fr/translation.json b/src/locales/fr/translation.json new file mode 100644 index 00000000..cd953561 --- /dev/null +++ b/src/locales/fr/translation.json @@ -0,0 +1,3 @@ +{ + "BEFORE-I-DIE": "Avant de mourir" +} diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json new file mode 100644 index 00000000..776a8add --- /dev/null +++ b/src/locales/it/translation.json @@ -0,0 +1,3 @@ +{ + "BEFORE-I-DIE": "Prima di morire" +} diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json new file mode 100644 index 00000000..7d8cc0e9 --- /dev/null +++ b/src/locales/pt/translation.json @@ -0,0 +1,3 @@ +{ + "BEFORE-I-DIE": "Antes de morrer" +} From e7fe74dc84d65ce7ea2b277870656de9c8d0b833 Mon Sep 17 00:00:00 2001 From: Negar Date: Tue, 5 Sep 2023 10:02:39 +0100 Subject: [PATCH 4/9] mapped country with languages in json file --- src/translation/languages.json | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/translation/languages.json diff --git a/src/translation/languages.json b/src/translation/languages.json new file mode 100644 index 00000000..28d71956 --- /dev/null +++ b/src/translation/languages.json @@ -0,0 +1,27 @@ +{ + "US": "en", + "GB": "en", + "CA": "en", + "AU": "en", + "FR": "fr", + "DE": "de", + "ES": "es", + "IT": "it", + "PT": "pt", + "BR": "pt", + "NL": "nl", + "BE": "nl", + "SE": "sv", + "NO": "no", + "DK": "da", + "FI": "fi", + "RU": "ru", + "CN": "zh", + "JP": "ja", + "IN": "hi", + "AR": "es", + "MX": "es", + "CO": "es", + "CL": "es", + "PE": "es" +} From bd8c45f269564be31e1e22a453304193cbd57d1d Mon Sep 17 00:00:00 2001 From: Negar Date: Tue, 5 Sep 2023 10:47:03 +0100 Subject: [PATCH 5/9] installed third party libraries --- package-lock.json | 187 ++++++++++++++++++++++++++++++++++++++++++---- package.json | 3 + 2 files changed, 176 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index e9d7ebbb..fe1e79f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,10 +11,13 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", + "axios": "^1.5.0", + "i18next": "^23.4.6", "iconsax-react": "^0.0.8", "prop-types": "^15.8.1", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-i18next": "^13.2.2", "react-masonry-css": "^1.0.16", "react-scripts": "5.0.0", "react-simple-typewriter": "^5.0.1", @@ -1772,11 +1775,11 @@ } }, "node_modules/@babel/runtime": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", - "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz", + "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==", "dependencies": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" @@ -1794,6 +1797,11 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/runtime/node_modules/regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + }, "node_modules/@babel/template": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", @@ -4448,6 +4456,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz", + "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -7391,9 +7422,9 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==" }, "node_modules/follow-redirects": { - "version": "1.14.9", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", - "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==", + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", "funding": [ { "type": "individual", @@ -7993,6 +8024,14 @@ "node": ">=12" } }, + "node_modules/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==", + "dependencies": { + "void-elements": "3.1.0" + } + }, "node_modules/html-webpack-plugin": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -8127,6 +8166,28 @@ "node": ">=10.17.0" } }, + "node_modules/i18next": { + "version": "23.4.6", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.4.6.tgz", + "integrity": "sha512-jBE8bui969Ygv7TVYp0pwDZB7+he0qsU+nz7EcfdqSh+QvKjEfl9YPRQd/KrGiMhTYFGkeuPaeITenKK/bSFDg==", + "funding": [ + { + "type": "individual", + "url": "https://locize.com" + }, + { + "type": "individual", + "url": "https://locize.com/i18next.html" + }, + { + "type": "individual", + "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" + } + ], + "dependencies": { + "@babel/runtime": "^7.22.5" + } + }, "node_modules/iconsax-react": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/iconsax-react/-/iconsax-react-0.0.8.tgz", @@ -12852,6 +12913,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", @@ -13133,6 +13199,27 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "node_modules/react-i18next": { + "version": "13.2.2", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.2.2.tgz", + "integrity": "sha512-+nFUkbRByFwnrfDcYqvzBuaeZb+nACHx+fAWN/pZMddWOCJH5hoc21+Sa/N/Lqi6ne6/9wC/qRGOoQhJa6IkEQ==", + "dependencies": { + "@babel/runtime": "^7.22.5", + "html-parse-stringify": "^3.0.1" + }, + "peerDependencies": { + "i18next": ">= 23.2.3", + "react": ">= 16.8.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -15088,6 +15175,14 @@ "node": ">= 0.8" } }, + "node_modules/void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", @@ -17164,11 +17259,18 @@ } }, "@babel/runtime": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", - "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz", + "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==", "requires": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.14.0" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + } } }, "@babel/runtime-corejs3": { @@ -19106,6 +19208,28 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz", "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==" }, + "axios": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz", + "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==", + "requires": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + }, + "dependencies": { + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -21280,9 +21404,9 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==" }, "follow-redirects": { - "version": "1.14.9", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", - "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==" + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==" }, "fork-ts-checker-webpack-plugin": { "version": "6.5.1", @@ -21700,6 +21824,14 @@ "terser": "^5.10.0" } }, + "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": "5.5.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -21791,6 +21923,14 @@ "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==" }, + "i18next": { + "version": "23.4.6", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.4.6.tgz", + "integrity": "sha512-jBE8bui969Ygv7TVYp0pwDZB7+he0qsU+nz7EcfdqSh+QvKjEfl9YPRQd/KrGiMhTYFGkeuPaeITenKK/bSFDg==", + "requires": { + "@babel/runtime": "^7.22.5" + } + }, "iconsax-react": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/iconsax-react/-/iconsax-react-0.0.8.tgz", @@ -25054,6 +25194,11 @@ } } }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", @@ -25252,6 +25397,15 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "react-i18next": { + "version": "13.2.2", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.2.2.tgz", + "integrity": "sha512-+nFUkbRByFwnrfDcYqvzBuaeZb+nACHx+fAWN/pZMddWOCJH5hoc21+Sa/N/Lqi6ne6/9wC/qRGOoQhJa6IkEQ==", + "requires": { + "@babel/runtime": "^7.22.5", + "html-parse-stringify": "^3.0.1" + } + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26695,6 +26849,11 @@ "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" }, + "void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==" + }, "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/package.json b/package.json index 3496c768..8b0db3b0 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,13 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", + "axios": "^1.5.0", + "i18next": "^23.4.6", "iconsax-react": "^0.0.8", "prop-types": "^15.8.1", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-i18next": "^13.2.2", "react-masonry-css": "^1.0.16", "react-scripts": "5.0.0", "react-simple-typewriter": "^5.0.1", From 6d8547929a9f403a891917780ebb436c5674ea2d Mon Sep 17 00:00:00 2001 From: Negar Date: Tue, 5 Sep 2023 10:48:40 +0100 Subject: [PATCH 6/9] added function to translate presetText --- .../MasonryLayout/MasonryBox/MasonryBox.jsx | 85 +++++++++++++++---- 1 file changed, 67 insertions(+), 18 deletions(-) diff --git a/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx b/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx index 23f3db3a..8a0ea70f 100644 --- a/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx +++ b/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx @@ -1,19 +1,30 @@ -import React, { useState } from 'react'; -import styles from './MasonryBox.module.css'; -import { PropTypes } from 'prop-types'; +import React, { useState, useEffect } from "react"; +import styles from "./MasonryBox.module.css"; +import { PropTypes } from "prop-types"; +import i18next from "i18next"; +import { useTranslation } from "react-i18next"; +import languages from "../../../translation/languages.json"; +import useIPInfo from "../../../hooks/useIPInfo"; - -const MasonryBox = ({ wallSrc, userProf, userName, userJob, githubUrl, userText }) => { +const MasonryBox = ({ + wallSrc, + userProf, + userName, + userJob, + githubUrl, + userText, +}) => { const handleUserProfClick = () => { if (githubUrl) { - window.open(githubUrl, '_blank'); + window.open(githubUrl, "_blank"); } }; const [isEnlarged, setIsEnlarged] = useState(false); const [isUserTextVisible, setIsUserTextVisible] = useState(true); const [isTextVisible, setIsTextVisible] = useState(false); - + const { ipInfo, loading, error } = useIPInfo(); + const { t } = useTranslation(); const toggleEnlarged = () => { setIsEnlarged(!isEnlarged); setIsUserTextVisible(!isUserTextVisible); @@ -22,38 +33,76 @@ const MasonryBox = ({ wallSrc, userProf, userName, userJob, githubUrl, userText const toggleText = () => { setIsTextVisible(!isTextVisible); }; - + console.log(ipInfo); const presetText = ( - Before I Die
+ {t("BEFORE-I-DIE")}...
💭 🌎 🎨 🎓 ❤️ 🌲 🏠 ✈️ 🏆
💵 🤝 🌃 📚 🎸 🚴 🌟 🏰 🚀
); + useEffect(() => { + // Change the language when the component mounts based on ipInfo + i18next.changeLanguage(languages[ipInfo?.country_code]); + }, [ipInfo]); // Empty dependency array to run this effect only once when the component mounts return (
- + {isEnlarged && ( -
- -
{presetText} {userText}
{/* Add preset text here */} +
+ +
+ {presetText} {userText} +
{" "} + {/* Add preset text here */} {isTextVisible && (
-

{presetText} {userText}

{/* Add preset text here */} +

+ {presetText} {userText} +

{" "} + {/* Add preset text here */}
)}
)} {isUserTextVisible && (
-
+
-
+

{userName}

{/* Add preset text here */}

{userJob}

From d8a1cee09f82344eb56df7a00bc075a6166de3de Mon Sep 17 00:00:00 2001 From: Negar Date: Tue, 5 Sep 2023 10:49:23 +0100 Subject: [PATCH 7/9] imported config file --- src/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index 53db037e..045a30e9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,8 @@ -import React from 'react'; -import { createRoot } from 'react-dom/client'; -import App from './App'; -import "./index.css" - +import React from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App"; +import "./index.css"; +import "./i18nextConfig.js"; const container = document.getElementById("root"); const root = createRoot(container); -root.render(); \ No newline at end of file +root.render(); From c62cdbb6cef3d9a1e0be06d0cfb4766d1148322b Mon Sep 17 00:00:00 2001 From: Negar Date: Tue, 5 Sep 2023 10:49:46 +0100 Subject: [PATCH 8/9] removed console.log --- src/hooks/useIPInfo.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/useIPInfo.js b/src/hooks/useIPInfo.js index 1832fcba..6ba1e510 100644 --- a/src/hooks/useIPInfo.js +++ b/src/hooks/useIPInfo.js @@ -11,7 +11,6 @@ function useIPInfo() { axios .get("https://ipapi.co/json/") .then((response) => { - console.log(response); setIpInfo(response.data); setLoading(false); }) From 202f56243105454f9ab5eb00cf07d551e6956f02 Mon Sep 17 00:00:00 2001 From: XanderRubio Date: Tue, 5 Sep 2023 20:26:28 +0200 Subject: [PATCH 9/9] Adding a test --- testing.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 testing.md diff --git a/testing.md b/testing.md new file mode 100644 index 00000000..0ebce85b --- /dev/null +++ b/testing.md @@ -0,0 +1 @@ +Testing my ability to add to this branch