fix global state (still massively wip)

src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Paper, Search, Filter } from '@/types'
-import { papers, topics, papersfetch } from '@/store'
+import { state, papersFetch } from '@/store'
 import MainMenu from '@/components/MainMenu.vue'
 import SearchBar from '@/components/SearchBar.vue'
 import FilterView from './components/papers/FilterView.vue'
@@ -20,8 +20,7 @@ let filter: Filter = {
   },
   originator: '',
 }
-onMounted (() => papersfetch() )
-/* onMounted(() => topics.process() ) */
+onMounted (() => papersFetch() )
 </script>
 
 <template>
@@ -42,7 +41,7 @@ onMounted (() => papersfetch() )
   </header>
 
   <main class="flex flex-row max-w-5xl m-auto">
-    {{ papers }}
+    {{ state.topics }}
     <RouterView
       :search="search"
       :filter="filter"

src/store/index.ts

@@ -1,34 +1,25 @@
-import { reactive, ref } from 'vue'
+import { reactive } from 'vue'
 import type { Paper, Topic } from '@/types'
 
-const apiUrl: URL = new URL('https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json')
+const apiUrl: URL = new URL(
+  'https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json'
+)
 
-export let papers: Array<Paper> = reactive([])
-export let topics: Array<Topic> = reactive([])
-
-export async function papersfetch() {
-  papers = await (await fetch(apiUrl)).json()
-  /* const topicReferences = await [...new Set(papers?.map((paper: Paper) => paper.reference))]
-  topics = await topicReferences.map( (reference: string) => {
-    return {
-      'reference': reference, 
-      'papers': papers?.filter( (paper: Paper) => paper.reference === reference),
-    }
-  }) */
+interface State {
+  papers: Paper[]
+  topics: Topic[]
 }
 
-/* export function paperprocess() */
+export const state: State = reactive({ papers: [], topics: [] })
 
-/* export const test = reactive({
-  testi: papers.papers, 
-  funk() {
-    return [...new Set(papers.papers?.map((paper: Paper) => paper.reference))]
-  }
-}) */
-
-/* export const  = reactive({
-  topics: Array<Topic>,
-  topicReferences: Set<String>,
-  async process() {
-  },
-}) */
+export async function papersFetch() {
+  const papersData: Paper[] = await (await fetch(apiUrl)).json()
+  const topicReferences = await [...new Set(papersData?.map((paper) => paper.reference))]
+  state.papers = papersData
+  state.topics = await topicReferences.map((reference) => {
+    return {
+      reference: reference,
+      papers: papersData?.filter((paper: Paper) => paper.reference === reference)
+    }
+  })
+}