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,46 @@
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} 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 useSuspenseQuery({
+    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);
+      return api.setIsArchiveDevice(isArchive);
+    },
+    onSettled: async () => {
+      return await 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,33 +71,40 @@ const m = defineMessages({
 
 export const MediaSyncSettings = () => {
   const {formatMessage: t} = useIntl();
-  const mediaSyncSetting = usePersistedSettings(
-    store => store.mediaSyncSetting,
-  );
-  const {setMediaSyncSetting} = usePersistedSettingsAction();
-
-  const [modalType, setModalType] = React.useState<MediaSyncSetting>(
-    () => mediaSyncSetting,
-  );
+  const {data: mediaSyncSetting} = useGetMediaSyncSetting();
+  const {
+    mutate: setMediaSyncSetting,
+    variables,
+    isPending,
+  } = useSetMediaSyncSetting();
+  const [possibleSetting, setPossibleSetting] =
+    React.useState<MediaSyncSetting | null>(null);
 
   const {isOpen, openSheet, closeSheet, sheetRef} = useBottomSheetModal({
     openOnMount: false,
   });
 
   const handleOptionChange = (value: MediaSyncSetting) => {
-    setModalType(value);
+    setPossibleSetting(value);
     openSheet();
   };
 
   const handleConfirm = () => {
-    setMediaSyncSetting(modalType);
+    if (possibleSetting) {
+      setMediaSyncSetting(possibleSetting);
+    }
+    closeSheet();
+  };
+
+  const handleDismiss = () => {
+    setPossibleSetting(null);
     closeSheet();
   };
 
   const options: {
     value: MediaSyncSetting;
     label: string;
-    hint?: React.ReactNode;
+    hint: React.ReactNode;
   }[] = [
     {
       value: 'previews',
@@ -120,7 +127,7 @@ export const MediaSyncSettings = () => {
   return (
     <ScrollView style={styles.container}>
       <SelectOne
-        value={mediaSyncSetting}
+        value={isPending ? variables : mediaSyncSetting}
         onChange={handleOptionChange}
         options={options}
         radioButtonPosition="right"
@@ -129,12 +136,12 @@ export const MediaSyncSettings = () => {
       <BottomSheetModal ref={sheetRef} isOpen={isOpen}>
         <MediaSyncActionSheetContent
           title={
-            modalType === 'previews'
+            possibleSetting === 'previews'
               ? t(m.syncPreviewsBottomSheet)
               : t(m.syncEverythingBottomSheet)
           }
           description={
-            modalType === 'previews' ? (
+            possibleSetting === 'previews' ? (
               <>
                 {t(m.syncPreviewsDescriptionBottomSheet)}
                 {'\n\n'}
@@ -145,14 +152,12 @@ export const MediaSyncSettings = () => {
             )
           }
           confirmActionText={
-            modalType === 'previews'
+            possibleSetting === 'previews'
               ? t(m.syncPreviewsBottomSheetConfirm)
               : t(m.syncEverything)
           }
           confirmAction={handleConfirm}
-          onDismiss={() => {
-            closeSheet();
-          }}
+          onDismiss={handleDismiss}
         />
       </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} />;