Proof of concept on API calls...
...remains unproven.
This commit is contained in:
Daniel J. Summers
@@ -5,7 +5,6 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>myPrayerJournal</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<!-- link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -19,8 +19,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('../node_modules/element-ui/lib/theme-default/index.css');
|
||||
body {
|
||||
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue", Arial, sans-serif;
|
||||
padding-top: 60px;
|
||||
margin: 0;
|
||||
}
|
||||
#content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
footer {
|
||||
border-top: solid 1px lightgray;
|
||||
@@ -28,6 +34,12 @@ footer {
|
||||
padding: 0 1rem;
|
||||
|
||||
}
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.material-icons.md-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const http = axios.create({
|
||||
baseURL: 'http://localhost:8084'
|
||||
})
|
||||
|
||||
export default {
|
||||
something: http.get('/blah')
|
||||
}
|
||||
28
src/app/src/api/index.js
Normal file
28
src/app/src/api/index.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const http = axios.create({
|
||||
baseURL: 'http://localhost:8084/api'
|
||||
})
|
||||
|
||||
/**
|
||||
* API access for myPrayerJournal
|
||||
*/
|
||||
export default {
|
||||
|
||||
/**
|
||||
* Set the bearer token for all future requests
|
||||
* @param {string} token The token to use to identify the user to the server
|
||||
*/
|
||||
setBearer: token => { http.defaults.headers.common['Authentication'] = `Bearer ${token}` },
|
||||
|
||||
/**
|
||||
* Remove the bearer token
|
||||
*/
|
||||
removeBearer: () => delete http.defaults.headers.common['Authentication'],
|
||||
|
||||
/**
|
||||
* Get all prayer requests and their most recent updates
|
||||
*/
|
||||
journal: () => http.get('/journal')
|
||||
|
||||
}
|
||||
@@ -2,14 +2,22 @@
|
||||
article
|
||||
page-title(:title="title")
|
||||
p here you are!
|
||||
p(v-if="isLoadingJournal") journal is loading...
|
||||
p(v-if="!isLoadingJournal") journal has {{ journal.length }} entries
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import PageTitle from './PageTitle'
|
||||
|
||||
import * as actions from '@/store/action-types'
|
||||
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
data () {
|
||||
this.$store.dispatch(actions.LOAD_JOURNAL)
|
||||
return {}
|
||||
},
|
||||
components: {
|
||||
PageTitle
|
||||
},
|
||||
@@ -17,7 +25,7 @@ export default {
|
||||
title () {
|
||||
return `${this.user.given_name}'s Dashboard`
|
||||
},
|
||||
...mapState(['user'])
|
||||
...mapState(['user', 'journal', 'isLoadingJournal'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
1
src/app/src/store/action-types.js
Normal file
1
src/app/src/store/action-types.js
Normal file
@@ -0,0 +1 @@
|
||||
export const LOAD_JOURNAL = 'load-journal'
|
||||
@@ -1,18 +1,41 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
import api from '@/api'
|
||||
import AuthService from '@/auth/AuthService'
|
||||
|
||||
import * as types from './mutation-types'
|
||||
import * as actions from './action-types'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
this.auth0 = new AuthService()
|
||||
|
||||
const logError = function (error) {
|
||||
if (error.response) {
|
||||
// The request was made and the server responded with a status code
|
||||
// that falls out of the range of 2xx
|
||||
console.log(error.response.data)
|
||||
console.log(error.response.status)
|
||||
console.log(error.response.headers)
|
||||
} else if (error.request) {
|
||||
// The request was made but no response was received
|
||||
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
|
||||
// http.ClientRequest in node.js
|
||||
console.log(error.request)
|
||||
} else {
|
||||
// Something happened in setting up the request that triggered an Error
|
||||
console.log('Error', error.message)
|
||||
}
|
||||
console.log(error.config)
|
||||
}
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
user: JSON.parse(localStorage.getItem('user_profile') || '{}'),
|
||||
isAuthenticated: this.auth0.isAuthenticated()
|
||||
isAuthenticated: this.auth0.isAuthenticated(),
|
||||
journal: {},
|
||||
isLoadingJournal: false
|
||||
},
|
||||
mutations: {
|
||||
[types.USER_LOGGED_ON] (state, user) {
|
||||
@@ -23,9 +46,29 @@ export default new Vuex.Store({
|
||||
[types.USER_LOGGED_OFF] (state) {
|
||||
state.user = {}
|
||||
state.isAuthenticated = false
|
||||
},
|
||||
[types.LOADING_JOURNAL] (state, flag) {
|
||||
state.isLoadingJournal = flag
|
||||
},
|
||||
[types.LOADED_JOURNAL] (state, journal) {
|
||||
state.journal = journal
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
[actions.LOAD_JOURNAL] ({ commit }) {
|
||||
commit(types.LOADED_JOURNAL, {})
|
||||
commit(types.LOADING_JOURNAL, true)
|
||||
api.journal()
|
||||
.then(jrnl => {
|
||||
commit(types.LOADING_JOURNAL, false)
|
||||
commit(types.LOADED_JOURNAL, jrnl)
|
||||
})
|
||||
.catch(err => {
|
||||
commit(types.LOADING_JOURNAL, false)
|
||||
logError(err)
|
||||
})
|
||||
}
|
||||
},
|
||||
actions: {},
|
||||
getters: {},
|
||||
modules: {}
|
||||
})
|
||||
|
||||
@@ -1,2 +1,4 @@
|
||||
export const USER_LOGGED_OFF = 'user-logged-out'
|
||||
export const USER_LOGGED_ON = 'user-logged-on'
|
||||
export const LOADING_JOURNAL = 'loading-journal'
|
||||
export const LOADED_JOURNAL = 'journal-loaded'
|
||||
|
||||
Reference in New Issue
Block a user