feat(EditablePages): refactor EditView, EditableView, and ShowView co…

…mponents 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.

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>
   )
 }
 

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,17 +43,16 @@ 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} />
         }
         editable={false}
         content={{ storageKey: slug, editorState: content }}
       />
-    </Container>
+    </EditorContainer>
   )
 }
 

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>
   )
 }