major claude changes

src/components/SearchResults.vue

@@ -52,49 +52,51 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapState, mapActions } from 'pinia';
-import { useSearchStore } from '../stores/search'; // Adjust path if needed
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useSearchStore } from '../stores/search'
 
-export default defineComponent({
-  name: 'SearchResults',
-  
-  data() {
-    return {
-      stateMap: {
-        0: 'MA', 1: 'RI', 2: 'NH', 3: 'ME', 4: 'VT', 5: 'CT', 6: 'NY',
-      } as Record<number, string>,
-    };
-  },
+// Store
+const searchStore = useSearchStore()
 
-  computed: {
-    ...mapState(useSearchStore, ['searchTerm', 'searchResults', 'isLoading']),
-  },
+// Template ref
+const searchContainer = ref<HTMLElement>()
 
-  methods: {
-    ...mapActions(useSearchStore, ['clearSearch']),
+// Reactive data
+const stateMap = ref({
+  0: 'MA', 1: 'RI', 2: 'NH', 3: 'ME', 4: 'VT', 5: 'CT', 6: 'NY',
+} as Record<number, string>)
 
-    getStateName(stateValue: number | string): string {
-      const stateNumber = Number(stateValue);
-      return this.stateMap[stateNumber] || 'N/A';
-    },
+// Computed properties
+const searchTerm = computed(() => searchStore.searchTerm)
+const searchResults = computed(() => searchStore.searchResults)
+const isLoading = computed(() => searchStore.isLoading)
 
-    handleClickOutside(event: MouseEvent) {
-      const searchContainer = this.$refs.searchContainer as HTMLElement;
-      const searchInput = document.getElementById('customer-search-input');
+// Functions
+const getStateName = (stateValue: number | string): string => {
+  const stateNumber = Number(stateValue);
+  return stateMap.value[stateNumber] || 'N/A';
+}
 
-      if (searchContainer && !searchContainer.contains(event.target as Node) && searchInput && !searchInput.contains(event.target as Node)) {
-        this.clearSearch();
-      }
-    },
-  },
+const clearSearch = () => {
+  searchStore.clearSearch();
+}
 
-  mounted() {
-    document.addEventListener('mousedown', this.handleClickOutside);
-  },
-  beforeUnmount() {
-    document.removeEventListener('mousedown', this.handleClickOutside);
-  },
-});
-</script>
+const handleClickOutside = (event: MouseEvent) => {
+  const container = searchContainer.value;
+  const searchInput = document.getElementById('customer-search-input');
+
+  if (container && !container.contains(event.target as Node) && searchInput && !searchInput.contains(event.target as Node)) {
+    searchStore.clearSearch();
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside);
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', handleClickOutside);
+})
+</script>