Manual Sync

If you want to sync data by clicking a button, you can do so. The entire file should look like this

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState } from "react";
import { Button } from "react-native";
import { Platform, StyleSheet, Text, View } from "react-native";
import { useRookSummaries } from "react-native-rook-sdk";

export const ManualSync = () => {
  const [syncing, setSyncing] = useState(false);

  const { syncSleepSummary, syncBodySummary, syncPhysicalSummary } =
    useRookSummaries();

  const handleManualSync = async () => {
    try {
      setSyncing(true);

      const today = new Date();
      today.setDate(today.getDate() - 1);

      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, "0");
      const day = String(today.getDate()).padStart(2, "0");

      // It's not necessary to sync the events individually because these are included into
      // the summaries
      const [sleepResult, bodyResult, physicalResult] = await Promise.all([
        syncSleepSummary(),
        syncBodySummary(),
        syncPhysicalSummary(),
      ]);

      console.log({ sleepResult, bodyResult, physicalResult });
    } catch (error) {
      console.log(error);
    } finally {
      setSyncing(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.message}>Manual Sync</Text>
      <Button
        title={syncing ? "Syncing" : "Manual Sync"}
        disabled={syncing}
        onPress={handleManualSync}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 20,
  },
  message: {
    fontSize: 18,
    marginBottom: 20,
    textAlign: "center",
    color: "white",
  },
  extra: {
    marginTop: 50,
  },
});