From 8a0a40b0feb4953d685ff021e42dfe09d980e946 Mon Sep 17 00:00:00 2001 From: Ramon Candel Date: Fri, 27 Feb 2026 10:13:33 +0100 Subject: [PATCH] Enabled react compiler and fix language issue --- .eslintrc | 4 +- app.config.ts | 3 + package.json | 2 + .../DriveGridModeItem/DriveGridModeItem.tsx | 3 +- .../DriveListModeItem/DriveListModeItem.tsx | 4 +- src/components/drive/lists/items/index.tsx | 3 +- src/components/modals/LanguageModal/index.tsx | 24 ++-- src/screens/SettingsScreen/index.tsx | 4 +- src/services/common/time/time.service.ts | 8 +- yarn.lock | 113 +++++++++++++++++- 10 files changed, 144 insertions(+), 24 deletions(-) diff --git a/.eslintrc b/.eslintrc index 110322266..352246f28 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,10 +1,12 @@ { "extends": "@internxt/eslint-config-internxt", + "plugins": ["react-compiler"], "env": { "es2020": true }, "rules": { - "max-len": "off" + "max-len": "off", + "react-compiler/react-compiler": "error" }, "ignorePatterns": [ "env", diff --git a/app.config.ts b/app.config.ts index 6005db89a..8c1a190fb 100644 --- a/app.config.ts +++ b/app.config.ts @@ -21,6 +21,9 @@ const appConfig: ExpoConfig & { extra: AppEnv & { NODE_ENV: AppStage; RELEASE_ID version: packageVersion, orientation: 'portrait', newArchEnabled: true, + experiments: { + reactCompiler: true, + }, splash: { image: './assets/images/splash.png', resizeMode: 'cover', diff --git a/package.json b/package.json index 8ad3bd39e..792eaf15d 100644 --- a/package.json +++ b/package.json @@ -151,9 +151,11 @@ "@welldone-software/why-did-you-render": "^7.0.1", "autoprefixer": "^10.4.23", "babel-plugin-module-resolver": "^5.0.2", + "babel-plugin-react-compiler": "^1.0.0", "concurrently": "^9.2.1", "detox": "^19.7.0", "eslint": "^8.8.0", + "eslint-plugin-react-compiler": "^19.1.0-rc.2", "husky": "^9.1.7", "jest": "^29.3.1", "jest-expo": "~54.0.16", diff --git a/src/components/drive/lists/items/DriveGridModeItem/DriveGridModeItem.tsx b/src/components/drive/lists/items/DriveGridModeItem/DriveGridModeItem.tsx index 8d24b9a1c..7ce25053b 100644 --- a/src/components/drive/lists/items/DriveGridModeItem/DriveGridModeItem.tsx +++ b/src/components/drive/lists/items/DriveGridModeItem/DriveGridModeItem.tsx @@ -20,6 +20,7 @@ function DriveGridModeItemComp(props: DriveItemProps): JSX.Element { const tailwind = useTailwind(); const getColor = useGetColor(); const user = useAppSelector((state) => state.auth.user); + const language = useAppSelector((state) => state.app.language); const [downloadedThumbnail, setDownloadedThumbnail] = useState(null); const [maxThumbnailWidth, setMaxThumbnailWidth] = useState(null); const thumbnailSize = downloadedThumbnail || null; @@ -171,7 +172,7 @@ function DriveGridModeItemComp(props: DriveItemProps): JSX.Element { {props.data.createdAt ? ( - {time.getFormattedDate(props.data.createdAt, time.formats.shortDate)} + {time.getFormattedDate(props.data.createdAt, time.formats.shortDate, language)} ) : null} {props.data.size ? ( diff --git a/src/components/drive/lists/items/DriveListModeItem/DriveListModeItem.tsx b/src/components/drive/lists/items/DriveListModeItem/DriveListModeItem.tsx index b6fae4ee8..cabbd61b0 100644 --- a/src/components/drive/lists/items/DriveListModeItem/DriveListModeItem.tsx +++ b/src/components/drive/lists/items/DriveListModeItem/DriveListModeItem.tsx @@ -5,6 +5,7 @@ import { ArrowCircleUp, DotsThree, Link, XCircle } from 'phosphor-react-native'; import prettysize from 'prettysize'; import strings from '../../../../../../assets/lang/strings'; import { FolderIcon, getFileTypeIcon } from '../../../../../helpers'; +import { useAppSelector } from '../../../../../store/hooks'; import ProgressBar from '../../../../AppProgressBar'; import AppText from '../../../../AppText'; @@ -18,6 +19,7 @@ import { DriveItemProps } from '../../../../../types/drive/ui'; export function DriveListModeItem(props: DriveItemProps): JSX.Element { const tailwind = useTailwind(); const getColor = useGetColor(); + const language = useAppSelector((state) => state.app.language); const iconSize = 40; const IconFile = getFileTypeIcon(props.data.type || ''); @@ -29,7 +31,7 @@ export function DriveListModeItem(props: DriveItemProps): JSX.Element { const getUpdatedAt = () => { if (props.data.createdAt) { - return time.getFormattedDate(props.data.createdAt, time.formats.dateAtTime); + return time.getFormattedDate(props.data.createdAt, time.formats.dateAtTime, language); } return ''; diff --git a/src/components/drive/lists/items/index.tsx b/src/components/drive/lists/items/index.tsx index cae113548..5ce70928b 100644 --- a/src/components/drive/lists/items/index.tsx +++ b/src/components/drive/lists/items/index.tsx @@ -22,6 +22,7 @@ function DriveItemTable(props: DriveItemProps): JSX.Element { const getColor = useGetColor(); const { selectedItems } = useAppSelector((state) => state.drive); + const language = useAppSelector((state) => state.app.language); const isSelectionMode = selectedItems.length > 0; const spinValue = new Animated.Value(1); const iconSize = 40; @@ -41,7 +42,7 @@ function DriveItemTable(props: DriveItemProps): JSX.Element { }, []); const getUpdatedAt = () => { - return time.getFormattedDate(props.data.createdAt, time.formats.dateAtTime); + return time.getFormattedDate(props.data.createdAt, time.formats.dateAtTime, language); }; const handleItemPress = () => { diff --git a/src/components/modals/LanguageModal/index.tsx b/src/components/modals/LanguageModal/index.tsx index 521e76944..c09cf5857 100644 --- a/src/components/modals/LanguageModal/index.tsx +++ b/src/components/modals/LanguageModal/index.tsx @@ -1,12 +1,12 @@ -import { CheckCircle, CircleIcon } from 'phosphor-react-native'; -import { useEffect, useState } from 'react'; +import { CheckCircleIcon, CircleIcon } from 'phosphor-react-native'; +import { useState } from 'react'; import { TouchableOpacity, View } from 'react-native'; import useGetColor from 'src/hooks/useColor'; import { appThunks } from 'src/store/slices/app'; import { Language } from 'src/types'; import { useTailwind } from 'tailwind-rn'; import strings from '../../../../assets/lang/strings'; -import { useAppDispatch } from '../../../store/hooks'; +import { useAppDispatch, useAppSelector } from '../../../store/hooks'; import { BaseModalProps } from '../../../types/ui'; import AppButton from '../../AppButton'; import AppText from '../../AppText'; @@ -17,14 +17,17 @@ const LanguageModal = (props: BaseModalProps) => { const tailwind = useTailwind(); const getColor = useGetColor(); const [isLoading, setIsLoading] = useState(false); - const [language, setLanguage] = useState(strings.getLanguage()); - const isDirty = language !== strings.getLanguage(); + const savedLanguage = useAppSelector((state) => state.app.language); + const [language, setLanguage] = useState(savedLanguage); + const isDirty = language !== savedLanguage; + const onCancelButtonPressed = () => { props.onClose(); }; + const onApplyButtonPressed = async () => { setIsLoading(true); - dispatch(appThunks.changeLanguageThunk(language as Language)) + dispatch(appThunks.changeLanguageThunk(language)) .unwrap() .then(() => { props.onClose(); @@ -34,6 +37,7 @@ const LanguageModal = (props: BaseModalProps) => { setIsLoading(false); }); }; + const renderRadioButtons = () => Object.values(Language).map((l, index) => { const isSelected = language === l; @@ -48,7 +52,7 @@ const LanguageModal = (props: BaseModalProps) => { {isSelected ? ( - + ) : ( )} @@ -68,12 +72,6 @@ const LanguageModal = (props: BaseModalProps) => { ); }); - useEffect(() => { - if (props.isOpen) { - setLanguage(strings.getLanguage()); - } - }, [props.isOpen]); - return ( ): JS const showBilling = useAppSelector(paymentsSelectors.shouldShowBilling); const { user } = useAppSelector((state) => state.auth); + const currentLanguage = useAppSelector((state) => state.app.language); const usagePercent = useAppSelector(storageSelectors.usagePercent); const [profileAvatar, setProfileAvatar] = useState(); const userFullName = useAppSelector(authSelectors.userFullName); @@ -267,7 +267,7 @@ function SettingsScreen({ navigation }: SettingsScreenProps<'SettingsHome'>): JS - {strings.languages[strings.getLanguage() as Language]} + {strings.languages[currentLanguage]} diff --git a/src/services/common/time/time.service.ts b/src/services/common/time/time.service.ts index 75de2a712..de1255d63 100644 --- a/src/services/common/time/time.service.ts +++ b/src/services/common/time/time.service.ts @@ -37,9 +37,9 @@ export class TimeService { * HH -> Hours of the date * mm -> Minutes of the date */ - getFormattedDate(input: TimeInput, format: string) { + getFormattedDate(input: TimeInput, format: string, lang?: string) { const dateTime = this.getDateTime(input); - const lang = strings.getLanguage(); + const resolvedLang = lang ?? strings.getLanguage(); const date = new Date(input); // Workaround for Hermes (React Native JS engine) bug with locale-sensitive month tokens. @@ -56,7 +56,7 @@ export class TimeService { let resolvedFormat = format; if (resolvedFormat.includes('LLLL')) { try { - const monthLong = new Intl.DateTimeFormat(lang, { month: 'long' }).format(date); + const monthLong = new Intl.DateTimeFormat(resolvedLang, { month: 'long' }).format(date); resolvedFormat = resolvedFormat.replaceAll('LLLL', `'${monthLong}'`); } catch { // falls back to luxon default (English) @@ -64,7 +64,7 @@ export class TimeService { } if (resolvedFormat.includes('LLL')) { try { - const monthShort = new Intl.DateTimeFormat(lang, { month: 'short' }).format(date); + const monthShort = new Intl.DateTimeFormat(resolvedLang, { month: 'short' }).format(date); resolvedFormat = resolvedFormat.replaceAll('LLL', `'${monthShort}'`); } catch { // falls back to luxon default (English) diff --git a/yarn.lock b/yarn.lock index 285779e6e..9798d24dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -28,6 +28,15 @@ js-tokens "^4.0.0" picocolors "^1.1.1" +"@babel/code-frame@^7.29.0": + version "7.29.0" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.29.0.tgz#7cd7a59f15b3cc0dcd803038f7792712a7d0b15c" + integrity sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw== + dependencies: + "@babel/helper-validator-identifier" "^7.28.5" + js-tokens "^4.0.0" + picocolors "^1.1.1" + "@babel/compat-data@^7.27.7", "@babel/compat-data@^7.28.6": version "7.28.6" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.28.6.tgz#103f466803fa0f059e82ccac271475470570d74c" @@ -54,6 +63,27 @@ json5 "^2.2.3" semver "^6.3.1" +"@babel/core@^7.24.4": + version "7.29.0" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.29.0.tgz#5286ad785df7f79d656e88ce86e650d16ca5f322" + integrity sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA== + dependencies: + "@babel/code-frame" "^7.29.0" + "@babel/generator" "^7.29.0" + "@babel/helper-compilation-targets" "^7.28.6" + "@babel/helper-module-transforms" "^7.28.6" + "@babel/helpers" "^7.28.6" + "@babel/parser" "^7.29.0" + "@babel/template" "^7.28.6" + "@babel/traverse" "^7.29.0" + "@babel/types" "^7.29.0" + "@jridgewell/remapping" "^2.3.5" + convert-source-map "^2.0.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.2.3" + semver "^6.3.1" + "@babel/generator@^7.20.5", "@babel/generator@^7.25.0", "@babel/generator@^7.28.6", "@babel/generator@^7.7.2": version "7.28.6" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.28.6.tgz#48dcc65d98fcc8626a48f72b62e263d25fc3c3f1" @@ -65,6 +95,17 @@ "@jridgewell/trace-mapping" "^0.3.28" jsesc "^3.0.2" +"@babel/generator@^7.29.0": + version "7.29.1" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.29.1.tgz#d09876290111abbb00ef962a7b83a5307fba0d50" + integrity sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw== + dependencies: + "@babel/parser" "^7.29.0" + "@babel/types" "^7.29.0" + "@jridgewell/gen-mapping" "^0.3.12" + "@jridgewell/trace-mapping" "^0.3.28" + jsesc "^3.0.2" + "@babel/helper-annotate-as-pure@^7.27.1", "@babel/helper-annotate-as-pure@^7.27.3": version "7.27.3" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz#f31fd86b915fc4daf1f3ac6976c59be7084ed9c5" @@ -83,7 +124,7 @@ lru-cache "^5.1.1" semver "^6.3.1" -"@babel/helper-create-class-features-plugin@^7.28.6": +"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.28.6": version "7.28.6" resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.6.tgz#611ff5482da9ef0db6291bcd24303400bca170fb" integrity sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow== @@ -233,6 +274,13 @@ dependencies: "@babel/types" "^7.28.6" +"@babel/parser@^7.24.4", "@babel/parser@^7.29.0": + version "7.29.0" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.29.0.tgz#669ef345add7d057e92b7ed15f0bac07611831b6" + integrity sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww== + dependencies: + "@babel/types" "^7.29.0" + "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.28.5": version "7.28.5" resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.28.5.tgz#fbde57974707bbfa0376d34d425ff4fa6c732421" @@ -288,6 +336,14 @@ dependencies: "@babel/helper-plugin-utils" "^7.27.1" +"@babel/plugin-proposal-private-methods@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea" + integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.18.6" + "@babel/helper-plugin-utils" "^7.18.6" + "@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2": version "7.21.0-placeholder-for-preset-env.2" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703" @@ -1078,6 +1134,19 @@ "@babel/types" "^7.28.6" debug "^4.3.1" +"@babel/traverse@^7.29.0": + version "7.29.0" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.29.0.tgz#f323d05001440253eead3c9c858adbe00b90310a" + integrity sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA== + dependencies: + "@babel/code-frame" "^7.29.0" + "@babel/generator" "^7.29.0" + "@babel/helper-globals" "^7.28.0" + "@babel/parser" "^7.29.0" + "@babel/template" "^7.28.6" + "@babel/types" "^7.29.0" + debug "^4.3.1" + "@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.25.2", "@babel/types@^7.26.0", "@babel/types@^7.27.1", "@babel/types@^7.27.3", "@babel/types@^7.28.2", "@babel/types@^7.28.5", "@babel/types@^7.28.6", "@babel/types@^7.3.3", "@babel/types@^7.4.4": version "7.28.6" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.6.tgz#c3e9377f1b155005bcc4c46020e7e394e13089df" @@ -1086,6 +1155,14 @@ "@babel/helper-string-parser" "^7.27.1" "@babel/helper-validator-identifier" "^7.28.5" +"@babel/types@^7.29.0": + version "7.29.0" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.29.0.tgz#9f5b1e838c446e72cf3cd4b918152b8c605e37c7" + integrity sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A== + dependencies: + "@babel/helper-string-parser" "^7.27.1" + "@babel/helper-validator-identifier" "^7.28.5" + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -4243,6 +4320,18 @@ eslint-config-prettier@^8.3.0: resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.10.2.tgz#0642e53625ebc62c31c24726b0f050df6bd97a2e" integrity sha512-/IGJ6+Dka158JnP5n5YFMOszjDWrXggGz1LaK/guZq9vZTmniaKlHcsscvkAhn9y4U+BU3JuUdYvtAMcv30y4A== +eslint-plugin-react-compiler@^19.1.0-rc.2: + version "19.1.0-rc.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-19.1.0-rc.2.tgz#83343e7422e00fa61e729af8e8468f0ddec37925" + integrity sha512-oKalwDGcD+RX9mf3NEO4zOoUMeLvjSvcbbEOpquzmzqEEM2MQdp7/FY/Hx9NzmUwFzH1W9SKTz5fihfMldpEYw== + dependencies: + "@babel/core" "^7.24.4" + "@babel/parser" "^7.24.4" + "@babel/plugin-proposal-private-methods" "^7.18.6" + hermes-parser "^0.25.1" + zod "^3.22.4" + zod-validation-error "^3.0.3" + eslint-scope@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" @@ -5146,6 +5235,11 @@ hasown@^2.0.2: dependencies: function-bind "^1.1.2" +hermes-estree@0.25.1: + version "0.25.1" + resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480" + integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw== + hermes-estree@0.29.1: version "0.29.1" resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.29.1.tgz#043c7db076e0e8ef8c5f6ed23828d1ba463ebcc5" @@ -5170,6 +5264,13 @@ hermes-parser@0.32.0: dependencies: hermes-estree "0.32.0" +hermes-parser@^0.25.1: + version "0.25.1" + resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1" + integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA== + dependencies: + hermes-estree "0.25.1" + hmac-drbg@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -9620,3 +9721,13 @@ yup@^1.7.1: tiny-case "^1.0.3" toposort "^2.0.2" type-fest "^2.19.0" + +zod-validation-error@^3.0.3: + version "3.5.4" + resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.5.4.tgz#9072f829e4b45b9e27317c3002408c0c4cdd2bb4" + integrity sha512-+hEiRIiPobgyuFlEojnqjJnhFvg4r/i3cqgcm67eehZf/WBaK3g6cD02YU9mtdVxZjv8CzCA9n/Rhrs3yAAvAw== + +zod@^3.22.4: + version "3.25.76" + resolved "https://registry.yarnpkg.com/zod/-/zod-3.25.76.tgz#26841c3f6fd22a6a2760e7ccb719179768471e34" + integrity sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==