Pulling fix/dsc-namespace into develop

apps/dicty-frontpage/src/app/layout/FrontPageApp.tsx

@@ -38,7 +38,7 @@ const FrontPageApp = () => {
       <HeaderWithAuth clientRouter={frontpageRouter} />
       <NavbarWithAuth theme={navTheme} />
       <main className={classes.main}>
-        <Container maxWidth="xl">
+        <Container maxWidth="lg">
           <ErrorBoundary>
             <RouterProvider router={frontpageRouter} />
           </ErrorBoundary>

apps/dicty-frontpage/src/features/EditablePages/AddPage.tsx

@@ -1,13 +1,12 @@
 import { Navigate } from "react-router-dom"
-import { useState, useEffect } from "react"
 import { useContentBySlugQuery } from "dicty-graphql-schema"
-import { type UserInfoResponse, useLogto } from "@logto/react"
 import { match, P } from "ts-pattern"
 import {
   AddPageView,
   FullPageLoadingDisplay,
   contentPageErrorMatcher,
 } from "@dictybase/ui-common"
+import { useTokenAndUser } from "auth"
 import { NAMESPACE } from "../../common/constants/namespace"
 import { useSlug } from "../../common/hooks/useSlug"
 import { useContentPath } from "../../common/hooks/useContentPath"
@@ -20,23 +19,9 @@ const AddPage = () => {
     errorPolicy: "all",
     fetchPolicy: "network-only",
   })
