Add edit name modal

demo/src/App.tsx

@@ -1,13 +1,14 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
-import { Header, SlideMenu, SpacesContext, CurrentSlide, AblySvg, slides } from './components';
+import { Header, SlideMenu, SpacesContext, CurrentSlide, AblySvg, slides, Modal } from './components';
 import { getRandomName, getRandomColor } from './utils';
 import { useMembers } from './hooks';
 import { PreviewProvider } from './components/PreviewContext.tsx';
 
 const App = () => {
   const space = useContext(SpacesContext);
   const { self, others } = useMembers();
+  const [isModalVisible, setModalIsVisible] = useState(false);
 
   useEffect(() => {
     if (!space || self?.profileData.name) return;
@@ -16,6 +17,7 @@ const App = () => {
       const name = getRandomName();
       await space.enter({ name, color: getRandomColor() });
       await space.locations.set({ slide: `${0}`, element: null });
+      setModalIsVisible(true);
     };
 
     enter();
@@ -47,6 +49,11 @@ const App = () => {
           <AblySvg className="ml-2" />
         </a>
       </div>
+      <Modal
+        self={self}
+        isVisible={isModalVisible}
+        setIsVisible={setModalIsVisible}
+      />
     </div>
   );
 };

demo/src/components/Avatar.tsx

@@ -20,7 +20,7 @@ export const Avatar = ({
 }: AvatarProps) => {
   const initials = profileData.name
     .split(' ')
-    .map((n: string) => n[0])
+    .map((n: string) => n[0].toUpperCase())
     .join('');
 
   return (

demo/src/components/Modal.tsx

@@ -0,0 +1,55 @@
+import { FormEvent, useContext, useRef } from 'react';
+import cn from 'classnames';
+
+import { SpacesContext } from '.';
+import { Member } from '../utils/types';
+
+interface Props {
+  self?: Member;
+  isVisible?: boolean;
+  setIsVisible?: (isVisible: boolean) => void;
+}
+
+export const Modal = ({ isVisible = false, setIsVisible, self }: Props) => {
+  const space = useContext(SpacesContext);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!space || !setIsVisible) return;
+
+    space.updateProfileData((profileData) => ({ ...profileData, name: inputRef.current?.value }));
+    setIsVisible(false);
+  };
+
+  return (
+    <div
+      className={cn(
+        'backdrop-blur-md bg-black/30 fixed top-0 left-0 w-full h-full flex items-center justify-center transition-all duration-300',
+        {
+          'opacity-0 pointer-events-none': !isVisible,
+          'opacity-100': isVisible,
+        },
+      )}
+    >
+      <form
+        onSubmit={handleSubmit}
+        className="bg-white p-8 shadow-lg rounded-[20px]"
+      >
+        <h3 className="font-semibold text-xl text-center mb-8">Enter your name</h3>
+        <input
+          ref={inputRef}
+          className="border border-gray-300 rounded-md p-2 w-full"
+          defaultValue={self?.profileData?.name}
+        />
+        <button
+          type="submit"
+          className="bg-ably-black text-white rounded-md p-2 w-full mt-4"
+        >
+          Set name
+        </button>
+      </form>
+    </div>
+  );
+};

demo/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './CurrentSlide';
 export * from './Cursors';
 export * from './Header';
 export * from './Image';
+export * from './Modal';
 export * from './Paragraph';
 export * from './SlideMenu';
 export * from './SlidePreview';

demo/src/hooks/useMembers.ts

@@ -50,7 +50,6 @@ export const useMembers: () => { self?: Member; others: Member[]; members: Membe
         setMembers(initMembers);
         setOthers(membersToOthers(initMembers, initSelf));
       }
-
       space.subscribe('update', handler);
     };