1
- import React , { useEffect , useState } from ' react' ;
2
- import { View , Text , StyleSheet } from ' react-native' ;
1
+ import React , { useEffect , useState } from " react" ;
2
+ import { View , Text , StyleSheet } from " react-native" ;
3
3
import { User } from "../../utils/types" ;
4
- import { userGetUserInfo , userUpdateUser } from "../../actions/User" ;
5
- import dayjs from ' dayjs' ;
6
- import dayOfYear from ' dayjs/plugin/dayOfYear' ;
4
+ import { userGetUserInfo } from "../../actions/User" ;
5
+ import dayjs from " dayjs" ;
6
+ import dayOfYear from " dayjs/plugin/dayOfYear" ;
7
7
import { endOfExecutionHandler , ErrorWrapper } from "../../utils/error" ;
8
- import FontAwesome from '@expo/vector-icons/FontAwesome' ;
8
+ import FontAwesome from "@expo/vector-icons/FontAwesome" ;
9
+ import { Balloons } from "react-native-fiesta" ;
9
10
10
11
dayjs . extend ( dayOfYear ) ;
11
12
12
13
const BirthdayBanner = ( ) => {
13
- const [ birthdayBanner , setBirthdayBanner ] = useState < { header : string , message : string } | null > ( null ) ;
14
- const [ error , setError ] = useState ( "Could not get user" ) ;
14
+ const [ birthdayBanner , setBirthdayBanner ] = useState < {
15
+ header : string ;
16
+ message : string ;
17
+ } | null > ( null ) ;
18
+ const [ error , setError ] = useState ( "Could not get user" ) ;
15
19
16
- const checkForBirthday = async ( ) => {
17
- try {
18
- const user : User = ( await ErrorWrapper ( {
19
- functionToExecute : userGetUserInfo ,
20
- errorHandler : setError ,
21
- } ) ) as User ;
22
-
23
- const today = new Date ( ) ;
24
- const birthday = user . birthday ;
25
-
26
- if ( birthday && dayjs ( today ) . dayOfYear ( ) === dayjs ( birthday ) . dayOfYear ( ) ) {
27
- setBirthdayBanner ( { header : `Happy Birthday, ${ user . firstName } ` , message : `Wishing you an amazing day and a fantastic year ahead!` } ) ;
28
- } else {
29
- setBirthdayBanner ( null ) ;
30
- }
31
- } catch ( error ) {
32
- endOfExecutionHandler ( error as Error ) ;
33
- }
34
- } ;
20
+ const checkForBirthday = async ( ) => {
21
+ try {
22
+ const user : User = ( await ErrorWrapper ( {
23
+ functionToExecute : userGetUserInfo ,
24
+ errorHandler : setError ,
25
+ } ) ) as User ;
35
26
36
- useEffect ( ( ) => {
37
- checkForBirthday ( ) ;
38
- } , [ ] ) ;
39
-
27
+ const today = new Date ( ) ;
28
+ const birthday = user . birthday ;
29
+
30
+ if (
31
+ birthday &&
32
+ dayjs ( today ) . dayOfYear ( ) === dayjs ( birthday ) . dayOfYear ( )
33
+ ) {
34
+ setBirthdayBanner ( {
35
+ header : `Happy Birthday, ${ user . firstName } ` ,
36
+ message : `Wishing you an amazing day and a fantastic year ahead!` ,
37
+ } ) ;
38
+ } else {
39
+ setBirthdayBanner ( null ) ;
40
+ }
41
+ } catch ( error ) {
42
+ endOfExecutionHandler ( error as Error ) ;
43
+ }
44
+ } ;
45
+
46
+ useEffect ( ( ) => {
47
+ checkForBirthday ( ) ;
48
+ } , [ ] ) ;
40
49
41
50
if ( ! birthdayBanner ) return null ;
42
51
43
52
return (
44
- < View style = { styles . birthdayBanner } >
45
- < FontAwesome name = "birthday-cake" size = { 20 } color = "#807efb" justify-content = "center" />
53
+ < >
54
+ < View style = { styles . balloonsOverlay } >
55
+ { birthdayBanner && < Balloons /> }
56
+ </ View >
57
+ < View style = { styles . birthdayBanner } >
58
+ < FontAwesome
59
+ name = "birthday-cake"
60
+ size = { 20 }
61
+ color = "#807efb"
62
+ justify-content = "center"
63
+ />
46
64
< Text style = { styles . birthdayTitle } > { birthdayBanner . header } !</ Text >
47
65
{ birthdayBanner . message ? (
48
- < Text style = { styles . birthdayMessage } > { birthdayBanner . message } </ Text >
66
+ < Text style = { styles . birthdayMessage } > { birthdayBanner . message } </ Text >
49
67
) : null }
50
- </ View >
68
+ </ View >
69
+ </ >
51
70
) ;
52
71
} ;
53
72
54
73
const styles = StyleSheet . create ( {
74
+ balloonsOverlay : {
75
+ position : "absolute" ,
76
+ top : 0 ,
77
+ left : 0 ,
78
+ right : 0 ,
79
+ bottom : 0 ,
80
+ zIndex : 1 ,
81
+ pointerEvents : "none" ,
82
+ } ,
55
83
birthdayBanner : {
56
84
borderRadius : 10 ,
57
85
backgroundColor : "#3F3BED" ,
@@ -61,19 +89,20 @@ const styles = StyleSheet.create({
61
89
flexDirection : "column" ,
62
90
gap : 5 ,
63
91
opacity : 0.9 ,
64
- alignItems : "center"
92
+ alignItems : "center" ,
93
+ zIndex : 1 ,
65
94
} ,
66
95
birthdayTitle : {
67
96
color : "white" ,
68
97
fontSize : 14 ,
69
98
fontWeight : "700" ,
70
- textAlign : "center"
99
+ textAlign : "center" ,
71
100
} ,
72
101
birthdayMessage : {
73
102
color : "white" ,
74
103
fontSize : 12 ,
75
104
fontWeight : "400" ,
76
- textAlign : "center"
105
+ textAlign : "center" ,
77
106
} ,
78
107
} ) ;
79
108
0 commit comments