@kesha-antonov/react-native-action-cable - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

CHANGELOG.md

@@ -20,4 +20,12 @@ # react-native-action-cable Changelog
 
+### 1.1.2 (Nov 10, 2022)
+
+* `[BUGFIX]`: Fixes crash when received data is `null` [#7] (https://github.com/kesha-antonov/react-native-action-cable/issues/7)
+
+### 1.1.1 (Nov 10, 2022)
+
+* `[FEATURE]`: Updated deps
+
 ### 1.1.0 (July 2, 2020)
 
 * [BUGFIX] [#11] Fix Firefox error `Unhandled Rejection (TypeError): setting getter-only property "protocol"`.

package.json

 {
   "name": "@kesha-antonov/react-native-action-cable",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Use Rails 5+ ActionCable channels with React Native for realtime magic.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -82,3 +82,3 @@ [![npm version](https://badge.fury.io/js/action-cable-react.svg)](https://badge.fury.io/js/action-cable-react)
 
-You can combine React's lifecycle hooks `componentDidMount` and `componentWillUnmount` to subscribe and unsubscribe from channels. Or implement custom logic in your `store`.
+You can combine React's lifecycle hook `useEffect` to subscribe and unsubscribe from channels. Or implement custom logic in your `store`.
 
@@ -88,22 +88,76 @@ Here's example how you can handle events:
 ```javascript
-handleReceived = (data) => {
-  switch(data.type) {
-    'new_incoming_message': {
-       this.onNewMessage(data.message)
+function Chat ({ chatId, userId }) {
+  const [isWebsocketConnected, setIsWebsocketConnected] = useState(false)
+
+  const onNewMessage = useCallback(message => {
+    // ... ADD TO MESSAGES LIST
+  }, [])
+
+  const handleReceived = useCallback(({ type, message }) => {
+    switch(type) {
+      'new_incoming_message': {
+         onNewMessage(message)
+      }
+      ...
     }
-    ...
-  }
-}
+  }, [])
 
-handleConnected = () => {
-  if (this.state.isWebsocketConnected) return
+  const handleConnected = useCallback(() => {
+    setIsWebsocketConnected(true)
+  }, [])
 
-  this.setState({ isWebsocketConnected: true })
-}
+  const handleDisconnected = useCallback(() => {
+    setIsWebsocketConnected(false)
+  }, [])
 
-handleDisconnected = () => {
-  if (!this.state.isWebsocketConnected) return
+  const getChannelName = useCallback(() => {
+    return `chat_${chatId}_${userId}`
+  }, [chatId, userId])
 
-  this.setState({ isWebsocketConnected: false })
+  const createChannel = useCallback(() => {
+    const channel = cable.setChannel(
+      getChannelName(), // channel name to which we will pass data from Rails app with `stream_from`
+      actionCable.subscriptions.create({
+        channel: 'ChatChannel', // from Rails app app/channels/chat_channel.rb
+        chatId,
+        otherParams...
+      })
+    )
+
+    channel
+      .on( 'received', handleReceived )
+      .on( 'connected', handleConnected )
+      .on( 'disconnected', handleDisconnected )
+  }, [])
+
+  const removeChannel = useCallback(() => {
+    const channelName = getChannelName()
+
+    const channel = cable.channel(channelName)
+    if (!channel)
+      return
+
+    channel
+      .removeListener( 'received', handleReceived )
+      .removeListener( 'connected', handleConnected )
+      .removeListener( 'disconnected', handleDisconnected )
+    channel.unsubscribe()
+    delete( cable.channels[channelName] )
+  }, [])
+
+  useEffect(() => {
+    createChannel()
+
+    return () => {
+      removeChannel()
+    }
+  }, [])
+
+  return (
+    <View>
+      // ... RENDER CHAT HERE
+    </View>
+  )
 }
+
 ```
@@ -110,0 +164,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32933

increased by4.97%

Number of lines in readme file

216

increased by33.33%

No dependency changes