From 3c737312aa246e2e17ce68f2ce8ce0a4aa5eb073 Mon Sep 17 00:00:00 2001
From: Kevin Tun <kevin.tun@northwestern.edu>
Date: Thu, 9 Jan 2025 09:21:25 -0600
Subject: [PATCH] feat(EditablePages): add functionality to truncate email

The changes introduce a new utility function `truncateEmail` to truncate
email addresses for privacy reasons. The function is used in both
EditView and EditableView components to display a truncated version of
the user's email instead of their full name.
---
 .../src/features/EditablePages/EditView.tsx          | 12 +++++++-----
 .../src/features/EditablePages/EditableView.tsx      | 11 ++++++-----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/dicty-frontpage/src/features/EditablePages/EditView.tsx b/apps/dicty-frontpage/src/features/EditablePages/EditView.tsx
index 28f3c0ee86..8c09a61fd8 100644
--- a/apps/dicty-frontpage/src/features/EditablePages/EditView.tsx
+++ b/apps/dicty-frontpage/src/features/EditablePages/EditView.tsx
@@ -1,11 +1,13 @@
 import { useNavigate } from "react-router-dom"
 import { makeStyles, Container, Button } from "@material-ui/core"
+import { replace as Sreplace } from "fp-ts/string"
 import PersonIcon from "@material-ui/icons/Person"
 import { ActionBar } from "@dictybase/ui-common"
 import { Editor } from "@dictybase/editor"
 import { type ContentBySlugQuery } from "dicty-graphql-schema"
 import { UpdateButton } from "../../common/components/UpdateButton"
 import { timeSince } from "../../common/utils/timeSince"
+import { truncateEmail } from "../../common/utils/truncateEmail"
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -15,14 +17,14 @@ const useStyles = makeStyles((theme) => ({
 }))
 
 type EditActionBarProperties = {
-  fullName: string
+  editedBy: string
   updatedAt: string
   contentId: string
 }
 
 const EditActionBar = ({
   contentId,
-  fullName,
+  editedBy,
   updatedAt,
 }: EditActionBarProperties) => {
   const navigate = useNavigate()
@@ -34,7 +36,7 @@ const EditActionBar = ({
       descriptionElement={
         <>
           <strong>
-            <PersonIcon /> {fullName}
+            <PersonIcon /> {editedBy}
           </strong>{" "}
           edited {timeSince(updatedAt)} ago
         </>
@@ -52,7 +54,7 @@ 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}`
+  const editedBy = truncateEmail(updated_by.email)
   return (
     <Container className={classes.container}>
       <Editor
@@ -62,7 +64,7 @@ const EditView = ({ data }: EditViewProperties) => {
           <EditActionBar
             contentId={id}
             updatedAt={updated_at}
-            fullName={fullName}
+            editedBy={editedBy}
           />
         }
       />
diff --git a/apps/dicty-frontpage/src/features/EditablePages/EditableView.tsx b/apps/dicty-frontpage/src/features/EditablePages/EditableView.tsx
index 31991159a4..aaaf460c31 100644
--- a/apps/dicty-frontpage/src/features/EditablePages/EditableView.tsx
+++ b/apps/dicty-frontpage/src/features/EditablePages/EditableView.tsx
@@ -5,6 +5,7 @@ import { type ContentBySlugQuery } from "dicty-graphql-schema"
 import { Editor } from "@dictybase/editor"
 import { ActionBar } from "@dictybase/ui-common"
 import { timeSince } from "../../common/utils/timeSince"
+import { truncateEmail } from "../../common/utils/truncateEmail"
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -14,12 +15,12 @@ const useStyles = makeStyles((theme) => ({
 }))
 
 type EditableActionBarProperties = {
-  fullName: string
+  editedBy: string
   updatedAt: string
 }
 
 const EditableActionBar = ({
-  fullName,
+  editedBy,
   updatedAt,
 }: EditableActionBarProperties) => {
   const navigate = useNavigate()
@@ -28,7 +29,7 @@ const EditableActionBar = ({
       descriptionElement={
         <>
           <strong>
-            <PersonIcon /> {fullName}
+            <PersonIcon /> {editedBy}
           </strong>{" "}
           edited {timeSince(updatedAt)} ago
         </>
@@ -49,13 +50,13 @@ 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)
   const classes = useStyles()
   return (
     <Container className={classes.container}>
       <Editor
         toolbar={
-          <EditableActionBar fullName={fullName} updatedAt={updated_at} />
+          <EditableActionBar editedBy={editedBy} updatedAt={updated_at} />
         }
         editable={false}
         content={{ storageKey: slug, editorState: content }}