feat(web): start using TypeScript

web/src/queries/l10n.js → web/src/queries/l10n.ts

@@ -30,7 +30,7 @@ import { timezoneUTCOffset } from "~/utils";
 const configQuery = () => {
   return {
     queryKey: ["l10n/config"],
-    queryFn: () => fetch("/api/l10n/config").then((res) => res.json()),
+    queryFn: () => fetch("/api/l10n/config").then(res => res.json())
   };
 };
 
@@ -39,10 +39,10 @@ const configQuery = () => {
  */
 const localesQuery = () => ({
   queryKey: ["l10n/locales"],
-  queryFn: async () => {
+  queryFn: async (): Promise<Locale[]> => {
     const response = await fetch("/api/l10n/locales");
     const locales = await response.json();
-    return locales.map(({ id, language, territory }) => {
+    return locales.map(({ id, language, territory }): Locale => {
       return { id, name: language, territory };
     });
   },
@@ -54,10 +54,10 @@ const localesQuery = () => ({
  */
 const timezonesQuery = () => ({
   queryKey: ["l10n/timezones"],
-  queryFn: async () => {
+  queryFn: async (): Promise<Timezone[]> => {
     const response = await fetch("/api/l10n/timezones");
     const timezones = await response.json();
-    return timezones.map(({ code, parts, country }) => {
+    return timezones.map(({ code, parts, country }): Timezone => {
       const offset = timezoneUTCOffset(code);
       return { id: code, parts, country, utcOffset: offset };
     });
@@ -70,13 +70,13 @@ const timezonesQuery = () => ({
  */
 const keymapsQuery = () => ({
   queryKey: ["l10n/keymaps"],
-  queryFn: async () => {
+  queryFn: async (): Promise<Keymap[]> => {
     const response = await fetch("/api/l10n/keymaps");
     const json = await response.json();
-    const keymaps = json.map(({ id, description }) => {
+    const keymaps = json.map(({ id, description }): Keymap => {
       return { id, name: description };
     });
-    return keymaps.sort((a, b) => (a.name < b.name) ? -1 : 1);
+    return keymaps.sort((a, b) => (a.name < b.name ? -1 : 1));
   },
   staleTime: Infinity
 });
@@ -88,13 +88,13 @@ const keymapsQuery = () => ({
  */
 const useConfigMutation = () => {
   const query = {
-    mutationFn: (newConfig) =>
+    mutationFn: newConfig =>
       fetch("/api/l10n/config", {
         method: "PATCH",
         body: JSON.stringify(newConfig),
         headers: {
-          "Content-Type": "application/json",
-        },
+          "Content-Type": "application/json"
+        }
       })
   };
   return useMutation(query);
@@ -123,26 +123,22 @@ const useL10nConfigChanges = () => {
 
 /// Returns the l10n data.
 const useL10n = () => {
-  const [
-    { data: config },
-    { data: locales },
-    { data: keymaps },
-    { data: timezones }
-  ] = useSuspenseQueries({
-    queries: [
-      configQuery(),
-      localesQuery(),
-      keymapsQuery(),
-      timezonesQuery()
-    ]
-  });
+  const [{ data: config }, { data: locales }, { data: keymaps }, { data: timezones }] =
+    useSuspenseQueries({
+      queries: [configQuery(), localesQuery(), keymapsQuery(), timezonesQuery()]
+    });
 
-  const selectedLocale = locales.find((l) => l.id === config.locales[0]);
-  const selectedKeymap = keymaps.find((k) => k.id === config.keymap);
-  const selectedTimezone = timezones.find((t) => t.id === config.timezone);
+  const selectedLocale = locales.find(l => l.id === config.locales[0]);
+  const selectedKeymap = keymaps.find(k => k.id === config.keymap);
+  const selectedTimezone = timezones.find(t => t.id === config.timezone);
 
   return {
-    locales, keymaps, timezones, selectedLocale, selectedKeymap, selectedTimezone
+    locales,
+    keymaps,
+    timezones,
+    selectedLocale,
+    selectedKeymap,
+    selectedTimezone
   };
 };
 

web/src/types/l10n.ts

@@ -0,0 +1,44 @@
+type Keymap = {
+  /**
+   * Keyboard id (e.g., "us").
+   */
+  id: string;
+  /**
+   * Keyboard name (e.g., "English (US)").
+   */
+  name: string;
+};
+
+type Locale = {
+  /**
+   * Language id (e.g., "en_US.UTF-8").
+   */
+  id: string;
+  /**
+   * Language name (e.g., "English").
+   */
+  name: string;
+  /**
+   * Territory name (e.g., "United States").
+   */
+  territory: string;
+};
+
+type Timezone = {
+  /**
+   * Timezone id (e.g., "Atlantic/Canary").
+   */
+  id: string;
+  /**
+   * Name of the timezone parts (e.g., ["Atlantic", "Canary"]).
+   */
+  parts: string[];
+  /**
+   * Name of the country associated to the zone or empty string (e.g., "Spain").
+   */
+  country: string;
+  /**
+   * UTC offset.
+   */
+  utcOffset: number;
+};