Commit 3e65d296 authored by Stefan Probst's avatar Stefan Probst
Browse files

fix: use item category labels from backend

parent 67bcd186
import { API_BASE_URL } from '../constants'
const createMarketplaceAPI = ({ baseUrl, prefix = '/api' }) => ({
getItemCategories: () => ({
baseUrl,
method: 'get',
path: `${prefix}/items-categories/`,
}),
getWorkflowById: ({ id }) => ({
baseUrl,
method: 'get',
......
......@@ -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">
......
......@@ -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 })}
......
......@@ -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>
</>
......
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'
......@@ -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,
......
......@@ -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 {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment