Fix change name modal story not rendering. Closes #2255

web/components/modals/NameChangeModal/NameChangeModal.stories.tsx

@@ -1,20 +1,41 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { RecoilRoot } from 'recoil';
+import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { NameChangeModal } from './NameChangeModal';
+import { CurrentUser } from '../../../interfaces/current-user';
+import { currentUserAtom } from '../../stores/ClientConfigStore';
 
 export default {
-  title: 'owncast/Modals/Name change',
+  title: 'owncast/Modals/Name Change',
   component: NameChangeModal,
   parameters: {},
 } as ComponentMeta<typeof NameChangeModal>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Example = () => {
-const Template: ComponentStory<typeof NameChangeModal> = args => (
+  const setCurrentUser = useSetRecoilState<CurrentUser>(currentUserAtom);
+
+  useEffect(
+    () =>
+      setCurrentUser({
+        id: '1',
+        displayName: 'Test User',
+        displayColor: 3,
+        isModerator: false,
+      }),
+    [],
+  );
+
+  return (
+    <div>
+      <NameChangeModal />
+    </div>
+  );
+};
+
+const Template: ComponentStory<typeof NameChangeModal> = () => (
   <RecoilRoot>
-    <NameChangeModal />
+    <Example />
   </RecoilRoot>
 );
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Basic = Template.bind({});

web/components/modals/NameChangeModal/NameChangeModal.tsx

@@ -23,13 +23,14 @@ const UserColor: FC<UserColorProps> = ({ color }) => {
 
 export const NameChangeModal: FC = () => {
   const currentUser = useRecoilValue(currentUserAtom);
+  const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
+  const [newName, setNewName] = useState<string>(currentUser?.displayName);
+
   if (!currentUser) {
     return null;
   }
 
   const { displayName, displayColor } = currentUser;
-  const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
-  const [newName, setNewName] = useState<any>(displayName);
 
   const handleNameChange = () => {
     const nameChange = {