Add state-change handling to usePresence

lib/src/hooks/use-presence.ts

@@ -1,30 +1,25 @@
-import { useState, useEffect, useCallback, useMemo } from "react";
-import { HereNowParameters, HereNowResponse } from "pubnub";
-import { usePubNub } from "pubnub-react";
-import cloneDeep from "lodash.clonedeep";
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { HereNowParameters, HereNowResponse } from 'pubnub';
+import { usePubNub } from 'pubnub-react';
+import cloneDeep from 'lodash.clonedeep';
 
-type ChannelsOccupancy = HereNowResponse["channels"];
+type ChannelsOccupancy = HereNowResponse['channels'];
 type HookReturnValue = [ChannelsOccupancy, () => Promise<void>, number, Error];
 
-export const usePresence = ({
-  channels,
-  channelGroups,
-  includeUUIDs,
-  includeState,
-}: HereNowParameters = {}): HookReturnValue => {
+export const usePresence = ({ channels, channelGroups, includeUUIDs, includeState }: HereNowParameters = {}): HookReturnValue => {
   const pubnub = usePubNub();
 
   const [presence, setPresence] = useState<ChannelsOccupancy>({});
   const [error, setError] = useState<Error>();
 
   const presenceValues = Object.values(presence);
-  const total = presenceValues.map((ch) => ch.occupancy).reduce((prev, cur) => prev + cur, 0);
+  const total = presenceValues.map(ch => ch.occupancy).reduce((prev, cur) => prev + cur, 0);
 
   const options = useMemo(() => ({ channels, channelGroups, includeUUIDs, includeState }), [
     channels,
     channelGroups,
     includeUUIDs,
-    includeState,
+    includeState
   ]);
 
   const command = useCallback(async () => {
@@ -37,37 +32,49 @@ export const usePresence = ({
   }, [pubnub, options]);
 
   const handlePresence = useCallback(
-    (event) => {
-      setPresence((presence) => {
-        const presenceClone = cloneDeep(presence);
+    event => {
+      setPresence(pres => {
+        const presenceClone = cloneDeep(pres);
         if (!presenceClone[event.channel]) presenceClone[event.channel] = {};
         const channel = presenceClone[event.channel];
 
-        if (event.action === "join") {
-          if (!channel.hasOwnProperty("occupants")) channel.occupants = [];
+        if (event.action === 'join') {
+          if (!Object.prototype.hasOwnProperty.call(channel, 'occupants')) channel.occupants = [];
           channel.occupancy = event.occupancy;
 
           if (
             options.includeUUIDs !== false &&
-            channel.hasOwnProperty("occupants") &&
-            !channel.occupants.find((u) => u.uuid == event.uuid)
+            Object.prototype.hasOwnProperty.call(channel, 'occupants') &&
+            !channel.occupants.find(u => u.uuid === event.uuid)
           ) {
             const { state, uuid } = event;
             channel.occupants.push({ state, uuid });
           }
         }
 
-        if (["leave", "timeout"].includes(event.action)) {
+        if (['leave', 'timeout'].includes(event.action)) {
           channel.occupancy = event.occupancy;
 
           if (
             options.includeUUIDs !== false &&
-            channel.hasOwnProperty("occupants") &&
-            channel.occupants.find((u) => u.uuid == event.uuid)
+            Object.prototype.hasOwnProperty.call(channel, 'occupants') &&
+            channel.occupants.find(u => u.uuid === event.uuid)
           ) {
-            presenceClone[event.channel].occupants = channel.occupants.filter(
-              (u) => u.uuid !== event.uuid
-            );
+            presenceClone[event.channel].occupants = channel.occupants.filter(u => u.uuid !== event.uuid);
+          }
+        }
+
+        if (event.action === 'state-change') {
+          channel.occupancy = event.occupancy;
+          if (
+            options.includeUUIDs !== false &&
+            Object.prototype.hasOwnProperty.call(channel, 'occupants') &&
+            channel.occupants.find(u => u.uuid === event.uuid)
+          ) {
+            const { state, uuid } = event;
+            const updatedUser = channel.occupants.find(u => u.uuid === uuid);
+            updatedUser.state = state;
+            channel.occupants[uuid] = updatedUser;
           }
         }