fix: use item category labels from backend

src/api/index.js

 import { API_BASE_URL } from '../constants'
 
 const createMarketplaceAPI = ({ baseUrl, prefix = '/api' }) => ({
+  getItemCategories: () => ({
+    baseUrl,
+    method: 'get',
+    path: `${prefix}/items-categories/`,
+  }),
   getWorkflowById: ({ id }) => ({
     baseUrl,
     method: 'get',

src/components/SearchResult/SearchResult.js

@@ -45,7 +45,7 @@ export const SearchResultPlaceholder = () => (
   </SearchResultContainer>
 )
 
-const SearchResult = ({ result }) => (
+const SearchResult = ({ result, itemCategories }) => (
   <SearchResultContainer>
     <Box css={{ flexBasis: 80, flexGrow: 0, flexShrink: 0 }}>
       <Icon icon={result.category} width="3em" height="3em" />
@@ -65,13 +65,7 @@ const SearchResult = ({ result }) => (
             </Heading>
           </Link>
         </Box>
-        <Badge>
-          {
-            result.properties.find(
-              property => property.type.code === 'object-type'
-            ).concept.label
-          }
-        </Badge>
+        <Badge>{itemCategories?.[result.category] || ''}</Badge>
       </Flex>
       <Box css={css({ my: 2 })}>
         <Text css={css({ color: 'grey.900' })} size="small">

src/components/SearchResults/SearchResults.js

@@ -62,13 +62,13 @@ const SearchResultsHeader = ({
   </Flex>
 )
 
-const SearchResultsList = ({ request, results }) => {
+const SearchResultsList = ({ request, results, itemCategories }) => {
   if (results && results.length) {
     return (
       <Stack as="ul">
         {results.map(result => (
           <li key={result.id}>
-            <SearchResult result={result} />
+            <SearchResult result={result} itemCategories={itemCategories} />
           </li>
         ))}
       </Stack>
@@ -113,6 +113,7 @@ const SearchResults = ({
   request,
   results,
   searchParams,
+  itemCategories,
 }) => {
   const { categories, page, query, sort, facets } = searchParams
 
@@ -189,7 +190,11 @@ const SearchResults = ({
         page={page}
         sort={sort}
       />
-      <SearchResultsList request={request} results={results} />
+      <SearchResultsList
+        request={request}
+        results={results}
+        itemCategories={itemCategories}
+      />
       <Pagination
         aria-label="Search results pages"
         css={css({ alignSelf: 'flex-end', my: 4 })}

src/components/SearchScreen/SearchScreen.js

@@ -7,6 +7,7 @@ import SearchResults from '../../components/SearchResults/SearchResults'
 import Flex from '../../elements/Flex/Flex'
 import Heading from '../../elements/Heading/Heading'
 import { fetchSearchResults } from '../../store/actions/items'
+import { fetchItemCategories } from '../../store/actions/itemCategories'
 import { selectors } from '../../store/reducers'
 
 const SearchScreenContainer = ({ onSearchParamsChange, searchParams }) => {
@@ -14,6 +15,14 @@ const SearchScreenContainer = ({ onSearchParamsChange, searchParams }) => {
 
   const { categories, facets, page, query, sort } = searchParams
 
+  useEffect(() => {
+    dispatch(fetchItemCategories())
+  }, [dispatch])
+
+  const itemCategories = useSelector(state =>
+    selectors.itemCategories.selectAllResources(state)
+  )
+
   const request = useSelector(state =>
     selectors.requests.selectRequestByName(state, {
       name: fetchSearchResults,
@@ -64,6 +73,7 @@ const SearchScreenContainer = ({ onSearchParamsChange, searchParams }) => {
       request={request}
       results={results}
       searchParams={searchParams}
+      itemCategories={itemCategories}
     />
   )
 }
@@ -86,6 +96,7 @@ export const SearchScreen = ({
   request,
   results,
   searchParams,
+  itemCategories,
 }) => (
   <>
     <Heading variant="h1" css={css({ mt: 4 })}>
@@ -107,6 +118,7 @@ export const SearchScreen = ({
         request={request}
         results={results}
         searchParams={searchParams}
+        itemCategories={itemCategories}
       />
     </Flex>
   </>

src/store/actions/itemCategories.js

+import API, { getErrorMessage } from '../../api'
+import { API_REQUEST, FETCH_RESOURCE } from '../constants'
+
+export const fetchItemCategories = () => ({
+  type: API_REQUEST,
+  payload: {
+    ...API.getItemCategories(),
+  },
+  meta: {
+    getErrorMessage,
+    next: FETCH_RESOURCE,
+    normalize: data => ({
+      entities: { itemCategories: Object.keys(data) },
+      resources: { itemCategories: data },
+    }),
+    request: {
+      name: 'fetchItemCategories',
+    },
+  },
+})
+fetchItemCategories.toString = () => 'fetchItemCategories'

src/store/reducers/index.js

@@ -23,6 +23,10 @@ const {
   reducer: conceptReducer,
   selectors: conceptSelectors,
 } = createResourceSlice('concepts')
+const {
+  reducer: itemCategoriesReducer,
+  selectors: itemCategoriesSelectors,
+} = createResourceSlice('itemCategories')
 
 const {
   reducer: requestReducer,
@@ -43,6 +47,7 @@ export const selectors = {
   ),
   items: mapSelectors(itemSelectors, 'items'),
   itemCollections: mapSelectors(itemCollectionSelectors, 'itemCollections'),
+  itemCategories: mapSelectors(itemCategoriesSelectors, 'itemCategories'),
   requests: mapSelectors(requestSelectors, 'requests'),
   toasts: mapSelectors(toastSelectors, 'toasts'),
   user: mapSelectors(userSelectors, 'user'),
@@ -53,6 +58,7 @@ export default combineReducers({
   conceptCollections: conceptCollectionReducer,
   items: itemReducer,
   itemCollections: itemCollectionReducer,
+  itemCategories: itemCategoriesReducer,
   requests: requestReducer,
   toasts: toastReducer,
   user: userReducer,

src/store/utils/createResourceSlice.js

@@ -35,6 +35,9 @@ export const createResourceSlice = resourceName => {
       if (!Array.isArray(ids)) return null
       return ids.map(id => state[id]).filter(Boolean)
     },
+    selectAllResources(state) {
+      return state
+    },
   }
 
   return {