From c7e780f716ad4c0f94ead3fa7dfd3a58914c2544 Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Thu, 30 Jan 2025 17:25:12 -0500
Subject: [PATCH] moving instruments/categories to global state

---
 src/App.vue                         | 17 +++++++----------
 src/components/category_chooser.vue | 16 ++++++++++------
 src/components/show_category.vue    | 11 +++++------
 src/components/summary.vue          | 12 ++++++++----
 src/components/timer.vue            |  6 +-----
 src/libs/state.js                   |  2 ++
 6 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 39b546b..d2712a4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,15 +7,18 @@
 	import Timer from './components/timer.vue'
 	import Status from './components/status.vue'
 	
-	import { currentWorkingCategory, currentWorkingInstrument } from './libs/state.js'
+	import {
+		currentWorkingCategory,
+		currentWorkingInstrument,
+		instruments,
+		categories
+	} from './libs/state.js'
 
 	const timerRunning = ref(false)
 	const micThresholdExceeded = ref(false)
 	const summaryRef = ref(null)
 	const statusRef = ref(null)
 	const showCategoryRef = ref(null)
-	const instruments = ref([])
-	const categories = ref([])
 
 	const refreshPage = (session) => {
 		summaryRef.value.loadData()
@@ -64,18 +67,12 @@
 				/>
 		</section>
 		<section id="summary">
-			<Summary 
-				ref="summaryRef"
-				:instruments="instruments"
-				:categories="categories"
-				/>
+			<Summary ref="summaryRef" />
 		</section>
 		<section id="category">
 			<ShowCategory
 				v-if="currentWorkingInstrument"
 				ref="showCategoryRef"
-				:instruments="instruments"
-				:categories="categories"
 				/>
 		</section>
 		<section id="songs">
diff --git a/src/components/category_chooser.vue b/src/components/category_chooser.vue
index 871955b..345e6c7 100644
--- a/src/components/category_chooser.vue
+++ b/src/components/category_chooser.vue
@@ -1,23 +1,27 @@
 <script setup>
 	import { defineProps } from 'vue';
 
-	const props = defineProps(['instruments', 'categories'])
-	import { currentWorkingCategory, currentWorkingInstrument } from '../libs/state.js'
- 	
+	import {
+		currentWorkingCategory,
+		currentWorkingInstrument,
+		instruments,
+		categories
+	} from '../libs/state.js'
+
 	const selectFirstInstrumentOfCategory = () => {
-		currentWorkingCategory.value = props.categories.find(category => category.instrument === currentWorkingInstrument.value.name)
+		currentWorkingCategory.value = categories.value.find(category => category.instrument === currentWorkingInstrument.value.name)
 	}
 
 </script>
 <template>
 	<select @change="selectFirstInstrumentOfCategory" v-model="currentWorkingInstrument">
-		<option :value="instrument" v-for="instrument in props.instruments">
+		<option :value="instrument" v-for="instrument in instruments">
 			{{instrument.name}}
 		</option>
 	</select>
 	<select v-model="currentWorkingCategory">
 		<option
-			v-for="category in props.categories.filter(currentCategory => currentCategory.instrument === currentWorkingInstrument.name)"
+			v-for="category in categories.filter(currentCategory => currentCategory.instrument === currentWorkingInstrument.name)"
 			:value="category">
 				{{category.category}}
 		</option>
diff --git a/src/components/show_category.vue b/src/components/show_category.vue
index b49377b..938a85c 100644
--- a/src/components/show_category.vue
+++ b/src/components/show_category.vue
@@ -2,9 +2,10 @@
 	import { formatSeconds } from '../libs/time.js'
 	import CategoryChooser from './category_chooser.vue'
 	import { onMounted, ref, watch, defineProps } from 'vue'
-	import { currentWorkingCategory, currentWorkingInstrument } from '../libs/state.js'
-
-	const props = defineProps(['categories', 'instruments'])
+	import {
+		currentWorkingCategory,
+		currentWorkingInstrument
+	} from '../libs/state.js'
 
 	const categorySessions = ref([])
 
@@ -25,9 +26,7 @@
 
 <template>
 	<h2>Show Category</h2>
-	<CategoryChooser
-		:instruments="props.instruments"
-		:categories="props.categories" />
+	<CategoryChooser />
 	<table>
 		<thead>
 			<tr>
diff --git a/src/components/summary.vue b/src/components/summary.vue
index 409f6e3..0bdf4c3 100644
--- a/src/components/summary.vue
+++ b/src/components/summary.vue
@@ -1,7 +1,11 @@
 <script setup>
 	import { onMounted, ref, defineExpose } from 'vue'
-	import { currentWorkingCategory, currentWorkingInstrument } from '../libs/state.js'
-	const props = defineProps(['instruments', 'categories'])
+	import {
+		currentWorkingCategory,
+		currentWorkingInstrument,
+		instruments,
+		categories
+	} from '../libs/state.js'
 
 	const summary = ref([])
 
@@ -13,9 +17,9 @@
 	onMounted(loadData)
 
 	const setWorkingCategory = (choice) => {
-		const chosenCategory = props.categories.find(category => category.id === choice.category_id)
+		const chosenCategory = categories.value.find(category => category.id === choice.category_id)
 		currentWorkingCategory.value = chosenCategory
-		currentWorkingInstrument.value = props.instruments.find(instrument => instrument.name === chosenCategory.instrument)
+		currentWorkingInstrument.value = instruments.value.find(instrument => instrument.name === chosenCategory.instrument)
 	}
 
 	defineExpose({loadData})
diff --git a/src/components/timer.vue b/src/components/timer.vue
index 4ee99c9..8b504ba 100644
--- a/src/components/timer.vue
+++ b/src/components/timer.vue
@@ -4,8 +4,6 @@
 	const micThresholdExceeded = defineModel('micThresholdExceeded')
 	const timerRunning = defineModel('timerRunning')
 
-	const props = defineProps(['categories', 'instruments'])
-
 	const { proxy } = getCurrentInstance();
 
 	onMounted(()=>{
@@ -228,9 +226,7 @@
 		<input @change="updateSavedPreviousSeconds" v-model="totalSeconds" type="number"/>
 
 		<label>Practice Category</label>
-		<CategoryChooser
-			:instruments="instruments"
-			:categories="categories" />
+		<CategoryChooser />
 		<input type="submit"/>
 
 		<label>Comments</label>
diff --git a/src/libs/state.js b/src/libs/state.js
index 4554529..09a5f85 100644
--- a/src/libs/state.js
+++ b/src/libs/state.js
@@ -2,3 +2,5 @@ import { ref } from 'vue'
 export const copiedSongs = ref([])
 export const currentWorkingCategory = ref(null)
 export const currentWorkingInstrument = ref(null)
+export const instruments = ref([])
+export const categories = ref([])