App gets categories via AJAX and sends to component chooser

src/App.vue

@@ -12,6 +12,7 @@
 	const statusRef = ref(null)
 	const showCategoryRef = ref(null)
 	const instruments = ref([])
+	const categories = ref([])
 
 	const updateCurrentWorkingCategoryID = (id) =>{
 		currentWorkingCategoryID.value = id
@@ -24,8 +25,10 @@
 	}
 
 	const loadData = async () => {
-		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'instruments')
+		let response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'instruments')
 		instruments.value = await response.json()
+		response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories')
+		categories.value = await response.json()
 	}
 	onMounted(loadData)
 </script>
@@ -34,13 +37,21 @@
 	<main>
 		<section id="timer">
 			<Status ref="statusRef"/>
-			<Timer @loggedTime="refreshPage" :instruments="instruments" :currentWorkingCategoryID="currentWorkingCategoryID"/>
+			<Timer 
+				@loggedTime="refreshPage"
+				:categories="categories"
+				:instruments="instruments"
+				:currentWorkingCategoryID="currentWorkingCategoryID"/>
 		</section>
 		<section id="summary">
 			<Summary ref="summaryRef" @update="updateCurrentWorkingCategoryID"/>
 		</section>
 		<section id="category">
-			<ShowCategory :instruments="instruments" ref="showCategoryRef" :currentWorkingCategoryID="currentWorkingCategoryID"/>
+			<ShowCategory
+				:instruments="instruments"
+				:categories="categories"
+				ref="showCategoryRef"
+				:currentWorkingCategoryID="currentWorkingCategoryID"/>
 		</section>
 		<section id="songs">
 			<Songs/>

src/components/show_category.vue

@@ -2,9 +2,8 @@
 	import CategoryChooser from './category_chooser.vue'
 	import { onMounted, ref, watch, defineProps, toRefs} from 'vue'
 
-	const props = defineProps(['instruments', 'currentWorkingCategoryID'])
+	const props = defineProps(['categories', 'instruments', 'currentWorkingCategoryID'])
 
-	const categories = ref([])
 	const categorySessions = ref([])
 	const practiceCategoryId = ref(0)
 
@@ -28,8 +27,6 @@
 	onMounted(async () => {
 		practiceCategoryId.value = currentWorkingCategoryID
 		loadCategory(currentWorkingCategoryID.value)
-		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories')
-		categories.value = await response.json()
 	})
 
 	watch(currentWorkingCategoryID, loadCategory)

src/components/timer.vue

@@ -4,10 +4,9 @@
 	import { getHours, getMinutes, createTimeObj, getAccumulatedSeconds, formatSeconds } from '../libs/time.js'
 
 	export default {
-		props: ['currentWorkingCategoryID', 'instruments'],
+		props: ['categories', 'currentWorkingCategoryID', 'instruments'],
 		data() {
 			return {
-				categories:[],
 				running: false,
 				startTime:0,
 				savedPreviousSeconds:0,
@@ -153,9 +152,6 @@
 		},
 		mounted() {
 			this.practice_category_id = this.currentWorkingCategoryID
-			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
-				this.categories = response.data
-			})
 			this.totalSeconds = parseInt(window.localStorage.getItem('lastTotalSeconds'))
 			this.setManualTime(this.totalSeconds)
 			this.savedPreviousSeconds = this.totalSeconds
@@ -195,14 +191,6 @@
 			:currentWorkingCategoryID="practice_category_id"
 			:instruments="instruments"
 			:categories="categories" />
-		<select v-model="practice_category_id">
-			<option v-for="category in categories" v-bind:value="category.id">
-				{{category.instrument}}
-				:
-				{{category.category}}
-			</option>
-		</select>
-
 		<input type="Submit"/>
 
 		<label>Comments</label>