Check out my code repository here: https://github.com/d0uble-happiness/discogsCSV
App.vue
<template>
<div>
<button @click="downloadSampleInputFile">Download basic sample file</button>
</div>
<div>
<button @click="createSampleInputFile">Download random sample file</button>
</div>
<div>
<FileUpload @file="setFile" />
</div>
<div>
<p v-for="row of data" :key="row">
{{ row }}
</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import FileUpload from '@/components/FileUpload.vue';
import { fetchRelease, parseCsvToArray } from '@/parser';
import { prepareDownload } from './components/PrepareDownload';
import { downloadSampleInputFile } from './components/DownloadSampleInputFile';
import { createSampleInputFile } from './components/CreateSampleInputFile';
export default defineComponent({
name: 'App',
components: {
FileUpload
},
data() {
return {
data: null as null | string[],
createSampleInputFile,
downloadSampleInputFile
}
},
methods: {
async setFile(file: File) {
this.data = await parseCsvToArray(file)
console.log(this.data)
},
async fetchReleases(idList: string[]) {
try {
const data = await fetchRelease(idList)
console.log('Fetched data from Discogs', data)
return data
} catch (err) {
console.log('Failed fetching releases', err)
}
},
async downloadCSV(data: any[]) {
prepareDownload(data)
},
},
watch: {
data(data) {
this.fetchReleases(data)
this.downloadCSV(data)
}
},
});
</script>
FetchRelease.ts
import { DiscogsClient } from '@lionralfs/discogs-client'
import { processReleaseData } from './ProcessReleaseData'
export default {
name: 'FetchRelease',
methods: {
fetchRelease
}
}
const db = new DiscogsClient().database()
async function fetchRelease(releaseId: string): Promise<any[] | { error: string }> {
try {
const { data } = await db.getRelease(releaseId)
return processReleaseData(releaseId, data)
} catch (error) {
return {
error: `Release with ID ${releaseId} does not exist`
}
}
}
ProcessReleaseData.ts
import { type GetReleaseResponse } from '@lionralfs/discogs-client/lib/types'
export default {
name: 'ProcessReleaseData',
methods: {
processReleaseData
}
}
...
(contents omitted for brevity)
...