From 5b95a8f9548453f3957cef4706b038a57805f288 Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Fri, 5 Aug 2022 21:40:58 +0000
Subject: [PATCH] Migrate some components

---
 front/package.json                            |   1 +
 .../favorites/TrackFavoriteIcon.vue           |  52 ++--
 .../components/federation/LibraryWidget.vue   | 104 +++----
 front/src/components/library/AlbumBase.vue    |   8 +-
 front/src/components/library/AlbumDetail.vue  |  79 +++--
 front/src/components/library/AlbumEdit.vue    |  43 ++-
 front/src/components/library/ArtistDetail.vue | 108 ++++---
 front/src/components/library/ArtistEdit.vue   |  43 ++-
 front/src/components/library/EditCard.vue     | 282 +++++++++---------
 front/src/types.ts                            |  21 ++
 front/yarn.lock                               |   5 +
 11 files changed, 381 insertions(+), 365 deletions(-)

diff --git a/front/package.json b/front/package.json
index ed85db402..73ae5eef3 100644
--- a/front/package.json
+++ b/front/package.json
@@ -54,6 +54,7 @@
     "yarn": "^1.22.19"
   },
   "devDependencies": {
+    "@types/diff": "^5.0.2",
     "@types/dompurify": "2.3.3",
     "@types/howler": "2.2.7",
     "@types/jest": "28.1.6",
diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index 80db865f5..edf09372c 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/front/src/components/favorites/TrackFavoriteIcon.vue
@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import type { Track } from '~/types'
+
+import { useGettext } from 'vue3-gettext'
+import { useStore } from '~/store'
+import { computed } from 'vue'
+
+interface Props {
+  track?: Track
+  button?: boolean
+  border?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  track: () => ({} as Track),
+  button: false,
+  border: false
+})
+
+const { $pgettext } = useGettext()
+const store = useStore()
+
+const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id))
+const title = computed(() => isFavorite.value
+  ? $pgettext('Content/Track/Icon.Tooltip/Verb', 'Remove from favorites')
+  : $pgettext('Content/Track/*/Verb', 'Add to favorites')
+)
+</script>
+
 <template>
   <button
     v-if="button"
@@ -28,26 +57,3 @@
     <i :class="['heart', {'pink': isFavorite}, 'basic', 'icon']" />
   </button>
 </template>
-
-<script>
-export default {
-  props: {
-    track: { type: Object, default: () => { return {} } },
-    button: { type: Boolean, default: false },
-    border: { type: Boolean, default: false }
-  },
-  computed: {
-    title () {
-      if (this.isFavorite) {
-        return this.$pgettext('Content/Track/Icon.Tooltip/Verb', 'Remove from favorites')
-      } else {
-        return this.$pgettext('Content/Track/*/Verb', 'Add to favorites')
-      }
-    },
-    isFavorite () {
-      return this.$store.getters['favorites/isFavorite'](this.track.id)
-    }
-  }
-
-}
-</script>
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index 946664be0..6360e4046 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -1,3 +1,48 @@
+<script setup lang="ts">
+import type { Library } from '~/types'
+
+import { ref, reactive } from 'vue'
+
+import axios from 'axios'
+import LibraryCard from '~/views/content/remote/Card.vue'
+
+interface Emits {
+  (e: 'loaded', libraries: Library[]): void
+}
+
+interface Props {
+  url: string
+}
+
+const emit = defineEmits<Emits>()
+const props = defineProps<Props>()
+
+const nextPage = ref()
+const libraries = reactive([] as Library[])
+const isLoading = ref(false)
+const fetchData = async (url = props.url) => {
+  isLoading.value = true
+
+  try {
+    const response = await axios.get(url, {
+      params: {
+        page_size: 6
+      }
+    })
+
+    nextPage.value = response.data.next
+    libraries.push(...response.data.results)
+    emit('loaded', libraries)
+  } catch (error) {
+    // TODO (wvffle): Handle error
+  }
+
+  isLoading.value = false
+}
+
+fetchData()
+</script>
+
 <template>
   <div class="wrapper">
     <h3
