Skip to content

Implement Internationalization (en and fr) for Multi-language Support #485

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Aspireve wants to merge 30 commits into from
Closed

Implement Internationalization (en and fr) for Multi-language Support #485

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
f1c61e6
[FEAT] Added Language based Cookie
steveCs50 Dec 3, 2024
7560e16
[FEAT] Partially COmpleted
Aspireve Dec 4, 2024
62ccfdb
[CHORE] Added more locales
Aspireve Dec 5, 2024
6dae8b1
[FEAT] Adding more
steveCs50 Dec 5, 2024
ec5e1f0
Merge branch 'main' of https://github.com/gitroomhq/postiz-app
steveCs50 Dec 5, 2024
c67daa9
[FEAt] Added a ton of languages
steveCs50 Dec 9, 2024
20498ec
Merge branch 'main' of https://github.com/Aspireve/postiz-app
Aspireve Dec 9, 2024
778d307
Merge pull request #1 from gitroomhq/main
Aspireve Dec 9, 2024
2b0a5dd
Merge branch 'main' into merge-conflicts
Aspireve Dec 9, 2024
bb3e449
Merge pull request #2 from Aspireve/merge-conflicts
Aspireve Dec 9, 2024
6f25a0a
[FEAT] COmpleted adding internationalisation
steveCs50 Dec 10, 2024
ca3e01c
[BUG] Cleared the typescript error and removed the unused error based…
steveCs50 Dec 10, 2024
ecd5c9a
[IMPROVEMENT] Solved more of the coderabbit errors
steveCs50 Dec 10, 2024
3418b9a
[IMPROVEMENT] Solved more of the coderabbit errors
steveCs50 Dec 10, 2024
b2300c7
Update .eslintrc.json
Aspireve Dec 18, 2024
4194541
Update .eslintrc.json
Aspireve Dec 20, 2024
71cd197
Update users.controller.ts
Aspireve Dec 20, 2024
9e09bd1
Update faq.component.tsx
Aspireve Dec 20, 2024
318a58e
Update editor.tsx
Aspireve Dec 20, 2024
63fa13a
Update launches.component.tsx
Aspireve Dec 20, 2024
a816afb
Update settings.component.tsx
Aspireve Dec 20, 2024
6b4b98d
Update layout.tsx
Aspireve Dec 20, 2024
85917a1
Update title.tsx
Aspireve Dec 20, 2024
f284eb1
Update en.json
Aspireve Dec 20, 2024
d8e4b76
Update fr.json
Aspireve Dec 20, 2024
a8ec4b0
Merge branch 'main' of https://github.com/gitroomhq/postiz-app
Aspireve Dec 28, 2024
d84767e
merge: all changes from Aspireve-> main to postiz->main
Aspireve Dec 28, 2024
feb18b4
chore: modify the package-lock.json to include the next-intl package
Aspireve Dec 28, 2024
da1ff45
chore: solving some more problems
Aspireve Dec 28, 2024
26c238c
chore: solving eslint config error
Aspireve Dec 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions apps/backend/src/api/routes/users.controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,4 +203,19 @@

response.status(200).send();
}

@Post('/changeLanguage')
changeLanguage(@Body('language') language: string, @Res({ passthrough: true }) response: Response) {
const maxAge = 1000 * 60 * 60 * 24 * 365 * 10; // 10 years in milliseconds
Copy link

@coderabbitai coderabbitai bot Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider reducing cookie expiration time.

A 10-year cookie expiration time is excessive. Consider using a shorter duration (e.g., 1 year) to align with security best practices.

-    const maxAge = 1000 * 60 * 60 * 24 * 365 * 10; // 10 years in milliseconds
+    const maxAge = 1000 * 60 * 60 * 24 * 365; // 1 year in milliseconds
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const maxAge = 1000 * 60 * 60 * 24 * 365 * 10; // 10 years in milliseconds
const maxAge = 1000 * 60 * 60 * 24 * 365; // 1 year in milliseconds

response.cookie('NEXT_LOCALE', language, {
domain: getCookieUrlFromDomain(process.env.FRONTEND_URL!),
secure: true,
httpOnly: true,
maxAge: maxAge,
expires: new Date(Date.now() + maxAge),
sameSite: 'none',
});

response.status(200).send();
}
Copy link

@coderabbitai coderabbitai bot Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add input validation and error handling for language selection.

