fix: bugs caused by missing defaults on home page form upload

src/components/modals/SettingsModal/SettingsModal.tsx

@@ -20,6 +20,7 @@ import { getSettingsCardOptions } from '../../../lib/backend/getSettingsCardOpti
 import { getLocalStorageBooleanValue } from '../../../lib/data_layer/getLocalStorageBooleanValue';
 import CardOption from '../../../lib/data_layer/model/CardOption';
 import { getVisibleText } from '../../../lib/text/getVisibleText';
+import { useSettingsCardsOptions } from './useSettingsCardsOptions';
 
 interface Props {
   pageTitle?: string;
@@ -36,13 +37,7 @@ function SettingsModal({
                          onClickClose,
                          setError
                        }: Props) {
-  const { isLoading, isError, data: options, error: loadingDefaultsError } = useQuery(
-    `cardOptions-${pageId ?? 'default'}`, // pageId will invalidate the cache
-    getSettingsCardOptions,
-    {
-      staleTime: FIFTEEN_MINUTES
-    }
-  );
+  const { isLoading, isError, options, loadingDefaultsError } = useSettingsCardsOptions(pageId);
   const [settings, setSettings] = useState<SettingsPayload>({});
   const [loading, setLoading] = useState(!!pageId);
   const deckNameKey = 'deckName';

src/components/modals/SettingsModal/useSettingsCardsOptions.ts

@@ -0,0 +1,15 @@
+import { useQuery } from 'react-query';
+import { getSettingsCardOptions } from '../../../lib/backend/getSettingsCardOptions';
+import { FIFTEEN_MINUTES } from './constants';
+
+export const useSettingsCardsOptions = (pageId: string | null) => {
+  const { isLoading, isError, data: options, error: loadingDefaultsError } = useQuery(
+    `cardOptions-${pageId ?? 'default'}`, // pageId will invalidate the cache
+    getSettingsCardOptions,
+    {
+      staleTime: FIFTEEN_MINUTES
+    }
+  );
+
+  return { isLoading, isError, options, loadingDefaultsError };
+};

src/pages/HomePage/HomePage.tsx

@@ -7,12 +7,16 @@ import UploadForm from '../UploadPage/components/UploadForm/UploadForm';
 import { ErrorHandlerType } from '../../components/errors/helpers/getErrorMessage';
 import { FormSection } from './components/Sections/hero/styled';
 import TierSection from './components/Sections/tier/TierSection';
+import { useSettingsCardsOptions } from '../../components/modals/SettingsModal/useSettingsCardsOptions';
 
 interface HomePageProps {
   setErrorMessage: ErrorHandlerType;
 }
 
 export function HomePage({ setErrorMessage }: Readonly<HomePageProps>) {
+  // Load the default settings cards options for backend compatibility
+  useSettingsCardsOptions(null);
+
   return (
     <HomeContainer>
       <HeroSection />