86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
import { Classmate } from '@skolplattformen/api-skolplattformen'
|
|
import { useClassmates } from '@skolplattformen/hooks'
|
|
import {
|
|
Divider,
|
|
Icon,
|
|
IconProps,
|
|
List,
|
|
ListItem,
|
|
Text,
|
|
} from '@ui-kitten/components'
|
|
import React from 'react'
|
|
import { ListRenderItemInfo, StyleSheet } from 'react-native'
|
|
import { fullName, guardians, sortByFirstName } from '../utils/peopleHelpers'
|
|
import { translate } from '../utils/translation'
|
|
import { useChild } from './childContext.component'
|
|
import { ContactMenu } from './contactMenu.component'
|
|
|
|
interface ClassmatesProps {
|
|
setSelected: (value?: number | null) => void
|
|
}
|
|
|
|
export const Classmates = () => {
|
|
const child = useChild()
|
|
|
|
const { data } = useClassmates(child)
|
|
const renderItemIcon = (props: IconProps) => (
|
|
<Icon {...props} name="people-outline" />
|
|
)
|
|
const [selected, setSelected] = React.useState()
|
|
const renderItem = ({ item, index }: ListRenderItemInfo<Classmate>) => (
|
|
<ListItem
|
|
accessibilityLabel={`${translate('classmates.child')} ${index + 1}`}
|
|
accessibilityHint={`${translate(
|
|
'classmates.contactsForGuardianFor'
|
|
)} ${fullName(item)}`}
|
|
title={fullName(item)}
|
|
onPress={() => setSelected(item)}
|
|
description={guardians(item.guardians)}
|
|
accessoryLeft={renderItemIcon}
|
|
accessoryRight={() => (
|
|
<ContactMenu
|
|
contact={item}
|
|
selected={item === selected}
|
|
setSelected={setSelected}
|
|
/>
|
|
)}
|
|
/>
|
|
)
|
|
return (
|
|
<List
|
|
style={styles.container}
|
|
data={sortByFirstName(data)}
|
|
ItemSeparatorComponent={Divider}
|
|
ListHeaderComponent={
|
|
<Text category="h5" style={styles.listHeader}>
|
|
{data?.length
|
|
? `${translate('classmates.class')} ${data[0].className}`
|
|
: translate('classmates.class')}
|
|
</Text>
|
|
}
|
|
renderItem={renderItem}
|
|
contentContainerStyle={styles.contentContainer}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
height: '100%',
|
|
width: '100%',
|
|
},
|
|
contentContainer: {
|
|
margin: 10,
|
|
justifyContent: 'flex-start',
|
|
},
|
|
topContainer: {
|
|
margin: 5,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
},
|
|
listHeader: {
|
|
paddingTop: 10,
|
|
paddingLeft: 15,
|
|
},
|
|
})
|