The language parameter should be validated to ensure it matches supported locales. Additionally, error handling should be implemented.

+ import { IsIn } from 'class-validator';
+ 
+ class ChangeLanguageDto {
+   @IsIn(['en', 'fr'])
+   language: string;
+ }

  @Post('/changeLanguage')
- changeLanguage(@Body('language') language: string, @Res({ passthrough: true }) response: Response) {
+ async changeLanguage(@Body() { language }: ChangeLanguageDto, @Res({ passthrough: true }) response: Response) {
    const maxAge = 1000 * 60 * 60 * 24 * 365 * 10; // 10 years in milliseconds
    
+   try {
      response.cookie('NEXT_LOCALE', language, {
        domain: getCookieUrlFromDomain(process.env.FRONTEND_URL!),
        secure: true,
        httpOnly: true,
        maxAge: maxAge,
        expires: new Date(Date.now() + maxAge),
        sameSite: 'none',
      });
      
      response.status(200).send();
+   } catch (error) {
+     throw new HttpException('Failed to set language preference', 500);
+   }
  }

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools
🪛 GitHub Check: ESLint

[warning] 211-211: Disallow non-null assertions using the ! postfix operator
Forbidden non-null assertion.

}
4 changes: 4 additions & 0 deletions apps/frontend/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require('@nx/next');
const createNextIntlPlugin = require('next-intl/plugin');

const withNextIntl = createNextIntlPlugin();

/**
* @type {import('@nx/next/plugins/with-nx').WithNxOptions}
Expand Down Expand Up @@ -51,6 +54,7 @@ const nextConfig = {
const plugins = [
// Add more Next.js plugins to this list if needed.
withNx,
withNextIntl,
];

module.exports = composePlugins(...plugins)(nextConfig);
4 changes: 3 additions & 1 deletion apps/frontend/src/app/(site)/err/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import {Metadata} from "next";
import { useTranslations } from "next-intl";

export const metadata: Metadata = {
title: 'Error',
description: '',
}

export default async function Page() {
const t= useTranslations('Error')
return (
<div>We are experiencing some difficulty, try to refresh the page</div>
<div>{t("We are experiencing some difficulty, try to refresh the page")}</div>
Copy link

@coderabbitai coderabbitai bot Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use translation keys instead of raw text

When using useTranslations, it's best practice to use translation keys rather than raw text to enable proper localization.

Apply this diff to use a translation key:

   const t= useTranslations('Error')
-      return (
-          <div>{t("We are experiencing some difficulty, try to refresh the page")}</div>
-      )
+      return (
+          <div>{t('errorMessage')}</div>
+      )

Then, in your translation files, define the key errorMessage with the corresponding message.

Committable suggestion skipped: line range outside the PR's diff.

)
}
56 changes: 30 additions & 26 deletions apps/frontend/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
import { Fragment } from 'react';
import { PHProvider } from '@gitroom/react/helpers/posthog';
import UtmSaver from '@gitroom/helpers/utils/utm.saver';
import { NextIntlClientProvider } from 'next-intl';

Check warning

Code scanning / ESLint

Disallow unused variables Warning

'NextIntlClientProvider' is defined but never used.
import { getLocale, getMessages } from 'next-intl/server';
import { ToltScript } from '@gitroom/frontend/components/layout/tolt.script';

const chakra = Chakra_Petch({ weight: '400', subsets: ['latin'] });
Expand All @@ -21,9 +23,10 @@
const Plausible = !!process.env.STRIPE_PUBLISHABLE_KEY
? PlausibleProvider
: Fragment;

const locale = await getLocale();
const messages = await getMessages();

Check warning

Code scanning / ESLint

Disallow unused variables Warning

'messages' is assigned a value but never used.
return (
<html className={interClass}>
<html className={interClass} lang={locale}>
<head>
<link
rel="icon"
Expand All @@ -32,32 +35,33 @@
/>
</head>
<body className={clsx(chakra.className, 'text-primary dark')}>
<VariableContextComponent
storageProvider={
process.env.STORAGE_PROVIDER! as 'local' | 'cloudflare'
}
backendUrl={process.env.NEXT_PUBLIC_BACKEND_URL!}
plontoKey={process.env.NEXT_PUBLIC_POLOTNO!}
billingEnabled={!!process.env.STRIPE_PUBLISHABLE_KEY}
discordUrl={process.env.NEXT_PUBLIC_DISCORD_SUPPORT!}
frontEndUrl={process.env.FRONTEND_URL!}
isGeneral={!!process.env.IS_GENERAL}
uploadDirectory={process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY!}
tolt={process.env.NEXT_PUBLIC_TOLT!}
>
<ToltScript />
<Plausible
domain={!!process.env.IS_GENERAL ? 'postiz.com' : 'gitroom.com'}
<NextIntlClientProvider messages={messages}>
{/* @ts-ignore */}
Copy link

