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
4e21cc60
Commit
4e21cc60
authored
Jun 16, 2017
by
Wietse Kuipers
Browse files
Merge branch 'feature/loading-screen' into 'master'
Added loading indicator to Profile and Event See merge request
!47
parents
0c0e52bd
fcf2eb10
Changes
13
Hide whitespace changes
Inline
Side-by-side
app/actions/actionTypes.js
View file @
4e21cc60
...
...
@@ -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 @
4e21cc60
...
...
@@ -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 @
4e21cc60
...
...
@@ -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 @
4e21cc60
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 @
4e21cc60
...
...
@@ -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 @
4e21cc60
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 @
4e21cc60
...
...
@@ -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 @
4e21cc60
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 @
4e21cc60
...
...
@@ -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 @
4e21cc60
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 @
4e21cc60
...
...
@@ -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 @
4e21cc60
...
...
@@ -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 @
4e21cc60
...
...
@@ -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