skolplattformen-backup/apps/skolplattformen-sthlm/components/daySummary.component.tsx

import { Child } from '@skolplattformen/api-skolplattformen'
import { useTimetable } from '@skolplattformen/hooks'
import { StyleService, Text, useStyleSheet } from '@ui-kitten/components'
import moment, { Moment } from 'moment'
import React from 'react'
import { View } from 'react-native'
import { LanguageService } from '../services/languageService'
import { translate } from '../utils/translation'

interface DaySummaryProps {
  child: Child
  date?: Moment
}

export const DaySummary = ({ child, date = moment() }: DaySummaryProps) => {
  const styles = useStyleSheet(themedStyles)
  const [year, week] = [moment().isoWeekYear(), moment().isoWeek()]
  const { data: weekLessons } = useTimetable(
    child,
    week,
    year,
    LanguageService.getLanguageCode()
  )

  const lessons = weekLessons
    .filter((lesson) => lesson.dayOfWeek === date.isoWeekday())
    .sort((a, b) => a.dateStart.localeCompare(b.dateStart))

  if (lessons.length <= 0) {
    return null
  }

  const gymBag = lessons.some((lesson) => lesson.code === 'IDH')

  return (
    <View>
      <View style={styles.summary}>
        <View style={styles.part}>
          <View>
            <Text category="c2" style={styles.label}>
              {translate('schedule.start')}
            </Text>
            <Text category="h5">{lessons[0].timeStart.slice(0, 5)} - </Text>
          </View>
        </View>
        <View style={styles.part}>
          <View>
            <Text category="c2" style={styles.label}>
              {translate('schedule.end')}
            </Text>
            <Text category="h5">
              {lessons[lessons.length - 1].timeEnd.slice(0, 5)}
            </Text>
          </View>
        </View>
      </View>

      <Text category="s2">
        {gymBag
          ? ` 🤼‍♀️ ${translate('schedule.gymBag', {
              defaultValue: 'Gympapåse',
            })}`
          : ''}
      </Text>
    </View>
  )
}

const themedStyles = StyleService.create({
  part: {
    flexDirection: 'column',
  },
  summary: {
    flexDirection: 'row',
  },
  label: {
    marginTop: 10,
  },
})