Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
thalia
ThaliApp
Commits
cfd0b8b6
Commit
cfd0b8b6
authored
Jun 16, 2017
by
Gijs Hendriksen
Browse files
Added loading indicator to Profile and Event
parent
0c0e52bd
Changes
13
Hide whitespace changes
Inline
Side-by-side
app/actions/actionTypes.js
View file @
cfd0b8b6
...
...
@@ -7,9 +7,11 @@ export const LOGOUT = 'LOGOUT';
export
const
OPENDRAWER
=
'
OPENDRAWER
'
;
export
const
CALENDARRETREIVED
=
'
CALENDARRETREIVED
'
;
export
const
CALENDARERROR
=
'
CALENDARERROR
'
;
export
const
LOADEVENTSTART
=
'
LOADEVENTSTART
'
;
export
const
LOADEVENTSUCCESS
=
'
LOADEVENTSUCCESS
'
;
export
const
LOADEVENTFAILURE
=
'
LOADEVENTFAILURE
'
;
export
const
RESETLOGINSTATE
=
'
RESETLOGINSTATE
'
;
export
const
WELCOME
=
'
WELCOME
'
;
export
const
LOADPROFILESTART
=
'
LOADPROFILESTART
'
;
export
const
LOADPROFILESUCCESS
=
'
LOADPROFILESUCCESS
'
;
export
const
LOADPROFILEFAILURE
=
'
LOADPROFILEFAILURE
'
;
app/actions/events.js
View file @
cfd0b8b6
...
...
@@ -2,6 +2,12 @@ import * as types from './actionTypes';
import
{
navigate
}
from
'
./navigation
'
;
import
{
apiUrl
}
from
'
../url
'
;
export
function
start
()
{
return
{
type
:
types
.
LOADEVENTSTART
,
};
}
export
function
success
(
data
,
registrations
)
{
return
{
type
:
types
.
LOADEVENTSUCCESS
,
...
...
@@ -37,6 +43,9 @@ function loadRegistrations(id, token) {
export
function
loadEvent
(
id
,
token
)
{
return
(
dispatch
)
=>
{
dispatch
(
start
());
dispatch
(
navigate
(
'
event
'
));
const
data
=
{
method
:
'
GET
'
,
headers
:
{
...
...
@@ -53,21 +62,14 @@ export function loadEvent(id, token) {
(
response
)
=>
{
if
(
response
.
status
>
-
1
)
{
loadRegistrations
(
id
,
token
)
.
then
((
registrations
)
=>
{
dispatch
(
success
(
response
,
registrations
));
dispatch
(
navigate
(
'
event
'
));
});
.
then
(
registrations
=>
dispatch
(
success
(
response
,
registrations
)));
}
else
{
dispatch
(
success
(
response
,
[]));
dispatch
(
navigate
(
'
event
'
));
}
},
)
.
catch
(
()
=>
{
dispatch
(
fail
());
dispatch
(
navigate
(
'
event
'
));
},
()
=>
dispatch
(
fail
())
);
};
}
app/actions/profile.js
View file @
cfd0b8b6
...
...
@@ -3,6 +3,12 @@ import { navigate } from './navigation';
import
{
apiUrl
}
from
'
../url
'
;
export
function
start
()
{
return
{
type
:
types
.
LOADPROFILESTART
,
};
}
export
function
success
(
profile
)
{
return
{
type
:
types
.
LOADPROFILESUCCESS
,
...
...
@@ -18,6 +24,9 @@ export function fail() {
export
function
loadProfile
(
token
,
member
=
'
me
'
)
{
return
(
dispatch
)
=>
{
dispatch
(
start
());
dispatch
(
navigate
(
'
profile
'
));
const
data
=
{
method
:
'
GET
'
,
headers
:
{
...
...
@@ -32,16 +41,10 @@ export function loadProfile(token, member = 'me') {
response
=>
response
.
json
(),
)
.
then
(
(
response
)
=>
{
dispatch
(
success
(
response
));
dispatch
(
navigate
(
'
profile
'
));
},
response
=>
dispatch
(
success
(
response
)),
)
.
catch
(
()
=>
{
dispatch
(
fail
());
dispatch
(
navigate
(
'
profile
'
));
},
()
=>
dispatch
(
fail
()),
);
};
}
app/components/Calendar.js
View file @
cfd0b8b6
import
React
,
{
Component
}
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
Text
,
View
,
SectionList
,
ActivityIndicator
}
from
'
react-native
'
;
import
{
Text
,
View
,
SectionList
}
from
'
react-native
'
;
import
{
connect
}
from
'
react-redux
'
;
import
Moment
from
'
moment
'
;
import
'
moment/locale/nl
'
;
import
*
as
actions
from
'
../actions/calendar
'
;
import
EventCard
from
'
./EventCard
'
;
import
LoadingScreen
from
'
./LoadingScreen
'
;
import
styles
from
'
./style/calendar
'
;
import
{
colors
}
from
'
../style
'
;
/* eslint no-param-reassign: ["error", { "props": false }]*/
const
addEventToSection
=
(
sections
,
date
,
event
)
=>
{
...
...
@@ -135,18 +135,7 @@ class Calendar extends Component {
render
()
{
if
(
!
this
.
props
.
calendarFetched
)
{
this
.
props
.
retrieveCalendar
(
this
.
props
.
token
);
return
(
<
View
style
=
{
styles
.
indicatorView
}
>
<
ActivityIndicator
animating
color
=
{
colors
.
magenta
}
style
=
{
styles
.
indicator
}
size
=
"
large
"
/>
<
/View
>
);
return
<
LoadingScreen
/>
;
}
else
if
(
this
.
props
.
eventList
.
length
===
0
)
{
return
(
<
View
>
...
...
app/components/Event.js
View file @
cfd0b8b6
...
...
@@ -7,6 +7,7 @@ import 'moment/locale/nl';
import
styles
from
'
./style/event
'
;
import
MemberView
from
'
./MemberView
'
;
import
LoadingScreen
from
'
./LoadingScreen
'
;
import
{
colors
}
from
'
../style
'
;
const
REGISTRATION_NOT_NEEDED
=
-
1
;
...
...
@@ -227,6 +228,10 @@ class Event extends Component {
};
render
()
{
if
(
!
this
.
props
.
hasLoaded
)
{
return
<
LoadingScreen
/>
;
}
if
(
this
.
props
.
success
)
{
return
(
<
ScrollView
backgroundColor
=
{
colors
.
background
}
contentContainerStyle
=
{
styles
.
eventView
}
>
...
...
@@ -286,12 +291,14 @@ Event.propTypes = {
name
:
PropTypes
.
string
.
isRequired
,
})).
isRequired
,
success
:
PropTypes
.
bool
.
isRequired
,
hasLoaded
:
PropTypes
.
bool
.
isRequired
,
};
const
mapStateToProps
=
state
=>
({
data
:
state
.
events
.
data
,
registrations
:
state
.
events
.
registrations
,
success
:
state
.
events
.
success
,
hasLoaded
:
state
.
events
.
hasLoaded
,
});
export
default
connect
(
mapStateToProps
,
()
=>
({}))(
Event
);
app/components/LoadingScreen.js
0 → 100644
View file @
cfd0b8b6
import
React
from
'
react
'
;
import
{
View
,
ActivityIndicator
}
from
'
react-native
'
;
import
{
colors
}
from
'
../style
'
;
import
styles
from
'
./style/loadingScreen
'
;
const
LoadingScreen
=
()
=>
(
<
View
style
=
{
styles
.
indicatorView
}
>
<
ActivityIndicator
animating
color
=
{
colors
.
magenta
}
style
=
{
styles
.
indicator
}
size
=
"
large
"
/>
<
/View
>
);
export
default
LoadingScreen
;
app/components/Profile.js
View file @
cfd0b8b6
...
...
@@ -6,6 +6,8 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
import
LinearGradient
from
'
react-native-linear-gradient
'
;
import
Moment
from
'
moment
'
;
import
LoadingScreen
from
'
./LoadingScreen
'
;
import
{
back
}
from
'
../actions/navigation
'
;
import
styles
,
{
HEADER_MIN_HEIGHT
,
HEADER_MAX_HEIGHT
,
HEADER_SCROLL_DISTANCE
}
from
'
./style/profile
'
;
...
...
@@ -107,6 +109,10 @@ class Profile extends Component {
}
render
()
{
if
(
!
this
.
props
.
hasLoaded
)
{
return
<
LoadingScreen
/>
;
}
const
headerHeight
=
this
.
props
.
success
?
this
.
scrollY
.
interpolate
({
inputRange
:
[
0
,
HEADER_SCROLL_DISTANCE
],
outputRange
:
[
HEADER_MAX_HEIGHT
,
HEADER_MIN_HEIGHT
],
...
...
@@ -225,11 +231,13 @@ Profile.propTypes = {
}).
isRequired
,
success
:
PropTypes
.
bool
.
isRequired
,
back
:
PropTypes
.
func
.
isRequired
,
hasLoaded
:
PropTypes
.
bool
.
isRequired
,
};
const
mapStateToProps
=
state
=>
({
profile
:
state
.
profile
.
profile
,
success
:
state
.
profile
.
success
,
hasLoaded
:
state
.
profile
.
hasLoaded
,
});
const
mapDispatchToProps
=
dispatch
=>
({
...
...
app/components/Welcome.js
View file @
cfd0b8b6
import
React
,
{
Component
}
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
ActivityIndicator
,
View
,
Text
,
SectionList
,
TouchableOpacity
}
from
'
react-native
'
;
import
{
View
,
Text
,
SectionList
,
TouchableOpacity
}
from
'
react-native
'
;
import
{
connect
}
from
'
react-redux
'
;
import
Moment
from
'
moment
'
;
import
'
moment/locale/nl
'
;
import
EventDetailCard
from
'
./EventDetailCard
'
;
import
LoadingScreen
from
'
./LoadingScreen
'
;
import
{
retrieveShortlist
}
from
'
../actions/welcome
'
;
import
{
navigate
}
from
'
../actions/navigation
'
;
import
styles
from
'
./style/welcome
'
;
import
{
colors
}
from
'
../style
'
;
const
eventListToSections
=
(
eventList
)
=>
{
Moment
.
locale
(
'
nl
'
);
...
...
@@ -83,18 +83,7 @@ class Welcome extends Component {
render
()
{
if
(
!
this
.
props
.
hasLoaded
)
{
this
.
props
.
retrieveShortlist
(
this
.
props
.
token
,
5
);
return
(
<
View
style
=
{
styles
.
indicatorView
}
>
<
ActivityIndicator
animating
color
=
{
colors
.
magenta
}
style
=
{
styles
.
indicator
}
size
=
"
large
"
/>
<
/View
>
);
return
<
LoadingScreen
/>
;
}
else
if
(
this
.
props
.
eventList
.
length
===
0
)
{
return
(
<
View
>
...
...
app/components/style/calendar.js
View file @
cfd0b8b6
...
...
@@ -37,11 +37,6 @@ const styles = StyleSheet.create({
paddingBottom
:
12
,
paddingLeft
:
16
,
},
indicatorView
:
{
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
flex
:
1
,
},
});
export
default
styles
;
app/components/style/loadingScreen.js
0 → 100644
View file @
cfd0b8b6
import
{
StyleSheet
}
from
'
react-native
'
;
const
styles
=
StyleSheet
.
create
({
indicatorView
:
{
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
flex
:
1
,
},
});
export
default
styles
;
app/components/style/welcome.js
View file @
cfd0b8b6
...
...
@@ -28,11 +28,6 @@ const styles = StyleSheet.create({
fontSize
:
14
,
color
:
colors
.
darkMagenta
,
},
indicatorView
:
{
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
flex
:
1
,
},
});
export
default
styles
;
app/reducers/events.js
View file @
cfd0b8b6
...
...
@@ -15,21 +15,30 @@ const initialState = {
},
registrations
:
[],
success
:
false
,
hasLoaded
:
false
,
};
export
default
function
loadEvent
(
state
=
initialState
,
action
=
{})
{
switch
(
action
.
type
)
{
case
types
.
LOADEVENTSTART
:
{
return
{
...
state
,
hasLoaded
:
false
,
};
}
case
types
.
LOADEVENTSUCCESS
:
return
{
...
state
,
data
:
action
.
data
,
registrations
:
action
.
registrations
,
success
:
true
,
hasLoaded
:
true
,
};
case
types
.
LOADEVENTFAILURE
:
return
{
...
state
,
success
:
false
,
hasLoaded
:
true
,
};
default
:
return
state
;
...
...
app/reducers/profile.js
View file @
cfd0b8b6
...
...
@@ -14,20 +14,28 @@ const initialState = {
achievements
:
[],
},
success
:
false
,
hasLoaded
:
false
,
};
export
default
function
profile
(
state
=
initialState
,
action
=
{})
{
switch
(
action
.
type
)
{
case
types
.
LOADPROFILESTART
:
return
{
...
state
,
hasLoaded
:
false
,
};
case
types
.
LOADPROFILESUCCESS
:
return
{
...
state
,
profile
:
action
.
profile
,
success
:
true
,
hasLoaded
:
true
,
};
case
types
.
LOADPROFILEFAILURE
:
return
{
...
state
,
success
:
false
,
hasLoaded
:
true
,
};
default
:
return
state
;
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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