Update library interface to be easier to use

README.md

@@ -17,34 +17,33 @@ Take inspiration from the [example](./example/ios/LiveActivityDynamicIsland/Live
 ## Usage
 
 ```js
-import {
-startActivity,
-listAllActivities,
-endActivity,
-updateActivity,
-} from 'react-native-live-activity';
+import LiveActivity from 'react-native-live-activity';
 
-// Please be careful to use the same interface as the one you defined in your Swift module.
-interface LiveActivityParams {
+// Please be careful to use the same type as the one you defined in your Swift module.
+type LiveActivityParams = {
   status: string;
   driverName: string;
   expectedDeliveryTime: string;
 }
 
-await startActivity({
+const liveActivity = new LiveActivity<LiveActivityParams>()
+
+const activity = await liveActivity.startActivity({
   status: "Packing",
   driveName: "John",
   expectedDeliveryTime: "12 PM"
 })
-await updateActivity(activity.id, {
+
+await liveActivity.updateActivity(activity.id, {
   status: "Driving",
   driveName: "John",
   expectedDeliveryTime: "12 PM"
-});
-await endActivity(activity.id);
+})
 
-const [activities, setActivities] = React.useState<any[]>([]);
-listAllActivities().then(setActivities);
+await liveActivity.endActivity(activity.id)
+
+const [activities, setActivities] = React.useState<any[]>([])
+liveActivity.listAllActivities().then(setActivities)
 
 ```
 
@@ -64,11 +63,8 @@ $ open ./example/ios/LiveActivityExample.xcworkspace
 
 After that build the xCode project.
 
-
-
 https://user-images.githubusercontent.com/3778297/192741742-9d3a9bc5-e26a-4197-b152-5f60796736eb.mp4
 
-
 ## License
 
 MIT

example/src/ActivitiesList.tsx

@@ -34,7 +34,7 @@ const ActivitiesList = ({
         </View>
       );
     },
-    [activities]
+    [onPressEditActivity, onPressEndActivity]
   );
 
   return (

example/src/App.tsx

@@ -1,20 +1,17 @@
 import * as React from 'react';
 
 import { StyleSheet, View, Text, SafeAreaView, Button } from 'react-native';
-import {
-  startActivity,
-  listAllActivities,
-  endActivity,
-  updateActivity,
-} from 'react-native-live-activity';
 import ActivitiesList from './ActivitiesList';
 import Row from './Row';
+import LiveActivity from 'react-native-live-activity';
 
-interface StartLiveActivityParams {
+type StartLiveActivityParams = {
   status: string;
   driverName: string;
   expectedDeliveryTime: string;
-}
+};
+
+const liveActivity = new LiveActivity<StartLiveActivityParams>();
 
 export default function App() {
   const [status, setStatus] = React.useState<string>('Packing');
@@ -41,24 +38,24 @@ export default function App() {
   }, [activity]);
 
   React.useEffect(() => {
-    listAllActivities<StartLiveActivityParams>().then(setActivities);
+    liveActivity.listAllActivities().then(setActivities);
   }, [setActivities]);
 
   const onPressCreate = React.useCallback(() => {
-    startActivity<StartLiveActivityParams>({
-      status,
-      driverName,
-      expectedDeliveryTime,
-    }).then(() =>
-      listAllActivities<StartLiveActivityParams>().then(setActivities)
-    );
+    liveActivity
+      .startActivity({
+        status,
+        driverName,
+        expectedDeliveryTime,
+      })
+      .then(() => liveActivity.listAllActivities().then(setActivities));
   }, [status, driverName, expectedDeliveryTime]);
 
   const onPressEdit = React.useCallback(() => {
     if (!activity?.id) {
       return;
     }
-    updateActivity<StartLiveActivityParams>(activity.id, {
+    liveActivity.updateActivity(activity.id, {
       status,
       driverName,
       expectedDeliveryTime,
@@ -69,21 +66,18 @@ export default function App() {
   const onPressEndActivity = React.useCallback(
     (item) => {
       return () => {
-        endActivity(item.id);
+        liveActivity.endActivity(item.id);
         setActivities(activities.filter((value) => value.id !== item.id));
       };
     },
     [activities]
   );
 
-  const onPressEditActivity = React.useCallback(
-    (item) => {
-      return () => {
-        setActivity(item);
-      };
-    },
-    [activities]
-  );
+  const onPressEditActivity = React.useCallback((item) => {
+    return () => {
+      setActivity(item);
+    };
+  }, []);
 
   return (
     <SafeAreaView>
@@ -98,8 +92,8 @@ export default function App() {
         />
       </View>
       <Button
-        title={!!activity ? 'Update activity' : 'Create activity'}
-        onPress={!!activity ? onPressEdit : onPressCreate}
+        title={activity ? 'Update activity' : 'Create activity'}
+        onPress={activity ? onPressEdit : onPressCreate}
       />
 
       <ActivitiesList

src/index.tsx

@@ -6,7 +6,7 @@ const LINKING_ERROR =
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo managed workflow\n';
 
-const LiveActivity = NativeModules.LiveActivity
+const LiveActivity_ = NativeModules.LiveActivity
   ? NativeModules.LiveActivity
   : new Proxy(
       {},
@@ -17,43 +17,38 @@ const LiveActivity = NativeModules.LiveActivity
       }
     );
 
-export async function startActivity<T extends Record<string, any>>(
-  data: T
-): Promise<string> {
-  const dataString = JSON.stringify(data);
-  return LiveActivity.startActivity(dataString);
-}
+export default class LiveActivity<T extends unknown> {
+  startActivity(data: T): Promise<string | null> {
+    const dataString = JSON.stringify(data);
+    return LiveActivity_.startActivity(dataString);
+  }
 
-export async function listAllActivities<
-  T extends Record<string, any>
->(): Promise<
-  {
-    id: string;
-    data: T;
-  }[]
-> {
-  return LiveActivity.listAllActivities()
-    .then((activities: { id: string; data: string }[]) => {
-      return activities?.map((activity) => {
-        return {
-          id: activity.id,
-          data: JSON.parse(activity.data) as T,
-        };
+  async updateActivity(id: string, data: T) {
+    const dataString = JSON.stringify(data);
+    return LiveActivity_.updateActivity(id, dataString);
+  }
+
+  endActivity(id: string) {
+    return LiveActivity_.endActivity(id);
+  }
+
+  async listAllActivities(): Promise<
+    {
+      id: string;
+      data: T;
+    }[]
+  > {
+    return LiveActivity_.listAllActivities()
+      .then((activities: { id: string; data: string }[]) => {
+        return activities?.map((activity) => {
+          return {
+            id: activity.id,
+            data: JSON.parse(activity.data) as T,
+          };
+        });
+      })
+      .catch((err: Error) => {
+        console.error(err);
       });
-    })
-    .catch((err: Error) => {
-      console.error(err);
-    });
-}
-
-export function endActivity(id: string) {
-  return LiveActivity.endActivity(id);
-}
-
-export async function updateActivity<T extends Record<string, any>>(
-  id: string,
-  data: T
-) {
-  const dataString = JSON.stringify(data);
-  return LiveActivity.updateActivity(id, dataString);
+  }
 }