fix: re-sort tags on all listener mutations, fix minor rendering issu…

…e with single value tag
sanity-io · Jan 7, 2021 · c55c70a · c55c70a
1 parent 8a37e59
commit c55c70a
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 43 deletions.
diff --git a/src/modules/dialog/types.ts b/src/modules/dialog/types.ts
@@ -1,4 +1,4 @@
-import {Dialog, Tag} from '@types'
+import {Dialog} from '@types'
 
 import {DialogActionTypes} from './index'
 

diff --git a/src/modules/index.ts b/src/modules/index.ts
@@ -24,7 +24,7 @@ import notifications, {
   notificationAddUpdateEpic,
   notificationsAddUpdateErrorEpic
 } from './notifications'
-import tags, {tagsCreateEpic, tagsDeleteEpic, tagsFetchEpic} from './tags'
+import tags, {tagsCreateEpic, tagsDeleteEpic, tagsFetchEpic, tagsSortEpic} from './tags'
 
 export const rootEpic = combineEpics(
   assetsDeleteEpic,
@@ -46,7 +46,8 @@ export const rootEpic = combineEpics(
   notificationsAddUpdateErrorEpic,
   tagsCreateEpic,
   tagsDeleteEpic,
-  tagsFetchEpic
+  tagsFetchEpic,
+  tagsSortEpic
 )
 
 export const rootReducer = combineReducers({

diff --git a/src/modules/tags/index.ts b/src/modules/tags/index.ts
@@ -21,7 +21,8 @@ import {
   TagsListenerCreateAction,
   TagsListenerDeleteAction,
   TagsListenerUpdateAction,
-  TagsReducerState
+  TagsReducerState,
+  TagsSortAction
 } from './types'
 import debugThrottle from '../../operators/debugThrottle'
 import {RootReducerState} from '../types'
@@ -42,7 +43,8 @@ export enum TagsActionTypes {
   FETCH_REQUEST = 'TAGS_FETCH_REQUEST',
   LISTENER_CREATE = 'TAGS_LISTENER_CREATE',
   LISTENER_DELETE = 'TAGS_LISTENER_DELETE',
-  LISTENER_UPDATE = 'TAGS_LISTENER_UPDATE'
+  LISTENER_UPDATE = 'TAGS_LISTENER_UPDATE',
+  SORT = 'TAGS_SORT'
 }
 
 /***********
@@ -196,19 +198,8 @@ export default function tagsReducerState(
           updating: false
         }
 
-        // Add tag ID and re-order by name (asc)
-        draft.allIds = [...draft.allIds, tag._id].sort((a, b) => {
-          const tagA = draft.byIds[a].tag
-          const tagB = draft.byIds[b].tag
-
-          if (tagA.name < tagB.name) {
-            return -1
-          } else if (tagA.name > tagB.name) {
-            return 1
-          } else {
-            return 0
-          }
-        })
+        // Add tag ID
+        draft.allIds.push(tag._id)
         break
       }
 
@@ -237,6 +228,21 @@ export default function tagsReducerState(
         }
         break
       }
+
+      case TagsActionTypes.SORT:
+        draft.allIds.sort((a, b) => {
+          const tagA = draft.byIds[a].tag.name.current
+          const tagB = draft.byIds[b].tag.name.current
+
+          if (tagA < tagB) {
+            return -1
+          } else if (tagA > tagB) {
+            return 1
+          } else {
+            return 0
+          }
+        })
+        break
     }
   })
 }
@@ -346,6 +352,11 @@ export const tagsListenerUpdate = (tag: Tag): TagsListenerUpdateAction => ({
   type: TagsActionTypes.LISTENER_UPDATE
 })
 
+// Sort tags
+export const tagsSort = (): TagsSortAction => ({
+  type: TagsActionTypes.SORT
+})
+
 /*********
  * EPICS *
  *********/
@@ -439,3 +450,19 @@ export const tagsFetchEpic = (
       )
     })
   )
+
+/**
+ * Re-sort tags on updates
+ */
+export const tagsSortEpic = (action$: Observable<TagsActions>): Observable<TagsActions> =>
+  action$.pipe(
+    filter(
+      isOfType([
+        TagsActionTypes.LISTENER_UPDATE, //
+        TagsActionTypes.LISTENER_CREATE
+      ])
+    ),
+    switchMap(() => {
+      return of(tagsSort())
+    })
+  )
diff --git a/src/modules/tags/types.ts b/src/modules/tags/types.ts
@@ -100,6 +100,10 @@ export type TagsListenerUpdateAction = {
   type: TagsActionTypes.LISTENER_UPDATE
 }
 
+export type TagsSortAction = {
+  type: TagsActionTypes.SORT
+}
+
 // All actions
 
 export type TagsActions =
@@ -115,3 +119,4 @@ export type TagsActions =
   | TagsListenerCreateAction
   | TagsListenerDeleteAction
   | TagsListenerUpdateAction
+  | TagsSortAction
diff --git a/src/styled/react-select/single.tsx b/src/styled/react-select/single.tsx
@@ -1,10 +1,9 @@
-import {AddIcon, ChevronDownIcon, CloseIcon} from '@sanity/icons'
+import {AddIcon, CloseIcon} from '@sanity/icons'
 import {Box, Card, Flex, Text, studioTheme} from '@sanity/ui'
 import {components} from 'react-select'
 import React from 'react'
 
 const themeDarkPrimaryBlue = studioTheme?.color?.dark?.primary?.spot?.blue
-const themeDarkPrimaryGray = studioTheme?.color?.dark?.primary?.spot?.gray
 const themeDarkDefaultBaseBg = studioTheme?.color?.dark?.default?.base?.bg
 const themeRadius = studioTheme?.radius
 const themeSpace = studioTheme?.space
@@ -59,6 +58,7 @@ export const reactSelectStyles = {
   }),
   singleValue: (styles: any) => ({
     ...styles,
+    color: '#fff',
     lineHeight: '1em',
     paddingBottom: '1px'
   }),
@@ -86,20 +86,6 @@ const ClearIndicator = (props: any) => {
   )
 }
 
-/*
-const DropdownIndicator = (props: any) => {
-  return (
-    <components.DropdownIndicator {...props}>
-      <Box paddingX={2}>
-        <Text size={0}>
-          <ChevronDownIcon />
-        </Text>
-      </Box>
-    </components.DropdownIndicator>
-  )
-}
-*/
-
 const Menu = (props: any) => {
   return (
     <components.Menu {...props}>
@@ -120,10 +106,7 @@ const NoOptionsMessage = (props: any) => {
 
 const Option = (props: any) => {
   return (
-    <Box
-      padding={1}
-      // style={{padding: '2px'}}
-    >
+    <Box padding={1}>
       <components.Option {...props}>
         <Flex align="center">
           {props.data.__isNew__ && <AddIcon />}
@@ -137,11 +120,7 @@ const Option = (props: any) => {
 const SingleValue = (props: any) => {
   return (
     <components.SingleValue {...props}>
-      <Box paddingX={2}>
-        <Text size={1} weight="semibold">
-          {props.children}
-        </Text>
-      </Box>
+      <Box paddingX={2}>{props.children}</Box>
     </components.SingleValue>
   )
 }