make a class in charge of handling the data;

this should just be a call to "saverClass.sync(props.saveSource)".

Same goes with other functions which handle data.

https://api.github.com/acenturyandabit/workflowish/blob/d01a875/src/Stores/FileDialog/index.tsx#L105

```javascript

import * as React from 'react';
import Button from '@mui/material/Button';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import Dialog from '@mui/material/Dialog';
import { KVStores, makeKVStore } from '~Stores';
import { Box, TextField, MenuItem, FormControlLabel, Checkbox } from "@mui/material"
import { KVStoresAndLoadedState } from '~Stores/KVStoreInstances';
import { BaseStoreDataType } from '~CoreDataLake';
import { KVStore, KVStoreSettingsStruct } from '~Stores/types';

const FileNavbarAndDialog = (props: {
setKVStores: React.Dispatch>,
kvStores: KVStoresAndLoadedState,
setData: React.Dispatch>,
data: BaseStoreDataType
}) => {
const [open, setOpen] = React.useState(false);
const [newSaveLocationType, setNewSaveLocationType] = React.useState(Object.keys(KVStores)[0]);
const bumpKVStore = () => {
props.setKVStores(kvStores => ({ ...kvStores }))
}
const addNewSaveSource = () => {
props.setKVStores(kvStores => ({
...kvStores, stores: [
...kvStores.stores,
makeKVStore(newSaveLocationType)
]
}))
}

const removeSaveSource = (idx: number) => {
props.setKVStores(kvStores => {
const newStores = [...kvStores.stores];
newStores.splice(idx, 1);
return {
...kvStores, stores: newStores
}
})
}
return

const SaveLoadButtons = (props: {
saveSource: KVStore,
removeSaveSource: () => void
data: BaseStoreDataType,
setData: React.Dispatch>,
}) => {
const syncFn = props.saveSource.sync;
const SyncButton = syncFn ? {
(async () => {
const newData = await syncFn(props.data)
// TODO: make a class in charge of handling the data;
// this should just be a call to "saverClass.sync(props.saveSource)".
// Same goes with other functions which handle data.
props.setData(newData)
})();
}}
>Sync : null;

return <>
{
props.saveSource.save(props.data)
}}
>Save
{SyncButton}
{
(async () => {
const loadedData = await props.saveSource.load();
props.setData(loadedData)
})();
}}
>Load
props.removeSaveSource()}
>Remove this source

}

export default FileNavbarAndDialog;

```