Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
D
dusken-client
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
EDB
dusken-client
Commits
be673803
Commit
be673803
authored
May 05, 2019
by
Nikolai R Kristiansen
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
♻
️ Refactor Proof using hooks
parent
e542732b
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
145 additions
and
156 deletions
+145
-156
src/modules/membership/Proof.js
src/modules/membership/Proof.js
+145
-156
No files found.
src/modules/membership/Proof.js
View file @
be673803
import
React
,
{
Component
}
from
'
react
'
;
import
React
,
{
useEffect
,
useState
,
useRef
}
from
'
react
'
;
import
{
Image
,
ScrollView
,
StyleSheet
,
Text
,
TouchableOpacity
,
View
}
from
'
react-native
'
;
import
{
Button
,
Text
as
NBText
,
Spinner
}
from
'
native-base
'
;
import
Confetti
from
'
react-native-confetti
'
;
import
theme
from
'
../../theme
'
;
export
default
class
Proof
extends
Component
{
CONFETTI_TIMEOUT
=
15000
;
constructor
(
props
)
{
super
(
props
);
this
.
state
=
{
stopConfetti
:
false
,
};
}
componentDidUpdate
()
{
if
(
this
.
_confettiView
&&
this
.
state
.
stopConfetti
)
{
this
.
_confettiView
.
stopConfetti
();
this
.
setState
({
stopConfetti
:
false
});
}
const
MembershipValidTo
=
({
user
})
=>
{
if
(
!
user
.
last_membership
)
{
return
null
;
}
componentWillUnmount
()
{
if
(
this
.
_confettiView
)
{
this
.
_confettiView
.
stopConfetti
();
}
let
validTo
=
user
.
last_membership
.
end_date
;
if
(
user
.
last_membership
.
membership_type
===
'
lifelong
'
)
{
validTo
=
'
Livsvarig
'
;
}
onMembershipPress
=
()
=>
{
this
.
setState
({
showConfetti
:
true
},
()
=>
{
if
(
this
.
_confettiView
)
{
this
.
_confettiView
.
startConfetti
();
setTimeout
(
function
()
{
this
.
setState
({
stopConfetti
:
true
});
}.
bind
(
this
),
this
.
CONFETTI_TIMEOUT
);
}
});
};
membershipValidTo
()
{
if
(
!
this
.
props
.
user
.
last_membership
)
{
return
(
<
View
style
=
{{
alignItems
:
'
center
'
,
flex
:
1
}}
>
<
Text
>
Gyldig
til
:
<
/Text
>
<
Text
style
=
{
styles
.
validToValue
}
>
{
validTo
}
<
/Text
>
<
/View
>
);
};
const
MembershipStatus
=
({
user
,
onMembershipPress
})
=>
{
if
(
!
user
.
is_member
)
{
if
(
!
user
.
last_membership
)
{
return
null
;
}
let
validTo
=
this
.
props
.
user
.
last_membership
.
end_date
;
if
(
this
.
props
.
user
.
last_membership
.
membership_type
===
'
lifelong
'
)
{
validTo
=
'
Livsvarig
'
;
}
return
(
<
View
style
=
{{
alignItems
:
'
center
'
,
flex
:
1
}}
>
<
Text
>
Gyldig
til
:
<
/Text
>
<
Text
style
=
{
styles
.
validToValue
}
>
{
validTo
}
<
/Text
>
<
View
style
=
{
styles
.
expired
}
>
<
Text
style
=
{
styles
.
expiredText
}
>
Utløpt
<
/Text
>
<
/View
>
);
}
membershipStatus
()
{
if
(
!
this
.
props
.
user
.
is_member
)
{
if
(
!
this
.
props
.
user
.
last_membership
)
{
return
null
;
}
return
(
<
View
style
=
{
styles
.
expired
}
>
<
Text
style
=
{
styles
.
expiredText
}
>
Utløpt
<
/Text
>
<
/View
>
);
}
const
statusText
=
user
.
is_volunteer
?
'
❤️ AKTIV ❤️
'
:
'
MEDLEM
'
;
const
statusText
=
this
.
props
.
user
.
is_volunteer
?
'
❤️ AKTIV ❤️
'
:
'
MEDLEM
'
;
return
(
<
View
style
=
{
styles
.
membershipStatus
}
>
<
TouchableOpacity
onPress
=
{
onMembershipPress
}
style
=
{
styles
.
valid
}
>
<
Text
style
=
{
styles
.
validText
}
>
{
statusText
}
<
/Text
>
<
/TouchableOpacity
>
<
/View
>
);
};
return
(
<
View
style
=
{
styles
.
membershipStatus
}
>
<
TouchableOpacity
onPress
=
{
this
.
onMembershipPress
}
style
=
{
styles
.
valid
}
>
<
Text
style
=
{
styles
.
validText
}
>
{
statusText
}
<
/Text
>
<
/TouchableOpacity
>
<
/View
>
);
const
PurchaseButton
=
({
user
,
isChargingMembership
,
isLoadingMembershipType
,
onChargePress
,
membershipPrice
})
=>
{
if
(
user
.
is_member
)
{
return
null
;
}
purchaseButton
()
{
if
(
this
.
props
.
user
.
is_member
)
{
return
null
;
}
return
(
<
View
>
{
this
.
props
.
isChargingMembership
&&
<
Spinner
color
=
"
#f58220
"
/>
}
<
Button
onPress
=
{
this
.
props
.
onChargePress
}
full
disabled
=
{
this
.
props
.
isChargingMembership
||
this
.
props
.
isLoadingMembershipType
}
style
=
{
styles
.
purchaseButton
}
>
<
NBText
>
{
`Kjøp medlemskap (
${
this
.
props
.
membershipPrice
}
NOK)`
}
<
/NBText
>
<
/Button
>
<
View
style
=
{
styles
.
purchaseText
}
>
<
Text
style
=
{
styles
.
purchaseTextInner
}
>
Medlemskapet
er
gyldig
i
ett
år
<
/Text
>
<
/View
>
return
(
<
View
>
{
isChargingMembership
&&
<
Spinner
color
=
"
#f58220
"
/>
}
<
Button
onPress
=
{
onChargePress
}
full
disabled
=
{
isChargingMembership
||
isLoadingMembershipType
}
style
=
{
styles
.
purchaseButton
}
>
<
NBText
>
{
`Kjøp medlemskap (
${
membershipPrice
}
NOK)`
}
<
/NBText
>
<
/Button
>
<
View
style
=
{
styles
.
purchaseText
}
>
<
Text
style
=
{
styles
.
purchaseTextInner
}
>
Medlemskapet
er
gyldig
i
ett
år
<
/Text
>
<
/View
>
);
}
<
/View
>
);
};
confetti
()
{
if
(
!
this
.
props
.
user
.
is_member
)
{
return
null
;
}
// Confetti!!!!
return
(
<
Confetti
ref
=
{(
node
)
=>
{
this
.
_confettiView
=
node
;
}}
confettiCount
=
{
Number
.
MAX_SAFE_INTEGER
}
/
>
);
const
UserConfetti
=
({
user
,
confettiRef
})
=>
{
if
(
!
user
.
is_member
)
{
return
null
;
}
logo
()
{
if
(
!
this
.
props
.
user
.
is_member
)
{
return
null
;
}
// FIXME: URL to config
return
(
<
View
style
=
{{
marginTop
:
8
}}
>
<
Image
style
=
{{
width
:
null
,
height
:
100
}}
source
=
{{
uri
:
'
https://galtinn.neuf.no/static/dist/images/logo.png
'
}}
resizeMode
=
"
contain
"
/>
<
/View
>
);
// Confetti!!!!
return
<
Confetti
ref
=
{
confettiRef
}
confettiCount
=
{
Number
.
MAX_SAFE_INTEGER
}
/>
;
};
const
Logo
=
({
user
})
=>
{
if
(
!
user
.
is_member
)
{
return
null
;
}
chargeError
()
{
if
(
!
this
.
props
.
chargeError
)
{
return
null
;
}
return
(
<
View
style
=
{{
marginTop
:
8
}}
>
<
Image
style
=
{{
width
:
null
,
height
:
100
}}
source
=
{{
uri
:
'
https://galtinn.neuf.no/static/dist/images/logo.png
'
}}
resizeMode
=
"
contain
"
/>
<
/View
>
);
};
return
(
<
View
>
<
Text
style
=
{
styles
.
errorMessage
}
>
{
this
.
props
.
chargeError
}
<
/Text
>
<
/View
>
);
const
ChargeError
=
({
chargeError
})
=>
{
if
(
!
chargeError
)
{
return
null
;
}
render
()
{
return
(
<
View
>
{
this
.
confetti
()}
<
ScrollView
>
<
View
style
=
{[
styles
.
card
,
{
paddingVertical
:
16
}]}
>
{
this
.
membershipName
()}
{
this
.
logo
()}
{
this
.
membershipStatus
()}
{
this
.
chargeError
()}
{
this
.
purchaseButton
()}
{
this
.
membershipValidTo
()}
<
/View
>
<
View
>
<
Button
onPress
=
{
this
.
props
.
onLogoutPress
}
style
=
{
styles
.
logoutButton
}
small
>
<
NBText
>
Logg
ut
<
/NBText
>
<
/Button
>
<
/View
>
<
/ScrollView
>
<
/View
>
);
return
(
<
View
>
<
Text
style
=
{
styles
.
errorMessage
}
>
{
chargeError
}
<
/Text
>
<
/View
>
);
};
const
MembershipName
=
({
user
})
=>
{
let
name
=
`
${
user
.
first_name
}
${
user
.
last_name
}
`
;
if
(
name
===
'
'
)
{
name
=
user
.
email
;
}
return
(
<
View
>
<
Text
style
=
{
styles
.
nameText
}
>
{
name
}
<
/Text
>
<
/View
>
);
};
const
Proof
=
({
chargeError
,
user
,
isChargingMembership
,
isLoadingMembershipType
,
membershipPrice
,
onChargePress
,
onLogoutPress
,
})
=>
{
const
CONFETTI_TIMEOUT
=
15000
;
const
confettiRef
=
useRef
(
null
);
useEffect
(()
=>
{
return
()
=>
{
if
(
confettiRef
&&
confettiRef
.
current
)
{
confettiRef
.
current
.
stopConfetti
();
}
};
});
membershipName
()
{
let
name
=
`
${
this
.
props
.
user
.
first_name
}
${
this
.
props
.
user
.
last_name
}
`
;
if
(
name
===
'
'
)
{
name
=
this
.
props
.
user
.
email
;
}
return
(
<
View
>
<
Text
style
=
{
styles
.
nameText
}
>
{
name
}
<
/Text
>
<
/View
>
);
}
}
const
onMembershipPress
=
()
=>
{
confettiRef
.
current
.
startConfetti
();
setTimeout
(()
=>
{
if
(
confettiRef
&&
confettiRef
.
current
)
{
confettiRef
.
current
.
stopConfetti
();
}
},
CONFETTI_TIMEOUT
);
};
return
(
<
View
>
<
UserConfetti
user
=
{
user
}
confettiRef
=
{
confettiRef
}
/
>
<
ScrollView
>
<
View
style
=
{[
styles
.
card
,
{
paddingVertical
:
16
}]}
>
<
MembershipName
user
=
{
user
}
/
>
<
Logo
user
=
{
user
}
/
>
<
MembershipStatus
user
=
{
user
}
onMembershipPress
=
{
onMembershipPress
}
/
>
<
ChargeError
chargeError
=
{
chargeError
}
/
>
<
PurchaseButton
user
=
{
user
}
isChargingMembership
=
{
isChargingMembership
}
isLoadingMembershipType
=
{
isLoadingMembershipType
}
membershipPrice
=
{
membershipPrice
}
onChargePress
=
{
onChargePress
}
/
>
<
MembershipValidTo
user
=
{
user
}
/
>
<
/View
>
<
View
>
<
Button
onPress
=
{
onLogoutPress
}
style
=
{
styles
.
logoutButton
}
small
>
<
NBText
>
Logg
ut
<
/NBText
>
<
/Button
>
<
/View
>
<
/ScrollView
>
<
/View
>
);
};
export
default
Proof
;
const
styles
=
StyleSheet
.
create
({
card
:
theme
.
card
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment