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
64b4b83a
Commit
64b4b83a
authored
Mar 09, 2017
by
Gijs Hendriksen
Browse files
Added state storage, implemented basic logout functionality
parent
f846183a
Changes
7
Hide whitespace changes
Inline
Side-by-side
app/actions/actionTypes.js
View file @
64b4b83a
export
const
NAVIGATE
=
'
NAVIGATE
'
;
export
const
BACK
=
'
BACK
'
;
export
const
LOGININIT
=
'
LOGININIT
'
;
export
const
LOGINPROGRESS
=
'
LOGINPROGRESS
'
;
export
const
LOGINSUCCESS
=
'
LOGINSUCCESS
'
;
export
const
LOGINFAILURE
=
'
LOGINFAILURE
'
;
export
const
LOGOUT
=
'
LOGOUT
'
;
export
const
OPENDRAWER
=
'
OPENDRAWER
'
;
app/actions/login.js
View file @
64b4b83a
import
{
AsyncStorage
}
from
'
react-native
'
;
import
*
as
types
from
'
./actionTypes
'
;
const
USERNAMEKEY
=
'
@MyStore:username
'
;
const
TOKENKEY
=
'
@MyStore:token
'
;
export
function
loginSuccess
(
username
,
token
)
{
return
{
type
:
types
.
LOGINSUCCESS
,
...
...
@@ -43,10 +47,28 @@ export function login(username, password) {
.
then
(
(
responseJson
)
=>
{
if
(
responseJson
.
token
)
{
return
dispatch
(
loginSuccess
(
username
,
responseJson
.
token
));
return
AsyncStorage
.
multiSet
([[
USERNAMEKEY
,
username
],
[
TOKENKEY
,
responseJson
.
token
]])
.
then
(
()
=>
dispatch
(
loginSuccess
(
username
,
responseJson
.
token
)),
);
}
return
dispatch
(
loginFailure
());
})
.
catch
(()
=>
dispatch
(
loginFailure
()));
};
}
export
function
initLogin
(
username
,
token
)
{
return
{
type
:
types
.
LOGININIT
,
username
,
token
,
};
}
export
function
logout
()
{
AsyncStorage
.
multiRemove
([
USERNAMEKEY
,
TOKENKEY
]);
return
{
type
:
types
.
LOGOUT
,
};
}
app/app.js
View file @
64b4b83a
import
React
from
'
react
'
;
import
{
BackAndroid
}
from
'
react-native
'
;
import
React
,
{
Component
}
from
'
react
'
;
import
{
BackAndroid
,
AsyncStorage
}
from
'
react-native
'
;
import
{
createStore
,
applyMiddleware
,
combineReducers
}
from
'
redux
'
;
import
{
Provider
}
from
'
react-redux
'
;
import
thunk
from
'
redux-thunk
'
;
...
...
@@ -7,11 +7,15 @@ import thunk from 'redux-thunk';
import
*
as
reducers
from
'
./reducers
'
;
import
ReduxNavigator
from
'
./components/navigator
'
;
import
{
back
}
from
'
./actions/navigation
'
;
import
{
initLogin
}
from
'
./actions/login
'
;
const
createStoreWithMiddleware
=
applyMiddleware
(
thunk
)(
createStore
);
const
reducer
=
combineReducers
(
reducers
);
const
store
=
createStoreWithMiddleware
(
reducer
);
const
USERNAMEKEY
=
'
@MyStore:username
'
;
const
TOKENKEY
=
'
@MyStore:token
'
;
BackAndroid
.
addEventListener
(
'
hardwareBackPress
'
,
()
=>
{
if
(
store
.
getState
().
navigation
.
previousScenes
.
length
===
0
)
{
return
false
;
...
...
@@ -20,10 +24,34 @@ BackAndroid.addEventListener('hardwareBackPress', () => {
return
true
;
});
const
Main
=
()
=>
<
Provider
store
=
{
store
}
>
<
ReduxNavigator
/>
<
/Provider
>
;
class
Main
extends
Component
{
componentDidMount
()
{
AsyncStorage
.
multiGet
([
USERNAMEKEY
,
TOKENKEY
])
.
then
(
(
result
)
=>
{
// Transform [key, value] pairs into object, for easier access
const
values
=
result
.
reduce
((
obj
,
pair
)
=>
{
const
obj2
=
{
...
obj
};
obj2
[
pair
[
0
]]
=
pair
[
1
];
return
obj2
;
},
{});
const
username
=
values
[
USERNAMEKEY
];
const
token
=
values
[
TOKENKEY
];
if
(
username
!==
null
&&
token
!==
null
)
{
store
.
dispatch
(
initLogin
(
username
,
token
));
}
});
}
render
()
{
return
(
<
Provider
store
=
{
store
}
>
<
ReduxNavigator
/>
<
/Provider
>
);
}
}
export
default
Main
;
app/components/Login.js
View file @
64b4b83a
...
...
@@ -10,6 +10,8 @@ const loginResult = (status) => {
return
'
Logging in
'
;
case
'
failure
'
:
return
'
Login failed
'
;
case
'
logout
'
:
return
'
Logout successful
'
;
default
:
return
''
;
}
...
...
app/components/Welcome.js
View file @
64b4b83a
import
React
from
'
react
'
;
import
{
View
,
Text
}
from
'
react-native
'
;
import
{
View
,
Text
,
Button
}
from
'
react-native
'
;
import
{
connect
}
from
'
react-redux
'
;
import
{
logout
}
from
'
../actions/login
'
;
const
Welcome
=
()
=>
const
Welcome
=
props
=>
<
View
>
<
Text
>
Welcome
!<
/Text
>
<
/View
>
;
<
Button
title
=
"
Uitloggen
"
onPress
=
{()
=>
props
.
logout
()}
/
>
<
/View>
;
export
default
Welcome
;
Welcome
.
propTypes
=
{
logout
:
React
.
PropTypes
.
func
.
isRequired
,
};
const
mapDispatchToProps
=
dispatch
=>
({
logout
:
()
=>
dispatch
(
logout
()),
});
export
default
connect
(()
=>
({}),
mapDispatchToProps
)(
Welcome
);
app/reducers/login.js
View file @
64b4b83a
...
...
@@ -14,7 +14,9 @@ export default function login(state = initialState, action = {}) {
return
{
...
state
,
loginState
:
'
failure
'
};
case
types
.
LOGINPROGRESS
:
return
{
...
state
,
loginState
:
'
progress
'
};
case
types
.
LOGOUT
:
return
{
...
state
,
loginState
:
'
logout
'
};
default
:
return
{
...
state
}
;
return
state
;
}
}
app/reducers/navigation.js
View file @
64b4b83a
...
...
@@ -52,6 +52,15 @@ export default function navigate(state = initialState, action = {}) {
drawerOpen
:
action
.
drawerOpen
,
};
}
case
types
.
LOGININIT
:
{
return
{
...
state
,
loggedIn
:
true
,
};
}
case
types
.
LOGOUT
:
{
return
initialState
;
}
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