-  const { fetchUserInfo, getAccessToken, isAuthenticated } = useLogto()
-  const [token, setToken] = useState<string>()
-  const [user, setUser] = useState<UserInfoResponse>()
-  useEffect(() => {
-    const getUserData = async () => {
-      if (!isAuthenticated) return
-      setToken(
-        await getAccessToken(
-          import.meta.env.VITE_APP_LOGTO_API_SECOND_RESOURCE,
-        ),
-      )
-      setUser(await fetchUserInfo())
-    }
-
-    getUserData()
-  }, [fetchUserInfo, getAccessToken, isAuthenticated])
-
+  const { token, user } = useTokenAndUser(
+    import.meta.env.VITE_APP_LOGTO_API_SECOND_RESOURCE,
+  )
   return match({
     token,
     user,

apps/dicty-frontpage/src/features/EditablePages/Edit.tsx

@@ -1,13 +1,12 @@
 import { Navigate } from "react-router-dom"
-import { useState, useEffect } from "react"
 import { useContentBySlugQuery } from "dicty-graphql-schema"
-import { type UserInfoResponse, useLogto } from "@logto/react"
 import {
   EditView,
   FullPageLoadingDisplay,
   contentPageErrorMatcher,
 } from "@dictybase/ui-common"
 import { match, P } from "ts-pattern"
+import { useTokenAndUser } from "auth"
 import { NAMESPACE } from "../../common/constants/namespace"
 import { useSlug } from "../../common/hooks/useSlug"
 
@@ -17,22 +16,9 @@ const Edit = () => {
     variables: { slug: `${NAMESPACE}-${slug}` },
     errorPolicy: "all",
   })
-  const { fetchUserInfo, getAccessToken, isAuthenticated } = useLogto()
-  const [token, setToken] = useState<string>()
-  const [user, setUser] = useState<UserInfoResponse>()
-  useEffect(() => {
-    const getUserData = async () => {
-      if (!isAuthenticated) return
-      setToken(
-        await getAccessToken(
-          import.meta.env.VITE_APP_LOGTO_API_SECOND_RESOURCE,
-        ),
-      )
-      setUser(await fetchUserInfo())
-    }
-
-    getUserData()
-  }, [fetchUserInfo, getAccessToken, isAuthenticated])
+  const { token, user } = useTokenAndUser(
+    import.meta.env.VITE_APP_LOGTO_API_SECOND_RESOURCE,
+  )
 
   return match({
     token,

apps/stock-center/src/components/HeaderRow.tsx

@@ -1,21 +1,31 @@
-import Grid from "@material-ui/core/Grid"
+import { Grid, makeStyles } from "@material-ui/core"
 import { CartIcon } from "@dictybase/ui-dsc"
 import { useAtomValue } from "jotai"
 import { Outlet } from "react-router-dom"
 import { Breadcrumbs } from "./Breadcrumbs"
 import { isFullAtom, strainItemsAtom } from "../state"
+
+const useStyles = makeStyles({
+  container: {
+    marginBottom: "1rem",
+  },
+})
 /**
  * This is the cart component that displays between the Navbar and body content on every page.
  * It has a cart icon with the current number of added items next to it.
  */
-
 const HeaderRow = () => {
   const isFull = useAtomValue(isFullAtom)
   const strainItems = useAtomValue(strainItemsAtom)
+  const { container } = useStyles()
 
   return (
     <>
-      <Grid container justifyContent="space-between" alignItems="center">
+      <Grid
+        container
+        justifyContent="space-between"
+        alignItems="center"
+        className={container}>
         <Grid item>
           <Breadcrumbs />
         </Grid>

apps/stock-center/src/namespace.ts

@@ -1,3 +1,3 @@
-const NAMESPACE = "dsc"
+const NAMESPACE = "stockcenter"
 
 export { NAMESPACE }

apps/stock-center/src/pages/index/edit.tsx

@@ -0,0 +1,62 @@
+import Grid from "@material-ui/core/Grid"
+import {
+  useStyles,
+  Title,
+  Heading,
+  Slide,
+  CatalogLinks,
+  FileLinks,
+} from "@dictybase/ui-dsc"
+import { EditView, LoadingDisplay, OtherError } from "@dictybase/ui-common"
+import { useContentBySlugQuery } from "dicty-graphql-schema"
+import { match, P } from "ts-pattern"
+import { ACCESS, useTokenAndUser } from "auth"
+import { NAMESPACE } from "../../namespace"
+/**
+ * Homepage is the main homepage component for DSC.
+ */
+const EditHomepage = () => {
+  const result = useContentBySlugQuery({
+    variables: { slug: `${NAMESPACE}-intro` },
+  })
+  const { token, user } = useTokenAndUser(
+    import.meta.env.VITE_APP_LOGTO_API_SECOND_RESOURCE,
+  )
+  const classes = useStyles({})
+  return (
+    <>
+      <Title />
+      <Grid container justifyContent="space-between" spacing={3}>
+        <Heading />
+        <Grid item xs={12} className={classes.intro}>
+          {match({ ...result })
+            .with(
+              { data: { contentBySlug: P.select({ content: P.string }) } },
+              (content) => (
+                <EditView
+                  data={content}
+                  userId={user?.email as string}
+                  token={token as string}
+                />
+              ),
+            )
+            .with({ loading: true }, () => <LoadingDisplay rows={4} />)
+            .with({ error: P.not(undefined) }, () => <OtherError />)
+            .otherwise(() => (
+              <> This message should not appear. </>
+            ))}
+        </Grid>
+        <Grid container item xs={12} spacing={4} justifyContent="flex-start">
+          <Slide />
+          <CatalogLinks isAuthorized />
+          <FileLinks />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+// eslint-disable-next-line import/no-default-export
+export default EditHomepage
+export const access = ACCESS.private
+export const roles = ["content-admin"]

apps/stock-center/src/pages/index/editable.tsx

@@ -0,0 +1,54 @@
+import Grid from "@material-ui/core/Grid"
+import {
+  useStyles,
+  Title,
+  Heading,
+  Slide,
+  CatalogLinks,
+  FileLinks,
+} from "@dictybase/ui-dsc"
+import { EditableView, LoadingDisplay, OtherError } from "@dictybase/ui-common"
+import { useContentBySlugQuery } from "dicty-graphql-schema"
+import { match, P } from "ts-pattern"
+import { ACCESS } from "auth"
+import { NAMESPACE } from "../../namespace"
+/**
+ * Homepage is the main homepage component for DSC.
+ */
+const EditableHomepage = () => {
+  const result = useContentBySlugQuery({
+    variables: { slug: `${NAMESPACE}-intro` },
+  })
+
+  const classes = useStyles({})
+  return (
+    <>
+      <Title />
+      <Grid container justifyContent="space-between" spacing={3}>
+        <Heading />
+        <Grid item xs={12} className={classes.intro}>
+          {match(result)
+            .with(
+              { data: { contentBySlug: P.select({ content: P.string }) } },
+              (content) => <EditableView data={content} />,
+            )
+            .with({ loading: true }, () => <LoadingDisplay rows={4} />)
+            .with({ error: P.not(undefined) }, () => <OtherError />)
+            .otherwise(() => (
+              <> This message should not appear. </>
+            ))}
+        </Grid>
+        <Grid container item xs={12} spacing={4} justifyContent="flex-start">
+          <Slide />
+          <CatalogLinks isAuthorized />
+          <FileLinks />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+// eslint-disable-next-line import/no-default-export
+export default EditableHomepage
+export const access = ACCESS.private
+export const roles = ["content-admin"]