get opencollectiva api key from app state

src/Components/AppShell/AppShell.tsx

@@ -14,16 +14,22 @@ export function AppShell({
   children,
   assetsApi,
   embedded,
+  openCollectiveApiKey,
 }: {
   appName: string
   children: React.ReactNode
   assetsApi: AssetsApi
   embedded?: boolean
+  openCollectiveApiKey?: string
 }) {
   return (
     <ContextWrapper>
       <div className='tw-flex tw-flex-col tw-h-full'>
-        <SetAppState assetsApi={assetsApi} embedded={embedded} />
+        <SetAppState
+          assetsApi={assetsApi}
+          embedded={embedded}
+          openCollectiveApiKey={openCollectiveApiKey}
+        />
         <NavBar appName={appName}></NavBar>
         <div id='app-content' className='tw-flex'>
           {children}

src/Components/AppShell/SetAppState.tsx

@@ -7,9 +7,11 @@ import type { AssetsApi } from '#types/AssetsApi'
 export const SetAppState = ({
   assetsApi,
   embedded,
+  openCollectiveApiKey,
 }: {
   assetsApi: AssetsApi
   embedded?: boolean
+  openCollectiveApiKey?: string
 }) => {
   const setAppState = useSetAppState()
 
@@ -21,5 +23,9 @@ export const SetAppState = ({
     setAppState({ embedded })
   }, [embedded, setAppState])
 
+  useEffect(() => {
+    setAppState({ openCollectiveApiKey })
+  }, [openCollectiveApiKey, setAppState])
+
   return <></>
 }

src/Components/AppShell/hooks/useAppState.tsx

@@ -9,6 +9,7 @@ interface AppState {
   sideBarOpen: boolean
   sideBarSlim: boolean
   embedded: boolean
+  openCollectiveApiKey: string
 }
 
 type UseAppManagerResult = ReturnType<typeof useAppManager>
@@ -18,6 +19,7 @@ const initialAppState: AppState = {
   sideBarOpen: false,
   sideBarSlim: false,
   embedded: false,
+  openCollectiveApiKey: '',
 }
 
 const AppContext = createContext<UseAppManagerResult>({

src/Components/Profile/Subcomponents/CrowdfundingView.tsx

@@ -1,6 +1,8 @@
 import axios from 'axios'
 import { useState, useEffect } from 'react'
 
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+
 import type { Item } from '#types/Item'
 
 interface AccountData {
@@ -56,16 +58,6 @@ const GET_TRANSACTIONS = `
   }
 `
 
-const token = '9350b1eecb4c70f2b15d85e32df4d4cf3ea80a1f'
-
-const graphqlClient = axios.create({
-  baseURL: 'https://api.opencollective.com/graphql/v2',
-  headers: {
-    Authorization: `Bearer ${token}`,
-    'Content-Type': 'application/json',
-  },
-})
-
 const formatCurrency = (valueInCents: number, currency: string) => {
   const value = valueInCents / 100
   const options: Intl.NumberFormatOptions = {
@@ -79,6 +71,17 @@ const formatCurrency = (valueInCents: number, currency: string) => {
 export const CrowdfundingView = ({ item }: { item: Item }) => {
   // Hier wird slug aus dem Item extrahiert.
   const slug = item.openCollectiveSlug
+  const appState = useAppState()
+
+  const token = appState.openCollectiveApiKey
+
+  const graphqlClient = axios.create({
+    baseURL: 'https://api.opencollective.com/graphql/v2',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+  })
 
   const [data, setData] = useState<AccountData | null>(null)
   const [loading, setLoading] = useState<boolean>(true)