ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Not perfect, but an intermediary solution for the edges/nodes problem

This commit is contained in:
Pawel Kowalski 2018-08-18 00:02:31 +02:00
parent ea073a29ac
commit bd136d79b3
6 changed files with 43 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/Chapter.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="chapter">
<h3>{{chapter.title}}</h3>
<content-block :contentBlock="contentBlock" :key="contentBlock.id" v-for="contentBlock in chapter.contentBlocks">
<content-block :contentBlock="contentBlock" :key="contentBlock.id" v-for="contentBlock in chapter.contentBlocks.edges">
</content-block>
</div>
@ -12,6 +12,7 @@
export default {
props: ['chapter'],
components: {
ContentBlock
}

4
client/src/components/Module.vue
View File

@ -8,9 +8,9 @@
</div>
<h3>Lernziele</h3>
<objective-group v-for="group in module.objectivegroupSet" :key="group.id" :group="group"></objective-group>
<objective-group v-for="group in module.objectivegroupSet.edges" :key="group.id" :group="group"></objective-group>
<chapter :chapter="chapter" v-for="chapter in module.chapters" :key="chapter.id"></chapter>
<chapter :chapter="chapter" v-for="chapter in module.chapters.edges" :key="chapter.id"></chapter>
<h3>1.1 Lehrbeginn</h3>
<h4>Das Interview</h4>
<h4>Tipp</h4>

2
client/src/components/ObjectiveGroup.vue
View File

@ -3,7 +3,7 @@
<h4>{{group.title}}</h4>
<ul class="objective-group__objective-list">
<li class="objective-group__objective" v-for="objective in group.objectiveSet" :key="objective.id">
<li class="objective-group__objective" v-for="objective in group.objectiveSet.edges" :key="objective.id">
{{objective.text}}
</li>
</ul>

54
client/src/graphql/client.js
View File

@ -1,7 +1,6 @@
import {InMemoryCache} from 'apollo-cache-inmemory/lib/index'
import {HttpLink} from 'apollo-link-http/lib/index'
import {ApolloClient} from 'apollo-client/index'
import {ApolloLink} from 'apollo-link'
import fetch from 'unfetch'
const httpLink = new HttpLink({
@ -13,59 +12,10 @@ const httpLink = new HttpLink({
}
})
const purgeEdgesNodes = new ApolloLink((operation, forward) => {
return forward(operation).map(response => {
// if (response.data.user.lastLoginDate) {
// response.data.user.lastLoginDate = new Date(
// response.data.user.lastLoginDate
// );
// }
// data.data.modules = ['is_me']
// response.data.modules = ['is_me']
// debugger
return response;
});
});
const consoleLink = new ApolloLink((operation, forward) => {
console.log(`starting request for ${operation.operationName}`);
// This is a proposal for our edges/nodes removal: plz review
//
// function getRidOfEdges(collection) {
// if (typeof collection === 'object') {
// let newObj = {}
// for (const k in collection) {
// if (k === 'edges' || k === 'node') {
// newObj = getRidOfEdges(collection[k])
// } else {
// newObj[k] = getRidOfEdges(collection[k])
// }
// }
// return newObj
// } else {
// return collection
// }
// }
return forward(operation).map((data) => {
console.log(`ending request for ${operation.operationName}`);
// data.data.modules = ['is_me']
// debugger
// let data = getRidOfEdges(inData)
// return resultData;
return data
})
})
const composedLink = ApolloLink.from([purgeEdgesNodes, consoleLink, httpLink]);
// Create the apollo client
export default new ApolloClient({
link: composedLink,
// link: composedLink,
link: httpLink,
cache: new InMemoryCache(),
connectToDevTools: true
})

23
client/src/main.js
View File

@ -11,6 +11,29 @@ import store from '@/store/index'
Vue.config.productionTip = false
// TODO: Move into a separate project
//
const EdgesNodePlugin = {}
EdgesNodePlugin.install = function (Vue, options) {
Vue.getRidOfEdges = function getRidOfEdges(collection) {
if (typeof collection === 'object') {
let newObj = {}
for (const k in collection) {
if (k === 'node') {
newObj = getRidOfEdges(collection[k])
} else {
newObj[k] = getRidOfEdges(collection[k])
}
}
return newObj
} else {
return collection
}
}
}
Vue.use(EdgesNodePlugin)
Vue.use(VueApollo)
Vue.use(VueAxios, axios)
Vue.use(VueVimeoPlayer)

61
client/src/pages/module.vue
View File

@ -1,15 +1,12 @@
<template>
<module v-bind:module="module"></module>
<module :module="module"></module>
</template>
<script>
import Vue from 'vue'
import Module from '@/components/Module.vue';
import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
function mapNodes(connection, fn) {
return connection.edges.map(({node}) => fn(node));
}
export default {
apollo: {
moduleQuery: {
@ -20,50 +17,10 @@
fetchPolicy: 'network-only',
manual: true,
result({data, loading, networkStatus}) {
// This is a proposal for our edges/nodes removal: plz review
//
function getRidOfEdges(collection) {
if (typeof collection === 'object') {
let newObj = {}
for (const k in collection) {
if (k === 'edges' || k === 'node') {
newObj = getRidOfEdges(collection[k])
} else {
newObj[k] = getRidOfEdges(collection[k])
}
}
return newObj
} else {
return collection
}
}
if (!loading) {
// Result of edges/nodes removal
//
const purgedData = getRidOfEdges(data)
this.module = purgedData.modules[0]
const purgedData = Vue.getRidOfEdges(data)
this.module = purgedData.modules.edges[0]
}
// if (!loading) {
// const node = data.modules.edges[0].node;
// this.module = {
// ...node,
// objectiveGroups: mapNodes(node.objectivegroupSet, node => {
// return {
// ...node,
// objectives: mapNodes(node.objectiveSet, node => node)
// };
// }),
// chapters: mapNodes(node.chapters, node => {
// return {
// ...node,
// contentBlocks: mapNodes(node.contentBlocks, node => node)
// }
// })
// };
// }
}
}
},
@ -72,9 +29,17 @@
Module
},
// TODO: can we do better by defining a type for module?
data() {
return {
module: {}
module: {
objectivegroupSet: {
edges: {}
},
chapters: {
edges: {}
}
}
}
}
}