Add basic page to starter template

BrunoQuaresma · BrunoQuaresma · commit d7455c1fd53a · 2022-12-08T17:42:31.000Z
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -22,6 +22,7 @@ import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
 import { RequireAuth } from "./components/RequireAuth/RequireAuth"
 import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"
 import { DeploySettingsLayout } from "components/DeploySettingsLayout/DeploySettingsLayout"
+import StarterTemplatePage from "pages/StarterTemplatePage/StarterTemplatePage"
 
 // Lazy load pages
 // - Pages that are secondary, not in the main navigation or not usually accessed
@@ -153,6 +154,15 @@ export const AppRouter: FC = () => {
               </AuthAndFrame>
             }
           />
+
+          <Route
+            path=":exampleId"
+            element={
+              <AuthAndFrame>
+                <StarterTemplatePage />
+              </AuthAndFrame>
+            }
+          ></Route>
         </Route>
 
         <Route path="templates">
diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
@@ -146,7 +146,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   codeWithoutLanguage: {
-    padding: theme.spacing(0.5, 1),
+    padding: theme.spacing(0.125, 0.5),
     background: theme.palette.divider,
     borderRadius: 4,
     color: theme.palette.text.primary,
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePage.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePage.tsx
@@ -0,0 +1,31 @@
+import { useMachine } from "@xstate/react"
+import { useOrganizationId } from "hooks/useOrganizationId"
+import { FC } from "react"
+import { Helmet } from "react-helmet-async"
+import { useParams } from "react-router-dom"
+import { pageTitle } from "util/page"
+import { starterTemplateMachine } from "xServices/starterTemplates/starterTemplateXService"
+import { StarterTemplatePageView } from "./StarterTemplatePageView"
+
+const StarterTemplatePage: FC = () => {
+  const { exampleId } = useParams() as { exampleId: string }
+  const organizationId = useOrganizationId()
+  const [state] = useMachine(starterTemplateMachine, {
+    context: {
+      organizationId,
+      exampleId,
+    },
+  })
+
+  return (
+    <>
+      <Helmet>
+        <title>{pageTitle(exampleId)}</title>
+      </Helmet>
+
+      <StarterTemplatePageView context={state.context} />
+    </>
+  )
+}
+
+export default StarterTemplatePage
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -0,0 +1,57 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { Loader } from "components/Loader/Loader"
+import { Margins } from "components/Margins/Margins"
+import { MemoizedMarkdown } from "components/Markdown/Markdown"
+import {
+  PageHeader,
+  PageHeaderSubtitle,
+  PageHeaderTitle,
+} from "components/PageHeader/PageHeader"
+import { FC } from "react"
+import { StarterTemplateContext } from "xServices/starterTemplates/starterTemplateXService"
+
+export interface StarterTemplatePageViewProps {
+  context: StarterTemplateContext
+}
+
+export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
+  context,
+}) => {
+  const styles = useStyles()
+  const { starterTemplate } = context
+
+  if (!starterTemplate) {
+    return <Loader />
+  }
+
+  return (
+    <Margins>
+      <PageHeader>
+        <PageHeaderTitle>{starterTemplate.name}</PageHeaderTitle>
+        <PageHeaderSubtitle>{starterTemplate.description}</PageHeaderSubtitle>
+      </PageHeader>
+
+      <div className={styles.markdownSection} id="readme">
+        <div className={styles.markdownWrapper}>
+          <MemoizedMarkdown>{starterTemplate.markdown}</MemoizedMarkdown>
+        </div>
+      </div>
+    </Margins>
+  )
+}
+
+export const useStyles = makeStyles((theme) => {
+  return {
+    markdownSection: {
+      background: theme.palette.background.paper,
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: theme.shape.borderRadius,
+    },
+
+    markdownWrapper: {
+      padding: theme.spacing(5, 5, 8),
+      maxWidth: 800,
+      margin: "auto",
+    },
+  }
+})
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx
@@ -10,6 +10,7 @@ import {
 } from "components/PageHeader/PageHeader"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
 import { StarterTemplatesContext } from "xServices/starterTemplates/starterTemplatesXService"
 
 export interface StarterTemplatesPageViewProps {
@@ -40,12 +41,12 @@ export const StarterTemplatesPageView: FC<StarterTemplatesPageViewProps> = ({
       <div className={styles.templates}>
         {context.starterTemplates &&
           context.starterTemplates.map((example) => (
-            <div className={styles.template} key={example.id}>
+            <Link to={example.id} className={styles.template} key={example.id}>
               <span className={styles.templateName}>{example.name}</span>
               <span className={styles.templateDescription}>
                 {example.description}
               </span>
-            </div>
+            </Link>
           ))}
       </div>
     </Margins>
@@ -58,6 +59,7 @@ const useStyles = makeStyles((theme) => ({
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
     gap: theme.spacing(2),
   },
+
   template: {
     padding: theme.spacing(2),
     border: `1px solid ${theme.palette.divider}`,
@@ -66,6 +68,12 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexDirection: "column",
     gap: theme.spacing(0.5),
+    textDecoration: "none",
+    color: "inherit",
+
+    "&:hover": {
+      backgroundColor: theme.palette.background.paperLight,
+    },
   },
 
   templateName: {
diff --git a/site/src/xServices/starterTemplates/starterTemplateXService.ts b/site/src/xServices/starterTemplates/starterTemplateXService.ts
@@ -0,0 +1,71 @@
+import { getTemplateExamples } from "api/api"
+import { TemplateExample } from "api/typesGenerated"
+import { assign, createMachine } from "xstate"
+
+export interface StarterTemplateContext {
+  organizationId: string
+  exampleId: string
+  starterTemplate?: TemplateExample
+  error?: unknown
+}
+
+export const starterTemplateMachine = createMachine(
+  {
+    id: "starterTemplate",
+    predictableActionArguments: true,
+    schema: {
+      context: {} as StarterTemplateContext,
+      services: {} as {
+        loadStarterTemplate: {
+          data: TemplateExample
+        }
+      },
+    },
+    tsTypes: {} as import("./starterTemplateXService.typegen").Typegen0,
+    initial: "loading",
+    states: {
+      loading: {
+        invoke: {
+          src: "loadStarterTemplate",
+          onDone: {
+            actions: ["assignStarterTemplate"],
+            target: "idle.ok",
+          },
+          onError: {
+            actions: ["assignError"],
+            target: "idle.error",
+          },
+        },
+      },
+      idle: {
+        initial: "ok",
+        states: {
+          ok: { type: "final" },
+          error: { type: "final" },
+        },
+      },
+    },
+  },
+  {
+    services: {
+      loadStarterTemplate: async ({ organizationId, exampleId }) => {
+        const examples = await getTemplateExamples(organizationId)
+        const starterTemplate = examples.find(
+          (example) => example.id === exampleId,
+        )
+        if (!starterTemplate) {
+          throw new Error(`Example ${exampleId} not found.`)
+        }
+        return starterTemplate
+      },
+    },
+    actions: {
+      assignError: assign({
+        error: (_, { data }) => data,
+      }),
+      assignStarterTemplate: assign({
+        starterTemplate: (_, { data }) => data,
+      }),
+    },
+  },
+)
