firtname and lastname before username

src/components/bottomsheets/CommentsBottomSheet.js

@@ -27,6 +27,7 @@ import { icons } from '../../assets';
 import { increment, projectsRef, serverTimestamp } from '../../config/firebase';
 import useDataFromRef from '../../hooks/useDataFromRef';
 import { useUser } from '../../providers/UserDataProvider';
+import { getArtistDisplayName } from '../../utils/artistName';
 import { Palette } from '../../styles';
 import { FONT_FAMILY } from '../../styles/Fonts';
 import { size } from '../../styles/Style';
@@ -62,6 +63,10 @@ const CommentsBottomSheet = () => {
   const modalRef = useRef(null);
   const insets = useSafeAreaInsets();
   const { currentUID, currentUserData } = useUser();
+  const currentUserDisplayName = useMemo(
+    () => getArtistDisplayName(currentUserData, ''),
+    [currentUserData]
+  );
   const scrollRef = useRef(null);
 
   const [projectId, setProjectId] = useState(null);
@@ -131,7 +136,7 @@ const CommentsBottomSheet = () => {
         .collection('comments')
         .add({
           userId: currentUID,
-          userName: currentUserData?.userName || '',
+          userName: currentUserDisplayName,
           profilePicture: currentUserData?.profilePictureURL || '',
           text: value,
           createdAt: serverTimestamp(),
@@ -145,7 +150,7 @@ const CommentsBottomSheet = () => {
       const optimistic = {
         id: docRef?.id || Math.random().toString(36).slice(2),
         userId: currentUID,
-        userName: currentUserData?.userName || '',
+        userName: currentUserDisplayName,
         profilePicture: currentUserData?.profilePictureURL || '',
         text: value,
         createdAt: new Date(),