From 80a012a3c7e60f7d64ec503b5a6a40eed006085d Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Mon, 10 Oct 2022 16:26:09 -0700 Subject: [PATCH] Add current user object that holds user session values instead of standalone getters. Closes #2050 --- web/.vscode/settings.json | 3 +- .../common/UserDropdown/UserDropdown.tsx | 11 +++- web/components/modals/AuthModal/AuthModal.tsx | 13 +++-- .../NameChangeModal/NameChangeModal.tsx | 23 ++++----- web/components/stores/ClientConfigStore.tsx | 50 ++++++------------- .../connected-client-info-handler.ts | 16 +++--- web/components/ui/Content/Content.tsx | 16 +++--- web/components/ui/Sidebar/Sidebar.tsx | 18 +++---- web/interfaces/current-user.ts | 6 +++ web/pages/embed/chat/readonly/index.tsx | 15 +++--- web/pages/embed/chat/readwrite/index.tsx | 18 ++++--- web/stories/ReadwriteChat.stories.tsx | 12 +++-- 12 files changed, 103 insertions(+), 98 deletions(-) create mode 100644 web/interfaces/current-user.ts diff --git a/web/.vscode/settings.json b/web/.vscode/settings.json index 02233c300..da1f97297 100644 --- a/web/.vscode/settings.json +++ b/web/.vscode/settings.json @@ -9,5 +9,6 @@ "linkify", "paypal", "toggleswitch" - ] + ], + "deepscan.enable": true } diff --git a/web/components/common/UserDropdown/UserDropdown.tsx b/web/components/common/UserDropdown/UserDropdown.tsx index 0e2f93561..62357fbdf 100644 --- a/web/components/common/UserDropdown/UserDropdown.tsx +++ b/web/components/common/UserDropdown/UserDropdown.tsx @@ -12,7 +12,7 @@ import { useHotkeys } from 'react-hotkeys-hook'; import dynamic from 'next/dynamic'; import { chatVisibleToggleAtom, - chatDisplayNameAtom, + currentUserAtom, appStateAtom, } from '../../stores/ClientConfigStore'; import styles from './UserDropdown.module.scss'; @@ -34,12 +34,19 @@ export type UserDropdownProps = { }; export const UserDropdown: FC = ({ username: defaultUsername = undefined }) => { - const username = defaultUsername || useRecoilValue(chatDisplayNameAtom); const [showNameChangeModal, setShowNameChangeModal] = useState(false); const [showAuthModal, setShowAuthModal] = useState(false); const [chatToggleVisible, setChatToggleVisible] = useRecoilState(chatVisibleToggleAtom); const appState = useRecoilValue(appStateAtom); + const currentUser = useRecoilValue(currentUserAtom); + if (!currentUser) { + return null; + } + + const { displayName } = currentUser; + const username = defaultUsername || displayName; + const toggleChatVisibility = () => { setChatToggleVisible(!chatToggleVisible); }; diff --git a/web/components/modals/AuthModal/AuthModal.tsx b/web/components/modals/AuthModal/AuthModal.tsx index cc277e921..44d1a7f9d 100644 --- a/web/components/modals/AuthModal/AuthModal.tsx +++ b/web/components/modals/AuthModal/AuthModal.tsx @@ -9,7 +9,7 @@ import IndieAuthIcon from '../../../assets/images/indieauth.png'; import styles from './AuthModal.module.scss'; import { - chatDisplayNameAtom, + currentUserAtom, chatAuthenticatedAtom, accessTokenAtom, } from '../../stores/ClientConfigStore'; @@ -17,10 +17,15 @@ import { const { TabPane } = Tabs; export const AuthModal: FC = () => { - const chatDisplayName = useRecoilValue(chatDisplayNameAtom); + const currentUser = useRecoilValue(currentUserAtom); + if (!currentUser) { + return null; + } + const authenticated = useRecoilValue(chatAuthenticatedAtom); const accessToken = useRecoilValue(accessTokenAtom); const federationEnabled = true; + const { displayName } = currentUser; return (
@@ -41,7 +46,7 @@ export const AuthModal: FC = () => { > @@ -56,7 +61,7 @@ export const AuthModal: FC = () => { > diff --git a/web/components/modals/NameChangeModal/NameChangeModal.tsx b/web/components/modals/NameChangeModal/NameChangeModal.tsx index 5cc363c10..1f0443e55 100644 --- a/web/components/modals/NameChangeModal/NameChangeModal.tsx +++ b/web/components/modals/NameChangeModal/NameChangeModal.tsx @@ -3,11 +3,7 @@ import { useRecoilValue } from 'recoil'; import { Input, Button, Select } from 'antd'; import { MessageType } from '../../../interfaces/socket-events'; import WebsocketService from '../../../services/websocket-service'; -import { - websocketServiceAtom, - chatDisplayNameAtom, - chatDisplayColorAtom, -} from '../../stores/ClientConfigStore'; +import { websocketServiceAtom, currentUserAtom } from '../../stores/ClientConfigStore'; const { Option } = Select; @@ -26,10 +22,14 @@ const UserColor: FC = ({ color }) => { }; export const NameChangeModal: FC = () => { + const currentUser = useRecoilValue(currentUserAtom); + if (!currentUser) { + return null; + } + + const { displayName, displayColor } = currentUser; const websocketService = useRecoilValue(websocketServiceAtom); - const chatDisplayName = useRecoilValue(chatDisplayNameAtom); - const chatDisplayColor = useRecoilValue(chatDisplayColorAtom) || 0; - const [newName, setNewName] = useState(chatDisplayName); + const [newName, setNewName] = useState(displayName); const handleNameChange = () => { const nameChange = { @@ -39,8 +39,7 @@ export const NameChangeModal: FC = () => { websocketService.send(nameChange); }; - const saveEnabled = - newName !== chatDisplayName && newName !== '' && websocketService?.isConnected(); + const saveEnabled = newName !== displayName && newName !== '' && websocketService?.isConnected(); const handleColorChange = (color: string) => { const colorChange = { @@ -63,7 +62,7 @@ export const NameChangeModal: FC = () => { placeholder="Your chat display name" maxLength={30} showCount - defaultValue={chatDisplayName} + defaultValue={displayName} />