sanity-plugin-media 2.0.6 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "sanity",
@@ -58,6 +58,7 @@
     "@reduxjs/toolkit": "^1.9.0",
     "@sanity/incompatible-plugin": "^1.0.4",
     "@sanity/ui": "^1.7.0",
+    "@sanity/uuid": "^3.0.1",
     "@tanem/react-nprogress": "^5.0.0",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.27.0",

package/src/components/SearchFacet/index.tsx

@@ -1,6 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {Box, Flex, Label, Text} from '@sanity/ui'
-import {SearchFacetInputProps} from '@types'
+import {SearchFacetInputProps, WithId} from '@types'
 import React, {ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
 import styled from 'styled-components'
@@ -8,7 +8,7 @@ import {searchActions} from '../../modules/search'
 
 type Props = {
   children: ReactNode
-  facet: SearchFacetInputProps
+  facet: WithId<SearchFacetInputProps>
 }
 
 const Container = styled(Box)`
@@ -23,7 +23,7 @@ const SearchFacet = (props: Props) => {
   const dispatch = useDispatch()
 
   const handleClose = () => {
-    dispatch(searchActions.facetsRemove({facetName: facet.name}))
+    dispatch(searchActions.facetsRemoveById({facetId: facet.id}))
   }
 
   return (

package/src/components/SearchFacetNumber/index.tsx

@@ -3,7 +3,8 @@ import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
 import {
   SearchFacetInputNumberModifier,
   SearchFacetInputNumberProps,
-  SearchFacetOperatorType
+  SearchFacetOperatorType,
+  WithId
 } from '@types'
 import React from 'react'
 import {useDispatch} from 'react-redux'
@@ -14,7 +15,7 @@ import SearchFacet from '../SearchFacet'
 import TextInputNumber from '../TextInputNumber'
 
 type Props = {
-  facet: SearchFacetInputNumberProps
+  facet: WithId<SearchFacetInputNumberProps>
 }
 
 const SearchFacetNumber = ({facet}: Props) => {
@@ -29,15 +30,15 @@ const SearchFacetNumber = ({facet}: Props) => {
     : modifiers?.[0]
 
   const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, operatorType}))
+    dispatch(searchActions.facetsUpdateById({id: facet.id, operatorType}))
   }
 
   const handleModifierClick = (modifier: SearchFacetInputNumberModifier) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, modifier: modifier.name}))
+    dispatch(searchActions.facetsUpdateById({id: facet.id, modifier: modifier.name}))
   }
 
   const handleValueChange = (value: number) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, value}))
+    dispatch(searchActions.facetsUpdateById({id: facet.id, value}))
   }
 
   const selectedOperatorType: SearchFacetOperatorType = facet.operatorType ?? 'greaterThan'

package/src/components/SearchFacetSelect/index.tsx

@@ -3,7 +3,8 @@ import {Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
 import {
   SearchFacetInputSelectListItemProps,
   SearchFacetInputSelectProps,
-  SearchFacetOperatorType
+  SearchFacetOperatorType,
+  WithId
 } from '@types'
 import React from 'react'
 import {useDispatch} from 'react-redux'
@@ -14,7 +15,7 @@ import SearchFacet from '../SearchFacet'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 
 type Props = {
-  facet: SearchFacetInputSelectProps
+  facet: WithId<SearchFacetInputSelectProps>
 }
 
 const SearchFacetSelect = ({facet}: Props) => {

package/src/components/SearchFacetString/index.tsx

@@ -1,6 +1,6 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem, TextInput} from '@sanity/ui'
-import {SearchFacetInputStringProps, SearchFacetOperatorType} from '@types'
+import {SearchFacetInputStringProps, SearchFacetOperatorType, WithId} from '@types'
 import React, {ChangeEvent} from 'react'
 import {useDispatch} from 'react-redux'
 
@@ -10,7 +10,7 @@ import {searchActions} from '../../modules/search'
 import SearchFacet from '../SearchFacet'
 
 type Props = {
-  facet: SearchFacetInputStringProps
+  facet: WithId<SearchFacetInputStringProps>
 }
 
 const SearchFacetString = ({facet}: Props) => {
@@ -20,11 +20,11 @@ const SearchFacetString = ({facet}: Props) => {
   const popoverProps = usePortalPopoverProps()
 
   const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, operatorType}))
+    dispatch(searchActions.facetsUpdateById({id: facet.id, operatorType}))
   }
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, value: e.target.value}))
+    dispatch(searchActions.facetsUpdateById({id: facet.id, value: e.target.value}))
   }
 
   const selectedOperatorType: SearchFacetOperatorType = facet.operatorType

package/src/components/SearchFacetTags/index.tsx

@@ -1,6 +1,11 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-import {ReactSelectOption, SearchFacetInputSearchableProps, SearchFacetOperatorType} from '@types'
+import {
+  ReactSelectOption,
+  SearchFacetInputSearchableProps,
+  SearchFacetOperatorType,
+  WithId
+} from '@types'
 import React from 'react'
 import {useDispatch} from 'react-redux'
 import Select from 'react-select'
@@ -14,7 +19,7 @@ import getTagSelectOptions from '../../utils/getTagSelectOptions'
 import SearchFacet from '../SearchFacet'
 
 type Props = {
-  facet: SearchFacetInputSearchableProps
+  facet: WithId<SearchFacetInputSearchableProps>
 }
 
 const SearchFacetTags = ({facet}: Props) => {
@@ -28,8 +33,8 @@ const SearchFacetTags = ({facet}: Props) => {
 
   const handleChange = (option: ReactSelectOption) => {
     dispatch(
-      searchActions.facetsUpdate({
-        name: facet.name,
+      searchActions.facetsUpdateById({
+        id: facet.id,
         value: option
       })
     )
@@ -37,8 +42,8 @@ const SearchFacetTags = ({facet}: Props) => {
 
   const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
     dispatch(
-      searchActions.facetsUpdate({
-        name: facet.name,
+      searchActions.facetsUpdateById({
+        id: facet.id,
         operatorType
       })
     )

package/src/components/SearchFacets/index.tsx

@@ -25,20 +25,21 @@ const SearchFacets = (props: Props) => {
   const searchFacets = useTypedSelector(state => state.search.facets)
 
   const Items = searchFacets.map(facet => {
+    const key = facet.id
     if (facet.type === 'number') {
-      return <SearchFacetNumber facet={facet} key={facet.name} />
+      return <SearchFacetNumber facet={facet} key={key} />
     }
 
     if (facet.type === 'searchable') {
-      return <SearchFacetTags facet={facet} key={facet.name} />
+      return <SearchFacetTags facet={facet} key={key} />
     }
 
     if (facet.type === 'select') {
-      return <SearchFacetSelect facet={facet} key={facet.name} />
+      return <SearchFacetSelect facet={facet} key={key} />
     }
 
     if (facet.type === 'string') {
-      return <SearchFacetString facet={facet} key={facet.name} />
+      return <SearchFacetString facet={facet} key={key} />
     }
 
     return null

package/src/components/SearchFacetsControl/index.tsx

@@ -49,10 +49,7 @@ const SearchFacetsControl = () => {
       return true
     })
 
-  // Determine if there are any remaining un-selected facets
-  // (This operates under the assumption that only one of each facet can be active at any given time)
-  const hasRemainingSearchFacets =
-    filteredFacets.filter(facet => facet).length - searchFacets.length > 0
+  const hasSearchFacets = filteredFacets.length > 0
 
   const renderMenuFacets = (
     facets: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputProps)[],
@@ -75,11 +72,11 @@ const SearchFacetsControl = () => {
           }
 
           if (facet) {
-            const isPresent = !!searchFacets.find(v => v.name === facet.name)
+            const disabled = !facet.operatorTypes && !!searchFacets.find(v => v.name === facet.name)
 
             return (
               <MenuItem
-                disabled={isPresent}
+                disabled={disabled}
                 fontSize={1}
                 key={facet.name}
                 onClick={() => dispatch(searchActions.facetsAdd({facet}))}
@@ -101,7 +98,7 @@ const SearchFacetsControl = () => {
       <MenuButton
         button={
           <Button
-            disabled={!hasRemainingSearchFacets}
+            disabled={!hasSearchFacets}
             fontSize={1}
             icon={AddCircleIcon}
             mode="bleed"

package/src/components/Tag/index.tsx

@@ -11,7 +11,7 @@ import useTypedSelector from '../../hooks/useTypedSelector'
 import {selectAssetsPicked} from '../../modules/assets'
 import {dialogActions} from '../../modules/dialog'
 import {DIALOG_ACTIONS} from '../../modules/dialog/actions'
-import {searchActions, selectHasSearchFacetTag, selectIsSearchFacetTag} from '../../modules/search'
+import {searchActions, selectIsSearchFacetTag} from '../../modules/search'
 
 type Props = {
   actions?: TagActions[]
@@ -77,12 +77,11 @@ const Tag = (props: Props) => {
   // Redux
   const dispatch = useDispatch()
   const assetsPicked = useTypedSelector(selectAssetsPicked)
-  const hasSearchFacetTag = useTypedSelector(selectHasSearchFacetTag)
   const isSearchFacetTag = useTypedSelector(state => selectIsSearchFacetTag(state, tag?.tag?._id))
 
   // Callbacks
   const handleSearchFacetTagRemove = () => {
-    dispatch(searchActions.facetsRemove({facetName: 'tag'}))
+    dispatch(searchActions.facetsRemoveByTag({tagId: tag.tag._id}))
   }
 
   const handleShowAddTagToAssetsDialog = () => {
@@ -110,7 +109,7 @@ const Tag = (props: Props) => {
       }
     } as SearchFacetInputSearchableProps
 
-    if (hasSearchFacetTag) {
+    if (isSearchFacetTag) {
       dispatch(
         searchActions.facetsUpdate({
           name: 'tag',

package/src/modules/assets/index.ts

@@ -575,8 +575,11 @@ export const assetsSearchEpic: MyEpic = action$ =>
     ofType(
       searchActions.facetsAdd.type,
       searchActions.facetsClear.type,
-      searchActions.facetsRemove.type,
+      searchActions.facetsRemoveById.type,
+      searchActions.facetsRemoveByName.type,
+      searchActions.facetsRemoveByTag.type,
       searchActions.facetsUpdate.type,
+      searchActions.facetsUpdateById.type,
       searchActions.querySet.type
     ),
     debounceTime(400),
@@ -723,8 +726,11 @@ export const assetsUnpickEpic: MyEpic = action$ =>
       assetsActions.viewSet.type,
       searchActions.facetsAdd.type,
       searchActions.facetsClear.type,
-      searchActions.facetsRemove.type,
+      searchActions.facetsRemoveById.type,
+      searchActions.facetsRemoveByName.type,
+      searchActions.facetsRemoveByTag.type,
       searchActions.facetsUpdate.type,
+      searchActions.facetsUpdateById.type,
       searchActions.querySet.type
     ),
     mergeMap(() => {

package/src/modules/search/index.ts

@@ -1,8 +1,9 @@
-import {createSelector, createSlice, PayloadAction} from '@reduxjs/toolkit'
-import type {MyEpic, SearchFacetInputProps, SearchFacetOperatorType} from '@types'
-import {Selector} from 'react-redux'
+import {PayloadAction, createSelector, createSlice} from '@reduxjs/toolkit'
+import type {MyEpic, SearchFacetInputProps, SearchFacetOperatorType, WithId} from '@types'
 import {empty, of} from 'rxjs'
 import {filter, mergeMap, withLatestFrom} from 'rxjs/operators'
+import {uuid} from '@sanity/uuid'
+
 import {tagsActions} from '../tags'
 import type {RootReducerState} from '../types'
 
@@ -10,7 +11,7 @@ import type {RootReducerState} from '../types'
 // (The main offender is `fieldModifier` which is currently a function)
 
 type SearchState = {
-  facets: SearchFacetInputProps[]
+  facets: WithId<SearchFacetInputProps>[]
   query: string
 }
 
@@ -25,16 +26,32 @@ const searchSlice = createSlice({
   reducers: {
     // Add search facet
     facetsAdd(state, action: PayloadAction<{facet: SearchFacetInputProps}>) {
-      state.facets.push(action.payload.facet)
+      state.facets.push({...action.payload.facet, id: uuid()})
     },
     // Clear all search facets
     facetsClear(state) {
       state.facets = []
     },
     // Remove search facet by name
-    facetsRemove(state, action: PayloadAction<{facetName: string}>) {
+    facetsRemoveByName(state, action: PayloadAction<{facetName: string}>) {
       state.facets = state.facets.filter(facet => facet.name !== action.payload.facetName)
     },
+    // Remove search facet by name
+    facetsRemoveByTag(state, action: PayloadAction<{tagId: string}>) {
+      state.facets = state.facets.filter(
+        facet =>
+          !(
+            facet.name === 'tag' &&
+            facet.type === 'searchable' &&
+            (facet.operatorType === 'references' || facet.operatorType === 'doesNotReference') &&
+            facet.value?.value === action.payload.tagId
+          )
+      )
+    },
+    // Remove search facet by name
+    facetsRemoveById(state, action: PayloadAction<{facetId: string}>) {
+      state.facets = state.facets.filter(facet => facet.id !== action.payload.facetId)
+    },
     // Update an existing search facet
     facetsUpdate(
       state,
@@ -47,8 +64,38 @@ const searchSlice = createSlice({
     ) {
       const {modifier, name, operatorType, value} = action.payload
 
+      const facet = state.facets.find(f => f.name === name)
+
+      if (!facet) {
+        return
+      }
+
+      if (facet.type === 'number' && modifier) {
+        facet.modifier = modifier
+      }
+      if (operatorType) {
+        facet.operatorType = operatorType
+      }
+      if (typeof value !== 'undefined') {
+        facet.value = value
+      }
+
+      state.facets = state.facets.filter(f => f.name !== facet.name || f.id === facet.id)
+    },
+    // Update an existing search facet
+    facetsUpdateById(
+      state,
+      action: PayloadAction<{
+        modifier?: string
+        id: string
+        operatorType?: SearchFacetOperatorType
+        value?: any // TODO: type correctly
+      }>
+    ) {
+      const {modifier, id, operatorType, value} = action.payload
+
       state.facets.forEach((facet, index) => {
-        if (facet.name === name) {
+        if (facet.id === id) {
           if (facet.type === 'number' && modifier) {
             facet.modifier = modifier
           }
@@ -100,33 +147,19 @@ export const searchFacetTagUpdateEpic: MyEpic = (action$, state$) =>
   )
 
 // Selectors
-
-export const selectHasSearchFacetTag: Selector<RootReducerState, boolean> = createSelector(
-  (state: RootReducerState) => state.search.facets,
-  searchFacets => !!searchFacets?.find(facet => facet.name === 'tag')
-)
-
 export const selectIsSearchFacetTag = createSelector(
   [
-    (state: RootReducerState) => state.tags.byIds,
     (state: RootReducerState) => state.search.facets,
     (_state: RootReducerState, tagId: string) => tagId
   ],
-  (tagsByIds, searchFacets, tagId) => {
-    const searchFacet = searchFacets?.find(facet => facet.name === 'tag')
-
-    if (searchFacet?.type === 'searchable') {
-      const searchFacetTagId = searchFacet.value?.value
-      if (searchFacetTagId) {
-        return (
-          tagsByIds[searchFacetTagId]?.tag?._id === tagId &&
-          searchFacet?.operatorType === 'references'
-        )
-      }
-    }
-
-    return false
-  }
+  (searchFacets, tagId) =>
+    searchFacets.some(
+      facet =>
+        facet.name === 'tag' &&
+        facet.type === 'searchable' &&
+        (facet.operatorType === 'references' || facet.operatorType === 'doesNotReference') &&
+        facet.value?.value === tagId
+    )
 )
 
 export const searchActions = searchSlice.actions

package/src/types/index.ts

@@ -330,3 +330,7 @@ export type UploadItem = {
   size: number
   status: 'complete' | 'queued' | 'uploading'
 }
+
+export type WithId<T extends SearchFacetInputProps> = T & {
+  id: string
+}