feat: add user defined translations (#1756)

* feat: add user defined translations

* add refetch key for translation (#1757)

---------

Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk>

apps/client/src/translation/TranslationProvider.tsx

@@ -1,9 +1,11 @@
 import { createContext, PropsWithChildren, useCallback, useContext } from 'react';
+import { langEn, TranslationObject } from 'ontime-types';
 
+import { postUserTranslation } from '../common/api/assets';
+import { useCustomTranslation } from '../common/hooks-query/useCustomTranslation';
 import useSettings from '../common/hooks-query/useSettings';
 
 import { langDe } from './languages/de';
-import { langEn } from './languages/en';
 import { langEs } from './languages/es';
 import { langFr } from './languages/fr';
 import { langIt } from './languages/it';
@@ -21,15 +23,20 @@ const translationsList = {
 export type TranslationKey = keyof typeof langEn;
 
 interface TranslationContextValue {
+  userTranslation: TranslationObject;
   getLocalizedString: (key: TranslationKey, lang?: string) => string;
+  postUserTranslation: (translation: TranslationObject) => Promise<void>;
 }
 
 const TranslationContext = createContext<TranslationContextValue>({
+  userTranslation: langEn,
   getLocalizedString: () => '',
+  postUserTranslation: async () => {},
 });
 
 export const TranslationProvider = ({ children }: PropsWithChildren) => {
   const { data } = useSettings();
+  const { data: translationData } = useCustomTranslation();
 
   const getLocalizedString = useCallback(
     (key: TranslationKey, lang = data?.language || 'en'): string => {
@@ -37,20 +44,24 @@ export const TranslationProvider = ({ children }: PropsWithChildren) => {
         if (key in translationsList[lang as keyof typeof translationsList]) {
           return translationsList[lang as keyof typeof translationsList][key];
         }
+      } else if (lang === 'custom') {
+        return translationData[key];
       }
       return langEn[key];
     },
-    [data?.language],
+    [data?.language, translationData],
   );
 
   const contextValue = {
+    userTranslation: translationData,
     getLocalizedString,
+    postUserTranslation,
   };
 
   return <TranslationContext.Provider value={contextValue}>{children}</TranslationContext.Provider>;
 };
 
 export const useTranslation = () => {
-  const { getLocalizedString } = useContext(TranslationContext);
-  return { getLocalizedString };
+  const { userTranslation, getLocalizedString, postUserTranslation } = useContext(TranslationContext);
+  return { userTranslation, getLocalizedString, postUserTranslation };
 };