frontend: initialize timeFormat preference (#2821)

The `timeZone` preference was not being initialized, as default
preferences were initialized as`{}`. This caused some `undefined` issues
when trying to access it, this PR initializes the preferences object
with the `timeFormat` set at `UTC`

### Testing Performed
manual

frontend/packages/core/src/Contexts/preferences-context.tsx

@@ -1,12 +1,15 @@
 import React from "react";
+import _ from "lodash";
 
 export type ActionType = "SetPref" | "RemovePref" | "SetLocalPref" | "RemoveLocalPref";
 const STORAGE_KEY = "userPreferences";
 type State = { key: string; value?: unknown };
 type Action = { type: ActionType; payload: State };
 type Dispatch = (action: Action) => void;
 type UserPreferencesProviderProps = { children: React.ReactNode };
-const DEFAULT_PREFERENCES = {} as State;
+const DEFAULT_PREFERENCES: State = {
+  timeFormat: "UTC",
+} as any;
 interface ContextProps {
   preferences: State;
   dispatch: Dispatch;
@@ -60,6 +63,12 @@ const UserPreferencesProvider = ({ children }: UserPreferencesProviderProps) =>
   let pref = DEFAULT_PREFERENCES;
   try {
     pref = JSON.parse(localStorage.getItem(STORAGE_KEY) || "");
+    // If there are any missing default preferences, add them
+    Object.keys(DEFAULT_PREFERENCES).forEach(key => {
+      if (_.isEmpty(pref[key]) || !pref[key]) {
+        pref[key] = DEFAULT_PREFERENCES[key];
+      }
+    });
   } catch {
     localStorage.removeItem(STORAGE_KEY);
   }