@coderabbitai coderabbitai bot Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove or document the @ts-ignore comment

The @ts-ignore comment suppresses TypeScript checks without explanation. Either:

  1. Fix the underlying type issue
  2. Use @ts-expect-error with a comment explaining why it's needed
  3. If the ignore is due to a known issue, add a link to the relevant issue

<VariableContextComponent
storageProvider={
process.env.STORAGE_PROVIDER! as 'local' | 'cloudflare'
}
backendUrl={process.env.NEXT_PUBLIC_BACKEND_URL!}
plontoKey={process.env.NEXT_PUBLIC_POLOTNO!}
billingEnabled={!!process.env.STRIPE_PUBLISHABLE_KEY}
discordUrl={process.env.NEXT_PUBLIC_DISCORD_SUPPORT!}
frontEndUrl={process.env.FRONTEND_URL!}
isGeneral={!!process.env.IS_GENERAL}
uploadDirectory={process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY!}
Copy link

@coderabbitai coderabbitai bot Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Avoid using non-null assertions (!)

Using the non-null assertion operator (!) can mask potential undefined values and may lead to runtime errors. It's recommended to handle possible undefined values explicitly or provide default values.

Consider modifying the code to safely handle environment variables:

-             storageProvider={
-               process.env.STORAGE_PROVIDER! as 'local' | 'cloudflare'
-             }
+             storageProvider={
+               (process.env.STORAGE_PROVIDER as 'local' | 'cloudflare') || 'local'
+             }
-             backendUrl={process.env.NEXT_PUBLIC_BACKEND_URL!}
+             backendUrl={process.env.NEXT_PUBLIC_BACKEND_URL || 'https://default-backend-url.com'}
-             plontoKey={process.env.NEXT_PUBLIC_POLOTNO!}
+             plontoKey={process.env.NEXT_PUBLIC_POLOTNO || 'defaultPlontoKey'}
-             discordUrl={process.env.NEXT_PUBLIC_DISCORD_SUPPORT!}
+             discordUrl={process.env.NEXT_PUBLIC_DISCORD_SUPPORT || 'https://default-discord-url.com'}
-             frontEndUrl={process.env.FRONTEND_URL!}
+             frontEndUrl={process.env.FRONTEND_URL || 'https://default-frontend-url.com'}
-             uploadDirectory={process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY!}
+             uploadDirectory={
+               process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY || '/default/upload/directory'
+             }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
process.env.STORAGE_PROVIDER! as 'local' | 'cloudflare'
}
backendUrl={process.env.NEXT_PUBLIC_BACKEND_URL!}
plontoKey={process.env.NEXT_PUBLIC_POLOTNO!}
billingEnabled={!!process.env.STRIPE_PUBLISHABLE_KEY}
discordUrl={process.env.NEXT_PUBLIC_DISCORD_SUPPORT!}
frontEndUrl={process.env.FRONTEND_URL!}
isGeneral={!!process.env.IS_GENERAL}
uploadDirectory={process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY!}
storageProvider={
(process.env.STORAGE_PROVIDER as 'local' | 'cloudflare') || 'local'
}
backendUrl={process.env.NEXT_PUBLIC_BACKEND_URL || 'https://default-backend-url.com'}
plontoKey={process.env.NEXT_PUBLIC_POLOTNO || 'defaultPlontoKey'}
billingEnabled={!!process.env.STRIPE_PUBLISHABLE_KEY}
discordUrl={process.env.NEXT_PUBLIC_DISCORD_SUPPORT || 'https://default-discord-url.com'}
frontEndUrl={process.env.FRONTEND_URL || 'https://default-frontend-url.com'}
isGeneral={!!process.env.IS_GENERAL}
uploadDirectory={
process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY || '/default/upload/directory'
}
🧰 Tools
🪛 GitHub Check: ESLint

