fix(columns): Added ids to columns

src/renderer/components/Column.vue

@@ -3,7 +3,7 @@
     <div class="c-column__holder">
       <div class="c-column__panel">
         <column-header :data="data"></column-header>
-        <column-content></column-content>
+        <column-content :columnId="this.id"></column-content>
       </div>
     </div>
   </section>
@@ -14,9 +14,9 @@ import ColumnHeader from './Column/Header'
 import ColumnContent from './Column/Content'
 
 export default {
-  props: ['data', 'index'],
+  props: ['data', 'id'],
   created: function () {
-    let payload = {index: this.index, type: this.data.type, profile: this.$store.state.profiles.activeProfile, owner: this.data.owner}
+    let payload = {index: this.id, type: this.data.type, profile: this.$store.state.profiles.activeProfile, owner: this.data.owner}
     this.$store.dispatch('startStreaming', payload)
   },
   components: {
@@ -26,9 +26,9 @@ export default {
   provide: function () {
     let provider = {}
 
-    Object.defineProperty(provider, 'columnIndex', {
+    Object.defineProperty(provider, 'columnId', {
       enumerable: true,
-      get: () => this.index
+      get: () => this.id
     })
 
     Object.defineProperty(provider, 'columnOwner', {

src/renderer/components/Column/Content.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="c-column__content">
     <div class="c-column__scroller">
-      <post v-for="(post, index) in posts" :id="post" :colindex="columnIndex" :key="index"></post>
+      <post v-for="(post, index) in posts" :id="post" :columnId="columnId" :key="index"></post>
     </div>
   </div>
 </template>
@@ -10,10 +10,10 @@
 import Post from '../Post'
 
 export default {
-  inject: ['columnIndex', 'columnProfile'],
-  computed: {
-    posts: function () {
-      return this.$store.getters.getColumn(this.columnProfile, this.columnIndex).postStorage.ids
+  inject: ['columnId'],
+  data: function () {
+    return {
+      posts: this.$store.getters.getColumn(this.columnId).postStorage.ids
     }
   },
   components: {

src/renderer/components/Columns.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="l-columns">
-    <column v-for="(c, index) in columns" :data="c" :index="index" :key="index"></column>
+    <column v-for="(c, index) in columns" :data="c" :id="c.id" :key="index"></column>
   </div>
 </template>
 
@@ -13,7 +13,8 @@ export default {
   },
   computed: {
     columns: function () {
-      return this.$store.getters.getColumns(this.$store.state.profiles.activeProfile)
+      let ids = this.$store.getters.getColumnIds(this.$store.state.profiles.activeProfile)
+      return this.$store.getters.getColumns(ids)
     }
   },
   name: 'columns'

src/renderer/components/Post.vue

@@ -32,7 +32,7 @@ import PostQuote from './Post/Quoted'
 import PostContext from './Post/Context'
 
 export default {
-  props: ['id', 'colindex'],
+  props: ['id', 'columnId'],
   components: {
     PostHeader,
     PostFooter,
@@ -42,7 +42,7 @@ export default {
   },
   computed: {
     data: function () {
-      return this.$store.getters.getColumn(this.$store.state.profiles.activeProfile, this.colindex).postStorage.posts[this.id]
+      return this.$store.getters.getColumn(this.columnId).postStorage.posts[this.id]
     },
     postUser: function () {
       if (this.data.retweeted_status !== undefined) {

src/renderer/components/Post/Actions.vue

@@ -13,7 +13,7 @@ export default {
   components: {
     ActionItem
   },
-  inject: ['columnIndex', 'columnOwner', 'postData'],
+  inject: ['columnId', 'columnOwner', 'postData'],
   computed: {
     actions: function () {
       let owner = this.columnOwner

src/renderer/models/column.js

@@ -1,8 +1,11 @@
+import { generateId } from '../util/id-generator'
+
 export default class Column {
   constructor (name, type, owner) {
     this.name = name
     this.type = type
     this.owner = owner
+    this.id = generateId()
 
     this.postStorage = {ids: [], posts: {}}
   }

src/renderer/util/id-generator.js

@@ -0,0 +1,9 @@
+// http://byronsalau.com/blog/how-to-create-a-guid-uuid-in-javascript/
+
+export function generateId () {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    let r = Math.random() * 16 | 0
+    let v = c === 'x' ? r : (r & 0x3 | 0x8)
+    return v.toString(16)
+  })
+}

src/renderer/vuex/modules/columns.js

@@ -8,11 +8,13 @@ const state = [
 ]
 
 const getters = {
-  getColumn: (state, getters) => (profileIndex, columnIndex) => {
-    return state[profileIndex][columnIndex]
+  getColumn: (state, getters) => (columnId) => {
+    return state[columnId]
   },
-  getColumns: (state, getters) => (profileIndex) => {
-    return state[profileIndex]
+  getColumns: (state, getters) => (ids) => {
+    let cols = []
+    ids.forEach(id => { cols.push(state[id]) })
+    return cols
   }
 }
 
@@ -58,10 +60,12 @@ const mutations = {
       state[rootState.profiles.activeProfile] = []
     }
 
-    state[rootState.profiles.activeProfile].push(new Column(column.name, column.type, column.owner))
+    let col = new Column(column.name, column.type, column.owner)
+    state[col.id] = col
+    rootState.profiles.all[rootState.profiles.activeProfile].columns.push(col.id)
   },
   [types.ADD_POST_TO_COLUMN] (state, { payload }) {
-    const column = state[payload.profile][payload.index]
+    const column = state[payload.index]
 
     if (!column.postStorage.ids.includes(payload.post.id_str)) {
       const position = sortInsertionPoint(column.postStorage.ids, payload.post.id_str)
@@ -70,7 +74,7 @@ const mutations = {
     column.postStorage.posts[payload.post.id_str] = payload.post
   },
   [types.UPDATE_POST_IN_COLUMN] (state, { p }) {
-    state[p.profile][p.index].postStorage.posts[p.post.id_str] = p.post
+    state[p.index].postStorage.posts[p.post.id_str] = p.post
   }
 }
 

src/renderer/vuex/modules/profiles.js

@@ -7,7 +7,10 @@ const state = {
 }
 
 const getters = {
-  allProfiles: state => state.all
+  allProfiles: state => state.all,
+  getColumnIds: (state, getters) => (index) => {
+    return state.all[index].columns
+  }
 }
 
 const actions = {