alihan/OpenPipe-llm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add requireAuth to AppShell

Browse Source
This commit is contained in:
David Corbitt
2023-08-08 13:20:02 -07:00
parent a2ace63f25
commit a2c322ff43
4 changed files with 24 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/src/components/nav/AppShell.tsx
View File

@@ -106,7 +106,15 @@ const NavSidebar = () => {
); );
}; };
export default function AppShell(props: { children: React.ReactNode; title?: string }) { export default function AppShell({
children,
title,
requireAuth,
}: {
children: React.ReactNode;
title?: string;
requireAuth?: boolean;
}) {
const [vh, setVh] = useState("100vh"); // Default height to prevent flicker on initial render const [vh, setVh] = useState("100vh"); // Default height to prevent flicker on initial render
useEffect(() => { useEffect(() => {
@@ -126,14 +134,23 @@ export default function AppShell(props: { children: React.ReactNode; title?: str
}; };
}, []); }, []);
const user = useSession().data;
const authLoading = useSession().status === "loading";
useEffect(() => {
if (requireAuth && user === null && !authLoading) {
signIn("github").catch(console.error);
}
}, [requireAuth, user, authLoading]);
return ( return (
<Flex h={vh} w="100vw"> <Flex h={vh} w="100vw">
<Head> <Head>
<title>{props.title ? `${props.title} | OpenPipe` : "OpenPipe"}</title> <title>{title ? `${title} | OpenPipe` : "OpenPipe"}</title>
</Head> </Head>
<NavSidebar /> <NavSidebar />
<Box h="100%" flex={1} overflowY="auto"> <Box h="100%" flex={1} overflowY="auto">
{props.children} {children}
</Box> </Box>
</Flex> </Flex>
); );

31
app/src/pages/data/index.tsx
View File

@@ -4,12 +4,8 @@ import {
Breadcrumb, Breadcrumb,
BreadcrumbItem, BreadcrumbItem,
Flex, Flex,
Center,
Text,
Link,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import AppShell from "~/components/nav/AppShell"; import AppShell from "~/components/nav/AppShell";
import { signIn, useSession } from "next-auth/react";
import { RiDatabase2Line } from "react-icons/ri"; import { RiDatabase2Line } from "react-icons/ri";
import { import {
DatasetCard, DatasetCard,
@@ -23,33 +19,8 @@ import { useDatasets } from "~/utils/hooks";
export default function DatasetsPage() { export default function DatasetsPage() {
const datasets = useDatasets(); const datasets = useDatasets();
const user = useSession().data;
const authLoading = useSession().status === "loading";
if (user === null || authLoading) {
return (
<AppShell title="Data">
<Center h="100%">
{!authLoading && (
<Text>
<Link
onClick={() => {
signIn("github").catch(console.error);
}}
textDecor="underline"
>
Sign in
</Link>{" "}
to view or create new datasets!
</Text>
)}
</Center>
</AppShell>
);
}
return ( return (
<AppShell title="Data"> <AppShell title="Data" requireAuth>
<PageHeaderContainer> <PageHeaderContainer>
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem> <BreadcrumbItem>

39
app/src/pages/experiments/index.tsx
View File

@@ -1,13 +1,4 @@
import { import { SimpleGrid, Icon, Breadcrumb, BreadcrumbItem, Flex } from "@chakra-ui/react";
SimpleGrid,
Icon,
Breadcrumb,
BreadcrumbItem,
Flex,
Center,
Text,
Link,
} from "@chakra-ui/react";
import { RiFlaskLine } from "react-icons/ri"; import { RiFlaskLine } from "react-icons/ri";
import AppShell from "~/components/nav/AppShell"; import AppShell from "~/components/nav/AppShell";
import { import {
@@ -15,7 +6,6 @@ import {
ExperimentCardSkeleton, ExperimentCardSkeleton,
NewExperimentCard, NewExperimentCard,
} from "~/components/experiments/ExperimentCard"; } from "~/components/experiments/ExperimentCard";
import { signIn, useSession } from "next-auth/react";
import PageHeaderContainer from "~/components/nav/PageHeaderContainer"; import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents"; import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
import { useExperiments } from "~/utils/hooks"; import { useExperiments } from "~/utils/hooks";
@@ -23,33 +13,8 @@ import { useExperiments } from "~/utils/hooks";
export default function ExperimentsPage() { export default function ExperimentsPage() {
const experiments = useExperiments(); const experiments = useExperiments();
const user = useSession().data;
const authLoading = useSession().status === "loading";
if (user === null || authLoading) {
return (
<AppShell title="Experiments">
<Center h="100%">
{!authLoading && (
<Text>
<Link
onClick={() => {
signIn("github").catch(console.error);
}}
textDecor="underline"
>
Sign in
</Link>{" "}
to view or create new experiments!
</Text>
)}
</Center>
</AppShell>
);
}
return ( return (
<AppShell title="Experiments"> <AppShell title="Experiments" requireAuth>
<PageHeaderContainer> <PageHeaderContainer>
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem> <BreadcrumbItem>

2
app/src/pages/home/index.tsx
View File

@@ -58,7 +58,7 @@ export default function HomePage() {
}, [stats.data]); }, [stats.data]);
return ( return (
<AppShell> <AppShell requireAuth>
<PageHeaderContainer> <PageHeaderContainer>
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem> <BreadcrumbItem>