fix: hide indicator for current user

itdsntwork · Jun 16, 2021 · e42f987 · e42f987
1 parent 87f611e
commit e42f987
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 23 deletions.
diff --git a/lib/package.json b/lib/package.json
@@ -55,8 +55,8 @@
     "prettier": "^2.1.2",
     "pubnub": "^4.29.10",
     "pubnub-react": "^2.1.0",
-    "react": ">16.8.0",
-    "react-dom": ">16.8.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "rollup": "^2.32.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^3.1.8",

diff --git a/lib/src/typing-indicator/typing-indicator.tsx b/lib/src/typing-indicator/typing-indicator.tsx
@@ -8,6 +8,7 @@ import {
 } from "../state-atoms";
 import isEqual from "lodash.isequal";
 import "./typing-indicator.scss";
+import { usePubNub } from "pubnub-react";
 
 export interface TypingIndicatorProps {
   /** Put a TypingIndicator with this option enabled inside of a MessageList component to render indicators as Messages. */
@@ -19,23 +20,27 @@ export interface TypingIndicatorProps {
  * a Message that can be renderer inside of the MessageList.
  */
 export const TypingIndicator: FC<TypingIndicatorProps> = (props: TypingIndicatorProps) => {
+  const pubnub = usePubNub();
   const [theme] = useAtom(ThemeAtom);
   const [users] = useAtom(UsersMetaAtom);
   const [typingIndicators] = useAtom(CurrentChannelTypingIndicatorAtom);
   const [typingIndicatorTimeout] = useAtom(TypingIndicatorTimeoutAtom);
   const [activeUUIDs, setActiveUUIDs] = useState([]);
   const typingIndicatorsRef = useRef(typingIndicators);
+  const currentUuid = pubnub.getUUID();
 
   if (!isEqual(typingIndicatorsRef.current, typingIndicators)) {
     typingIndicatorsRef.current = typingIndicators;
   }
 
   const calculateActiveUUIDs = useCallback(() => {
     const currentActiveUUIDs = Object.keys(typingIndicators).filter(
-      (id) => Date.now() - parseInt(typingIndicators[id]) / 10000 < typingIndicatorTimeout * 1000
+      (id) =>
+        Date.now() - parseInt(typingIndicators[id]) / 10000 < typingIndicatorTimeout * 1000 ||
+        id === currentUuid
     );
     setActiveUUIDs(currentActiveUUIDs);
-  }, [typingIndicatorsRef.current]);
+  }, [currentUuid, typingIndicatorTimeout, typingIndicators]);
 
   const getIndicationString = () => {
     let indicateStr = "";

diff --git a/package-lock.json b/package-lock.json
diff --git a/samples/package-lock.json b/samples/package-lock.json
diff --git a/samples/package.json b/samples/package.json
@@ -18,7 +18,7 @@
     "typescript": "^4.1.3"
   },
   "dependencies": {
-    "@pubnub/react-chat-components": "^0.2.0",
+    "@pubnub/react-chat-components": "file:../lib/dist",
     "@types/emoji-mart": "^3.0.4",
     "emoji-mart": "^3.0.0",
     "lodash.samplesize": "^4.2.0",
@@ -33,7 +33,7 @@
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "react-app-rewired start",
+    "start": "cd ../lib && npm run build && cd ../samples && react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"