Support for language translations and date formats #208

Rosso2004 · 2025-03-20T21:39:00Z

Description
This PR adds multilingual support using i18n. Now, new languages can be added simply by creating a new folder inside /public/locales, named with the language code (e.g., en, es, de, it, etc.).
For example, to add German, just duplicate the en folder (or any other existing language folder) and translate the JSON files inside it. No code modifications are required to enable a new language.

Main Changes
Added i18n support with JSON-based language management.
Translation structure located in /public/locales/{lang_code}/.

New Environment Variables (.env)

#********* DATE FORMAT *********  
DATE_FORMAT_VARIANT_1="dd-MM-yyyy"  
DATE_FORMAT_VARIANT_2="dd MMM yyyy"  
DATE_FORMAT_VARIANT_3="dd MMM"  
DATE_FORMAT_VARIANT_4="dd MMM"  
DATE_FORMAT_VARIANT_5="dd MMM, yyyy"

Preview

* add edit expense * add edit expense changes * fix build * fix edit not working on exact match * set share to zero * fix deleting user on edit not working * fix auto load to expense page * make split share nice

* Add authentik provider * Add authentik provider * Add authentik provider * Add authentik provider

* Add nextauth_internal_url * Add NEXTAUTH_URL_INTERNAL option --------- Co-authored-by: KM Koushik <koushikmohan1996@gmail.com>

)

* feat: add invite-only flag * feat: wrap adapter to enforce invite-only mode

this updates the invite email sending function to prevent sending an invite email if the environment flag is not set. this matches the behavior with the frontend and prevents malicious actors from bypassing the logic fixes oss-apps#174

Gestione della lingua nella pagina "Account" e traduzione della pagina "Account"

.dockerignore

.gitignore

docker/dev/compose.yml

prisma/migrations/migration_lock.toml

prisma/schema.prisma

src/components/Account/ChangeLanguage.tsx

krokosik · 2025-04-11T07:58:53Z

src/components/Account/ChangeLanguage.tsx

