chore: media management logic

src/frontend/hooks/persistedState/usePersistedSettings.ts

@@ -1,29 +1,25 @@
 import {type StateCreator} from 'zustand';
 import {createPersistedState} from './createPersistedState';
-import {CoordinateFormat, MediaSyncSetting} from '../../sharedTypes';
+import {CoordinateFormat} from '../../sharedTypes';
 
 type SettingsSlice = {
   coordinateFormat: CoordinateFormat;
   manualCoordinateEntryFormat: CoordinateFormat;
-  mediaSyncSetting: MediaSyncSetting;
   actions: {
     setCoordinateFormat: (coordinateFormat: CoordinateFormat) => void;
     setManualCoordinateEntryFormat: (
       coordinateFormat: CoordinateFormat,
     ) => void;
-    setMediaSyncSetting: (mediaSyncSetting: MediaSyncSetting) => void;
   };
 };
 
 const settingsSlice: StateCreator<SettingsSlice> = (set, get) => ({
   coordinateFormat: 'utm',
   manualCoordinateEntryFormat: 'utm',
-  mediaSyncSetting: 'everything',
   actions: {
     setCoordinateFormat: coordinateFormat => set({coordinateFormat}),
     setManualCoordinateEntryFormat: coordinateFormat =>
       set({manualCoordinateEntryFormat: coordinateFormat}),
-    setMediaSyncSetting: mediaSyncSetting => set({mediaSyncSetting}),
   },
 });
 

src/frontend/hooks/server/mediaSync.ts

@@ -0,0 +1,40 @@
+import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query';
+import {useApi} from '../../contexts/ApiContext';
+import {MediaSyncSetting} from '../../sharedTypes';
+
+export const MEDIA_SYNC_SETTING_KEY = 'media_sync_setting';
+
+export function convertMediaSyncSetting(isArchive: boolean): MediaSyncSetting {
+  return isArchive ? 'everything' : 'previews';
+}
+
+export function isArchiveDevice(value: MediaSyncSetting): boolean {
+  return value === 'everything';
+}
+
+export function useGetMediaSyncSetting() {
+  const api = useApi();
+
+  return useQuery({
+    queryKey: [MEDIA_SYNC_SETTING_KEY],
+    queryFn: async () => {
+      const isArchive = await api.getIsArchiveDevice();
+      return convertMediaSyncSetting(isArchive);
+    },
+  });
+}
+
+export function useSetMediaSyncSetting() {
+  const api = useApi();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (newSetting: MediaSyncSetting) => {
+      const isArchive = isArchiveDevice(newSetting);
+      await api.setIsArchiveDevice(isArchive);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({queryKey: [MEDIA_SYNC_SETTING_KEY]});
+    },
+  });
+}

src/frontend/screens/Settings/ProjectSettings/MediaSyncSettings.tsx

@@ -3,16 +3,16 @@ import {ScrollView, StyleSheet} from 'react-native';
 import {useIntl, defineMessages} from 'react-intl';
 import {SelectOne} from '../../../sharedComponents/SelectOne';
 import {SYNC_BACKGROUND} from '../../../lib/styles';
-import {
-  usePersistedSettings,
-  usePersistedSettingsAction,
-} from '../../../hooks/persistedState/usePersistedSettings';
 import {MediaSyncActionSheetContent} from './MediaSyncActionSheetContent';
 import {
   useBottomSheetModal,
   BottomSheetModal,
 } from '../../../sharedComponents/BottomSheetModal';
 import {MediaSyncSetting} from '../../../sharedTypes';
+import {
+  useGetMediaSyncSetting,
+  useSetMediaSyncSetting,
+} from '../../../hooks/server/mediaSync';
 
 const m = defineMessages({
   syncSettingsTitle: {
@@ -71,14 +71,17 @@ const m = defineMessages({
 
 export const MediaSyncSettings = () => {
   const {formatMessage: t} = useIntl();
-  const mediaSyncSetting = usePersistedSettings(
-    store => store.mediaSyncSetting,
-  );
-  const {setMediaSyncSetting} = usePersistedSettingsAction();
+  const {data: mediaSyncSetting, isLoading} = useGetMediaSyncSetting();
+  const {mutate: setMediaSyncSetting} = useSetMediaSyncSetting();
 
-  const [modalType, setModalType] = React.useState<MediaSyncSetting>(
-    () => mediaSyncSetting,
-  );
+  const [modalType, setModalType] =
+    React.useState<MediaSyncSetting>('everything');
+
+  React.useEffect(() => {
+    if (!isLoading && mediaSyncSetting) {
+      setModalType(mediaSyncSetting);
+    }
+  }, [mediaSyncSetting]);
 
   const {isOpen, openSheet, closeSheet, sheetRef} = useBottomSheetModal({
     openOnMount: false,
@@ -97,7 +100,7 @@ export const MediaSyncSettings = () => {
   const options: {
     value: MediaSyncSetting;
     label: string;
-    hint?: React.ReactNode;
+    hint: React.ReactNode;
   }[] = [
     {
       value: 'previews',
@@ -120,7 +123,7 @@ export const MediaSyncSettings = () => {
   return (
     <ScrollView style={styles.container}>
       <SelectOne
-        value={mediaSyncSetting}
+        value={modalType}
         onChange={handleOptionChange}
         options={options}
         radioButtonPosition="right"
@@ -150,9 +153,7 @@ export const MediaSyncSettings = () => {
               : t(m.syncEverything)
           }
           confirmAction={handleConfirm}
-          onDismiss={() => {
-            closeSheet();
-          }}
+          onDismiss={closeSheet}
         />
       </BottomSheetModal>
     </ScrollView>

src/frontend/screens/Settings/ProjectSettings/index.tsx

@@ -98,17 +98,13 @@ export const ProjectSettings: NativeNavigationComponent<'ProjectSettings'> = ({
           },
         ]
       : []),
-    ...(process.env.EXPO_PUBLIC_FEATURE_MEDIA_MANAGER
-      ? [
-          {
-            onPress: () => {
-              navigation.navigate('MediaSyncSettings');
-            },
-            primaryText: formatMessage(m.mediaSyncSettings),
-            testID: 'AIN.sync-list-item',
-          },
-        ]
-      : []),
+    {
+      onPress: () => {
+        navigation.navigate('MediaSyncSettings');
+      },
+      primaryText: formatMessage(m.mediaSyncSettings),
+      testID: 'MAIN.sync-list-item',
+    },
   ];
 
   return <FullScreenMenuList data={MenuItems} />;