2021-10-05 15:44:14 +00:00
|
|
|
import { useNews } from '@skolplattformen/hooks'
|
2021-06-16 12:10:06 +00:00
|
|
|
import { Input, List, StyleService, useStyleSheet } from '@ui-kitten/components'
|
|
|
|
import React, { useMemo, useState } from 'react'
|
|
|
|
import { TouchableOpacity, View } from 'react-native'
|
2021-04-23 11:33:29 +00:00
|
|
|
import { Sizing } from '../styles'
|
2021-04-25 16:38:18 +00:00
|
|
|
import {
|
|
|
|
renderSearchResultPreview,
|
2021-06-16 12:10:06 +00:00
|
|
|
useNewsListSearchResults,
|
2021-04-25 16:38:18 +00:00
|
|
|
} from '../utils/search'
|
2021-06-16 12:10:06 +00:00
|
|
|
import { translate } from '../utils/translation'
|
|
|
|
import { useChild } from './childContext.component'
|
|
|
|
import { CloseOutlineIcon, SearchIcon } from './icon.component'
|
|
|
|
import { NewsListItem } from './newsListItem.component'
|
2020-12-07 20:59:14 +00:00
|
|
|
|
2021-02-17 20:19:18 +00:00
|
|
|
export const NewsList = () => {
|
2021-06-16 12:10:06 +00:00
|
|
|
const styles = useStyleSheet(themedStyles)
|
2021-02-17 20:19:18 +00:00
|
|
|
const child = useChild()
|
2021-02-20 08:38:08 +00:00
|
|
|
const { data } = useNews(child)
|
2021-02-17 20:19:18 +00:00
|
|
|
|
2021-04-25 16:38:18 +00:00
|
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
|
|
const searchResults = useNewsListSearchResults(searchQuery)
|
|
|
|
|
|
|
|
const header = useMemo(
|
|
|
|
() => (
|
|
|
|
<Input
|
2021-05-12 09:16:13 +00:00
|
|
|
accessibilityHint={translate('news.search.placeholder', {
|
2021-05-03 17:45:35 +00:00
|
|
|
defaultValue: 'Sök alla nyheter...',
|
|
|
|
})}
|
|
|
|
placeholder={translate('news.search.placeholder', {
|
|
|
|
defaultValue: 'Sök alla nyheter...',
|
|
|
|
})}
|
2021-04-25 16:38:18 +00:00
|
|
|
returnKeyType="search"
|
|
|
|
status="basic"
|
|
|
|
accessoryLeft={SearchIcon}
|
|
|
|
onChangeText={setSearchQuery}
|
|
|
|
value={searchQuery}
|
2021-06-16 12:10:06 +00:00
|
|
|
style={styles.search}
|
|
|
|
accessoryRight={(props) =>
|
|
|
|
searchQuery.length > 0 ? (
|
|
|
|
<TouchableOpacity onPress={() => setSearchQuery('')}>
|
|
|
|
<CloseOutlineIcon {...props} />
|
|
|
|
</TouchableOpacity>
|
|
|
|
) : (
|
|
|
|
<View />
|
|
|
|
)
|
|
|
|
}
|
2021-04-25 16:38:18 +00:00
|
|
|
/>
|
|
|
|
),
|
2021-06-16 12:10:06 +00:00
|
|
|
[searchQuery, styles.search]
|
2021-04-25 16:38:18 +00:00
|
|
|
)
|
|
|
|
|
|
|
|
if (searchQuery) {
|
|
|
|
return (
|
2021-02-18 09:09:27 +00:00
|
|
|
<List
|
|
|
|
style={styles.container}
|
|
|
|
contentContainerStyle={styles.contentContainer}
|
2021-04-25 16:38:18 +00:00
|
|
|
keyboardDismissMode="on-drag"
|
|
|
|
data={searchResults}
|
|
|
|
ListHeaderComponent={header}
|
|
|
|
renderItem={({ item: searchResult }) => (
|
|
|
|
<NewsListItem key={searchResult.item.id} item={searchResult.item}>
|
|
|
|
{renderSearchResultPreview(searchResult)}
|
|
|
|
</NewsListItem>
|
2021-02-18 09:09:27 +00:00
|
|
|
)}
|
|
|
|
/>
|
2021-04-25 16:38:18 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<List
|
|
|
|
style={styles.container}
|
|
|
|
contentContainerStyle={styles.contentContainer}
|
|
|
|
keyboardDismissMode="on-drag"
|
|
|
|
data={data}
|
|
|
|
ListHeaderComponent={header}
|
2021-04-30 16:02:21 +00:00
|
|
|
renderItem={({ item }) => <NewsListItem key={item.id} item={item} />}
|
2021-04-25 16:38:18 +00:00
|
|
|
/>
|
2020-12-15 01:38:36 +00:00
|
|
|
)
|
|
|
|
}
|
2020-12-07 20:59:14 +00:00
|
|
|
|
2021-06-16 12:10:06 +00:00
|
|
|
const themedStyles = StyleService.create({
|
2021-01-26 12:39:22 +00:00
|
|
|
container: {
|
2021-02-10 10:08:17 +00:00
|
|
|
height: '100%',
|
2021-01-26 12:39:22 +00:00
|
|
|
width: '100%',
|
|
|
|
},
|
2020-12-22 01:12:08 +00:00
|
|
|
contentContainer: {
|
2021-06-16 12:10:06 +00:00
|
|
|
paddingVertical: Sizing.t3,
|
|
|
|
paddingHorizontal: Sizing.t3,
|
|
|
|
},
|
|
|
|
search: {
|
|
|
|
backgroundColor: 'background-basic-color-1',
|
|
|
|
borderRadius: 40,
|
|
|
|
marginBottom: Sizing.t2,
|
2021-02-07 16:14:45 +00:00
|
|
|
},
|
|
|
|
})
|