fix: use category label on item detail screen

src/components/ItemScreen/ItemScreen.js

@@ -11,11 +11,20 @@ import { selectors } from '../../store/reducers'
 import { createPath } from '../../utils'
 import ItemEditScreen from '../ItemEditScreen/ItemEditScreen'
 import ProtectedRoute from '../ProtectedRoute/ProtectedRoute'
+import { fetchItemCategories } from '../../store/actions/itemCategories'
 
 const ItemScreenContainer = ({ fetchItem, id }) => {
   const dispatch = useDispatch()
   const { path /*, url */ } = useRouteMatch()
 
+  useEffect(() => {
+    dispatch(fetchItemCategories())
+  }, [dispatch])
+
+  const itemCategories = useSelector(state =>
+    selectors.itemCategories.selectAllResources(state)
+  )
+
   useEffect(() => {
     dispatch(fetchItem({ id }))
   }, [dispatch, fetchItem, id])
@@ -36,13 +45,17 @@ const ItemScreenContainer = ({ fetchItem, id }) => {
         <ItemEditScreen request={request} resource={resource} />
       </ProtectedRoute>
       <Route>
-        <ItemScreen request={request} resource={resource} />
+        <ItemScreen
+          request={request}
+          resource={resource}
+          itemCategories={itemCategories}
+        />
       </Route>
     </Switch>
   )
 }
 
-export const ItemScreen = ({ request, resource }) => (
+export const ItemScreen = ({ request, resource, itemCategories }) => (
   <Flex css={css({ my: 6 })}>
     <Box css={{ flex: 3 }}>
       <ItemDetails request={request} resource={resource} />
@@ -56,7 +69,7 @@ export const ItemScreen = ({ request, resource }) => (
         minWidth: 0,
       })}
     >
-      <ItemSidebar resource={resource} />
+      <ItemSidebar resource={resource} itemCategories={itemCategories} />
     </aside>
   </Flex>
 )

src/components/ItemSidebar/ItemSidebar.js

@@ -7,7 +7,7 @@ import Icon from '../../elements/Icon/Icon'
 import Link from '../../elements/Link/Link'
 import Stack from '../../elements/Stack/Stack'
 
-const ItemSidebar = ({ resource }) => {
+const ItemSidebar = ({ resource, itemCategories }) => {
   if (!resource) return null
 
   const properties = resource.properties.reduce((acc, property) => {
@@ -23,13 +23,13 @@ const ItemSidebar = ({ resource }) => {
     return acc
   }, {})
 
-  const [type] = properties['object-type'].values
+  const type = itemCategories?.[resource.category] || 'Resource'
 
   const links = [
     {
       label: (
         <>
-          Go to {type || 'Resource'}{' '}
+          Go to {type}{' '}
           <Icon
             css={css({
               alignSelf: 'flex-start',