@@ -51,62 +96,3 @@
     </template>
   </div>
 </template>
-
-<script>
-import { clone } from 'lodash-es'
-import axios from 'axios'
-import LibraryCard from '~/views/content/remote/Card.vue'
-
-export default {
-  components: {
-    LibraryCard
-  },
-  props: {
-    url: { type: String, required: true }
-  },
-  data () {
-    return {
-      libraries: [],
-      limit: 6,
-      isLoading: false,
-      errors: null,
-      previousPage: null,
-      nextPage: null
-    }
-  },
-  watch: {
-    offset () {
-      this.fetchData()
-    }
-  },
-  created () {
-    this.fetchData(this.url)
-  },
-  methods: {
-    fetchData (url) {
-      this.isLoading = true
-      const self = this
-      const params = clone({})
-      params.page_size = this.limit
-      params.offset = this.offset
-      axios.get(url, { params }).then((response) => {
-        self.previousPage = response.data.previous
-        self.nextPage = response.data.next
-        self.isLoading = false
-        self.libraries = [...self.libraries, ...response.data.results]
-        self.$emit('loaded', self.libraries)
-      }, error => {
-        self.isLoading = false
-        self.errors = error.backendErrors
-      })
-    },
-    updateOffset (increment) {
-      if (increment) {
-        this.offset += this.limit
-      } else {
-        this.offset = Math.max(this.offset - this.limit, 0)
-      }
-    }
-  }
-}
-</script>
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index ddc12c2bc..f603bbee1 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -200,7 +200,10 @@ const remove = async () => {
                 >
                   {{ object.title }}
                 </h2>
-                <artist-label :artist="artist" />
+                <artist-label
+                  v-if="artist"
+                  :artist="artist"
+                />
               </header>
             </div>
             <div
@@ -228,8 +231,9 @@ const remove = async () => {
                   {{ object.title }}
                 </h2>
                 <artist-label
-                  class="rounded"
+                  v-if="artist"
                   :artist="artist"
+                  class="rounded"
                 />
               </header>
               <div
diff --git a/front/src/components/library/AlbumDetail.vue b/front/src/components/library/AlbumDetail.vue
index 7f27abfb5..c6fe1e06e 100644
--- a/front/src/components/library/AlbumDetail.vue
+++ b/front/src/components/library/AlbumDetail.vue
@@ -1,3 +1,34 @@
+<script setup lang="ts">
+import type { Artist, Album, Library, Track } from '~/types'
+
+import LibraryWidget from '~/components/federation/LibraryWidget.vue'
+import ChannelEntries from '~/components/audio/ChannelEntries.vue'
+import TrackTable from '~/components/audio/track/Table.vue'
+import PlayButton from '~/components/audio/PlayButton.vue'
+
+interface Emits {
+  (e: 'page-changed', page: number): void
+  (e: 'libraries-loaded', libraries: Library[]): void
+}
+
+interface Props {
+  object: Album
+
+  discs: Track[][]
+
+  isSerie: boolean
+  artist: Artist
+  page: number
+  paginateBy: number
+  totalTracks: number
+}
+
+const emit = defineEmits<Emits>()
+defineProps<Props>()
+
+const getDiscKey = (disc: Track[]) => disc.map(track => track.id).join('|')
+</script>
+
 <template>
   <div v-if="object">
     <h2 class="ui header">
@@ -20,10 +51,10 @@
       :limit="50"
       :filters="{channel: artist.channel.uuid, album: object.id, ordering: '-creation_date'}"
     />
-    <template v-else-if="discs && discs.length > 1">
+    <template v-else-if="discs.length > 1">
       <div
         v-for="tracks in discs"
-        :key="tracks.disc_number"
+        :key="getDiscKey(tracks)"
       >
         <div class="ui hidden divider" />
         <play-button
@@ -48,7 +79,7 @@
           :total="totalTracks"
           :paginate-by="paginateBy"
           :page="page"
-          @page-changed="updatePage"
+          @page-changed="emit('page-changed', page)"
         />
       </div>
     </template>
@@ -64,7 +95,7 @@
         :total="totalTracks"
         :paginate-by="paginateBy"
         :page="page"
-        @page-changed="updatePage"
+        @page-changed="emit('page-changed', page)"
       />
     </template>
     <template v-if="!artist.channel && !isSerie">
@@ -75,7 +106,7 @@
       </h2>
       <library-widget
         :url="'albums/' + object.id + '/libraries/'"
-        @loaded="$emit('libraries-loaded', $event)"
+        @loaded="emit('libraries-loaded', $event)"
       >
         <translate translate-context="Content/Album/Paragraph">
           This album is present in the following libraries:
@@ -84,41 +115,3 @@
     </template>
   </div>
 </template>
-
-<script>
-
-import time from '~/utils/time'
-import LibraryWidget from '~/components/federation/LibraryWidget.vue'
-import ChannelEntries from '~/components/audio/ChannelEntries.vue'
-import TrackTable from '~/components/audio/track/Table.vue'
-import PlayButton from '~/components/audio/PlayButton.vue'
-
-export default {
-  components: {
-    LibraryWidget,
-    TrackTable,
-    ChannelEntries,
-    PlayButton
-  },
-  props: {
-    object: { type: Object, required: true },
-    discs: { type: Array, required: true },
-    isSerie: { type: Boolean, required: true },
-    artist: { type: Object, required: true },
-    page: { type: Number, required: true },
-    paginateBy: { type: Number, required: true },
-    totalTracks: { type: Number, required: true }
-  },
-  data () {
-    return {
-      time,
-      id: this.object.id
-    }
-  },
-  methods: {
-    updatePage: function (page) {
-      this.$emit('page-changed', page)
-    }
-  }
-}
-</script>
diff --git a/front/src/components/library/AlbumEdit.vue b/front/src/components/library/AlbumEdit.vue
index caf861e71..927a5fdd3 100644
--- a/front/src/components/library/AlbumEdit.vue
+++ b/front/src/components/library/AlbumEdit.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import type { Album, Library } from '~/types'
+
+import { useStore } from '~/store'
+
+import EditForm from '~/components/library/EditForm.vue'
+
+interface Props {
+  objectType: string
+  object: Album
+  libraries: Library[]
+}
+
+defineProps<Props>()
+
+const store = useStore()
+const canEdit = store.state.auth.availablePermissions.library
+</script>
+
 <template>
   <section class="ui vertical stripe segment">
     <div class="ui text container">
@@ -32,27 +51,3 @@
     </div>
   </section>
 </template>
-
-<script>
-import EditForm from '~/components/library/EditForm.vue'
-export default {
-  components: {
-    EditForm
-  },
-  props: {
-    objectType: { type: String, required: true },
-    object: { type: Object, required: true },
-    libraries: { type: Array, required: true }
-  },
-  data () {
-    return {
-      id: this.object.id
-    }
-  },
-  computed: {
-    canEdit () {
-      return true
-    }
-  }
-}
-</script>
diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue
index ff1f610b1..209c415e2 100644
--- a/front/src/components/library/ArtistDetail.vue
+++ b/front/src/components/library/ArtistDetail.vue
@@ -1,3 +1,54 @@
+<script setup lang="ts">
+import type { Artist, Track, Album } from '~/types'
+import type { ContentFilter } from '~/store/moderation'
+
+import { ref, computed, reactive } from 'vue'
+import { useStore } from '~/store'
+
+import axios from 'axios'
+
+import AlbumCard from '~/components/audio/album/Card.vue'
+import TrackTable from '~/components/audio/track/Table.vue'
+import LibraryWidget from '~/components/federation/LibraryWidget.vue'
+
+interface Props {
+  object: Artist
+  tracks: Track[]
+  albums: Album[]
+  isLoadingAlbums: boolean
+  nextTracksUrl?: string | null
+  nextAlbumsUrl?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  nextTracksUrl: null,
+  nextAlbumsUrl: null
+})
+
+const store = useStore()
+
+const additionalAlbums = reactive([] as Album[])
+const contentFilter = computed(() => store.getters['moderation/artistFilters']().find((filter: ContentFilter) => filter.target.id === props.object.id))
+const allAlbums = computed(() => [...props.albums, ...additionalAlbums])
+
+const isLoadingMoreAlbums = ref(false)
+const loadMoreAlbumsUrl = ref(props.nextAlbumsUrl)
+const loadMoreAlbums = async () => {
+  if (loadMoreAlbumsUrl.value === null) return
+  isLoadingMoreAlbums.value = true
+
+  try {
+    const response = await axios.get(loadMoreAlbumsUrl.value)
+    additionalAlbums.push(...additionalAlbums.concat(response.data.results))
+    loadMoreAlbumsUrl.value = response.data.next
+  } catch (error) {
+    // TODO (wvffle): Handle error
+  }
+
+  isLoadingMoreAlbums.value = false
+}
+</script>
+
 <template>
   <div v-if="object">
     <div
@@ -53,9 +104,9 @@
       </div>
       <div class="ui hidden divider" />
       <button
-        v-if="nextAlbumsUrl && loadMoreAlbumsUrl"
+        v-if="loadMoreAlbumsUrl !== null"
         :class="['ui', {loading: isLoadingMoreAlbums}, 'button']"
-        @click="loadMoreAlbums(loadMoreAlbumsUrl)"
+        @click="loadMoreAlbums()"
       >
         <translate translate-context="Content/*/Button.Label">
           Load more…
@@ -99,56 +150,3 @@
     </section>
   </div>
 </template>
-
-<script>
-import axios from 'axios'
-import AlbumCard from '~/components/audio/album/Card.vue'
-import TrackTable from '~/components/audio/track/Table.vue'
-import LibraryWidget from '~/components/federation/LibraryWidget.vue'
-
-export default {
-  components: {
-    AlbumCard,
-    TrackTable,
-    LibraryWidget
-  },
-  props: {
-    object: { type: Object, required: true },
-    tracks: { type: Array, required: true },
-    albums: { type: Array, required: true },
-    isLoadingAlbums: { type: Boolean, required: true },
-    nextTracksUrl: { type: String, default: null },
-    nextAlbumsUrl: { type: String, default: null }
-  },
-  data () {
-    return {
-      loadMoreAlbumsUrl: this.nextAlbumsUrl,
-      additionalAlbums: [],
-      isLoadingMoreAlbums: false
-    }
-  },
-  computed: {
-    contentFilter () {
-      return this.$store.getters['moderation/artistFilters']().filter((e) => {
-        return e.target.id === this.object.id
-      })[0]
-    },
-    allAlbums () {
-      return this.albums.concat(this.additionalAlbums)
-    }
-  },
-  methods: {
-    loadMoreAlbums (url) {
-      const self = this
-      self.isLoadingMoreAlbums = true
-      axios.get(url).then((response) => {
-        self.additionalAlbums = self.additionalAlbums.concat(response.data.results)
-        self.loadMoreAlbumsUrl = response.data.next
-        self.isLoadingMoreAlbums = false
-      }, () => {
-        self.isLoadingMoreAlbums = false
-      })
-    }
-  }
-}
-</script>
diff --git a/front/src/components/library/ArtistEdit.vue b/front/src/components/library/ArtistEdit.vue
index 14207e2ec..7ed874550 100644
--- a/front/src/components/library/ArtistEdit.vue
+++ b/front/src/components/library/ArtistEdit.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import type { Artist, Library } from '~/types'
+
+import { useStore } from '~/store'
+
+import EditForm from '~/components/library/EditForm.vue'
+
+interface Props {
+  objectType: string
+  object: Artist
+  libraries: Library[]
+}
+
+defineProps<Props>()
+
+const store = useStore()
+const canEdit = store.state.auth.availablePermissions.library
+</script>
+
 <template>
   <section class="ui vertical stripe segment">
     <div class="ui text container">
@@ -32,27 +51,3 @@
     </div>
   </section>
 </template>
-
-<script>
-import EditForm from '~/components/library/EditForm.vue'
-export default {
-  components: {
-    EditForm
-  },
-  props: {
-    objectType: { type: String, required: true },
-    object: { type: Object, required: true },
-    libraries: { type: Array, required: true }
-  },
-  data () {
-    return {
-      id: this.object.id
-    }
-  },
-  computed: {
-    canEdit () {
-      return true
-    }
-  }
-}
-</script>
diff --git a/front/src/components/library/EditCard.vue b/front/src/components/library/EditCard.vue
index b7d5bbefe..d2d9b2d30 100644
--- a/front/src/components/library/EditCard.vue
+++ b/front/src/components/library/EditCard.vue
@@ -1,3 +1,147 @@
+<script setup lang="ts">
+import type { Review, ReviewState, ReviewStatePayload } from '~/types'
+import type { Change } from 'diff'
+
+import { diffWordsWithSpace } from 'diff'
+import { useRouter } from 'vue-router'
+import { computed, ref } from 'vue'
+import { useStore } from '~/store'
+
+import axios from 'axios'
+
+import useEditConfigs from '~/composables/moderation/useEditConfigs'
+
+interface Emits {
+  (e: 'approved', isApproved: boolean): void
+  (e: 'deleted'): void
+}
+
+interface Props {
+  obj: Review
+  currentState?: ReviewState
+}
+
+const emit = defineEmits<Emits>()
+const props = withDefaults(defineProps<Props>(), {
+  currentState: () => ({})
+})
+
+const configs = useEditConfigs()
+const router = useRouter()
+const store = useStore()
+
+const canApprove = computed(() => props.obj.is_applied || store.state.auth.authenticated
+  ? false
+  : store.state.auth.availablePermissions.library
+)
+
+const canDelete = computed(() => {
+  if (props.obj.is_applied || props.obj.is_approved) return false
+  if (!store.state.auth.authenticated) return false
+
+  // TODO (wvffle): Is it better to compare ids? Is full_username unique?
+  return props.obj.created_by.full_username === store.state.auth.fullUsername
+    || store.state.auth.availablePermissions.library
+})
+
+const previousState = computed(() => props.obj.is_applied
+  // mutation was applied, we use the previous state that is stored
+  // on the mutation itself
+  ? props.obj.previous_state
+  // mutation is not applied yet, so we use the current state that was
+  // passed to the component, if any
+  : props.currentState
+)
+
+const detailUrl = computed(() => {
+  if (!props.obj.target) return ''
+
+  const name = props.obj.target.type === 'track'
+    ? 'library.tracks.edit.detail'
+    : props.obj.target.type === 'album'
+      ? 'library.albums.edit.detail'
+      : props.obj.target.type === 'artist'
+        ? 'library.artists.edit.detail'
+        : undefined
+
+  return router.resolve({
+    name,
+    params: {
+      id: props.obj.target.id,
+      editId: props.obj.uuid
+    }
+  }).href
+})
+
+const updatedFields = computed(() => {
+  if (!props.obj?.target) return []
+
+  const payload = props.obj.payload
+  const fields = Object.keys(payload)
+
+  const state = previousState.value
+
+  return fields.map((id) => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const config = configs[props.obj.target!.type].fields.find((field) => id === field.id)
+    const getValueRepr = config?.getValueRepr || (v => v)
+
+    const result = {
+      id,
+      config,
+      new: payload[id],
+      newRepr: getValueRepr(payload[id]) ?? '',
+      old: undefined as ReviewStatePayload,
+      oldRepr: '',
+      diff: [] as Change[]
+    }
+
+    if (state?.[id]) {
+      const oldState = state[id]
+      result.old = oldState
+      result.oldRepr = getValueRepr(typeof oldState === 'string' ? oldState : oldState?.value) ?? ''
+
+      // we compute the diffs between the old and new values
+      result.diff = diffWordsWithSpace(result.oldRepr, result.newRepr)
+    }
+
+    return result
+  })
+})
+
+const isLoading = ref(false)
+const remove = async () => {
+  isLoading.value = true
+
+  try {
+    await axios.delete(`mutations/${props.obj.uuid}/`)
+    emit('deleted')
+  } catch (error) {
+    // TODO (wvffle): Handle error
+  }
+
+  isLoading.value = false
+}
+
+const approve = async (approved: boolean) => {
+  const url = approved
+    ? `mutations/${props.obj.uuid}/approve/`
+    : `mutations/${props.obj.uuid}/reject/`
+
+  isLoading.value = true
+
+  try {
+    await axios.post(url)
+    emit('approved', approved)
+    store.commit('ui/incrementNotifications', { count: -1, type: 'pendingReviewEdits' })
+  } catch (error) {
+    // TODO (wvffle): Handle error
+  }
+
+  isLoading.value = false
+}
+</script>
+
 <template>
   <div class="ui fluid card">
     <div class="content">
