🎨 Site > Store > Separate into modules

site/src/components/application/script.js

@@ -1,5 +1,5 @@
 import Connexion from '@/components/connexion'
-import ProjectsHub from '@/components/projects-hub'
+import Projects from '@/components/projects'
 import Project from '@/components/project'
 
 export default
@@ -9,7 +9,7 @@ export default
     components:
     {
         Connexion,
-        ProjectsHub,
+        Projects,
         Project
     },
 
@@ -24,12 +24,12 @@ export default
     {
         projects()
         {
-            return this.$store.state.projects
+            return this.$store.state.projects.all
         },
 
         project()
         {
-            return this.$store.state.project
+            return this.$store.state.projects.current
         }
     },
 

site/src/components/application/template.html

@@ -1,6 +1,6 @@
 <div id="application">
     {{ counter }}
     <connexion></connexion>
-    <projects-hub></projects-hub>
+    <projects></projects>
     <project v-if="project"></project>
 </div>

site/src/components/chat/script.js

@@ -13,12 +13,12 @@ export default
     {
         messages()
         {
-            return this.$store.state.chatMessages
+            return this.$store.state.chat.messages
         },
 
         user()
         {
-            return this.$store.state.user
+            return this.$store.state.chat.user
         }
     },
 

site/src/components/connexion/script.js

@@ -8,12 +8,12 @@ export default
     {
         project()
         {
-            return this.$store.state.project
+            return this.$store.state.projects.current
         },
 
         pendingUser()
         {
-            return this.$store.state.pendingUser
+            return this.$store.state.chat.pendingUser
         }
     },
 
@@ -101,7 +101,10 @@ export default
 
         onPendingUser(value)
         {
-            this.chatSocket.emit('update_user', value)
+            if(value)
+            {
+                this.chatSocket.emit('update_user', value)
+            }
         }
     }
 }

site/src/components/files-tree/script.js

@@ -1,20 +1,5 @@
 import FilesTreeFile from '@/components/files-tree-file'
 import FilesTreeFolder from '@/components/files-tree-folder'
-import FileTree from '@/utils/FileTree'
-
-// const fileTree = new FileTree({ autoWash: true })
-// fileTree.addFolder('./toto', { hey: 'hoy' })
-// fileTree.addFolder('./toto/uhuh', { hey: 'a' })
-// fileTree.addFolder('./lorem')
-// fileTree.addFile('./test-1.txt')
-// fileTree.addFile('./test-2.txt')
-
-// window.setInterval(() =>
-// {
-//     fileTree.addFile('./toto/uhuh/' + new Date())
-//     fileTree.removeFolder('./lorem')
-//     fileTree.removeFile('./test-1.txt')
-// }, 1000)
 
 export default
 {
@@ -26,24 +11,11 @@ export default
         FilesTreeFolder
     },
 
-    data()
-    {
-        return {}
-    },
-
     computed:
     {
         files()
         {
-            return this.$store.state.files
+            return this.$store.state.files.tree
         }
-    },
-
-    created()
-    {
-    },
-
-    methods:
-    {
     }
 }

site/src/components/project/script.js

@@ -17,11 +17,12 @@ export default
     {
         project()
         {
-            return this.$store.state.project
+            return this.$store.state.projects.all
         },
+
         file()
         {
-            return this.$store.state.file
+            return this.$store.state.files.current
         }
     },
 

site/src/components/projects/script.js

@@ -6,7 +6,7 @@ export default
     {
         projects()
         {
-            return this.$store.state.projects
+            return this.$store.state.projects.all
         }
     },
 

site/src/components/viewer/script.js

@@ -10,7 +10,7 @@ export default
     {
         version()
         {
-            return this.$store.state.version
+            return this.$store.state.files.currentVersion
         }
     }
 }

site/src/main.js

@@ -2,7 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from '@/components/application/'
-import store from '@/store.js'
+import store from '@/store/'
 
 Vue.config.productionTip = false
 

site/src/store.js

