✨ Star point weekly stat

components/common/Header.tsx

@@ -22,6 +22,7 @@ import {
 	thunderstormSharp,
 } from 'ionicons/icons'
 import { db } from '../db'
+import StarPoints from './StarPoints'
 
 export const Header = ({ title }: { title: string }) => {
 	const user = useObservable(db.cloud.currentUser)
@@ -36,26 +37,8 @@ export const Header = ({ title }: { title: string }) => {
 					slot="start"
 					className="w-10 h-10 ml-2" // Needs to align with starship and trajectory
 				/>
-				<IonTitle>{title}</IonTitle>
-				{/* <IonButton
-					className="ml-4"
-					fill="clear"
-					id="star-points"
-				>
-					<IonIcon
-						icon={starSharp}
-						slot="icon-only"
-					></IonIcon>
-					<IonPopover
-						trigger="star-points"
-						triggerAction="click"
-					>
-						<IonContent class="ion-padding">
-							Star points this week: 9
-						</IonContent>
-					</IonPopover>
-					<span className="ml-3 font-mono text-xl">9</span>
-				</IonButton> */}
+				{/* <IonTitle>{title}</IonTitle> */}
+				<StarPoints />
 				<IonButtons
 					className="mx-2"
 					slot="secondary"

components/common/StarPoints.tsx

@@ -0,0 +1,41 @@
+import { IonButton, IonContent, IonIcon, IonPopover } from '@ionic/react'
+import { useLiveQuery } from 'dexie-react-hooks'
+import { starSharp } from 'ionicons/icons'
+import { db } from '../db'
+import dayjs from 'dayjs'
+
+export default function StarPoints() {
+	const starPointsEarned = useLiveQuery(async () => {
+		const thisWeeksCompletedTodos = await db.todos
+			.where('completedAt')
+			.aboveOrEqual(dayjs().startOf('week').toDate()) // Monday in the UK
+			.toArray()
+		return thisWeeksCompletedTodos.reduce(
+			(totalStarPointsEarned, todo) =>
+				totalStarPointsEarned + (todo?.starPoints || 0),
+			0,
+		)
+	})
+
+	return (
+		<IonButton
+			className="ml-4"
+			fill="clear"
+			id="star-points"
+		>
+			<IonIcon
+				icon={starSharp}
+				slot="icon-only"
+			></IonIcon>
+			<IonPopover
+				trigger="star-points"
+				triggerAction="click"
+			>
+				<IonContent class="ion-padding">
+					Star points this week: {starPointsEarned}
+				</IonContent>
+			</IonPopover>
+			<span className="ml-3 font-mono text-xl">{starPointsEarned}</span>
+		</IonButton>
+	)
+}

cypress/e2e/spec.cy.ts

@@ -14,15 +14,13 @@ it('works', () => {
 		cy.contains('Confirm').click()
 	})
 
-	assertLists([], ['take the bins out'])
+	assertLists(['take the bins out'], [])
 
 	cy.get('#view-menu-button').click()
 	cy.contains('ion-button', 'Edit roles')
 	// For some reason clicking edit roles doesn't work so we hard-navigate
 	cy.visit('/constellation')
 
-	cy.contains('ion-title', 'Constellation')
-
 	cy.get('ion-fab-button').click()
 	cy.get('ion-modal').within(() => {
 		cy.contains('label', 'Title').find('input').wait(2000).type('Father')
@@ -72,28 +70,23 @@ it('works', () => {
 	cy.get('ion-modal').contains('Confirm').click()
 
 	assertLists(
-		[],
 		['plan birthday day out', 'be silly together', 'take the bins out'],
+		[],
 	)
 
-	cy.get('#icebox').contains('take the bins out').click()
-	cy.get('#todo-action-sheet').contains('Move to wayfinder').click()
-	cy.get('#log-and-wayfinder').contains('take the bins out')
-	cy.get('#todo-action-sheet').should('not.exist')
-
-	cy.get('#icebox').contains('be silly together').click()
-	cy.get('#todo-action-sheet').contains('Move to wayfinder').click()
-	cy.get('#log-and-wayfinder').contains('be silly together')
+	cy.get('#log-and-wayfinder').contains('be silly together').click()
+	cy.get('#todo-action-sheet').contains('Move to icebox').click()
+	cy.get('#icebox').contains('be silly together')
 	cy.get('#todo-action-sheet').should('not.exist')
 
-	cy.get('#icebox').contains('plan birthday day out').click()
-	cy.get('#todo-action-sheet').contains('Move to wayfinder').click()
-	cy.get('#log-and-wayfinder').contains('plan birthday day out')
+	cy.get('#log-and-wayfinder').contains('plan birthday day out').click()
+	cy.get('#todo-action-sheet').contains('Move to icebox').click()
+	cy.get('#icebox').contains('plan birthday day out')
 	cy.get('#todo-action-sheet').should('not.exist')
 
 	assertLists(
-		['plan birthday day out', 'be silly together', 'take the bins out'],
-		[],
+		['take the bins out'],
+		['plan birthday day out', 'be silly together'],
 	)
 
 	// reorderImportantTodo(0, 2)
@@ -129,13 +122,13 @@ it('works', () => {
 		.click()
 
 	assertLists(
-		['take the bins out', 'plan birthday day out', 'be silly together'],
-		[],
+		['take the bins out'],
+		['plan birthday day out', 'be silly together'],
 	)
 })
 
 function assertLists(wayfinder: string[], icebox: string[]) {
-	cy.get('#log-and-wayfinder .todo')
+	cy.get('#log-and-wayfinder .todo ion-label')
 		.should('have.length', wayfinder.length)
 		.invoke('toArray')
 		.invoke('map', item => item.textContent)