feat(EditView/EditableView): refactor fullName to editedBy and use tr…

…uncateEmail function The fullName variable has been refactored to editedBy for better clarity and consistency. The truncateEmail function is now used to display a truncated version of the user's email address.
dictyBase · Jan 9, 2025 · 3dad37e · 3dad37e
1 parent 3c73731
commit 3dad37e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/apps/stock-center/src/components/EditView.tsx b/apps/stock-center/src/components/EditView.tsx
@@ -6,16 +6,17 @@ import { Editor } from "@dictybase/editor"
 import { type ContentBySlugQuery } from "dicty-graphql-schema"
 import { UpdateButton } from "./UpdateButton"
 import { timeSince } from "../timeSince"
+import { truncateEmail } from "../truncateEmail"
 
 type EditActionBarProperties = {
-  fullName: string
+  editedBy: string
   updatedAt: string
   contentId: string
 }
 
 const EditActionBar = ({
   contentId,
-  fullName,
+  editedBy,
   updatedAt,
 }: EditActionBarProperties) => {
   const navigate = useNavigate()
@@ -27,7 +28,7 @@ const EditActionBar = ({
       descriptionElement={
         <>
           <strong>
-            <PersonIcon /> {fullName}
+            <PersonIcon /> {editedBy}
           </strong>{" "}
           edited {timeSince(updatedAt)} ago
         </>
@@ -44,7 +45,7 @@ type EditViewProperties = {
 
 const EditView = ({ data }: EditViewProperties) => {
   const { id, updated_at, updated_by, content } = data
-  const fullName = `${updated_by.first_name} ${updated_by.last_name}`
+  const editedBy = truncateEmail(updated_by.email)
   return (
     <Editor
       content={{ storageKey: undefined, editorState: content }}
@@ -53,7 +54,7 @@ const EditView = ({ data }: EditViewProperties) => {
         <EditActionBar
           contentId={id}
           updatedAt={updated_at}
-          fullName={fullName}
+          editedBy={editedBy}
         />
       }
     />

diff --git a/apps/stock-center/src/components/EditableView.tsx b/apps/stock-center/src/components/EditableView.tsx
@@ -5,14 +5,15 @@ import { type ContentBySlugQuery } from "dicty-graphql-schema"
 import { Editor } from "@dictybase/editor"
 import { ActionBar } from "@dictybase/ui-common"
 import { timeSince } from "../timeSince"
+import { truncateEmail } from "../truncateEmail"
 
 type EditableActionBarProperties = {
-  fullName: string
+  editedBy: string
   updatedAt: string
 }
 
 const EditableActionBar = ({
-  fullName,
+  editedBy,
   updatedAt,
 }: EditableActionBarProperties) => {
   const navigate = useNavigate()
@@ -21,7 +22,7 @@ const EditableActionBar = ({
       descriptionElement={
         <>
           <strong>
-            <PersonIcon /> {fullName}
+            <PersonIcon /> {editedBy}
           </strong>{" "}
           edited {timeSince(updatedAt)} ago
         </>
@@ -42,11 +43,10 @@ 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 editedBy = truncateEmail(updated_by.email)
   return (
     <Editor
-      toolbar={<EditableActionBar fullName={fullName} updatedAt={updated_at} />}
+      toolbar={<EditableActionBar editedBy={editedBy} updatedAt={updated_at} />}
       editable={false}
       content={{ storageKey: slug, editorState: content }}
     />