@@ -88,7 +232,7 @@
             <td>{{ field.id }}</td>
 
             <td v-if="field.diff">
-              <template v-if="field.config.type === 'attachment' && field.oldRepr">
+              <template v-if="field.config?.type === 'attachment' && field.oldRepr">
                 <img
                   class="ui image"
                   alt=""
@@ -115,7 +259,7 @@
               v-if="field.diff"
               :title="field.newRepr"
             >
-              <template v-if="field.config.type === 'attachment' && field.newRepr">
+              <template v-if="field.config?.type === 'attachment' && field.newRepr">
                 <img
                   class="ui image"
                   alt=""
@@ -136,7 +280,7 @@
               v-else
               :title="field.newRepr"
             >
-              <template v-if="field.config.type === 'attachment' && field.newRepr">
+              <template v-if="field.config?.type === 'attachment' && field.newRepr">
                 <img
                   class="ui image"
                   alt=""
@@ -214,135 +358,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import axios from 'axios'
-import { diffWordsWithSpace } from 'diff'
-
-import useEditConfigs from '~/composables/moderation/useEditConfigs'
-
-function castValue (value) {
-  if (value === null || value === undefined) {
-    return ''
-  }
-  return String(value)
-}
-
-export default {
-  props: {
-    obj: { type: Object, required: true },
-    currentState: { type: Object, required: false, default: function () { return { } } }
-  },
-  setup () {
-    return { configs: useEditConfigs() }
-  },
-  data () {
-    return {
-      isLoading: false
-    }
-  },
-  computed: {
-    canApprove () {
-      if (this.obj.is_applied) return false
-      if (!this.$store.state.auth.authenticated) return false
-      return this.$store.state.auth.availablePermissions.library
-    },
-    canDelete () {
-      if (this.obj.is_applied || this.obj.is_approved) return false
-      if (!this.$store.state.auth.authenticated) return false
-
-      // TODO (wvffle): Is it better to compare ids? Is full_username unique?
-      return this.obj.created_by.full_username === this.$store.state.auth.fullUsername
-        || this.$store.state.auth.availablePermissions.library
-    },
-    previousState () {
-      if (this.obj.is_applied) {
-        // mutation was applied, we use the previous state that is stored
-        // on the mutation itself
-        return this.obj.previous_state
-      }
-      // mutation is not applied yet, so we use the current state that was
-      // passed to the component, if any
-      return this.currentState
-    },
-    detailUrl () {
-      if (!this.obj.target) {
-        return ''
-      }
-      let namespace
-      const id = this.obj.target.id
-      if (this.obj.target.type === 'track') {
-        namespace = 'library.tracks.edit.detail'
-      }
-      if (this.obj.target.type === 'album') {
-        namespace = 'library.albums.edit.detail'
-      }
-      if (this.obj.target.type === 'artist') {
-        namespace = 'library.artists.edit.detail'
-      }
-      return this.$router.resolve({ name: namespace, params: { id, editId: this.obj.uuid } }).href
-    },
-
-    updatedFields () {
-      if (!this.obj || !this.obj.target) {
-        return []
-      }
-      const payload = this.obj.payload
-      const previousState = this.previousState
-      const fields = Object.keys(payload)
-      const self = this
-
-      return fields.map((field) => {
-        const fieldConfig = this.configs[this.obj.target.type].fields.find(({ id }) => id === field)
-        const getValueRepr = fieldConfig.getValueRepr || (v => v)
-        const result = {
-          id: field,
-          config: fieldConfig
-        }
-        if (previousState?.[field]) {
-          result.old = previousState[field]
-          // TODO (wvffle): Originally it was using just result.old.value though for some reason it returns me the object as result.old now
-          result.oldRepr = castValue(getValueRepr(result.old.value ?? result.old))
-        }
-        result.new = payload[field]
-        result.newRepr = castValue(getValueRepr(result.new))
-        if (result.old) {
-          // we compute the diffs between the old and new values
-          result.diff = diffWordsWithSpace(result.oldRepr, result.newRepr)
-        }
-
-        return result
-      })
-    }
-  },
-  methods: {
-    remove () {
-      const self = this
-      this.isLoading = true
-      axios.delete(`mutations/${this.obj.uuid}/`).then((response) => {
-        self.$emit('deleted')
-        self.isLoading = false
-      }, () => {
-        self.isLoading = false
-      })
-    },
-    approve (approved) {
-      let url
-      if (approved) {
-        url = `mutations/${this.obj.uuid}/approve/`
-      } else {
-        url = `mutations/${this.obj.uuid}/reject/`
-      }
-      const self = this
-      this.isLoading = true
-      axios.post(url).then((response) => {
-        self.$emit('approved', approved)
-        self.isLoading = false
-        self.$store.commit('ui/incrementNotifications', { count: -1, type: 'pendingReviewEdits' })
-      }, () => {
-        self.isLoading = false
-      })
-    }
-  }
-}
-</script>
diff --git a/front/src/types.ts b/front/src/types.ts
index 2d552eaa4..753230f7b 100644
--- a/front/src/types.ts
+++ b/front/src/types.ts
@@ -400,6 +400,27 @@ export interface ReportTarget {
   type: EntityObjectType
 }
 
+export type ReviewStatePayload = { value: string } | string | undefined
+export interface ReviewState {
+  [id: string]: ReviewStatePayload
+}
+
+export interface Review {
+  uuid: string
+  is_applied: boolean
+  is_approved: boolean
+  created_by: Actor
+  previous_state: ReviewState
+  payload: ReviewState
+  target?: ReportTarget & {
+    type: 'artist' | 'album' | 'track'
+    repr: string
+  }
+  creation_date: string
+  summary?: string
+  type: 'update'
+}
+
 export interface Report {
   uuid: string
   summary?: string
diff --git a/front/yarn.lock b/front/yarn.lock
index 169f269cf..5d1749b83 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1452,6 +1452,11 @@
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
   integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
 
+"@types/diff@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@types/diff/-/diff-5.0.2.tgz#dd565e0086ccf8bc6522c6ebafd8a3125c91c12b"
+  integrity sha512-uw8eYMIReOwstQ0QKF0sICefSy8cNO/v7gOTiIy9SbwuHyEecJUm7qlgueOO5S1udZ5I/irVydHVwMchgzbKTg==
+
 "@types/dompurify@2.3.3":
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.3.3.tgz#c24c92f698f77ed9cc9d9fa7888f90cf2bfaa23f"