feat(contentful-apps): Team member - Editor app

apps/contentful-apps/components/lists/ContentfulField.tsx → apps/contentful-apps/components/editors/ContentfulField.tsx

@@ -5,14 +5,16 @@ import { Box, FormControl, Text } from '@contentful/f36-components'
 
 import { mapLocalesToFieldApis } from './utils'
 
-export const ContentfulField = (props: {
+export interface ContentfulFieldProps {
   sdk: EditorExtensionSDK
   localeToFieldMapping: Record<string, ReturnType<typeof mapLocalesToFieldApis>>
-  fieldID: keyof typeof props.localeToFieldMapping
+  fieldID: keyof ContentfulFieldProps['localeToFieldMapping']
   displayName: string
   widgetId?: string
   helpText?: string
-}) => {
+}
+
+export const ContentfulField = (props: ContentfulFieldProps) => {
   const availableLocales = useMemo(() => {
     const validLocales = props.sdk.locales.available.filter(
       (locale) => props.localeToFieldMapping[props.fieldID]?.[locale],

apps/contentful-apps/components/editors/TeamMemberEditor/TeamMemberEditor.tsx

@@ -0,0 +1,127 @@
+import { useEffect, useMemo, useState } from 'react'
+import type { EntryProps, KeyValueMap } from 'contentful-management'
+import dynamic from 'next/dynamic'
+import type { EditorExtensionSDK } from '@contentful/app-sdk'
+import { Box } from '@contentful/f36-components'
+import { useCMA, useSDK } from '@contentful/react-apps-toolkit'
+
+import { mapLocalesToFieldApis } from '../utils'
+import { TeamMemberFilterTagsField } from './TeamMemberFilterTagsField'
+
+const ContentfulField = dynamic(
+  () =>
+    // Dynamically import via client side rendering since the @contentful/default-field-editors package accesses the window and navigator global objects
+    import('../ContentfulField').then(({ ContentfulField }) => ContentfulField),
+  {
+    ssr: false,
+  },
+)
+
+const createField = (name: string, sdk: EditorExtensionSDK) => {
+  return mapLocalesToFieldApis(sdk.entry.fields[name].locales, sdk, name)
+}
+
+const createLocaleToFieldMapping = (sdk: EditorExtensionSDK) => {
+  return {
+    name: createField('name', sdk),
+    title: createField('title', sdk),
+    image: createField('mynd', sdk),
+    imageOnSelect: createField('imageOnSelect', sdk),
+    filterTags: createField('filterTags', sdk),
+    email: createField('email', sdk),
+    phone: createField('phone', sdk),
+    intro: createField('intro', sdk),
+  }
+}
+
+export const TeamMemberEditor = () => {
+  const sdk = useSDK<EditorExtensionSDK>()
+  const cma = useCMA()
+
+  const localeToFieldMapping = useMemo(() => {
+    return createLocaleToFieldMapping(sdk)
+  }, [sdk])
+
+  const [teamList, setTeamList] = useState<EntryProps<KeyValueMap>>()
+
+  useEffect(() => {
+    const fetchTeamList = async () => {
+      const teamLists = await cma.entry.getMany({
+        query: {
+          content_type: 'teamList',
+          links_to_entry: sdk.entry.getSys().id,
+        },
+      })
+      if (teamLists.items.length > 0) setTeamList(teamLists.items[0])
+    }
+
+    fetchTeamList()
+  }, [cma.entry, sdk.entry])
+
+  return (
+    <Box
+      paddingLeft="spacingS"
+      paddingRight="spacingS"
+      paddingTop="spacingL"
+      paddingBottom="spacingL"
+      style={{
+        display: 'flex',
+        flexFlow: 'column nowrap',
+        gap: '16px',
+        margin: '0 auto',
+        maxWidth: '768px',
+      }}
+    >
+      <ContentfulField
+        displayName="Name"
+        fieldID="name"
+        localeToFieldMapping={localeToFieldMapping}
+        sdk={sdk}
+      />
+      <ContentfulField
+        displayName="Title"
+        fieldID="title"
+        localeToFieldMapping={localeToFieldMapping}
+        sdk={sdk}
+      />
+      <ContentfulField
+        displayName="Image"
+        fieldID="image"
+        localeToFieldMapping={localeToFieldMapping}
+        sdk={sdk}
+        widgetId="assetLinkEditor"
+      />
+      <ContentfulField
+        displayName="Image on select"
+        fieldID="imageOnSelect"
+        localeToFieldMapping={localeToFieldMapping}
+        sdk={sdk}
+        widgetId="assetLinkEditor"
+      />
+      {teamList?.fields?.variant?.[sdk.locales.default] === 'accordion' && (
+        <Box>
+          <ContentfulField
+            displayName="Email"
+            fieldID="email"
+            localeToFieldMapping={localeToFieldMapping}
+            sdk={sdk}
+          />
+          <ContentfulField
+            displayName="Phone"
+            fieldID="phone"
+            localeToFieldMapping={localeToFieldMapping}
+            sdk={sdk}
+          />
+          <ContentfulField
+            displayName="Free text"
+            fieldID="intro"
+            localeToFieldMapping={localeToFieldMapping}
+            sdk={sdk}
+            widgetId="richTextEditor"
+          />
+        </Box>
+      )}
+      <TeamMemberFilterTagsField sdk={sdk} />
+    </Box>
+  )
+}

apps/contentful-apps/components/editors/TeamMemberEditor/TeamMemberFilterTagsField.tsx

@@ -0,0 +1,189 @@
+import { useEffect, useState } from 'react'
+import { useDebounce } from 'react-use'
+import {
+  CollectionProp,
+  EntryProps,
+  KeyValueMap,
+  QueryOptions,
+  SysLink,
+} from 'contentful-management'
+import type { CMAClient, EditorExtensionSDK } from '@contentful/app-sdk'
+import { Checkbox, Spinner, Stack, Text } from '@contentful/f36-components'
+import { useCMA } from '@contentful/react-apps-toolkit'
+
+import { sortAlpha } from '@island.is/shared/utils'
+
+const DEBOUNCE_TIME = 500
+
+const fetchAll = async (cma: CMAClient, query: QueryOptions) => {
+  let response: CollectionProp<EntryProps<KeyValueMap>> | null = null
+  const items: EntryProps<KeyValueMap>[] = []
+  let limit = 100
+
+  while ((response === null || items.length < response.total) && limit > 0) {
+    try {
+      response = await cma.entry.getMany({
+        query: {
+          ...query,
+          limit,
+          skip: items.length,
+        },
+      })
+      items.push(...response.items)
+    } catch (error) {
+      const isResponseTooBig = (error?.message as string)
+        ?.toLowerCase()
+        ?.includes('response size too big')
+
+      if (isResponseTooBig) limit = Math.floor(limit / 2)
+      else throw error
+    }
+  }
+
+  return items
+}
+
+interface TeamMemberFilterTagsField {
+  sdk: EditorExtensionSDK
+}
+
+export const TeamMemberFilterTagsField = ({
+  sdk,
+}: TeamMemberFilterTagsField) => {
+  const cma = useCMA()
+  const [isLoading, setIsLoading] = useState(true)
+
+  const [filterTagSysLinks, setFilterTagSysLinks] = useState<SysLink[]>(
+    sdk.entry.fields['filterTags']?.getValue() ?? [],
+  )
+
+  const [tagGroups, setTagGroups] = useState<
+    {
+      tagGroup: EntryProps<KeyValueMap>
+      tags: EntryProps<KeyValueMap>[]
+    }[]
+  >([])
+
+  useEffect(() => {
+    const fetchTeamList = async () => {
+      try {
+        const teamListResponse = await cma.entry.getMany({
+          query: {
+            links_to_entry: sdk.entry.getSys().id,
+            content_type: 'teamList',
+          },
+        })
+
+        if (teamListResponse.items.length === 0) {
+          setIsLoading(false)
+          return
+        }
+
+        const tagGroupSysLinks: SysLink[] =
+          teamListResponse.items[0].fields.filterGroups?.[
+            sdk.locales.default
+          ] ?? []
+
+        const promises = tagGroupSysLinks.map(async (tagGroupSysLink) => {
+          const [tagGroup, tags] = await Promise.all([
+            cma.entry.get({
+              entryId: tagGroupSysLink.sys.id,
+            }),
+            fetchAll(cma, {
+              links_to_entry: tagGroupSysLink.sys.id,
+              content_type: 'genericTag',
+            }),
+          ])
+
+          tags.sort((a, b) => {
+            return sortAlpha(sdk.locales.default)(
+              a.fields.title,
+              b.fields.title,
+            )
+          })
+
+          return { tagGroup, tags }
+        })
+
+        setTagGroups(await Promise.all(promises))
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchTeamList()
+  }, [cma, sdk.entry, sdk.locales.default, setTagGroups])
+
+  useDebounce(
+    () => {
+      sdk.entry.fields['filterTags']?.setValue(filterTagSysLinks)
+    },
+    DEBOUNCE_TIME,
+    [filterTagSysLinks],
+  )
+
+  return (
+    <>
+      {isLoading && <Spinner />}
+
+      {!isLoading && (
+        <Stack
+          flexDirection="column"
+          alignItems="flex-start"
+          spacing="spacing2Xl"
+        >
+          {tagGroups.map(({ tagGroup, tags }) => {
+            return (
+              <Stack
+                key={tagGroup.sys.id}
+                flexDirection="column"
+                alignItems="flex-start"
+              >
+                <Text fontSize="fontSizeL" fontWeight="fontWeightDemiBold">
+                  {tagGroup.fields.title[sdk.locales.default]}
+                </Text>
+                <Stack flexDirection="column" alignItems="flex-start">
+                  {tags.map((tag) => {
+                    const isChecked = filterTagSysLinks.some(
+                      (filterTagSysLink) =>
+                        filterTagSysLink.sys.id === tag.sys.id,
+                    )
+                    return (
+                      <Checkbox
+                        key={tag.sys.id}
+                        isChecked={isChecked}
+                        onChange={() => {
+                          setFilterTagSysLinks((prev) => {
+                            const alreadyExists = prev.some(
+                              (filterTagSysLink) =>
+                                filterTagSysLink.sys.id === tag.sys.id,
+                            )
+                            if (alreadyExists) {
+                              return prev.filter(
+                                (filterTagSysLink) =>
+                                  filterTagSysLink.sys.id !== tag.sys.id,
+                              )
+                            }
+                            return prev.concat({
+                              sys: {
+                                id: tag.sys.id,
+                                type: 'Link',
+                                linkType: 'Entry',
+                              },
+                            })
+                          })
+                        }}
+                      >
+                        {tag.fields.title[sdk.locales.default]}
+                      </Checkbox>
+                    )
+                  })}
+                </Stack>
+              </Stack>
+            )
+          })}
+        </Stack>
+      )}
+    </>
+  )
+}

apps/contentful-apps/components/lists/GenericListEditor/GenericListEditor.tsx → apps/contentful-apps/components/editors/lists/GenericListEditor/GenericListEditor.tsx

@@ -17,7 +17,7 @@ import {
 import { PlusIcon } from '@contentful/f36-icons'
 import { useCMA, useSDK } from '@contentful/react-apps-toolkit'
 
-import { mapLocalesToFieldApis } from '../utils'
+import { mapLocalesToFieldApis } from '../../utils'
 
 const SEARCH_DEBOUNCE_TIME_IN_MS = 300
 const LIST_ITEM_CONTENT_TYPE_ID = 'genericListItem'
@@ -46,7 +46,9 @@ const createLocaleToFieldMapping = (sdk: EditorExtensionSDK) => {
 const ContentfulField = dynamic(
   () =>
     // Dynamically import via client side rendering since the @contentful/default-field-editors package accesses the window and navigator global objects
-    import('../ContentfulField').then(({ ContentfulField }) => ContentfulField),
+    import('../../ContentfulField').then(
+      ({ ContentfulField }) => ContentfulField,
+    ),
   {
     ssr: false,
   },

apps/contentful-apps/components/lists/GenericListItemEditor/GenericListItemEditor.tsx → apps/contentful-apps/components/editors/lists/GenericListItemEditor/GenericListItemEditor.tsx

@@ -4,7 +4,7 @@ import { EditorExtensionSDK } from '@contentful/app-sdk'
 import { Box } from '@contentful/f36-components'
 import { useSDK } from '@contentful/react-apps-toolkit'
 
-import { mapLocalesToFieldApis } from '../utils'
+import { mapLocalesToFieldApis } from '../../utils'
 
 const createLocaleToFieldMapping = (sdk: EditorExtensionSDK) => {
   return {
@@ -26,7 +26,9 @@ const createLocaleToFieldMapping = (sdk: EditorExtensionSDK) => {
 const ContentfulField = dynamic(
   () =>
     // Dynamically import via client side rendering since the @contentful/default-field-editors package accesses the window and navigator global objects
-    import('../ContentfulField').then(({ ContentfulField }) => ContentfulField),
+    import('../../ContentfulField').then(
+      ({ ContentfulField }) => ContentfulField,
+    ),
   {
     ssr: false,
   },

apps/contentful-apps/pages/editors/generic-list-editor.ts

@@ -1,3 +1,3 @@
-import { GenericListEditor } from '../../components/lists/GenericListEditor/GenericListEditor'
+import { GenericListEditor } from '../../components/editors/lists/GenericListEditor/GenericListEditor'
 
 export default GenericListEditor

apps/contentful-apps/pages/editors/generic-list-item-editor.ts

@@ -1,3 +1,3 @@
-import { GenericListItemEditor } from '../../components/lists/GenericListItemEditor/GenericListItemEditor'
+import { GenericListItemEditor } from '../../components/editors/lists/GenericListItemEditor/GenericListItemEditor'
 
 export default GenericListItemEditor

apps/contentful-apps/pages/editors/team-member-editor.ts

@@ -0,0 +1,3 @@
+import { TeamMemberEditor } from '../../components/editors/TeamMemberEditor/TeamMemberEditor'
+
+export default TeamMemberEditor