Skip to content

Commit

Permalink
added global context and started example with Banner (#387)
Browse files Browse the repository at this point in the history
* added global context and started example with Banner

* ran npm i

* fixing pr checks

---------

Co-authored-by: Dennis Wang <[email protected]>
Co-authored-by: denniswangcodes <[email protected]>
  • Loading branch information
3 people authored Mar 24, 2024
1 parent a4d9ba1 commit 541eef0
Show file tree
Hide file tree
Showing 4 changed files with 517 additions and 444 deletions.
60 changes: 32 additions & 28 deletions client/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
import GeneralError from './components/ErrorBoundary/GeneralError';
import NotFound from './components/ErrorBoundary/NotFoundError';

import { MarketingTextProvider } from './providers/MarketingTextProvider';

import { UserProvider } from './providers';
import { ModalProvider } from './providers/ModalProvider';
import { ModalProvider } from './providers';
import { SettingsProvider } from './providers';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';

import './App.css';
import { SettingsProvider } from './providers/SettingsProvider';

const queryClient = new QueryClient();

Expand All @@ -27,33 +29,35 @@ function App(): JSX.Element {
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools />
<ErrorBoundary fallback={GeneralError}>
<UserProvider>
<SettingsProvider>
<ModalProvider>
<BrowserRouter
getUserConfirmation={() => {
// intentionally left empty callback to block the default browser prompt.
}}
>
<Grid
className="App"
display="flex"
flexDirection="column"
height="100vh"
width="100vw"
justifyContent="space-between"
<MarketingTextProvider>
<UserProvider>
<SettingsProvider>
<ModalProvider>
<BrowserRouter
getUserConfirmation={() => {
// intentionally left empty callback to block the default browser prompt.
}}
>
<Header />
<ErrorBoundary fallback={NotFound}>
<Main />
</ErrorBoundary>
<Footer />
<Modal />
</Grid>
</BrowserRouter>
</ModalProvider>
</SettingsProvider>
</UserProvider>
<Grid
className="App"
display="flex"
flexDirection="column"
height="100vh"
width="100vw"
justifyContent="space-between"
>
<Header />
<ErrorBoundary fallback={NotFound}>
<Main />
</ErrorBoundary>
<Footer />
<Modal />
</Grid>
</BrowserRouter>
</ModalProvider>
</SettingsProvider>
</UserProvider>
</MarketingTextProvider>
</ErrorBoundary>
</QueryClientProvider>
</ThemeProvider>
Expand Down
35 changes: 35 additions & 0 deletions client/src/providers/MarketingTextProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { createContext, FC, ReactNode, useContext } from 'react';

const marketingText = {
banner: {
mainHigh: 'Support Local',
mainLow: 'Nonprofits',
mainSubtext:
'Be part of our community of volunteers, nonprofits, and individuals through the Givingful exchange platform.',
CTAButton: 'Join Now',
},

signup: {
buttonLabel: 'Example1',
formFieldLabel: 'Example2',
},
} as const;

const MarketingTextContext = createContext<typeof marketingText>(marketingText);

interface MarketingTextProviderProps {
children: ReactNode;
}

export const MarketingTextProvider: FC<MarketingTextProviderProps> = ({ children }) => {
return (
<MarketingTextContext.Provider value={marketingText}>{children}</MarketingTextContext.Provider>
);
};

// Custom hook for consuming the context
export const useMarketingText = () => {
return useContext(MarketingTextContext);
};

export default MarketingTextProvider;
2 changes: 2 additions & 0 deletions client/src/providers/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
export * from './UserProvider';
export * from './MarketingTextProvider';
export * from './SettingsProvider';
export * from './ModalProvider';
Loading

0 comments on commit 541eef0

Please sign in to comment.