Convert getLanguageName to hook

frontend/src/Language/useLanguageName.ts

@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import useApiQuery from 'Helpers/Hooks/useApiQuery';
+
+interface LanguageResponse {
+  identifier: string;
+}
+
+function getDisplayName(code: string) {
+  return Intl.DisplayNames
+    ? new Intl.DisplayNames([code], { type: 'language' })
+    : null;
+}
+
+const useLanguage = () => {
+  return useApiQuery<LanguageResponse>({
+    path: '/localization/language',
+    queryOptions: {
+      staleTime: Infinity,
+      gcTime: Infinity,
+    },
+  });
+};
+
+export const useInitializeLanguage = () => {
+  useLanguage();
+};
+
+const useLanguageName = () => {
+  const { data } = useLanguage();
+
+  const getLanguageName = useCallback(
+    (code: string): string => {
+      const languageNames = data?.identifier
+        ? getDisplayName(data.identifier)
+        : getDisplayName('en');
+
+      if (!languageNames) {
+        return code;
+      }
+
+      try {
+        return languageNames.of(code) ?? code;
+      } catch {
+        return code;
+      }
+    },
+    [data]
+  );
+
+  return getLanguageName;
+};
+
+export default useLanguageName;