Fix UI crash during setup (#4527)

ui/v2.5/src/components/Settings/Inputs.tsx

@@ -5,7 +5,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { Icon } from "../Shared/Icon";
 import { StringListInput } from "../Shared/StringListInput";
 import { PatchComponent } from "src/pluginApi";
-import { useSettings } from "./context";
+import { useSettings, useSettingsOptional } from "./context";
 
 interface ISetting {
   id?: string;
@@ -37,7 +37,8 @@ export const Setting: React.FC<PropsWithChildren<ISetting>> = PatchComponent(
       advanced,
     } = props;
 
-    const { advancedMode } = useSettings();
+    // these components can be used in the setup wizard, where advanced mode is not available
+    const { advancedMode } = useSettingsOptional();
 
     const intl = useIntl();
 

ui/v2.5/src/components/Settings/context.tsx

@@ -51,6 +51,35 @@ export interface ISettingsContextState {
   refetch: () => void;
 }
 
+function noop() {}
+
+const emptyState: ISettingsContextState = {
+  loading: false,
+  error: undefined,
+  general: {},
+  interface: {},
+  defaults: {},
+  scraping: {},
+  dlna: {},
+  ui: {},
+  plugins: {},
+
+  advancedMode: false,
+
+  apiKey: "",
+
+  saveGeneral: noop,
+  saveInterface: noop,
+  saveDefaults: noop,
+  saveScraping: noop,
+  saveDLNA: noop,
+  saveUI: noop,
+  savePluginSettings: noop,
+  setAdvancedMode: noop,
+
+  refetch: noop,
+};
+
 export const SettingStateContext =
   React.createContext<ISettingsContextState | null>(null);
 
@@ -64,6 +93,16 @@ export const useSettings = () => {
   return context;
 };
 
+export function useSettingsOptional(): ISettingsContextState {
+  const context = React.useContext(SettingStateContext);
+
+  if (context === null) {
+    return emptyState;
+  }
+
+  return context;
+}
+
 export const SettingsContext: React.FC = ({ children }) => {
   const Toast = useToast();