App gets instruments via AJAX and sends to component chooser

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-	import { ref } from 'vue'
+	import { onMounted, ref } from 'vue'
 
 	import Summary from './components/summary.vue'
 	import ShowCategory from './components/show_category.vue'
@@ -11,6 +11,7 @@
 	const summaryRef = ref(null)
 	const statusRef = ref(null)
 	const showCategoryRef = ref(null)
+	const instruments = ref([])
 
 	const updateCurrentWorkingCategoryID = (id) =>{
 		currentWorkingCategoryID.value = id
@@ -22,19 +23,24 @@
 		showCategoryRef.value.loadCategory(session.practice_category_id)
 	}
 
+	const loadData = async () => {
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'instruments')
+		instruments.value = await response.json()
+	}
+	onMounted(loadData)
 </script>
 
 <template>
 	<main>
 		<section id="timer">
 			<Status ref="statusRef"/>
-			<Timer @loggedTime="refreshPage" :currentWorkingCategoryID="currentWorkingCategoryID"/>
+			<Timer @loggedTime="refreshPage" :instruments="instruments" :currentWorkingCategoryID="currentWorkingCategoryID"/>
 		</section>
 		<section id="summary">
 			<Summary ref="summaryRef" @update="updateCurrentWorkingCategoryID"/>
 		</section>
 		<section id="category">
-			<ShowCategory ref="showCategoryRef" :currentWorkingCategoryID="currentWorkingCategoryID"/>
+			<ShowCategory :instruments="instruments" ref="showCategoryRef" :currentWorkingCategoryID="currentWorkingCategoryID"/>
 		</section>
 		<section id="songs">
 			<Songs/>

src/components/category_chooser.vue

@@ -1,15 +1,10 @@
 <script setup>
-	import { onMounted, ref, watch, } from 'vue'
+	import { onMounted, ref, watch, toRefs } from 'vue'
 	const emit = defineEmits(['update'])
-	const props = defineProps(['categories', 'currentWorkingCategoryID'])
+	const props = defineProps(['instruments', 'categories', 'currentWorkingCategoryID'])
-	const instruments = ref([])
+	const { currentWorkingCategoryID } = toRefs(props);
-	const currentWorkingCategoryID = ref(props.currentWorkingCategoryID)
 	const chosenInstrument = ref('clarinet')
-	for(let category of props.categories){
+	
-		if(!instruments.value.includes(category.instrument)){
-			instruments.value.push(category.instrument)
-		}
-	}
 	const handleSelection = (event)=>{
 		emit('update', event.target.value)
 	}
@@ -21,22 +16,21 @@
 </script>
 <template>
 	<select v-model="chosenInstrument">
-		<option v-for="instrument in instruments" v-bind:value="instrument">
+		<option v-for="instrument in props.instruments" v-bind:value="instrument.name">
-			{{instrument}}
+			{{instrument.name}}
 		</option>
 	</select>
 	<select
 		@change="handleSelection"
-		v-for="instrument in instruments"
+		v-for="instrument in props.instruments"
-		:key="instrument"
 		v-model="props.currentWorkingCategoryID"
-		v-show="instrument == chosenInstrument">
+		v-show="instrument.name == chosenInstrument">
 			<option
 				v-bind:value="category.id"
 				v-for="category in props.categories"
 				:key="category.id"
-				v-show="category.instrument == instrument"
+				v-show="category.instrument == instrument.name"
-				:selected="category.instrument == instrument">
+				:selected="category.instrument == instrument.name">
 					{{category.category}}
 		</option>
 	</select>

src/components/show_category.vue

@@ -2,7 +2,7 @@
 	import CategoryChooser from './category_chooser.vue'
 	import { onMounted, ref, watch, defineProps, toRefs} from 'vue'
 
-	const props = defineProps(['currentWorkingCategoryID'])
+	const props = defineProps(['instruments', 'currentWorkingCategoryID'])
 
 	const categories = ref([])
 	const categorySessions = ref([])
@@ -42,6 +42,7 @@
 		@update="loadCategory" 
 		v-if="categories.length > 0" 
 		:currentWorkingCategoryID="props.currentWorkingCategoryID"
+		:instruments="props.instruments"
 		:categories="categories" />
 	<table>
 		<thead>

src/components/timer.vue

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import axios from 'axios';
+	import CategoryChooser from './category_chooser.vue'
 	import { getHours, getMinutes, createTimeObj, getAccumulatedSeconds, formatSeconds } from '../libs/time.js'
 
 	export default {
-		props: ['currentWorkingCategoryID'],
+		props: ['currentWorkingCategoryID', 'instruments'],
 		data() {
 			return {
 				categories:[],
@@ -25,6 +26,9 @@
 			}
 		},
 		emits: ['loggedTime'],
+		components: {
+			CategoryChooser
+		},
 		methods: {
 			formatSeconds,
 			submit(event){
@@ -142,6 +146,9 @@
 					event.returnValue = "Clear or save your time"
 					return false
 				}
+			},
+			handleCategoryChange(newValue){
+				this.practice_category_id = newValue
 			}
 		},
 		mounted() {
@@ -182,6 +189,12 @@
 		<input @change="updateSavedPreviousSeconds" v-model="totalSeconds" type="number"/>
 
 		<label>Practice Category</label>
+		<CategoryChooser
+			@update="handleCategoryChange"
+			v-if="categories.length > 0" 
+			: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}}