Merge pull request #2209 from doccano/enhancement/reduce-duplicate-fetch

Remove fetching projects
doccano · Jun 9, 2023 · 1c81e73 · 1c81e73
2 parents 1b10516 + 0c6aeca
commit 1c81e73
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 45 deletions.
diff --git a/frontend/middleware/setCurrentProject.ts b/frontend/middleware/setCurrentProject.ts
@@ -1,13 +1,13 @@
 import { NuxtAppOptions } from '@nuxt/types'
+import _ from 'lodash'
 
-export default async ({ app, route, redirect }: NuxtAppOptions) => {
+export default _.debounce(async ({ app, route, redirect }: NuxtAppOptions) => {
   const project = app.store.getters['projects/currentProject']
-  const isNotSet = Object.keys(project).length === 0 && project.constructor === Object
-  if (isNotSet || project.id !== route.params.id) {
+  if (project.id !== route.params.id) {
     try {
       await app.store.dispatch('projects/setCurrentProject', route.params.id)
     } catch (e) {
       redirect('/projects')
     }
   }
-}
+}, 1000)
diff --git a/frontend/pages/projects/_id/comments/index.vue b/frontend/pages/projects/_id/comments/index.vue
@@ -26,12 +26,12 @@
 
 <script lang="ts">
 import _ from 'lodash'
+import { mapGetters } from 'vuex'
 import Vue from 'vue'
 import CommentList from '@/components/comment/CommentList.vue'
 import FormDelete from '~/components/comment/FormDelete.vue'
 import { CommentItem } from '~/domain/models/comment/comment'
 import { Page } from '~/domain/models/page'
-import { Project } from '~/domain/models/project/project'
 import { getLinkToAnnotationPage } from '~/presenter/linkToAnnotationPage'
 
 export default Vue.extend({
@@ -51,7 +51,6 @@ export default Vue.extend({
   data() {
     return {
       dialogDelete: false,
-      project: {} as Project,
       item: {} as Page<CommentItem>,
       selected: [] as CommentItem[],
       isLoading: false
@@ -60,16 +59,17 @@ export default Vue.extend({
 
   async fetch() {
     this.isLoading = true
-    this.project = await this.$services.project.findById(this.projectId)
     this.item = await this.$repositories.comment.listAll(this.projectId, this.$route.query)
     this.isLoading = false
   },
 
   computed: {
+    ...mapGetters('projects', ['project']),
+
     canDelete(): boolean {
       return this.selected.length > 0
     },
-    projectId() {
+    projectId(): string {
       return this.$route.params.id
     }
   },

diff --git a/frontend/pages/projects/_id/dataset/_example_id/edit.vue b/frontend/pages/projects/_id/dataset/_example_id/edit.vue
@@ -29,11 +29,10 @@ export default Vue.extend({
 
   middleware: ['check-auth', 'auth', 'setCurrentProject', 'isProjectAdmin'],
 
-  validate({ params, app }) {
+  validate({ params, store }) {
     if (/^\d+$/.test(params.id) && /^\d+$/.test(params.example_id)) {
-      return app.$services.project.findById(params.id).then((res: Project) => {
-        return res.isTextProject
-      })
+      const project = store.getters['project/project'] as Project
+      return project.isTextProject
     }
     return false
   },

diff --git a/frontend/pages/projects/_id/dataset/index.vue b/frontend/pages/projects/_id/dataset/index.vue
@@ -67,14 +67,15 @@
 
 <script lang="ts">
 import _ from 'lodash'
+import { mapGetters } from 'vuex'
 import Vue from 'vue'
+import { NuxtAppOptions } from '@nuxt/types'
 import DocumentList from '@/components/example/DocumentList.vue'
 import FormDelete from '@/components/example/FormDelete.vue'
 import FormDeleteBulk from '@/components/example/FormDeleteBulk.vue'
 import ActionMenu from '~/components/example/ActionMenu.vue'
 import AudioList from '~/components/example/AudioList.vue'
 import ImageList from '~/components/example/ImageList.vue'
-import { Project } from '~/domain/models/project/project'
 import { getLinkToAnnotationPage } from '~/presenter/linkToAnnotationPage'
 import { ExampleDTO, ExampleListDTO } from '~/services/application/example/exampleData'
 
@@ -92,16 +93,14 @@ export default Vue.extend({
 
   middleware: ['check-auth', 'auth', 'setCurrentProject'],
 
-  validate({ params, query }) {
-    // @ts-ignore
+  validate({ params, query }: NuxtAppOptions) {
     return /^\d+$/.test(params.id) && /^\d+|$/.test(query.limit) && /^\d+|$/.test(query.offset)
   },
 
   data() {
     return {
       dialogDelete: false,
       dialogDeleteAll: false,
-      project: {} as Project,
       item: {} as ExampleListDTO,
       selected: [] as ExampleDTO[],
       isLoading: false,
@@ -116,6 +115,8 @@ export default Vue.extend({
   },
 
   computed: {
+    ...mapGetters('projects', ['project']),
+
     canDelete(): boolean {
       return this.selected.length > 0
     },
@@ -141,7 +142,6 @@ export default Vue.extend({
   },
 
   async created() {
-    this.project = await this.$services.project.findById(this.projectId)
     const member = await this.$repositories.member.fetchMyRole(this.projectId)
     this.isProjectAdmin = member.isProjectAdmin
   },

diff --git a/frontend/pages/projects/_id/labels/_label_id/edit.vue b/frontend/pages/projects/_id/labels/_label_id/edit.vue
@@ -21,14 +21,13 @@ export default Vue.extend({
 
   middleware: ['check-auth', 'auth', 'setCurrentProject', 'isProjectAdmin'],
 
-  validate({ params, query, app }) {
+  validate({ params, query, store }) {
     if (!['category', 'span', 'relation'].includes(query.type as string)) {
       return false
     }
     if (/^\d+$/.test(params.id)) {
-      return app.$services.project.findById(params.id).then((res: Project) => {
-        return res.canDefineLabel
-      })
+      const project = store.getters['project/project'] as Project
+      return project.canDefineLabel
     }
     return false
   },

diff --git a/frontend/pages/projects/_id/labels/add.vue b/frontend/pages/projects/_id/labels/add.vue
@@ -31,14 +31,13 @@ export default Vue.extend({
 
   middleware: ['check-auth', 'auth', 'setCurrentProject'],
 
-  validate({ params, query, app }) {
+  validate({ params, query, store }) {
     if (!['category', 'span', 'relation'].includes(query.type as string)) {
       return false
     }
     if (/^\d+$/.test(params.id)) {
-      return app.$services.project.findById(params.id).then((res: Project) => {
-        return res.canDefineLabel
-      })
+      const project = store.getters['project/project'] as Project
+      return project.canDefineLabel
     }
     return false
   },

diff --git a/frontend/pages/projects/_id/labels/import.vue b/frontend/pages/projects/_id/labels/import.vue
@@ -5,7 +5,6 @@
 <script lang="ts">
 import Vue from 'vue'
 import FormImport from '~/components/label/FormImport.vue'
-import { Project } from '~/domain/models/project/project'
 
 export default Vue.extend({
   components: {
@@ -16,14 +15,13 @@ export default Vue.extend({
 
   middleware: ['check-auth', 'auth', 'setCurrentProject', 'isProjectAdmin'],
 
-  validate({ params, query, app }) {
+  validate({ params, query, store }) {
     if (!['category', 'span', 'relation'].includes(query.type as string)) {
       return false
     }
     if (/^\d+$/.test(params.id)) {
-      return app.$services.project.findById(params.id).then((res: Project) => {
-        return res.canDefineLabel
-      })
+      const project = store.getters['projects/project']
+      return project.canDefineLabel
     }
     return false
   },

diff --git a/frontend/pages/projects/_id/labels/index.vue b/frontend/pages/projects/_id/labels/index.vue
@@ -41,11 +41,11 @@
 </template>
 
 <script lang="ts">
+import { mapGetters } from 'vuex'
 import Vue from 'vue'
 import ActionMenu from '@/components/label/ActionMenu.vue'
 import FormDelete from '@/components/label/FormDelete.vue'
 import LabelList from '@/components/label/LabelList.vue'
-import { Project } from '~/domain/models/project/project'
 import { LabelDTO } from '~/services/application/label/labelData'
 import { MemberItem } from '~/domain/models/member/member'
 
@@ -60,18 +60,17 @@ export default Vue.extend({
 
   middleware: ['check-auth', 'auth', 'setCurrentProject'],
 
-  validate({ params, app }) {
+  validate({ params, app, store }) {
     if (/^\d+$/.test(params.id)) {
-      return app.$services.project.findById(params.id).then((project: Project) => {
-        if (!project.canDefineLabel) {
-          return false
+      const project = store.getters['projects/project']
+      if (!project.canDefineLabel) {
+        return false
+      }
+      return app.$repositories.member.fetchMyRole(params.id).then((member: MemberItem) => {
+        if (member.isProjectAdmin) {
+          return true
         }
-        return app.$repositories.member.fetchMyRole(params.id).then((member: MemberItem) => {
-          if (member.isProjectAdmin) {
-            return true
-          }
-          return project.allowMemberToCreateLabelType
-        })
+        return project.allowMemberToCreateLabelType
       })
     }
     return false
@@ -84,12 +83,13 @@ export default Vue.extend({
       selected: [] as LabelDTO[],
       isLoading: false,
       tab: 0,
-      project: {} as Project,
       member: {} as MemberItem
     }
   },
 
   computed: {
+    ...mapGetters('projects', ['project']),
+
     canOnlyAdd(): boolean {
       if (this.member.isProjectAdmin) {
         return false
@@ -156,7 +156,6 @@ export default Vue.extend({
   },
 
   async created() {
-    this.project = await this.$services.project.findById(this.projectId)
     this.member = await this.$repositories.member.fetchMyRole(this.projectId)
     await this.list()
   },

diff --git a/frontend/pages/projects/_id/metrics/index.vue b/frontend/pages/projects/_id/metrics/index.vue
@@ -28,6 +28,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import LabelDistribution from '~/components/metrics/LabelDistribution'
 import MemberProgress from '~/components/metrics/MemberProgress'
 
@@ -47,7 +48,6 @@ export default {
 
   data() {
     return {
-      project: {},
       categoryTypes: [],
       categoryDistribution: {},
       relationTypes: [],
@@ -58,13 +58,14 @@ export default {
   },
 
   computed: {
+    ...mapGetters('projects', ['project']),
+
     projectId() {
       return this.$route.params.id
     }
   },
 
   async created() {
-    this.project = await this.$services.project.findById(this.projectId)
     if (this.project.canDefineCategory) {
       this.categoryTypes = await this.$services.categoryType.list(this.projectId)
       this.categoryDistribution = await this.$repositories.metrics.fetchCategoryDistribution(