@planningcenter/chat-react-native 3.1.0-rc.0 → 3.1.0-rc.2

package/src/screens/design_system_screen.tsx

@@ -13,6 +13,7 @@ import {
   Icon,
   IconButton,
   Image,
+  Person,
   Spinner,
   Switch,
   Text,
@@ -50,6 +51,24 @@ const URL = {
   ],
 }
 
+const personAdult = {
+  id: '1',
+  type: 'Member' as const,
+  name: 'John Doe',
+  avatar: URL.avatar,
+  badges: [{ title: 'Conversation owner' }, { title: 'Leader' }],
+  child: false,
+}
+
+const personChild = {
+  id: '2',
+  type: 'Member' as const,
+  name: 'Kid McChild',
+  avatar: URL.two_avatars[1],
+  badges: [],
+  child: true,
+}
+
 const buttonPress = () => Alert.alert('Button clicked')
 
 // =================================
@@ -69,7 +88,8 @@ export function DesignSystemScreen() {
       <PressablesSection />
       <ImageIconsSection />
       <FormControlsSection />
-      <StatusComponentsSection isLast />
+      <StatusComponentsSection />
+      <MiscComponentsSection isLast />
     </ScrollView>
   )
 }
@@ -852,6 +872,22 @@ function StatusComponentsSection({ isLast }: SectionProps) {
   )
 }
 
+function MiscComponentsSection({ isLast }: SectionProps) {
+  return (
+    <CollapsableSection title="Misc components" isLast={isLast}>
+      <Group
+        title="Person"
+        description="Takes a person object (`MemberResource` type) and displays an avatar, name, and badges. If person is a child we show a special badge and faded styles. Implomentation is based on a similar Chat Web component."
+      >
+        <Column>
+          <Person person={personAdult} />
+          <Person person={personChild} />
+        </Column>
+      </Group>
+    </CollapsableSection>
+  )
+}
+
 // =================================
 // ====== Docs UI ==================
 // =================================

package/src/utils/cache/page_mutations.ts

@@ -8,12 +8,41 @@ import { ApiCollection, ResourceObject } from '../../types'
 
 /**
  * updateRecordInPagesData
- * Can be used to add as well but it's not at all efficient. It's better to use addRecordInPagesData.
+ * Updates record if found in the cache, otherwise noops.
  */
 export function updateRecordInPagesData<T extends ResourceObject>({
   data,
   record,
   processRecord = r => r,
+}: {
+  data?: { pages: ApiCollection<T>[]; pageParams: any }
+  record: T
+  processRecord?: (_next: T, _prev: T) => T
+}) {
+  if (!data) return data
+
+  const newPages = data.pages.map(page => {
+    const newData = page.data.map(message => {
+      if (message.id === record.id) {
+        return processRecord(record, message)
+      }
+      return message
+    })
+
+    return { ...page, data: newData }
+  })
+
+  return { ...data, pages: newPages }
+}
+
+/**
+ * updateOrCreateRecordInPagesData
+ * Updates record if found in the cache, otherwise inserts.
+ */
+export function updateOrCreateRecordInPagesData<T extends ResourceObject>({
+  data,
+  record,
+  processRecord = r => r,
 }: {
   data?: { pages: ApiCollection<T>[]; pageParams: any }
   record: T
@@ -35,7 +64,6 @@ export function updateRecordInPagesData<T extends ResourceObject>({
   })
 
   if (!foundRecord) {
-    // Can be used to add as well but it's not at all efficient. It's better to use addRecordInPagesData.
     // This is a fallback for when the record is not found in the cache.
     const firstPage = { ...newPages[0] }
     firstPage.data = [processRecord(record), ...firstPage.data]
@@ -52,7 +80,7 @@ export function addRecordInPagesData<T extends ResourceObject>({
 }: {
   data?: { pages: ApiCollection<T>[]; pageParams: any }
   record: T
-  processRecord?: (_next: T, _prev?: T) => T
+  processRecord?: (_next: T) => T
 }) {
   if (!data) return data
 

package/src/utils/jolt/transform_reaction_event_data_to_reaction_count_resource.ts

@@ -0,0 +1,36 @@
+import { JoltReactionEvent } from '../../types/jolt_events'
+import { ReactionCreatedEvent } from '../../types/jolt_events/reaction_events'
+import { ReactionCountResource } from '../../types/resources/reaction'
+
+interface Props {
+  data: ReactionCreatedEvent['data']['data']
+  oldData?: ReactionCountResource
+  event: JoltReactionEvent['event']
+  currentPersonId: string
+}
+
+export function transformReactionEventDataToReactionCountResource({
+  data,
+  oldData,
+  event,
+  currentPersonId,
+}: Props): ReactionCountResource {
+  let authorIds = new Set(oldData?.authorIds || [])
+  if (event === 'reaction.created') {
+    authorIds.add(data.author_id.toString())
+  } else if (event === 'reaction.destroyed') {
+    authorIds.delete(data.author_id.toString())
+  }
+
+  const mine = authorIds.has(currentPersonId.toString())
+
+  return {
+    type: 'ReactionCount',
+    id: `${data.message_sort_key}/${data.value}`,
+    value: data.value,
+    count: data.count,
+    mine: mine ? 1 : 0,
+    messageId: data.message_sort_key,
+    authorIds: Array.from(authorIds),
+  }
+}