wip: Add space name modal

demo/src/App.tsx

@@ -1,21 +1,24 @@
-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;
 
+
     const enter = async () => {
       const name = getRandomName();
       await space.enter({ name, color: getRandomColor() });
       await space.locations.set({ slide: `${0}`, element: null });
+      setModalIsVisible(true)
     };
 
     enter();
@@ -47,6 +50,7 @@ const App = () => {
           <AblySvg className="ml-2" />
         </a>
       </div>
+      <Modal self={self} isVisible={isModalVisible} setIsVisible={setModalIsVisible} />
     </div>
   );
 };

demo/src/components/Modal.tsx

@@ -0,0 +1,50 @@
+import { FormEvent, useContext, useEffect, useState } 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 [value, setValue] = useState(self?.profileData?.name);
+
+    console.log(self?.profileData?.name, value)
+
+    const handleChange = (e: FormEvent<HTMLInputElement>) => {
+        setValue(e.currentTarget.value)
+    }
+
+    const handleSubmit = (e: FormEvent) => {
+        e.preventDefault();
+
+        if (!space || !setIsVisible) return;
+
+        space.updateProfileData(currentProfile => {
+            console.log(currentProfile)
+            return {  name: value }
+        });
+
+        setIsVisible(false)
+    }
+
+    useEffect(() => {
+        setValue(self?.profileData?.name)
+    }, [self?.profileData?.name])
+
+    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 value={value} onChange={handleChange} className="border border-gray-300 rounded-md p-2 w-full" />
+            <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

@@ -49,13 +49,13 @@ export const useMembers: () => Partial<{ self?: Member; others: Member[]; member
       if (areMembers(initMembers)) {
         setMembers(initMembers);
         setOthers(membersToOthers(initMembers, initSelf));
-      }
-
-      space.subscribe('update', handler);
+      } 
     };
 
     init();
-
+    console.log('update!')
+    space.subscribe('update', handler);
+
     return () => {
       space.unsubscribe('update', handler);
     };