fix: ensure empty tags field returns null when empty

sanity-io · Jan 7, 2021 · 9fa83c0 · 9fa83c0
1 parent a93ad62
commit 9fa83c0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/src/components/DialogDetails/index.tsx b/src/components/DialogDetails/index.tsx
@@ -1,7 +1,7 @@
 import {yupResolver} from '@hookform/resolvers/yup'
 import {MutationEvent} from '@sanity/client'
 import {Box, Button, Card, Dialog, Flex, Stack, Tab, TabList, TabPanel, Text} from '@sanity/ui'
-import {Asset, DialogDetails} from '@types'
+import {Asset, DialogDetails, ReactSelectOption} from '@types'
 import groq from 'groq'
 import client from 'part:@sanity/base/client'
 import React, {FC, ReactNode, useEffect, useRef, useState} from 'react'
@@ -78,7 +78,7 @@ const DialogDetails: FC<Props> = (props: Props) => {
 
   const currentAsset = item ? asset : assetSnapshot
 
-  const allTagOptions = tagIds.reduce((acc: {label: string; value: string}[], id) => {
+  const allTagOptions = tagIds.reduce((acc: ReactSelectOption[], id) => {
     const tag = tagsByIds[id]?.tag
 
     if (tag) {
@@ -92,8 +92,8 @@ const DialogDetails: FC<Props> = (props: Props) => {
   }, [])
 
   // Map tag references to react-select options, skip over items with nullish labels or values
-  const generateTagOptions = (asset?: Asset) => {
-    return asset?.tags?.reduce((acc: {label: string; value: string}[], v) => {
+  const generateTagOptions = (asset?: Asset): ReactSelectOption[] | null => {
+    const tags = asset?.tags?.reduce((acc: ReactSelectOption[], v) => {
       const tag = tagsByIds[v._ref]?.tag
       if (tag) {
         acc.push({
@@ -103,13 +103,19 @@ const DialogDetails: FC<Props> = (props: Props) => {
       }
       return acc
     }, [])
+
+    if (tags && tags?.length > 0) {
+      return tags
+    }
+
+    return null
   }
 
   const generateDefaultValues = (asset?: Asset) => ({
     altText: asset?.altText || '',
     description: asset?.description || '',
     originalFilename: asset ? getFilenameWithoutExtension(asset) : undefined,
-    tags: generateTagOptions(asset) || null,
+    tags: generateTagOptions(asset),
     title: asset?.title || ''
   })
 
@@ -182,7 +188,7 @@ const DialogDetails: FC<Props> = (props: Props) => {
           originalFilename: `${sanitizedFormData.originalFilename}.${asset.extension}`,
           // Map tags to sanity references
           tags:
-            sanitizedFormData?.tags?.map((tag: {label: string; value: string}) => ({
+            sanitizedFormData?.tags?.map((tag: ReactSelectOption) => ({
               _ref: tag.value,
               _type: 'reference',
               _weak: true

diff --git a/src/components/FormFieldInputTags/index.tsx b/src/components/FormFieldInputTags/index.tsx
@@ -5,6 +5,7 @@ import CreatableSelect from 'react-select/creatable'
 
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {reactSelectComponents, reactSelectStyles} from '../../styled/react-select/creatable'
+import {ReactSelectOption} from '../../types'
 import FormFieldInputLabel from '../FormFieldInputLabel'
 
 type Props = {
@@ -20,7 +21,7 @@ type Props = {
     value: string
   }[]
   placeholder?: string
-  value?: {label: string; value: string}[]
+  value?: ReactSelectOption[] | null
 }
 
 const FormFieldInputTags: FC<Props> = (props: Props) => {

diff --git a/src/components/SearchFacetSearchable/index.tsx b/src/components/SearchFacetSearchable/index.tsx
@@ -23,7 +23,7 @@ const SearchFacetSearchable: FC<Props> = (props: Props) => {
   const tagIds = useTypedSelector(state => state.tags.allIds)
   const tagsByIds = useTypedSelector(state => state.tags.byIds)
 
-  const allTagOptions = tagIds.reduce((acc: {label: string; value: string}[], id) => {
+  const allTagOptions = tagIds.reduce((acc: ReactSelectOption[], id) => {
     const tag = tagsByIds[id]?.tag
 
     if (tag) {