diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx index 7c2c482e..ebe297a3 100644 --- a/src/Components/AppShell/AppShell.tsx +++ b/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 (
- +
{children} diff --git a/src/Components/AppShell/SetAppState.tsx b/src/Components/AppShell/SetAppState.tsx index 055bc561..10b9e4a6 100644 --- a/src/Components/AppShell/SetAppState.tsx +++ b/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 <> } diff --git a/src/Components/AppShell/hooks/useAppState.tsx b/src/Components/AppShell/hooks/useAppState.tsx index 794fe700..029da5df 100644 --- a/src/Components/AppShell/hooks/useAppState.tsx +++ b/src/Components/AppShell/hooks/useAppState.tsx @@ -9,6 +9,7 @@ interface AppState { sideBarOpen: boolean sideBarSlim: boolean embedded: boolean + openCollectiveApiKey: string } type UseAppManagerResult = ReturnType @@ -18,6 +19,7 @@ const initialAppState: AppState = { sideBarOpen: false, sideBarSlim: false, embedded: false, + openCollectiveApiKey: '', } const AppContext = createContext({ diff --git a/src/Components/Profile/Subcomponents/CrowdfundingView.tsx b/src/Components/Profile/Subcomponents/CrowdfundingView.tsx index 793cdc30..dd5964f3 100644 --- a/src/Components/Profile/Subcomponents/CrowdfundingView.tsx +++ b/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(null) const [loading, setLoading] = useState(true)