filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-27 02:52:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(ApplicationHeadder): only render UserActions when the user is authenticated

Browse Source
This commit is contained in:
Aminejv 2021-12-01 18:39:52 +01:00
parent d080c5ad6f
commit 40af7cfcce
1 changed files with 71 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
components/core/ApplicationHeader.js
View File

@ -14,10 +14,9 @@ import { css } from "@emotion/react";
import { DarkSymbol } from "~/common/logo"; import { DarkSymbol } from "~/common/logo";
import { Link } from "~/components/core/Link"; import { Link } from "~/components/core/Link";
import { ButtonPrimary, ButtonTertiary } from "~/components/system/components/Buttons"; import { ButtonPrimary, ButtonTertiary } from "~/components/system/components/Buttons";
import { Match, Switch } from "~/components/utility/Switch";
import { Show } from "~/components/utility/Show"; import { Show } from "~/components/utility/Show";
import { useMediaQuery } from "~/common/hooks"; import { useMediaQuery } from "~/common/hooks";
import { AnimatePresence, motion } from "framer-motion"; import { motion } from "framer-motion";
import { useSearchStore } from "~/components/core/Search/store"; import { useSearchStore } from "~/components/core/Search/store";
import { UploadOnboarding } from "~/components/core/Onboarding/Upload"; import { UploadOnboarding } from "~/components/core/Onboarding/Upload";
@ -127,8 +126,6 @@ export default function ApplicationHeader({ viewer, page, data, onAction, isMobi
} }
}; };
const { isSearching } = useSearchStore();
const { mobile } = useMediaQuery(); const { mobile } = useMediaQuery();
const isSignedOut = !viewer; const isSignedOut = !viewer;
@ -153,32 +150,23 @@ export default function ApplicationHeader({ viewer, page, data, onAction, isMobi
/> />
</Show> </Show>
</div> </div>
<div css={[STYLES_MIDDLE, Styles.HORIZONTAL_CONTAINER_CENTERED]}> <div css={STYLES_MIDDLE}>
{/**TODO: update Search component */} {/**TODO: update Search component */}
<Search.Input viewer={viewer} data={data} onAction={onAction} page={page} /> <Search.Input viewer={viewer} data={data} onAction={onAction} page={page} />
</div> </div>
<UploadOnboarding onAction={onAction} viewer={viewer} isMobile={isMobile}> {isSignedOut ? (
<Upload.Provider page={page} data={data} viewer={viewer}> <AuthActions onAction={onAction} />
<Upload.Root data={data}> ) : (
<div css={STYLES_RIGHT}> <UploadOnboarding onAction={onAction} viewer={viewer} isMobile={isMobile}>
<UserActions <Upload.Provider page={page} data={data} viewer={viewer}>
uploadAction={ <Upload.Root data={data} isMobile={isMobile}>
<Upload.Trigger <div css={STYLES_RIGHT}>
viewer={viewer} <UserActions viewer={viewer} />
aria-label="Upload" </div>
css={STYLES_UPLOAD_BUTTON} </Upload.Root>
> </Upload.Provider>
<SVG.Plus height="16px" /> </UploadOnboarding>
</Upload.Trigger> )}
}
isSearching={isSearching}
isSignedOut={isSignedOut}
onAction={onAction}
/>
</div>
</Upload.Root>
</Upload.Provider>
</UploadOnboarding>
</div> </div>
<Show when={mobile && state.popup === "profile"}> <Show when={mobile && state.popup === "profile"}>
<ApplicationUserControlsPopup <ApplicationUserControlsPopup
@ -198,58 +186,64 @@ export default function ApplicationHeader({ viewer, page, data, onAction, isMobi
); );
} }
const UserActions = ({ uploadAction, isSignedOut, isSearching, onAction }) => { const AuthActions = ({ onAction }) => {
const authActions = React.useMemo( const { isSearching } = useSearchStore();
() => (
<> if (isSearching) {
<Link href="/_/auth?tab=signin" onAction={onAction} style={{ pointerEvents: "auto" }}> return (
<span css={Styles.MOBILE_HIDDEN}> <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
<ButtonTertiary <Search.Dismiss style={{ marginLeft: 4 }} />
style={{ </motion.div>
padding: "0px 12px", );
minHeight: "30px", }
fontFamily: Constants.font.text,
marginRight: 8,
}}
>
Sign in
</ButtonTertiary>
</span>
</Link>
<Link href="/_/auth?tab=signup" onAction={onAction} style={{ pointerEvents: "auto" }}>
<ButtonPrimary
style={{ padding: "0px 12px", minHeight: "30px", fontFamily: Constants.font.text }}
>
Sign up
</ButtonPrimary>
</Link>
</>
),
[onAction]
);
return ( return (
<AnimatePresence> <motion.div
<Switch fallback={uploadAction}> initial={{ opacity: 0, y: 10 }}
<Match when={isSignedOut}> animate={{ opacity: 1, y: 0 }}
<motion.div exit={{ y: 10, opacity: 0 }}
initial={{ opacity: 0, y: 10 }} >
animate={{ opacity: 1, y: 0 }} <Link href="/_/auth?tab=signin" onAction={onAction} style={{ pointerEvents: "auto" }}>
exit={{ y: 10, opacity: 0 }} <span css={Styles.MOBILE_HIDDEN}>
<ButtonTertiary
style={{
padding: "0px 12px",
minHeight: "30px",
fontFamily: Constants.font.text,
marginRight: 8,
}}
> >
{authActions} Sign in
</motion.div> </ButtonTertiary>
</Match> </span>
<Match when={isSearching}> </Link>
<motion.div <Link href="/_/auth?tab=signup" onAction={onAction} style={{ pointerEvents: "auto" }}>
initial={{ opacity: 0, y: -10 }} <ButtonPrimary
animate={{ opacity: 1, y: 0 }} style={{ padding: "0px 12px", minHeight: "30px", fontFamily: Constants.font.text }}
exit={{ y: -10, opacity: 0 }} >
> Sign up
<Search.Dismiss style={{ marginLeft: 4 }} /> </ButtonPrimary>
</motion.div> </Link>
</Match> </motion.div>
</Switch> );
</AnimatePresence> };
const UserActions = ({ viewer }) => {
const { isSearching } = useSearchStore();
if (isSearching) {
return (
<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
<Search.Dismiss style={{ marginLeft: 4 }} />
</motion.div>
);
}
return (
<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
<Upload.Trigger viewer={viewer} aria-label="Upload" css={STYLES_UPLOAD_BUTTON}>
<SVG.Plus height="16px" />
</Upload.Trigger>
</motion.div>
); );
}; };