@seamly/web-ui 20.5.0 → 20.6.0

package/src/javascripts/ui/components/conversation/conversation.js

@@ -13,6 +13,34 @@ import Event from './event/event'
 import Loader from './loader'
 import ComponentFilter from './component-filter'
 
+const Events = () => {
+  const events = useEvents()
+
+  let prevParticipant = null
+  return events.map((event) => {
+    const { type, payload } = event
+    const { participant, fromClient } = payload
+    let participantChanged = false
+    if (type !== 'participant') {
+      const currentParticipant = fromClient
+        ? 'seamly-client-participant'
+        : participant
+      if (event.type !== 'info' && prevParticipant !== currentParticipant) {
+        participantChanged = true
+      }
+      prevParticipant = currentParticipant
+    }
+
+    return (
+      <Event
+        key={event.payload.key || event.payload.id}
+        event={event}
+        newParticipant={participantChanged}
+      />
+    )
+  })
+}
+
 const Conversation = () => {
   const { t } = useI18n()
   const chatBodyContainer = useRef(null)
@@ -30,31 +58,6 @@ const Conversation = () => {
     }
   }, [events, isLoading, isOpen, loadedImageEventIds])
 
-  const renderEvents = () => {
-    let prevParticipant = null
-    return events.map((event) => {
-      const { type, payload } = event
-      const { participant, fromClient } = payload
-      let participantChanged = false
-      if (type !== 'participant') {
-        const currentParticipant = fromClient
-          ? 'seamly-client-participant'
-          : participant
-        if (event.type !== 'info' && prevParticipant !== currentParticipant) {
-          participantChanged = true
-        }
-        prevParticipant = currentParticipant
-      }
-      return (
-        <Event
-          key={event.payload.id}
-          event={event}
-          newParticipant={participantChanged}
-        />
-      )
-    })
-  }
-
   const onClickHandler = (e) => {
     e.preventDefault()
     focusSkiplinkTarget()
@@ -75,7 +78,9 @@ const Conversation = () => {
         <div className={className('conversation__container')}>
           <PrivacyDisclaimer />
           <ol className={className('conversation')}>
-            <ComponentFilter>{renderEvents()}</ComponentFilter>
+            <ComponentFilter>
+              <Events />
+            </ComponentFilter>
             {isLoading && <Loader />}
           </ol>
         </div>

package/src/javascripts/ui/utils/seamly-utils.js

@@ -1,3 +1,4 @@
+import { randomId } from 'lib/id'
 import { getTimeFromSeconds } from './general-utils'
 
 export const eventTypes = {
@@ -355,6 +356,8 @@ export const seamlyStateReducer = (state, action) => {
                   ? readStates.read
                   : readStates.received,
               }),
+              // We add a randomid to use as key for mapping of Events to avoid rerendering
+              key: randomId(),
               ...payload,
             },
           },

package/webpack/parts/dev-server.js

@@ -1,4 +1,6 @@
-module.exports = (env, argv, { PUBLIC_PATH }) => ({
+const path = require('path')
+
+module.exports = (env, argv, { PUBLIC_PATH, SRC_ROOT }) => ({
   devtool: 'eval-source-map',
   devServer: {
     headers: { 'Access-Control-Allow-Origin': '*' },
@@ -9,4 +11,11 @@ module.exports = (env, argv, { PUBLIC_PATH }) => ({
     allowedHosts: 'all',
     hot: true,
   },
+  resolve: {
+    alias: {
+      api: path.resolve(SRC_ROOT, 'javascripts/api'),
+      domains: path.resolve(SRC_ROOT, 'javascripts/domains'),
+      ui: path.resolve(SRC_ROOT, 'javascripts/ui'),
+    },
+  },
 })