@@ -1,140 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import FileTree from '@/utils/FileTree'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-    state:
-    {
-        projects: {},
-        project: null,
-        files: new FileTree({ autoWash: true }),
-        file: null,
-        version: null,
-        chatMessages: [],
-        user: null,
-        pendingUser: null
-    },
-
-    mutations:
-    {
-        /**
-         * Projects
-         */
-        updateProjects(state, data)
-        {
-            state.projects = data
-
-            // Has a current project
-            if(state.project)
-            {
-                // Current project has been removed
-                if(typeof state.projects[data] === 'undefined')
-                {
-                    state.project = null
-                }
-            }
-
-            // No current project
-            else
-            {
-                const projectKeys = Object.keys(state.projects)
-
-                // If only one project, set has current
-                if(projectKeys.length === 1)
-                {
-                    state.project = state.projects[projectKeys[0]]
-                }
-            }
-        },
-
-        addProject(state, data)
-        {
-            state.projects.push(data)
-        },
-
-        setProject(state, data)
-        {
-            // Test of project exist
-            if(typeof state.projects[data] !== 'undefined')
-            {
-                state.project = state.projects[data]
-            }
-        },
-
-        /**
-         * Files
-         */
-        updateFiles(state, data)
-        {
-            state.files = new FileTree({ autoWash: true })
-
-            for(const file of data)
-            {
-                state.files.addFile(file.path.full, file)
-            }
-        },
-
-        createFile(state, data)
-        {
-            state.files.addFile(data.path.full, data)
-        },
-
-        deleteFile(state, data)
-        {
-            state.files.removeFile(data.path.full)
-        },
-
-        setFile(state, data)
-        {
-            const file = state.files.getFile(data)
-
-            if(file)
-            {
-                state.file = file
-            }
-        },
-
-        createVersion(state, data)
-        {
-            const file = state.files.getFile(data.file)
-
-            if(file)
-            {
-                file.data.versions.push(data.version)
-            }
-        },
-
-        setVersion(state, data)
-        {
-            state.version = data
-        },
-
-        /**
-         * Messages
-         */
-        createMessage(state, data)
-        {
-            state.chatMessages.push(data)
-
-            if(state.chatMessages.length > 100)
-            {
-                state.chatMessages.splice(0, state.chatMessages.length - 100)
-            }
-        },
-
-        /**
-         * User
-         */
-        updateUser(state, data)
-        {
-            state.user = data
-        },
-
-        askUpdateUser(state, data)
-        {
-            state.pendingUser = data
-        }
-    }
-})

site/src/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import chatModule from './modules/chat'
+import projectsModule from './modules/projects'
+import filesModule from './modules/files'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    modules:
+    {
+        chat: chatModule,
+        projects: projectsModule,
+        files: filesModule
+    }
+})

site/src/store/modules/chat.js

@@ -0,0 +1,32 @@
+export default {
+    state:
+    {
+        user: null,
+        pendingUser: null,
+        messages: [],
+        pendingMessage: null
+    },
+
+    mutations:
+    {
+        createMessage(state, data)
+        {
+            state.messages.push(data)
+
+            if(state.messages.length > 100)
+            {
+                state.messages.splice(0, state.messages.length - 100)
+            }
+        },
+
+        updateUser(state, data)
+        {
+            state.user = data
+        },
+
+        askUpdateUser(state, data)
+        {
+            state.pendingUser = data
+        }
+    }
+}

site/src/store/modules/files.js

@@ -0,0 +1,58 @@
+import FileTree from '@/utils/FileTree'
+
+export default {
+    state:
+    {
+        tree: new FileTree({ autoWash: true }),
+        current: null,
+        currentVersion: null
+    },
+
+    mutations:
+    {
+        updateFiles(state, data)
+        {
+            state.tree = new FileTree({ autoWash: true })
+
+            for(const file of data)
+            {
+                state.tree.addFile(file.path.full, file)
+            }
+        },
+
+        createFile(state, data)
+        {
+            state.tree.addFile(data.path.full, data)
+        },
+
+        deleteFile(state, data)
+        {
+            state.tree.removeFile(data.path.full)
+        },
+
+        setFile(state, data)
+        {
+            const file = state.tree.getFile(data)
+
+            if(file)
+            {
+                state.current = file
+            }
+        },
+
+        createVersion(state, data)
+        {
+            const file = state.tree.getFile(data.file)
+
+            if(file)
+            {
+                file.data.versions.push(data.version)
+            }
+        },
+
+        setVersion(state, data)
+        {
+            state.currentVersion = data
+        }
+    }
+}

site/src/store/modules/projects.js

@@ -0,0 +1,51 @@
+export default {
+    state:
+    {
+        all: {},
+        current: null
+    },
+
+    mutations:
+    {
+        updateProjects(state, data)
+        {
+            state.all = data
+
+            // Has a current project
+            if(state.current)
+            {
+                // Current project has been removed
+                if(typeof state.all[data] === 'undefined')
+                {
+                    state.current = null
+                }
+            }
+
+            // No current project
+            else
+            {
+                const projectKeys = Object.keys(state.all)
+
+                // If only one project, set has current
+                if(projectKeys.length === 1)
+                {
+                    state.current = state.all[projectKeys[0]]
+                }
+            }
+        },
+
+        addProject(state, data)
+        {
+            state.all.push(data)
+        },
+
+        setProject(state, data)
+        {
+            // Test of project exist
+            if(typeof state.all[data] !== 'undefined')
+            {
+                state.current = state.all[data]
+            }
+        },
+    }
+}