diff --git a/site/components/Redirect.test.tsx b/site/components/Redirect.test.tsx new file mode 100644 index 0000000000000..4b53889f3931c --- /dev/null +++ b/site/components/Redirect.test.tsx @@ -0,0 +1,22 @@ +import { render, waitFor } from "@testing-library/react" +import singletonRouter from "next/router" +import mockRouter from "next-router-mock" +import React from "react" +import { Redirect } from "./Redirect" + +describe("Redirect", () => { + // Reset the router to '/' before every test + beforeEach(() => { + mockRouter.setCurrentUrl("/") + }) + + it("performs client-side redirect on render", async () => { + // When + render() + + // Then + await waitFor(() => { + expect(singletonRouter).toMatchObject({ asPath: "/workspaces/v2" }) + }) + }) +}) diff --git a/site/components/Redirect.tsx b/site/components/Redirect.tsx new file mode 100644 index 0000000000000..5d9e01258cd74 --- /dev/null +++ b/site/components/Redirect.tsx @@ -0,0 +1,23 @@ +import React, { useEffect } from "react" +import { useRouter } from "next/router" + +export interface RedirectProps { + /** + * The path to redirect to + * @example '/projects' + */ + to: string +} + +/** + * Helper component to perform a client-side redirect + */ +export const Redirect: React.FC = ({ to }) => { + const router = useRouter() + + useEffect(() => { + void router.replace(to) + }, []) + + return null +} diff --git a/site/components/index.tsx b/site/components/index.tsx index 5fd2a75122e23..ebb1a90188bb8 100644 --- a/site/components/index.tsx +++ b/site/components/index.tsx @@ -1,3 +1,4 @@ export * from "./Button" export * from "./EmptyState" export * from "./Page" +export * from "./Redirect" diff --git a/site/pages/index.tsx b/site/pages/index.tsx index 0de405b8a74fb..905fef83e8e55 100644 --- a/site/pages/index.tsx +++ b/site/pages/index.tsx @@ -1,78 +1,18 @@ import React from "react" -import Box from "@material-ui/core/Box" -import { makeStyles } from "@material-ui/core/styles" -import Paper from "@material-ui/core/Paper" -import AddWorkspaceIcon from "@material-ui/icons/AddToQueue" -import { EmptyState, SplitButton } from "../components" -import { Navbar } from "../components/Navbar" -import { Footer } from "../components/Page" -import { useUser } from "../contexts/UserContext" +import { Redirect } from "../components" import { FullScreenLoader } from "../components/Loader/FullScreenLoader" +import { useUser } from "../contexts/UserContext" -const WorkspacesPage: React.FC = () => { - const styles = useStyles() - const { me, signOut } = useUser(true) - - if (!me) { - return - } - - const createWorkspace = () => { - alert("create") - } +const IndexPage: React.FC = () => { + const { me } = useUser(/* redirectOnError */ true) - const button = { - children: "New Workspace", - onClick: createWorkspace, + if (me) { + // Once the user is logged in, just redirect them to /projects as the landing page + return } - return ( -
- -
- - color="primary" - onClick={createWorkspace} - options={[ - { - label: "New workspace", - value: "custom", - }, - { - label: "New workspace from template", - value: "template", - }, - ]} - startIcon={} - textTransform="none" - /> -
- - - - - - -
-
- ) + return } -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - flexDirection: "column", - }, - header: { - display: "flex", - flexDirection: "row-reverse", - justifyContent: "space-between", - margin: "1em auto", - maxWidth: "1380px", - padding: theme.spacing(2, 6.25, 0), - width: "100%", - }, -})) - -export default WorkspacesPage +export default IndexPage