From 97e8198a01033a1efae7d7547d6d57bb428c557c Mon Sep 17 00:00:00 2001
From: Kevin Tun <kevin.tun@northwestern.edu>
Date: Wed, 8 Jan 2025 14:35:01 -0600
Subject: [PATCH] feat(EditablePages): refactor EditView, EditableView, and
 ShowView components to use EditorContainer component

The EditView, EditableView, and ShowView components have been refactored to use the EditorContainer component from the @dictybase/editor library instead of the Container component from @material-ui/core. This change improves consistency and maintainability across the components by using a dedicated container component for the editor.
---
 .../src/features/EditablePages/EditView.tsx      | 16 ++++------------
 .../src/features/EditablePages/EditableView.tsx  | 16 ++++------------
 .../src/features/EditablePages/ShowView.tsx      | 15 +++------------
 3 files changed, 11 insertions(+), 36 deletions(-)

diff --git a/apps/dicty-frontpage/src/features/EditablePages/EditView.tsx b/apps/dicty-frontpage/src/features/EditablePages/EditView.tsx
index 28f3c0ee86..bca6e03e39 100644
--- a/apps/dicty-frontpage/src/features/EditablePages/EditView.tsx
+++ b/apps/dicty-frontpage/src/features/EditablePages/EditView.tsx
@@ -1,19 +1,12 @@
 import { useNavigate } from "react-router-dom"
-import { makeStyles, Container, Button } from "@material-ui/core"
+import { Button } from "@material-ui/core"
 import PersonIcon from "@material-ui/icons/Person"
 import { ActionBar } from "@dictybase/ui-common"
-import { Editor } from "@dictybase/editor"
+import { Editor, EditorContainer } from "@dictybase/editor"
 import { type ContentBySlugQuery } from "dicty-graphql-schema"
 import { UpdateButton } from "../../common/components/UpdateButton"
 import { timeSince } from "../../common/utils/timeSince"
 
-const useStyles = makeStyles((theme) => ({
-  container: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(4),
-  },
-}))
-
 type EditActionBarProperties = {
   fullName: string
   updatedAt: string
@@ -50,11 +43,10 @@ type EditViewProperties = {
 }
 
 const EditView = ({ data }: EditViewProperties) => {
-  const classes = useStyles()
   const { id, updated_at, updated_by, content } = data
   const fullName = `${updated_by.first_name} ${updated_by.last_name}`
   return (
-    <Container className={classes.container}>
+    <EditorContainer>
       <Editor
         content={{ storageKey: undefined, editorState: content }}
         editable
@@ -66,7 +58,7 @@ const EditView = ({ data }: EditViewProperties) => {
           />
         }
       />
-    </Container>
+    </EditorContainer>
   )
 }
 
diff --git a/apps/dicty-frontpage/src/features/EditablePages/EditableView.tsx b/apps/dicty-frontpage/src/features/EditablePages/EditableView.tsx
index 31991159a4..c8b2ea5fcb 100644
--- a/apps/dicty-frontpage/src/features/EditablePages/EditableView.tsx
+++ b/apps/dicty-frontpage/src/features/EditablePages/EditableView.tsx
@@ -1,18 +1,11 @@
-import { makeStyles, Container, Button } from "@material-ui/core"
+import { Button } from "@material-ui/core"
 import PersonIcon from "@material-ui/icons/Person"
 import { useNavigate } from "react-router-dom"
 import { type ContentBySlugQuery } from "dicty-graphql-schema"
-import { Editor } from "@dictybase/editor"
+import { Editor, EditorContainer } from "@dictybase/editor"
 import { ActionBar } from "@dictybase/ui-common"
 import { timeSince } from "../../common/utils/timeSince"
 
-const useStyles = makeStyles((theme) => ({
-  container: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(4),
-  },
-}))
-
 type EditableActionBarProperties = {
   fullName: string
   updatedAt: string
@@ -50,9 +43,8 @@ type EditableViewProperties = {
 const EditableView = ({ data }: EditableViewProperties) => {
   const { updated_at, updated_by, content, slug } = data
   const fullName = `${updated_by.first_name} ${updated_by.last_name}`
-  const classes = useStyles()
   return (
-    <Container className={classes.container}>
+    <EditorContainer>
       <Editor
         toolbar={
           <EditableActionBar fullName={fullName} updatedAt={updated_at} />
@@ -60,7 +52,7 @@ const EditableView = ({ data }: EditableViewProperties) => {
         editable={false}
         content={{ storageKey: slug, editorState: content }}
       />
-    </Container>
+    </EditorContainer>
   )
 }
 
diff --git a/apps/dicty-frontpage/src/features/EditablePages/ShowView.tsx b/apps/dicty-frontpage/src/features/EditablePages/ShowView.tsx
index 8ce5f86eb0..4a40b98a9b 100644
--- a/apps/dicty-frontpage/src/features/EditablePages/ShowView.tsx
+++ b/apps/dicty-frontpage/src/features/EditablePages/ShowView.tsx
@@ -1,13 +1,5 @@
-import { makeStyles, Container } from "@material-ui/core"
 import { type ContentBySlugQuery } from "dicty-graphql-schema"
-import { Editor } from "@dictybase/editor"
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(4),
-  },
-}))
+import { Editor, EditorContainer } from "@dictybase/editor"
 
 type ShowViewProperties = {
   data: NonNullable<ContentBySlugQuery["contentBySlug"]>
@@ -20,14 +12,13 @@ type ShowViewProperties = {
  */
 const ShowView = ({ data }: ShowViewProperties) => {
   const { slug, content } = data
-  const classes = useStyles()
   return (
-    <Container className={classes.container}>
+    <EditorContainer>
       <Editor
         editable={false}
         content={{ storageKey: slug, editorState: content }}
       />
-    </Container>
+    </EditorContainer>
   )
 }