feat: Frontpage date tweaks

apps/skolplattformen-app/components/childListItem.component.tsx

@@ -21,6 +21,7 @@ import React, { useEffect } from 'react'
 import { TouchableOpacity, useColorScheme, View } from 'react-native'
 import { useTranslation } from '../hooks/useTranslation'
 import { Colors, Layout, Sizing } from '../styles'
+import { getMeaningfulStartingDate } from '../utils/calendarHelpers'
 import { studentName } from '../utils/peopleHelpers'
 import { DaySummary } from './daySummary.component'
 import { AlertIcon, RightArrowIcon } from './icon.component'
@@ -109,10 +110,6 @@ export const ChildListItem = ({
     return moment(inputDate).fromNow()
   }
 
-  const capitalizeFirstLetter = (string) => {
-    return string.charAt(0).toUpperCase() + string.slice(1)
-  }
-
   const getClassName = () => {
     // hack: we can find the class name (ex. 8C) from the classmates.
     // let's pick the first one and select theirs class
@@ -148,7 +145,7 @@ export const ChildListItem = ({
   const className = getClassName()
   const styles = useStyleSheet(themeStyles)
   const isDarkMode = useColorScheme() === 'dark'
-
+  const meaningfulStartingDate = getMeaningfulStartingDate(currentDate)
   return (
     <TouchableOpacity
       onPress={() => navigation.navigate('Child', { child, color })}
@@ -172,12 +169,8 @@ export const ChildListItem = ({
             />
           </View>
         </View>
-        {moment().weekday() !== currentDate.weekday() ? (
-          <Text category="c2" style={styles.weekday}>
-            {capitalizeFirstLetter(currentDate.format('dddd'))}
-          </Text>
-        ) : null}
-        <DaySummary child={child} date={currentDate} />
+
+        <DaySummary child={child} date={meaningfulStartingDate} />
 
         {scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => (
           <Text category="p1" key={i}>
@@ -288,8 +281,4 @@ const themeStyles = StyleService.create({
     marginBottom: 0,
   },
   noNewNewsItemsText: {},
-  weekday: {
-    marginBottom: -5,
-    padding: 0,
-  },
 })

apps/skolplattformen-app/components/children.component.tsx

@@ -26,7 +26,6 @@ import { Colors, Layout as LayoutStyle, Sizing, Typography } from '../styles'
 import { translate } from '../utils/translation'
 import { ChildListItem } from './childListItem.component'
 import { SettingsIcon, RefreshIcon } from './icon.component'
-import { getMeaningfulStartingDate } from '../utils/calendarHelpers'
 
 const colors = ['primary', 'success', 'info', 'warning', 'danger']
 
@@ -81,8 +80,6 @@ export const Children = () => {
     })
   }, [navigation, reloadChildren])
 
-  const currentDate = getMeaningfulStartingDate()
-
   // We need to skip safe area view here, due to the reason that it's adding a white border
   // when this view is actually lightgrey. Taking the padding top value from the use inset hook.
   return status === 'loaded' ? (
@@ -107,7 +104,6 @@ export const Children = () => {
         <ChildListItem
           child={child}
           color={colors[index % colors.length]}
-          currentDate={currentDate}
           updated={updatedAt}
           key={child.id}
         />

apps/skolplattformen-app/components/daySummary.component.tsx

@@ -12,6 +12,10 @@ interface DaySummaryProps {
   date?: Moment
 }
 
+const capitalizeFirstLetter = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
 export const DaySummary = ({
   child,
   date: currentDate = moment(),
@@ -38,6 +42,11 @@ export const DaySummary = ({
 
   return (
     <View>
+      {moment().weekday() !== currentDate.weekday() ? (
+        <Text category="c2" style={styles.weekday}>
+          {capitalizeFirstLetter(currentDate.format('dddd'))}
+        </Text>
+      ) : null}
       <View style={styles.summary}>
         <View style={styles.part}>
           <View>
@@ -89,4 +98,8 @@ const themedStyles = StyleService.create({
   heading: {
     marginBottom: -10,
   },
+  weekday: {
+    marginBottom: -10,
+    padding: 0,
+  },
 })

apps/skolplattformen-app/utils/__tests__/calendarHelpers.test.ts

@@ -9,6 +9,14 @@ const saturdayEvening = moment('2021-12-04T19:20:26+0100')
 const sundayEvening = moment('2021-12-05T19:20:26+0100')
 const mondayEvening = moment('2021-12-06T19:20:26+0100')
 
+describe('getMeaningfulStartingDate should not touch inputdate', () => {
+  const origDate = moment()
+  const origDateClone = origDate.clone()
+  getMeaningfulStartingDate(origDate)
+
+  expect(origDate).toEqual(origDateClone)
+})
+
 describe('getMeaningfulStartingDate on weekends', () => {
   it('should give next monday if on friday evening', () => {
     const startDate = getMeaningfulStartingDate(fridayEvening)

apps/skolplattformen-app/utils/calendarHelpers.ts

@@ -2,16 +2,17 @@ import moment from 'moment'
 
 export const getMeaningfulStartingDate = (date = moment()) => {
   const originalDate = date.clone()
+  let returnDate = date.clone()
   // are we on the evening?
-  if (date.hour() > 17) date = date.add('1', 'day')
+  if (date.hour() > 17) returnDate.add('1', 'day')
   // are we on the weekend
-  if (date.isoWeekday() > 5) {
-    date = date.add(5, 'days').startOf('isoWeek')
-    date
+  if (returnDate.isoWeekday() > 5) {
+    returnDate = returnDate.add(5, 'days').startOf('isoWeek')
+    returnDate
       .hour(originalDate.hour())
       .minute(originalDate.minute())
       .second(originalDate.second())
   }
 
-  return date
+  return returnDate
 }

libs/api-skolplattformen/lib/fakeData/children.ts

@@ -0,0 +1,29 @@
+import { EtjanstChild, Skola24Child } from "@skolplattformen/api"
+
+export const children = (): EtjanstChild[] => [
+  {
+    name: 'Shanel Nilsson (elev)',
+    id: '39b59e-bf4b9f-f68ac25321-977218-bf0',
+    sdsId: '8e81a06-53f55fb-d1b93-f0e5b357ad0b7caaf1d36',
+    status: 'F;GR',
+    schoolId: '9e58434-8800-da59547-614bf0e-e09c015',
+  },
+  {
+    name: 'Alan Nilsson (elev)',
+    id: 'eea96a-a3e045-caab589391-ed7d17-029',
+    sdsId: 'bc2d341-8d970cc-69526-43501c082aaa870d9fe99',
+    status: 'GR',
+    schoolId: '8e6b13b-3116-e66c39b-a4c3fa5-a1d72d9',
+  },
+]
+export const skola24Children = (): Skola24Child[] => [
+  {
+    firstName: 'Shanel',
+    lastName: 'Jonsson Nilsson',
+    personGuid: 'abc123',
+    schoolGuid: 'def456',
+    schoolID: 'Superskolan',
+    timetableID: 'jkl012',
+    unitGuid: 'mno345'
+  },
+]