[warning] 41-41: Disallow non-null assertions using the ! postfix operator
Forbidden non-null assertion.

[warning] 43-43: Disallow non-null assertions using the ! postfix operator
Forbidden non-null assertion.

[warning] 44-44: Disallow non-null assertions using the ! postfix operator
Forbidden non-null assertion.

[warning] 46-46: Disallow non-null assertions using the ! postfix operator
Forbidden non-null assertion.

[warning] 47-47: Disallow non-null assertions using the ! postfix operator
Forbidden non-null assertion.

[warning] 49-49: Disallow non-null assertions using the ! postfix operator
Forbidden non-null assertion.

>
<PHProvider
phkey={process.env.NEXT_PUBLIC_POSTHOG_KEY}
host={process.env.NEXT_PUBLIC_POSTHOG_HOST}
<Plausible
domain={!!process.env.IS_GENERAL ? 'postiz.com' : 'gitroom.com'}
>
<UtmSaver />
<LayoutContext>{children}</LayoutContext>
</PHProvider>
</Plausible>
</VariableContextComponent>
<PHProvider
phkey={process.env.NEXT_PUBLIC_POSTHOG_KEY}
host={process.env.NEXT_PUBLIC_POSTHOG_HOST}
>
<UtmSaver />
<LayoutContext>{children}</LayoutContext>
</PHProvider>
</Plausible>
</VariableContextComponent>
</NextIntlClientProvider>
</body>
</html>
);
Expand Down
23 changes: 12 additions & 11 deletions apps/frontend/src/components/billing/faq.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,29 @@ import { FC, useCallback, useState } from 'react';
import clsx from 'clsx';
import interClass from '@gitroom/react/helpers/inter.font';
import { useVariables } from '@gitroom/react/helpers/variable.context';
import { useTranslations } from 'next-intl';

