fix: Data syncing issue with virtualized lists (#342)

pluralsh · Apr 12, 2023 · 307acc8 · 307acc8
1 parent c8c372b
commit 307acc8
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 6 deletions.
diff --git a/assets/src/components/account/groups/GroupsList.tsx b/assets/src/components/account/groups/GroupsList.tsx
@@ -31,7 +31,10 @@ export function GroupsList({ q }: any) {
           setListRef={setListRef}
           items={edges}
           mapper={({ node: group }, { next }) => (
-            <ListItem last={!next.node}>
+            <ListItem
+              key={group.id}
+              last={!next.node}
+            >
               <Group
                 group={group}
                 q={q}

diff --git a/assets/src/components/account/roles/RolesList.tsx b/assets/src/components/account/roles/RolesList.tsx
@@ -33,7 +33,10 @@ export default function RolesList({ q }: any) {
           setListRef={setListRef}
           items={edges}
           mapper={({ node: role }, { next }) => (
-            <ListItem last={!next.node}>
+            <ListItem
+              key={role.id}
+              last={!next.node}
+            >
               <Role
                 role={role}
                 q={q}

diff --git a/assets/src/components/account/users/UsersList.tsx b/assets/src/components/account/users/UsersList.tsx
@@ -50,7 +50,10 @@ export default function UsersList() {
             setListRef={setListRef}
             items={edges}
             mapper={({ node: user }, { next }) => (
-              <ListItem last={!next.node}>
+              <ListItem
+                key={user.id}
+                last={!next.node}
+              >
                 <User user={user} />
               </ListItem>
             )}

diff --git a/assets/src/components/account/webhooks/WebhooksList.tsx b/assets/src/components/account/webhooks/WebhooksList.tsx
@@ -28,7 +28,12 @@ export default function WebhooksList() {
         listRef={listRef}
         setListRef={setListRef}
         items={edges}
-        mapper={({ node }) => <Webhook hook={node} />}
+        mapper={({ node }) => (
+          <Webhook
+            key={node.id}
+            hook={node}
+          />
+        )}
         loading={loading}
         loadNextPage={() =>
           pageInfo.hasNextPage &&

diff --git a/assets/src/components/apps/app/logs/LogContent.tsx b/assets/src/components/apps/app/logs/LogContent.tsx
@@ -106,6 +106,7 @@ export default function LogContent({
         items={lines}
         mapper={({ line, level, stream }, o) => (
           <LogLine
+            key={line.timestamp}
             line={line}
             level={level}
             open={open === o}

diff --git a/assets/src/components/apps/app/logs/LogLine.tsx b/assets/src/components/apps/app/logs/LogLine.tsx
@@ -60,7 +60,12 @@ export default function LogLine({
       >
         {ts(timestamp)}
         {blocks.map((json) => (
-          <Span {...textStyle(json)}>&nbsp;{json.content}</Span>
+          <Span
+            key={json.content}
+            {...textStyle(json)}
+          >
+            &nbsp;{json.content}
+          </Span>
         ))}
       </Flex>
       <Flex

diff --git a/assets/src/components/incidents/Incident.jsx b/assets/src/components/incidents/Incident.jsx
@@ -305,9 +305,13 @@ export function Messages({ incident, loading, fetchMore, subscribeToMore }) {
       items={[...edges, 'end']}
       mapper={(e, { next, prev }, props) =>
         e === 'end' ? (
-          <LastMessage date={prev.node.insertedAt} />
+          <LastMessage
+            key={e.node.id}
+            date={prev.node.insertedAt}
+          />
         ) : (
           <Message
+            key={e.node.id}
             message={e.node}
             next={next.node}
             prev={prev.node}
@@ -371,6 +375,7 @@ function Files({ incident, fetchMore }) {
         emptyState={<NoFiles />}
         mapper={({ node }, { node: next }) => (
           <FileEntry
+            key={node.id}
             file={node}
             next={next}
           />