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