Frontend Translations

[AlenGanopolsky]

Description

Link to Ticket
Added i18n library to frontend alongside corresponding json blobs for english and thai. Language switching functionality was added to the language settings page - when a user switches their language, static text is converted from english to thai and vice versa - those translations are stored in said json blobs. Language persistence was added using AsyncStorage, but the implementation will use AuthContext once that is merged in. Lastly, language header parameterization was added to backend requests - the backend no longer exclusively uses en-US as the Accept-Language header

How Has This Been Tested?

Tested frontend on Expo (IOS) and Android Studio

Screenshots

Please provide screenshots of manual testing (Scalar, frontend pages, etc.)

Checklist

General

• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas

Backend Changes (if applicable)

• I have written unit tests for my code
• I have written integration tests where appropriate
• New and existing unit tests pass locally with my changes
• I have run make api-validate and make api-gen to keep the openAPI spec up to date
• I have tested error handling and edge cases
• Database migrations are included (if applicable)

Frontend Changes (if applicable)

• I have tested in multiple browsers (Chrome, Firefox, Safari)
• Mobile responsive design verified (if applicable)
• I have run make generate-api to keep the API hooks up to date
• For mobile features: Tested on both iOS and Android devices
• For mobile features: Screenshots from both iOS and Android included below
• No console errors or warnings
• Loading states and error states handled

Mobile Screenshots (if applicable)

iOS

[Add iOS screenshots here]

Android

[Add Android screenshots here]

[github-actions]

Backend Test Results

Test Summary ✅

• Passed: 0
• Failed: 0
• Skipped: 0
• Status: All tests passed!

Coverage ⚠️

• Total Coverage: N/A%
• Status: Coverage is below recommended threshold (70%)

Coverage report and test logs have been uploaded as artifacts.

[github-actions]

Backend Test Results

Test Summary ✅

• Passed: 302
• Failed: 0
• Skipped: 0
• Status: All tests passed!

Coverage ⚠️

• Total Coverage: 50.9%
• Status: Coverage is below recommended threshold (70%)

Coverage report and test logs have been uploaded as artifacts.

[adescoteaux1]

this is so cool!

[adescoteaux1]

Nice, TY!

[adescoteaux1]

There's a race condition here — AsyncStorage.getItem('lng') is async, but i18n.init() runs synchronously before that promise resolves. So savedLng will always be "en" when init() is called, and the .then() callback fires later to patch it.
_layout.tsx also reads from AsyncStorage and calls changeLanguage(), which is what actually makes this work in practice — but having the same logic in two places is fragile and could cause a brief flash of the wrong language.
Could we consolidate this into one place? One option: drop the async read here entirely and just init with fallbackLng: 'en' (no explicit lng), then let _layout.tsx be the single owner of loading the persisted language. That way the flow is clearer and there's only one code path to maintain.

[github-actions]

Backend Test Results

Test Summary ✅

• Passed: 302
• Failed: 0
• Skipped: 0
• Status: All tests passed!

Coverage ⚠️

• Total Coverage: 50.9%
• Status: Coverage is below recommended threshold (70%)

Coverage report and test logs have been uploaded as artifacts.

[github-actions]

Backend Test Results

Test Summary ✅

• Passed: 302
• Failed: 0
• Skipped: 0
• Status: All tests passed!

Coverage ⚠️

• Total Coverage: 50.9%
• Status: Coverage is below recommended threshold (70%)

Coverage report and test logs have been uploaded as artifacts.