Merge pull request #72074 from software-mansion-labs/@GCyganek/migrate-ThemePage-SelectionList

Make `ThemePage` use new `SelectionList`

Author: grgia

src/pages/settings/Preferences/ThemePage.tsx

@@ -2,9 +2,9 @@ import React, {useRef} from 'react';
 import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionListWithSections';
-import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
-import type {ListItem} from '@components/SelectionListWithSections/types';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import type {ListItem} from '@components/SelectionList/ListItem/types';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -21,7 +21,7 @@ type ThemeEntry = ListItem & {
 function ThemePage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [preferredTheme] = useOnyx(ONYXKEYS.PREFERRED_THEME);
+    const [preferredTheme] = useOnyx(ONYXKEYS.PREFERRED_THEME, {canBeMissing: true});
     const isOptionSelected = useRef(false);
     const {DEFAULT, FALLBACK, ...themes} = CONST.THEME;
     const localesToThemes = Object.values(themes).map((theme) => ({
@@ -50,11 +50,11 @@ function ThemePage() {
             />
             <Text style={[styles.mh5, styles.mv4]}>{translate('themePage.chooseThemeBelowOrSync')}</Text>
             <SelectionList
-                sections={[{data: localesToThemes}]}
+                data={localesToThemes}
                 ListItem={RadioListItem}
                 onSelectRow={updateTheme}
                 shouldSingleExecuteRowSelect
-                initiallyFocusedOptionKey={localesToThemes.find((theme) => theme.isSelected)?.keyForList}
+                initiallyFocusedItemKey={localesToThemes.find((theme) => theme.isSelected)?.keyForList}
             />
         </ScreenWrapper>
     );