Queueing offline requests to then sync to server (redux-saga) - react-native

Question

I'm looking for the most optimal way of solving the following problem and would really appreciate some help. I have built a react native app which uses redux-saga for state management and redux-persist to keep offline data.
Problem:
When offline, users need to be able to use the native app to create "Posts" (for the sake of example) which can have multiple images attached to them. Then once they have internet connection they need to be able to click a sync/upload button. This button changes state.offlineQueue.offlineQueueShoud from 'cache' to 'sync'
Few things to consider; server side, I have a posts table, and an images table with a many to one relationship (many images to one post), which means to upload an image to the server I need to pass the post_id; meaning I have to have uploaded the post it's 'attached' to to the server so I can pass the post_id in the request. To solve this part, I have a function that uses temporary uuid's to maintain the relationship between posts and images:
function* postProcessToOfflineQueueSaga (action) {
try {
let post = Object.assign({}, action.payload);
post.uuid = uuid();
post.uploaded = false;
const imagesArr = post.images;
imagesArr.forEach(image => {
image.uuid = uuid();
image.postUuid = post.uuid;
});
post.imageIds = imagesArr.map(image => image.uuid);
delete post.images;
yield put({ type: POST_ADD_TO_OFFLINE_QUEUE, post });
yield put({ type: IMAGE_ADD_TO_OFFLINE_QUEUE, imagesArr });
} catch (error) {
console.log(error)
}
}
Which then saves it to the app state into two arrays; posts and images. E.g.
state.offlineQueue.offlinePosts: [
...
{
id: undefined,
uuid: "4df64ee5-29ba-4347-ae30-ee3d5602eae4",
imageIds: [
"62e11ef4-01f7-4052-a3e4-6cd109392818",
"2c7065ef-fed9-457f-950a-08d4224516dd",
],
uploaded: false,
}
...
]
state.offlineQueue.offlineImages: [
...
{
id: undefined,
uuid: "62e11ef4-01f7-4052-a3e4-6cd109392818",
postId: undefined,
postUuid: "4df64ee5-29ba-4347-ae30-ee3d5602eae4",
uploaded: false,
uri: "/path/to/file/on/device",
},
{
id: undefined,
uuid: "2c7065ef-fed9-457f-950a-08d4224516dd",
postId: undefined,
postUuid: "4df64ee5-29ba-4347-ae30-ee3d5602eae4",
uploaded: false,
uri: "/path/to/file/on/device",
},
...
]
state.offlineQueue.offlineQueueShoud: 'cache' // either 'cache' or 'sync'
So how do I go about sending this data to the server? What I'm thinking is:
Check 'offlineQueueShoud' (if 'cache' don't do anything to save battery?)
If offlineQueueShoud === 'sync', first iterate through the posts array and send each post to the server and use the response so that we can set post.id and image.postId to the server generated id.
Once all posts uploaded, start uploading images one by one as we now have the right post id.
Once all posts and images uploaded, clear the list.
I've had a look at redux saga channels, is that the best way to do it? If so, how do I make it so that if offlineQueueShoud === 'cache' it doesn't eat up battery, and if the app is closed/reopened no data is lost. Apologies if I'm being a noob, I'm only young :)
P.S. am I even doing this all the right way?!