Feature/custom translations frontend #857
Conversation
rvveber
force-pushed
the
feature/custom-translations-frontend
branch
2 times, most recently
from
10cd759 to
d285bd1
Compare
rvveber
force-pushed
the
feature/custom-translations-frontend
branch
2 times, most recently
from
4ff16fa to
81fd1ed
Compare
src/frontend/apps/impress/src/features/language/hooks/useTranslationsCustomizer.ts
Outdated
Show resolved
Hide resolved
src/frontend/apps/impress/src/features/language/hooks/useTranslationsCustomizer.ts
Outdated
Show resolved
Hide resolved
src/frontend/apps/impress/src/features/language/hooks/useTranslationsCustomizer.ts
Outdated
Show resolved
Hide resolved
rvveber
force-pushed
the
feature/custom-translations-frontend
branch
2 times, most recently
from
b9b16aa to
06b91a1
Compare
rvveber
force-pushed
the
feature/custom-translations-frontend
branch
from
06b91a1 to
af92119
Compare
There was a problem hiding this comment.
The problem that I see is that we change the pattern of the application, all the features used /api/ to have a clear separation of concern, and we use react-query.
By leveraging react-query, no need to do tricks with useRef as react-query has an inner cache, it will be more readable by reducing conditions and try catch.
There was a problem hiding this comment.
Thanks for the feedback! I completely agree. Leveraging React Query, especially its internal cache, significantly improves code readability by reducing conditions and try-catch blocks, and avoids useRef workarounds.
After some experiments i have restructured my code to do exactly that.
My goal with these changes was to build on that and establish a clear best-practice pattern for our data fetching. I've focused on separating Queries (for reads) from Mutations (for create, update, delete) according to CRUD principles. I believe this also addresses some previous inconsistencies in handling data modifications. The last five commits I've added detail this approach.
Regarding caching, I've extended your idea of caching the config in localStorage: the entire query cache is now persisted there. This should enhance performance on repeat visits and after browser restarts.
Additionally, I've included assert and debug flags as small utilities to improve developer experience and type safety.
Let me know what you think of this approach! 👍🏼
rvveber
force-pushed
the
feature/custom-translations-frontend
branch
2 times, most recently
from
a65fca6 to
cddc429
Compare
Part of customization PoC Signed-off-by: Robin Weber <[email protected]>
Part of customization PoC Signed-off-by: Robin Weber <[email protected]>
Part of customization PoC Signed-off-by: Robin Weber <[email protected]>
Part of customization PoC Signed-off-by: Robin Weber <[email protected]>
This change integrates @tanstack/react-query-persist-client and @tanstack/query-sync-storage-persister to persist the React Query cache in the browser's localStorage. - Queries are now cached across browser sessions. - Background updates continue based on query staleTime. - Debug flags have been added for cache control during development. Signed-off-by: Robin Weber <[email protected]>
Debug flags can be used to toggle debugging in various environments and situations. - They need to be explicitly enabled. - This commit enables them for development. - They can help investigate bugs in production environments, - They can change the behavior of the app and add additional info when developing, improving the DX. Signed-off-by: Robin Weber <[email protected]>
Introduces an `assert` utility function. This function provides a clean way to throw an error for falsy values, improving code readability and helping with TypeScript type narrowing by ensuring a variable's expected state before proceeding. Signed-off-by: Robin Weber <[email protected]>
Introduces dedicated mutations (for authentication/user operations) separating them from queries to align with best practices for data fetching and state management. Queries remain responsible for READ operations, while mutations now handle CREATE, UPDATE, and DELETE actions (for user data) improving separation of concerns. Signed-off-by: Robin Weber <[email protected]>
- Refactors useTranslationsCustomizer to useCustomTranslations - Refactors useCustomTranslations to use useCustomTranslationsQuery - Refactors "useLanguageSynchronizer" to "useSynchronizedLanguage" - Removes "useChangeUserLanguage" - To change the user language, use "useAuthMutation" instead - Refactors "LanguagePicker" to better reflect its component role - Refactors "LanguagePicker" to use "useSynchronizedLangue" Signed-off-by: Robin Weber <[email protected]>
rvveber
force-pushed
the
feature/custom-translations-frontend
branch
from
cddc429 to
9a9b717
Compare
Adds ability to inject/override translations at runtime.
Moves contents of
docs/theming.mdintodocs/customization.mdfor a more unified documentation.Refactors language synchronization logic.
Adds debug flags for improved DX (developer experience).
Refactors queries to automatically cache in localStorage with the help of PersistQueryClient.
Adds CRUD oriented Mutation for the User model in "AuthMutation".