+
+    // Funzione per ottenere il nome della lingua dal file di traduzione
+    const getLanguageName = (languageCode: string): string => {
+        return t(`ui/change_language_details/languages/${languageCode}`) || languageCode;


I'm not that familiar with i18next, but did you look into a type safe implementation?
https://www.i18next.com/overview/typescript

No I have not tried a type-safe implementation, if you could do it that would be better, I have never experimented with it and I would not know how to move

krokosik · 2025-04-27T08:08:15Z

@Rosso2004 The PR is awesome and I would love to have it in Split Pro, but I would wait until there are more collaborators added to the project that would actually allow us to merge this. And I could take a swing at making this type safe once that happens

krokosik · 2025-04-27T08:09:03Z

src/components/Account/ChangeLanguage.tsx

+
+    // Restores the language selected when opening the drawer
+    const handleClose = () => {
+        setSelectedLanguage(initialLanguage); // Ripristina la lingua iniziale


There are still italian comments left :/

krokosik · 2025-04-27T08:10:17Z

src/components/Account/ChangeLanguage.tsx

+    // Update the initial language when the drawer is opened
+    useEffect(() => {
+        if (languageOpen) {
+            setInitialLanguage(i18n.language); // Set the initial language


I think that comments like setInitialLanguage is for setting the initial language is a bit overkill. Some of the comments are unnecessay and the code is self explaining enough without the need for extra clutter

krokosik · 2025-04-27T08:13:09Z

src/components/AddExpense/SplitTypeSection.tsx

+          <SplitEqualSection t={t} />
        </TabsContent>
        <TabsContent value={SplitType.PERCENTAGE}>
-          <SplitByPercentageSection />
+          <SplitByPercentageSection t={t} />
        </TabsContent>
        <TabsContent value={SplitType.EXACT}>
-          <SplitByAmountSection />
+          <SplitByAmountSection t={t}/>
        </TabsContent>
        <TabsContent value={SplitType.SHARE}>
-          <SplitByShareSection />
+          <SplitByShareSection t={t} />
        </TabsContent>
        <TabsContent value={SplitType.ADJUSTMENT}>
-          <SplitByAdjustmentSection />
+          <SplitByAdjustmentSection t={t} />
        </TabsContent>


Why does the value need to be passed as a prop? Shouldn't the components be able to get the translation object themselves?

krokosik · 2025-04-27T08:15:50Z

src/components/AddExpense/SplitTypeSection.tsx

+import {useTranslation} from "react-i18next";
+import {type TFunction} from "i18next";


Please run Prettier to maintain consistent formatting. The imports should look like the ones above with spaces near curly brackets

krokosik · 2025-04-27T08:18:34Z

src/components/AddExpense/UploadFile.tsx

@@ -35,7 +37,8 @@ export const UploadFile: React.FC = () => {
    if (!file) return;

    if (file.size > FILE_SIZE_LIMIT) {
-      toast.error(`File should be less than ${FILE_SIZE_LIMIT / 1024 / 1024}MB`);
+


Remove this newline

krokosik · 2025-04-27T08:38:32Z

src/pages/activity.tsx

                        )}
                      </div>
                      <p className="text-xs text-gray-500">
-                        {format(e.expense.expenseDate, 'dd MMM')}
+                        {format(e.expense.expenseDate, process.env.NEXT_PUBLIC_DATE_FORMAT_VARIANT_3 ?? 'dd MMM')}


Use env object

krokosik · 2025-04-27T08:39:25Z

src/pages/balances.tsx

@@ -147,7 +151,8 @@ const FriendBalance: React.FC<{
  currency: string;
  id: number;
  hasMore?: boolean;
-}> = ({ friend, amount, isPositive, currency, id, hasMore }) => {
+  t: TFunction<string, undefined>


Is there any use of this prop drilling? You can just call the hook again here

krokosik · 2025-04-27T08:39:32Z

src/pages/groups.tsx

@@ -12,18 +12,20 @@ import { GroupAvatar } from '~/components/ui/avatar';
 import { toUIString } from '~/utils/numbers';
 import { motion } from 'framer-motion';
 import { type NextPageWithUser } from '~/types';
+import {useTranslation} from "react-i18next";


krokosik · 2025-04-27T08:40:41Z

.env.example

@@ -69,4 +75,4 @@ FEEDBACK_EMAIL=

 # Discord webhook for error notifications
 DISCORD_WEBHOOK_URL=
-#********* END OF OPTIONAL ENV VARS *********
+#********* END OF OPTIONAL ENV VARS *********


krokosik · 2025-04-27T08:40:54Z

docker/dev/compose.yml

@@ -30,4 +30,4 @@ services:

 volumes:
  database:
-  minio:
+  minio:


krokosik · 2025-05-24T09:50:53Z

@Rosso2004 I have been added as a Collaborator so we can proceed with the review and merging the changes :)

Rosso2004 · 2025-05-24T09:56:17Z

Thank you so much

KMKoushik added 30 commits March 1, 2024 18:31

Update logo and favicon

9078d78

Create LICENSE

7724bbf

Add logo

ea861df

Update README.md

f1d5e38

Update README.md

eeaa29a

Add download APP and fix Add expense screen

a7f6230

Add initial test fixes

5c0ca37

Update landing page

862253c

Update README.md

19ae1ff

Revert small size in mobile

e0c6e5a

Revert query optimization changes

f15ce79

Fix staletime issue

91cba5c

Disallow selecting multiple groups (oss-apps#2)

1e75427

Fix balance screen

0a9e167

Fix initial UI for groups and activity

5f309e0

Update README.md

0ef3730

Fix drawer not working for browser in google chrome

fc8e80f

Add release fixes - 2

9cd62f1

Update README.md

02f5e5f

Fix modal box and forms in account page

44eb815

Add privacy and terms

b462434

Add prod upload URL

ee6ea89

Update privacy and terms

101b0b6

Use last used currency as default currency of the user

69fa94d

Update name and description

76f4514

Cancel button will take to balance page now

1601b8c

Fix submit feedback page

3abca22

Update Logo in Readme

2074a82

Move getServerProps to client. (oss-apps#3)

86a24b6

Add skeleton (oss-apps#4)

304e869

KMKoushik and others added 17 commits November 9, 2024 07:09

add star history

e00a6b2

add edit expense (oss-apps#150)

b4a953f

* add edit expense * add edit expense changes * fix build * fix edit not working on exact match * set share to zero * fix deleting user on edit not working * fix auto load to expense page * make split share nice

Add authentik provider (oss-apps#152)

4d7a5f6

* Add authentik provider * Add authentik provider * Add authentik provider * Add authentik provider

Missing closing angle bracket (oss-apps#154)

0363080

Add nextauth internal url (oss-apps#153)

5ff2edb

* Add nextauth_internal_url * Add NEXTAUTH_URL_INTERNAL option --------- Co-authored-by: KM Koushik <koushikmohan1996@gmail.com>

Add authentik logo svg for authentik provider (oss-apps#155)

8adb205

Fix expense date resetting to today when editing (oss-apps#167)

71c561a

Fix equal split with one participant resetting on edit (oss-apps#168)

b04dd36

moved -moz-appearance:textfield styling to the right place (oss-apps#177

3b393f5

)

feat: invite-only mode (oss-apps#175)

dbdfc4c

* feat: add invite-only flag * feat: wrap adapter to enforce invite-only mode

Gestione lingua

bed7c59

Gestione della lingua nella pagina "Account" e traduzione della pagina "Account"

Fix assegnamento lingua addOrUpdateParticipant

169800a

Fix lingua

7bc5d18

Traduzioni complete al 90%

dc96b2a

Date format and finisch translations

15c5195

Fix details

8732d94

Rosso2004 mentioned this pull request Mar 22, 2025

implemented i18n #89

Open

Rosso2004 added 2 commits March 22, 2025 19:00

Update compose.yml

2365296

Aggiunte traduzioni mancanti

d01f230

krokosik requested changes Apr 14, 2025

View reviewed changes

Commit to resolve

b44d935

Rosso2004 requested a review from krokosik April 18, 2025 22:52

krokosik requested changes Apr 27, 2025

View reviewed changes

rodrigost23 mentioned this pull request May 19, 2025

Feature Request: Translations #83

Open

Rosso2004 changed the base branch from main to import-splitwise May 21, 2025 21:13

krokosik added this to the 1.4 milestone May 24, 2025

		import {useTranslation} from "react-i18next";
		import {type TFunction} from "i18next";

Uh oh!

Support for language translations and date formats #208

Are you sure you want to change the base?

Support for language translations and date formats #208

Uh oh!

Conversation

Rosso2004 commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

krokosik commented Apr 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

krokosik commented May 24, 2025

Uh oh!

Rosso2004 commented May 24, 2025

Uh oh!

Uh oh!

Rosso2004 commented Mar 20, 2025 •

edited

Loading