Update User ID

Before any data sync, we need to set or configure a user to identify the data and later know who owns the information. We recommend configuring this after your login using the updateUserId function of RookConfig like this:

const handleLogin = async () => {
  ...
  await yourLoginService(`${userID}:${password}`);
  await updateUserID(userID);
  ...
};

info

iOS Any call to upbdateUserId with a different userId will override the previous userId and reset the sync status, if you are using BackgroundSync all health data will synchronize again the next time the app is launched.

info

Android Any call to upbdateUserId with a different userId will override the previous userId and reset the sync status, if you are using Yesterday sync all health data will synchronize again the next time the app is launched.

Finally, your screen should look like this:

import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonButton,
  IonList,
  IonItem,
  IonAlert,
  IonInput,
} from '@ionic/react';
import './Home.css';
import { RookConfig } from 'capacitor-rook-sdk';
import { useEffect, useState } from 'react';

const Login: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [title, setTitle] = useState(String);
  const [message, setMessage] = useState(String);
  const [userIdToUpdate, setuserIdToUpdate] = useState(String);

  const handleUpdateUserId = async (): Promise<void> => {
    try {
      console.log('updating . . .');
      const result = await RookConfig.updateUserId({ userId: userIdToUpdate });
      console.log('updated', result);
      setMessage('User id added');
    } catch (error) {
      setMessage('User id error');
      console.log('error', error);
    }
    setTitle('User id updated');
    setIsOpen(true);
  };

  const handleGetUserId = async (): Promise<void> => {
    try {
      console.log('searching . . .');
      const result = await RookConfig.getUserId();
      console.log('user id', result.userId);
      setMessage(result.userId);
    } catch (error) {
      setMessage('no user id set');
      console.log('error', error);
    }
    setTitle('User id stored');
    setIsOpen(true);
  };

  const handleClearUserId = async (): Promise<void> => {
    try {
      const result = await RookConfig.clearUserId();
      setMessage('user id deleted');
    } catch (error) {
      setMessage('error');
      console.log('error', error);
    }
    setTitle('User Id clear');
    setIsOpen(true);
  };

  const handleEvent = (ev: Event) => {
    const value: string = (ev.target as HTMLInputElement).value;
    setuserIdToUpdate(value);
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Configuration</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Blank</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonList>
          <IonItem>
            <IonInput
              label="Enter user id"
              labelPlacement="floating"
              fill="solid"
              placeholder="Enter text"
              onIonInput={event => handleEvent(event)}
            ></IonInput>
          </IonItem>
          <IonItem>
            <IonButton onClick={handleUpdateUserId}>Add user id</IonButton>
          </IonItem>
          <IonItem>
            <IonButton onClick={handleGetUserId}>Get user id</IonButton>
          </IonItem>
          <IonItem>
            <IonButton onClick={handleClearUserId}>Clear user id</IonButton>
          </IonItem>

        <IonAlert
          isOpen={isOpen}
          header={title}
          message={message}
          buttons={['Action']}
          onDidDismiss={() => setIsOpen(false)}
        ></IonAlert>
      </IonContent>
    </IonPage>
  );
};

export default Home;