feat(EditablePages): add Edit component to handle editing of pages

The Edit component is added to handle the editing of pages in the EditablePages feature. It imports necessary dependencies such as Navigate from react-router-dom, useContentBySlugQuery from dicty-graphql-schema, and other utility functions. The component makes use of the useSlug hook to get the slug parameter from the URL. It then uses the useContentBySlugQuery to fetch the content data based on the slug. The component handles different scenarios such as loading state, successful data retrieval, error handling, and a fallback case.

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

@@ -0,0 +1,33 @@
+import { Navigate } from "react-router-dom"
+import { useContentBySlugQuery } from "dicty-graphql-schema"
+import { pipe } from "fp-ts/function"
+import { match, P } from "ts-pattern"
+import { GraphQLErrorPage } from "../../common/components/errors/GraphQLErrorPage"
+import { EditView } from "./EditView"
+import { Loader } from "../../common/components/Loader"
+import { useSlug } from "../../common/utils/useSlug"
+import { hasNotFoundError } from "../../common/utils/hasNotFoundError"
+
+const Edit = () => {
+  const slug = useSlug()
+  const { loading, error, data } = useContentBySlugQuery({
+    variables: { slug },
+  })
+
+  return match({ loading, error, data })
+    .with({ loading: true }, () => <Loader />)
+    .with(
+      { data: { contentBySlug: P.select({ content: P.string }) } },
+      (content) => <EditView data={content} />,
+    )
+    .when(
+      ({ error: error_ }) => pipe(error_, hasNotFoundError),
+      () => <Navigate to="addpage" replace />,
+    )
+    .with({ error: P.select(P.not(undefined)) }, (error_) => (
+      <GraphQLErrorPage error={error_} />
+    ))
+    .otherwise(() => <> This message should not appear </>)
+}
+
+export { Edit }