refactor: improve the amount of GET requests for translation assets (#2058)

* refactor: replace traslation hook refetch time with stale time

* refactor: make it the service responsebillety to send refetch keys for asset changes

apps/client/src/common/hooks-query/useCustomTranslation.ts

@@ -1,16 +1,16 @@
 import { useQuery } from '@tanstack/react-query';
 import { langEn } from 'ontime-types';
+import { MILLIS_PER_HOUR } from 'ontime-utils';
 
 import { getUserTranslation } from '../../common/api/assets';
 import { TRANSLATION } from '../../common/api/constants';
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 
 export function useCustomTranslation() {
   const { data, status, refetch } = useQuery({
     queryKey: TRANSLATION,
     queryFn: ({ signal }) => getUserTranslation({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
-    refetchInterval: queryRefetchIntervalSlow,
+    staleTime: MILLIS_PER_HOUR,
   });
   return { data: data ?? langEn, status, refetch };
 }

apps/server/src/api-data/assets/assets.router.ts

@@ -1,5 +1,5 @@
 import express from 'express';
-import type { Request, Response } from 'express';
+import type { Request, Response, Router } from 'express';
 import { type ErrorResponse, RefetchKey } from 'ontime-types';
 import { getErrorMessage } from 'ontime-utils';
 
@@ -8,7 +8,7 @@ import { defaultCss } from '../../bundle/bundledCss.js';
 import { readCssFile, writeCssFile, writeUserTranslation } from './assets.service.js';
 import { validatePostCss, validatePostTranslation } from './assets.validation.js';
 
-export const router = express.Router();
+export const router: Router = express.Router();
 
 router.get('/css', async (_req: Request, res: Response<string | ErrorResponse>) => {
   try {
@@ -24,7 +24,6 @@ router.post('/css', validatePostCss, async (req: Request, res: Response<never |
   const { css } = req.body;
   try {
     await writeCssFile(css);
-    sendRefetch(RefetchKey.CssOverride);
     res.status(204).send();
   } catch (error) {
     const message = getErrorMessage(error);
@@ -53,7 +52,6 @@ router.post('/translations', validatePostTranslation, async (req: Request, res:
 
   try {
     await writeUserTranslation(translation);
-    sendRefetch(RefetchKey.Translation);
     res.status(204).send();
   } catch (error) {
     const message = getErrorMessage(error);

apps/server/src/api-data/assets/assets.service.ts

@@ -1,8 +1,9 @@
 import { existsSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
 
-import type { TranslationObject } from 'ontime-types';
+import { RefetchKey, type TranslationObject } from 'ontime-types';
 
+import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
 import { defaultCss } from '../../bundle/bundledCss.js';
 import { publicFiles } from '../../setup/index.js';
 
@@ -33,6 +34,9 @@ export async function writeCssFile(css: string) {
   }
 
   await writeFile(path, css, { encoding: 'utf8' });
+  setImmediate(() => {
+    sendRefetch(RefetchKey.CssOverride);
+  });
 }
 
 /**
@@ -43,4 +47,7 @@ export async function writeUserTranslation(translations: TranslationObject) {
   const path = publicFiles.translationsFile;
   const translationsString = JSON.stringify(translations, null, 2);
   await writeFile(path, translationsString, { encoding: 'utf8' });
+  setImmediate(() => {
+    sendRefetch(RefetchKey.Translation);
+  });
 }