From 74429c65a6bd28a31e21cc4cc4fdbb38d642410a Mon Sep 17 00:00:00 2001 From: Nikita Kakuev Date: Mon, 25 Sep 2023 22:46:51 +0100 Subject: [PATCH] Fix functionality for the modal --- demo/package-lock.json | 14 +++--- demo/package.json | 2 +- demo/src/App.tsx | 9 ++-- demo/src/components/Avatar.tsx | 2 +- demo/src/components/Modal.tsx | 92 ++++++++++++++++++---------------- demo/src/hooks/useMembers.ts | 7 ++- 6 files changed, 67 insertions(+), 59 deletions(-) diff --git a/demo/package-lock.json b/demo/package-lock.json index 4d63d346..aabca4b0 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "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", @@ -76,9 +76,9 @@ } }, "node_modules/@ably/spaces": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@ably/spaces/-/spaces-0.1.0.tgz", - "integrity": "sha512-NryakCmQW1nsGtlkJzuKirC2xhfb3uaB6RheImjo9vC0cwAmwK+yYzoCBWtfUVbBKdYeOae1YE6DKC9zumnqeA==", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@ably/spaces/-/spaces-0.1.2.tgz", + "integrity": "sha512-yvvu99oqyTwB1MDfzP8l3/yfhMxHBg9JZQjEePi3tGETbRfvDH15cWSbpIMAGN52DFV5aBgH/LM8QblD2A7omA==", "dependencies": { "nanoid": "^4.0.2" }, @@ -20463,9 +20463,9 @@ } }, "@ably/spaces": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@ably/spaces/-/spaces-0.1.0.tgz", - "integrity": "sha512-NryakCmQW1nsGtlkJzuKirC2xhfb3uaB6RheImjo9vC0cwAmwK+yYzoCBWtfUVbBKdYeOae1YE6DKC9zumnqeA==", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@ably/spaces/-/spaces-0.1.2.tgz", + "integrity": "sha512-yvvu99oqyTwB1MDfzP8l3/yfhMxHBg9JZQjEePi3tGETbRfvDH15cWSbpIMAGN52DFV5aBgH/LM8QblD2A7omA==", "requires": { "nanoid": "^4.0.2" } diff --git a/demo/package.json b/demo/package.json index 95676f83..6b9d7e66 100644 --- 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 index 463334e9..9c79e7b8 100644 --- 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 = () => { - + ); }; diff --git a/demo/src/components/Avatar.tsx b/demo/src/components/Avatar.tsx index d079b157..cb4a0252 100644 --- 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 index c2275c0d..694ff78f 100644 --- 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) => { - 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
-
-

Enter your name

- - -
+ const space = useContext(SpacesContext); + const inputRef = useRef(null); + + const handleSubmit = (e: FormEvent) => { + e.preventDefault(); + + if (!space || !setIsVisible) return; + + space.updateProfileData({ name: inputRef.current?.value, color: getRandomColor() }); + setIsVisible(false); + }; + + return ( +
+
+

Enter your name

+ + +
-} \ No newline at end of file + ); +}; diff --git a/demo/src/hooks/useMembers.ts b/demo/src/hooks/useMembers.ts index dd5a220b..dce3f940 100644 --- 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); };