Fix functionality for the modal

ably · Sep 25, 2023 · 74429c6 · 74429c6
1 parent 94bdb38
commit 74429c6
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 59 deletions.
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@ably-labs/react-hooks": "^3.0.0-canary.1",
-    "@ably/spaces": "^0.1.0",
+    "@ably/spaces": "^0.1.2",
     "ably": "^1.2.43",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.9",

diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -13,12 +13,11 @@ const App = () => {
   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)
+      setModalIsVisible(true);
     };
 
     enter();
@@ -50,7 +49,11 @@ const App = () => {
           <AblySvg className="ml-2" />
         </a>
       </div>
-      <Modal self={self} isVisible={isModalVisible} setIsVisible={setModalIsVisible} />
+      <Modal
+        self={self}
+        isVisible={isModalVisible}
+        setIsVisible={setModalIsVisible}
+      />
     </div>
   );
 };

diff --git a/demo/src/components/Avatar.tsx b/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 (

diff --git a/demo/src/components/Modal.tsx b/demo/src/components/Modal.tsx
@@ -1,50 +1,56 @@
-import { FormEvent, useContext, useEffect, useState } from "react";
-import cn from "classnames"
+import { FormEvent, useContext, useRef } from 'react';
+import cn from 'classnames';
 
-import { SpacesContext } from ".";
-import { Member } from "../utils/types";
+import { SpacesContext } from '.';
+import { Member } from '../utils/types';
+import { getRandomColor } from '../utils';
 
 interface Props {
-    self?: Member;
-    isVisible?: boolean
-    setIsVisible?: (isVisible: boolean) => void
+  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>
+  const space = useContext(SpacesContext);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!space || !setIsVisible) return;
+
+    space.updateProfileData({ name: inputRef.current?.value, color: getRandomColor() });
+    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>
-}
+  );
+};
diff --git a/demo/src/hooks/useMembers.ts b/demo/src/hooks/useMembers.ts
@@ -49,13 +49,12 @@ 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);
     };