From 1fe63dea60889119fe9031992c30af954c5f47f0 Mon Sep 17 00:00:00 2001
From: Kevin Tun <kevin.tun@northwestern.edu>
Date: Fri, 19 Jan 2024 11:50:34 -0600
Subject: [PATCH] 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.
---
 .../src/features/EditablePages/Edit.tsx       | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 apps/dicty-frontpage/src/features/EditablePages/Edit.tsx

diff --git a/apps/dicty-frontpage/src/features/EditablePages/Edit.tsx b/apps/dicty-frontpage/src/features/EditablePages/Edit.tsx
new file mode 100644
index 0000000000..fc81fa570b
--- /dev/null
+++ b/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 }