From 211fd4fa6f1917b1a19729c728ef27a123ffe502 Mon Sep 17 00:00:00 2001 From: sina_sajjadi Date: Sun, 13 Oct 2024 12:07:19 +0330 Subject: [PATCH] user get back to the page after log in or sign up --- next-i18next.config.js | 10 + next.config.js | 9 +- package-lock.json | 6 +- package.json | 2 + public/locales/en/common.json | 6 + .../(Header)/LangDropdown.tsx | 258 +++++++----------- src/app/blog/SectionMagazine5.tsx | 9 +- src/app/login/page.tsx | 2 +- src/app/signup/otp-code/page.tsx | 2 +- src/app/signup/page.tsx | 2 +- yarn.lock | 4 +- 11 files changed, 132 insertions(+), 178 deletions(-) create mode 100644 next-i18next.config.js create mode 100644 public/locales/en/common.json diff --git a/next-i18next.config.js b/next-i18next.config.js new file mode 100644 index 0000000..aa8f4d6 --- /dev/null +++ b/next-i18next.config.js @@ -0,0 +1,10 @@ +const path = require("path"); + +module.exports = { + i18n: { + locales: ["en", "de", "es", "ar", "he", "zh", "fa"], + defaultLocale: "en", + localeDetection: false, + }, + localePath: path.resolve("./public/locales"), +}; \ No newline at end of file diff --git a/next.config.js b/next.config.js index b9f4bb2..35d3ca8 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,6 @@ /** @type {import('next').NextConfig} */ +const { i18n } = require("./next-i18next.config"); + module.exports = { @@ -13,11 +15,8 @@ module.exports = { eslint: { ignoreDuringBuilds: true, }, - i18n: { - locales: ['en'], // List all the languages you want to support - defaultLocale: 'en', // The default language of the website - localeDetection: true, // Enable or disable automatic locale detection based on browser settings - }, + i18n, + images: { remotePatterns: [ { diff --git a/package-lock.json b/package-lock.json index 3cdfe06..04c4363 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "framer-motion": "^10.12.16", "google-libphonenumber": "^3.2.38", "google-map-react": "^2.2.1", + "i18next": "^23.15.1", "libphonenumber-js": "^1.11.9", "lodash": "^4.17.21", "next": "^13.4.3", @@ -34,6 +35,7 @@ "react-datepicker": "^4.11.0", "react-dom": "^18.2.0", "react-hooks-global-state": "^2.1.0", + "react-i18next": "^15.0.2", "react-icons": "^5.3.0", "react-swipeable": "^7.0.0", "react-toastify": "^10.0.5", @@ -2727,7 +2729,6 @@ "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==", - "peer": true, "dependencies": { "void-elements": "3.1.0" } @@ -2765,7 +2766,6 @@ "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" } ], - "peer": true, "dependencies": { "@babel/runtime": "^7.23.2" } @@ -4338,7 +4338,6 @@ "version": "15.0.2", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.0.2.tgz", "integrity": "sha512-z0W3/RES9Idv3MmJUcf0mDNeeMOUXe+xoL0kPfQPbDoZHmni/XsIoq5zgT2MCFUiau283GuBUK578uD/mkAbLQ==", - "peer": true, "dependencies": { "@babel/runtime": "^7.25.0", "html-parse-stringify": "^3.0.1" @@ -5457,7 +5456,6 @@ "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==", - "peer": true, "engines": { "node": ">=0.10.0" } diff --git a/package.json b/package.json index a4439fb..9396ca2 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "framer-motion": "^10.12.16", "google-libphonenumber": "^3.2.38", "google-map-react": "^2.2.1", + "i18next": "^23.15.1", "libphonenumber-js": "^1.11.9", "lodash": "^4.17.21", "next": "^13.4.3", @@ -41,6 +42,7 @@ "react-datepicker": "^4.11.0", "react-dom": "^18.2.0", "react-hooks-global-state": "^2.1.0", + "react-i18next": "^15.0.2", "react-icons": "^5.3.0", "react-swipeable": "^7.0.0", "react-toastify": "^10.0.5", diff --git a/public/locales/en/common.json b/public/locales/en/common.json new file mode 100644 index 0000000..0c3dfe8 --- /dev/null +++ b/public/locales/en/common.json @@ -0,0 +1,6 @@ +{ + "hello": "Hello", + "welcome": "Welcome to our website", + "language": "Language" + } + \ No newline at end of file diff --git a/src/app/(client-components)/(Header)/LangDropdown.tsx b/src/app/(client-components)/(Header)/LangDropdown.tsx index 63c71ce..8ec4695 100644 --- a/src/app/(client-components)/(Header)/LangDropdown.tsx +++ b/src/app/(client-components)/(Header)/LangDropdown.tsx @@ -1,52 +1,15 @@ +import React, { Fragment, useState } from "react"; import { Popover, Tab, Transition } from "@headlessui/react"; -import { - BanknotesIcon, - GlobeAltIcon, - ChevronDownIcon, -} from "@heroicons/react/24/outline"; -import { FC, Fragment } from "react"; -import { headerCurrency } from "./CurrencyDropdown"; +import { ChevronDownIcon } from "@heroicons/react/24/outline"; import { MdOutlineLanguage } from "react-icons/md"; +import { useTranslation } from "next-i18next"; +import { useRouter } from "next/navigation"; // Importing from next/navigation - -export const headerLanguage = [ - { - id: "English", - name: "English", - description: "United State", - href: "##", - active: true, - }, - { - id: "Vietnamese", - name: "Vietnamese", - description: "Vietnamese", - href: "##", - }, - { - id: "Francais", - name: "Francais", - description: "Belgique", - href: "##", - }, - { - id: "Francais", - name: "Francais", - description: "Canada", - href: "##", - }, - { - id: "Francais", - name: "Francais", - description: "Belgique", - href: "##", - }, - { - id: "Francais", - name: "Francais", - description: "Canada", - href: "##", - }, +// Language options +const languageOptions = [ + { id: "en", name: "English", description: "United States", icon: }, + { id: "vi", name: "Vietnamese", description: "Vietnam", icon: }, + { id: "fr", name: "French", description: "France", icon: }, ]; interface LangDropdownProps { @@ -54,133 +17,102 @@ interface LangDropdownProps { className?: string; } -function classNames(...classes: any) { +function classNames(...classes: string[]) { return classes.filter(Boolean).join(" "); } -const LangDropdown: FC = ({ +const LangDropdown: React.FC = ({ panelClassName = "top-full right-0 max-w-sm w-96", className = "hidden md:flex", }) => { - const renderLang = (close: () => void) => { - return ( - - ); - }; + const { t } = useTranslation("common"); + const router = useRouter(); + const [selectedItem, setSelectedItem] = useState(languageOptions[0]); - const renderCurr = (close: () => void) => { - return ( - - ); + // Handle language selection and route change + const handleItemClick = (option: any) => { + setSelectedItem(option); + router.push(`/${option.id}`); // Change locale using next/navigation's router }; return ( - <> - - {({ open, close }) => ( - <> - - - {/* / - */} - - - -
- - - {["Language", "Currency"].map((category) => ( - - classNames( - "w-full rounded-full py-2 text-sm font-medium leading-5 text-gray-700", - "focus:outline-none focus:ring-0", - selected - ? "bg-white shadow" - : "text-gray-700 dark:text-slate-300 hover:bg-white/70 dark:hover:bg-slate-900/40" - ) - } - > - {category} - - ))} - - - - {renderLang(close)} - - - {renderCurr(close)} - - - -
- - - - )} - - + + {({ open, close }) => ( + <> + + + + + + +
+ + + + classNames( + "w-full rounded-full py-2 text-sm font-medium leading-5 text-gray-700", + "focus:outline-none focus:ring-0", + selected + ? "bg-white" + : "text-gray-700 dark:text-slate-300 hover:bg-white/70 dark:hover:bg-slate-900/40" + ) + } + > + Language + + + + + +
+ {languageOptions.map((item) => ( + + ))} +
+ + + +
+ + + + )} + ); }; + export default LangDropdown; diff --git a/src/app/blog/SectionMagazine5.tsx b/src/app/blog/SectionMagazine5.tsx index 2b82108..791f04c 100644 --- a/src/app/blog/SectionMagazine5.tsx +++ b/src/app/blog/SectionMagazine5.tsx @@ -5,9 +5,11 @@ import { PostDataType } from "@/data/types"; import Card12 from "./Card12"; import Card13 from "./Card13"; import axiosInstance from "@/components/api/axios"; - +import { useTranslation } from "next-i18next"; const SectionMagazine5 = () => { + const { t } = useTranslation("common"); + const [posts , setPosts] = useState([]) useEffect(()=>{ @@ -17,9 +19,14 @@ const SectionMagazine5 = () => { }) } , []) + + console.log(t("welcome")); + return (
+ +

{t("welcome")}

{posts[0] && }
{posts diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index b28c86b..743f5c5 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -100,7 +100,7 @@ const PageLogin: FC = () => { if (response.status === 201) { toast.success("Login successful!"); setUser(response.data); - router.push("/"); // Redirect to home or any other page after successful login + router.back(); // Redirect to home or any other page after successful login } else { toast.error("Login failed, please check your credentials.", { position: "top-right", diff --git a/src/app/signup/otp-code/page.tsx b/src/app/signup/otp-code/page.tsx index 4e1bcca..43acf9c 100644 --- a/src/app/signup/otp-code/page.tsx +++ b/src/app/signup/otp-code/page.tsx @@ -15,7 +15,7 @@ const PageSignUp: FC = () => { useEffect(() => { if (Object.keys(user).length) { - router.replace("/"); + router.back(); } }, [user, router]); diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx index 64ec649..6b42515 100644 --- a/src/app/signup/page.tsx +++ b/src/app/signup/page.tsx @@ -75,7 +75,7 @@ const PageSignUp: FC = () => { `/api/account/verfication/?range_phone=${countryCode}&phone_number=${phoneNumber}` ); form.verification_methodes = response.data.verification_method; - router.push("/signup/methodes"); + router.replace("/signup/methodes"); } catch (error: any) { console.error("Error fetching data:", error); setFailed(error.message || "An error occurred."); diff --git a/yarn.lock b/yarn.lock index 151a701..d1a2e70 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1551,7 +1551,7 @@ i18next-fs-backend@^2.3.2: resolved "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.3.2.tgz" integrity sha512-LIwUlkqDZnUI8lnUxBnEj8K/FrHQTT/Sc+1rvDm9E8YvvY5YxzoEAASNx+W5M9DfD5s77lI5vSAFWeTp26B/3Q== -"i18next@>= 23.2.3", "i18next@>= 23.7.13": +i18next@^23.15.1, "i18next@>= 23.2.3", "i18next@>= 23.7.13": version "23.15.1" resolved "https://registry.npmjs.org/i18next/-/i18next-23.15.1.tgz" integrity sha512-wB4abZ3uK7EWodYisHl/asf8UYEhrI/vj/8aoSsrj/ZDxj4/UXPOa1KvFt1Fq5hkUHquNqwFlDprmjZ8iySgYA== @@ -2443,7 +2443,7 @@ react-hooks-global-state@^2.1.0: dependencies: zustand "4.0.0" -"react-i18next@>= 13.5.0": +react-i18next@^15.0.2, "react-i18next@>= 13.5.0": version "15.0.2" resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-15.0.2.tgz" integrity sha512-z0W3/RES9Idv3MmJUcf0mDNeeMOUXe+xoL0kPfQPbDoZHmni/XsIoq5zgT2MCFUiau283GuBUK578uD/mkAbLQ==