firtname and lastname before username

src/screens/Playbacks/components/CommentsPanel.web.js

@@ -27,6 +27,7 @@ import {
 } 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";
@@ -51,6 +52,10 @@ const CommentsPanel = ({
   panelHeight,
 }) => {
   const { currentUID, currentUserData } = useUser() || {};
+  const currentUserDisplayName = useMemo(
+    () => getArtistDisplayName(currentUserData, ""),
+    [currentUserData]
+  );
   const [text, setText] = useState("");
   const scrollRef = useRef(null);
 
@@ -114,7 +119,7 @@ const CommentsPanel = ({
         .collection("comments")
         .add({
           userId: currentUID,
-          userName: currentUserData?.userName || "",
+          userName: currentUserDisplayName,
           profilePicture: currentUserData?.profilePictureURL || "",
           text: value,
           createdAt: serverTimestamp(),
@@ -127,7 +132,7 @@ const CommentsPanel = ({
       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(),