Ticket-88

frontend/src/screens/study-landing.tsx

@@ -1,5 +1,5 @@
 import { Navigate, NavLink, useLoaderData } from 'react-router-dom'
-import { React } from '@common'
+import { React, useState, useEffect } from '@common'
 import { colors } from '@theme'
 import { LearningPath, ParticipantStudy } from '@api'
 import { Page } from '@components'
@@ -17,16 +17,34 @@ import {
     Stack,
     Text,
     Title,
+    Notification,
 } from '@mantine/core';
+import { IconCheck } from '@tabler/icons-react'
 import Markdown from 'react-markdown'
 import { useLearningPathStudies } from './learner/studies';
 import { CompactStudyCard } from '../components/study/compact-study-card';
 
 export default function StudyLanding() {
     const env = useEnvironment()
-
     const study = useLoaderData() as ParticipantStudy
     const learningPathStudies = useLearningPathStudies(study?.learningPath)
+    const [showNotification, setShowNotification] = useState(false)
+
+    useEffect(() => {
+        if (study.totalPoints > 0) {
+            setShowNotification(true)
+        }
+    }, [study.totalPoints])
+
+    useEffect(() => {
+        if (showNotification) {
+            const timer = setTimeout(() => {
+                setShowNotification(false)
+            }, 2000) 
+
+            return () => clearTimeout(timer)
+        }
+    }, [showNotification])
 
     if (!study || !study.learningPath) {
         return <Navigate to='/studies' />
@@ -44,6 +62,25 @@ export default function StudyLanding() {
                     <LearningPathProgress learningPath={study.learningPath} studies={learningPathStudies} />
                 }
             </Card>
+            {showNotification && (
+                <Notification
+                    icon={<IconCheck size="1.1rem" />}
+                    color="teal"
+                    onClose={() => setShowNotification(false)}
+                    style={{
+                        position: 'absolute',
+                        top: '1rem',
+                        right: '1rem',
+                        zIndex: 1000,
+                        maxWidth: '400px',
+                    }}
+                >
+                    <Title order={6} mb={5}>You just earned {study.totalPoints} points!</Title>
+                    <Text size="xs" lineClamp={2} c={colors.gray70}>
+                    The longer the study, the more points you earn. Reach 200 points to unlock additional rewards.
+                    </Text>
+                </Notification>
+            )}
         </Page>
     )
 }
@@ -100,7 +137,7 @@ const CompletedLearningPath: FC<{learningPath: LearningPath}> = ({ learningPath
 
                     <Stack gap='0'>
                         <Title order={5} c='purple'>
-                            You’ve done awesome work so far!
+                        You’ve done awesome work so far!
                         </Title>
                         <Text c={colors.gray70}>
                             {badge.description}