const useFaqList = () => {
const {isGeneral} = useVariables();
const t = useTranslations('Billing')
return [
{
title: `Can I trust ${isGeneral ? 'Postiz' : 'Gitroom'}?`,
description: `${isGeneral ? 'Postiz' : 'Gitroom'} is proudly open-source! We believe in an ethical and transparent culture, meaning that ${isGeneral ? 'Postiz' : 'Gitroom'} will live forever. You can check out the entire code or use it for personal projects. To view the open-source repository, <a href="https://github.com/gitroomhq/postiz-app" target="_blank" style="text-decoration: underline;">click here</a>.`,
title: `${t('Can I trust')} ${isGeneral ? 'Postiz' : 'Gitroom'}?`,
description: `${isGeneral ? 'Postiz' : 'Gitroom'} ${t("is proudly open-source! We believe in an ethical and transparent culture, meaning that")} ${isGeneral ? 'Postiz' : 'Gitroom'} ${t("will live forever")}. ${t("You can check out the entire code or use it for personal projects")}. ${t("To view the open-source repository,")} <a href="https://github.com/gitroomhq/postiz-app" target="_blank" style="text-decoration: underline;">${t("click here")}</a>.`,
Copy link

@coderabbitai coderabbitai bot Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider restructuring translations to avoid fragmentation

The current string interpolation approach with multiple ${t()} calls makes translations harder to maintain and could lead to grammatical issues in different languages. Consider using translation keys with placeholders.

Example approach:

- title: `${t('Can I trust')} ${isGeneral ? 'Postiz' : 'Gitroom'}?`,
- description: `${isGeneral ? 'Postiz' : 'Gitroom'} ${t("is proudly open-source! We believe in an ethical and transparent culture, meaning that")} ${isGeneral ? 'Postiz' : 'Gitroom'} ${t("will live forever")}...`
+ title: t('trust_title', { product: isGeneral ? 'Postiz' : 'Gitroom' }),
+ description: t('trust_description', { product: isGeneral ? 'Postiz' : 'Gitroom' })

Add to your translation files:

{
  "trust_title": "Can I trust {product}?",
  "trust_description": "{product} is proudly open-source! We believe in an ethical and transparent culture, meaning that {product} will live forever..."
}

},
{
title: 'What are channels?',
title: t('What are channels?'),
description: `${
isGeneral ? 'Postiz' : 'Gitroom'
} allows you to schedule your posts between different channels.
A channel is a publishing platform where you can schedule your posts.
For example, you can schedule your posts on X, Facebook, Instagram, TikTok, YouTube, Reddit, Linkedin, Dribbble, Threads and Pinterest.`,
} ${t("allows you to schedule your posts between different channels")}. ${t("A channel is a publishing platform where you can schedule your posts")}. ${t("For example, you can schedule your posts on X, Facebook, Instagram, TikTok, YouTube, Reddit, Linkedin, Dribbble, Threads and Pinterest")}.`,
},
{
title: 'What are team members?',
description: `If you have a team with multiple members, you can invite them to your workspace to collaborate on your posts and add their personal channels`,
title: t('What are team members?'),
description: t(`If you have a team with multiple members, you can invite them to your workspace to collaborate on your posts and add their personal channels`),
},
{
title: 'What is AI auto-complete?',
description: `We automate ChatGPT to help you write your social posts and articles`,
title: t('What is AI auto-complete?'),
description: t(`We automate ChatGPT to help you write your social posts and articles`),
},
];
}
Expand Down Expand Up @@ -104,10 +104,11 @@ export const FAQSection: FC<{ title: string; description: string }> = (

export const FAQComponent: FC = () => {
const list = useFaqList();
const t = useTranslations('Billing')
return (
<div>
<h3 className="text-[24px] text-center mt-[81px] mb-[40px]">
Frequently Asked Questions
{t('FrequentlyAskedQuestions')}
</h3>
<div className="gap-[24px] flex-col flex select-none">
{list.map((item, index) => (
Expand Down
16 changes: 9 additions & 7 deletions apps/frontend/src/components/billing/lifetime.deal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { useSWRConfig } from 'swr';
import { useToaster } from '@gitroom/react/toaster/toaster';
import { useRouter } from 'next/navigation';
import { useFireEvents } from '@gitroom/helpers/utils/use.fire.events';
import { useTranslations } from 'next-intl';

export const LifetimeDeal = () => {
const fetch = useFetch();
Expand All @@ -19,6 +20,7 @@ export const LifetimeDeal = () => {
const { mutate } = useSWRConfig();
const router = useRouter();
const fireEvents = useFireEvents();
const t= useTranslations("Lifetime")

const claim = useCallback(async () => {
const { success } = await (
Expand All @@ -33,10 +35,10 @@ export const LifetimeDeal = () => {

if (success) {
mutate('/user/self');
toast.show('Successfully claimed the code');
toast.show(t('Successfully claimed the code'));
fireEvents('lifetime_claimed');
} else {
toast.show('Code already claimed or invalid code', 'warning');
toast.show(t('Code already claimed or invalid code'), 'warning');
}

setCode('');
Expand Down Expand Up @@ -115,7 +117,7 @@ export const LifetimeDeal = () => {
<div className="flex gap-[30px]">
<div className="border border-customColor6 bg-sixth p-[24px] flex flex-col gap-[20px] flex-1 rounded-[4px]">
<div className="text-[30px]">
Current Package: {user?.totalChannels > 8 ? 'EXTRA' : user?.tier?.current}
{t("Current Package")}: {user?.totalChannels > 8 ? 'EXTRA' : user?.tier?.current}
</div>

<div className="flex flex-col gap-[10px] justify-center text-[16px] text-customColor18">
Expand Down Expand Up @@ -143,7 +145,7 @@ export const LifetimeDeal = () => {

<div className="border border-customColor6 bg-sixth p-[24px] flex flex-col gap-[20px] flex-1 rounded-[4px]">
<div className="text-[30px]">
Next Package:{' '}
{t("Next Package")}:{' '}
{user?.tier?.current === 'PRO' ? 'EXTRA' : !user?.tier?.current ? 'FREE' : user?.tier?.current === 'STANDARD' ? 'PRO' : 'STANDARD'}
</div>

Expand Down Expand Up @@ -174,8 +176,8 @@ export const LifetimeDeal = () => {
<div className="mt-[20px] flex items-center gap-[10px]">
<div className="flex-1">
<Input
label="Code"
placeholder="Enter your code"
label={t("Code")}
placeholder={t("Enter your code")}
disableForm={true}
name="code"
value={code}
Expand All @@ -184,7 +186,7 @@ export const LifetimeDeal = () => {
</div>
<div>
<Button disabled={code.length < 4} onClick={claim}>
Claim
{t("Claim")}
</Button>
</div>
</div>
Expand Down
Loading
Loading