-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
removed unnecessary loading state on first page load and
- Loading branch information
Showing
20 changed files
with
100 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { useRecoilValue } from 'recoil' | ||
|
|
||
| import { pageHeaderPropsAtom } from '@dao-dao/state/recoil' | ||
| import { PageHeader } from '@dao-dao/stateless' | ||
|
|
||
| import { HeaderWallet } from './NavWallet' | ||
|
|
||
| export const StatefulPageHeader = () => { | ||
| const props = useRecoilValue(pageHeaderPropsAtom) | ||
|
|
||
| return ( | ||
| <PageHeader | ||
| {...props} | ||
| rightNode={ | ||
| <div className="flex flex-row items-center justify-end gap-3 lg:gap-4"> | ||
| {props.rightNode} | ||
|
|
||
| <HeaderWallet /> | ||
| </div> | ||
| } | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,17 @@ | ||
| import { createPortal } from 'react-dom' | ||
| import { useEffect } from 'react' | ||
| import { useSetRecoilState } from 'recoil' | ||
|
|
||
| import { | ||
| PageHeader, | ||
| PageLoader, | ||
| useAppContextIfAvailable, | ||
| } from '@dao-dao/stateless' | ||
| import { pageHeaderPropsAtom } from '@dao-dao/state/recoil' | ||
| import { PageHeaderProps } from '@dao-dao/types' | ||
|
|
||
| import { HeaderWallet } from './NavWallet' | ||
|
|
||
| // This is a portal that teleports content, used in pages to render content in | ||
| // the header (which is located in a separate React tree due to `DappLayout` and | ||
| // `SdaLayout` managing the layouts of the apps). This component uses a | ||
| // reference to the target div (stored in the `AppContext`) and provides a | ||
| // component that will funnel its `children` into a React portal | ||
| // (https://reactjs.org/docs/portals.html). This ref is accessible via the | ||
| // `useAppContext` hook so that descendants of the context provider (such as | ||
| // page components) can use the `PageHeaderContent` component below and specify | ||
| // what renders in the header. The API for a page is as simple as: | ||
| // | ||
| // export const Page = () => ( | ||
| // <> | ||
| // <PageHeaderContent title="Page Title" /> | ||
|
|
||
| // {/* ... Page content here ... */} | ||
| // </> | ||
| // ) | ||
| // | ||
| // See https://malcolmkee.com/blog/portal-to-subtree/ for an example using | ||
| // portals to render components across subtrees with similar syntax. | ||
| // | ||
| // If not in an AppContext, this component will render a PageHeader normally | ||
| // instead of using the portal. | ||
| /** | ||
| * This is a component that sets props used by the page header. | ||
| */ | ||
| export const PageHeaderContent = (props: PageHeaderProps) => { | ||
| const appContext = useAppContextIfAvailable() | ||
|
|
||
| const pageHeader = ( | ||
| <PageHeader | ||
| {...props} | ||
| rightNode={ | ||
| <div className="flex flex-row items-center justify-end gap-3 lg:gap-4"> | ||
| {props.rightNode} | ||
|
|
||
| <HeaderWallet /> | ||
| </div> | ||
| } | ||
| /> | ||
| ) | ||
| const setPageHeaderProps = useSetRecoilState(pageHeaderPropsAtom) | ||
| useEffect(() => { | ||
| setPageHeaderProps(props) | ||
| }, [setPageHeaderProps, props]) | ||
|
|
||
| // If app context is available, but the page header ref is not, render nothing | ||
| // until the ref is available. If not in an app context, render the element | ||
| // directly. The direct render is useful when outside the AppContext, such as | ||
| // error pages in the SDA. | ||
| return appContext ? ( | ||
| appContext.pageHeaderRef.current ? ( | ||
| createPortal(pageHeader, appContext.pageHeaderRef.current) | ||
| ) : ( | ||
| <PageLoader className="absolute top-0 right-0 bottom-0 left-0 z-50 bg-background-base" /> | ||
| ) | ||
| ) : ( | ||
| pageHeader | ||
| ) | ||
| return null | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.