Fix auth modal story not rendering. Closes #2254

web/components/modals/AuthModal/AuthModal.stories.tsx

@@ -1,13 +1,30 @@
-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 { AuthModal } from './AuthModal';
+import { currentUserAtom } from '../../stores/ClientConfigStore';
+import { CurrentUser } from '../../../interfaces/current-user';
 
-const Example = () => (
+const Example = () => {
-  <div>
+  const setCurrentUser = useSetRecoilState<CurrentUser>(currentUserAtom);
-    <AuthModal />
+
-  </div>
+  useEffect(
-);
+    () =>
+      setCurrentUser({
+        id: '1',
+        displayName: 'Test User',
+        displayColor: 3,
+        isModerator: false,
+      }),
+    [],
+  );
+
+  return (
+    <div>
+      <AuthModal />
+    </div>
+  );
+};
 
 export default {
   title: 'owncast/Modals/Auth',
@@ -15,8 +32,7 @@ export default {
   parameters: {},
 } as ComponentMeta<typeof AuthModal>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof AuthModal> = () => (
-const Template: ComponentStory<typeof AuthModal> = args => (
   <RecoilRoot>
     <Example />
   </RecoilRoot>

web/components/modals/AuthModal/AuthModal.tsx

@@ -15,22 +15,23 @@ import {
 } from '../../stores/ClientConfigStore';
 
 export const AuthModal: FC = () => {
+  const authenticated = useRecoilValue<boolean>(chatAuthenticatedAtom);
+  const accessToken = useRecoilValue<string>(accessTokenAtom);
   const currentUser = useRecoilValue(currentUserAtom);
   if (!currentUser) {
     return null;
   }
-
-  const authenticated = useRecoilValue<boolean>(chatAuthenticatedAtom);
-  const accessToken = useRecoilValue<string>(accessTokenAtom);
-  const federationEnabled = true;
   const { displayName } = currentUser;
 
+  const federationEnabled = true;
+
   const indieAuthTabTitle = (
     <span className={styles.tabContent}>
       <img className={styles.icon} src={IndieAuthIcon.src} alt="IndieAuth" />
       IndieAuth
     </span>
   );
+
   const indieAuthTab = (
     <IndieAuthModal
       authenticated={authenticated}
@@ -45,6 +46,7 @@ export const AuthModal: FC = () => {
       FediAuth
     </span>
   );
+
   const fediAuthTab = (
     <FediAuthModal
       authenticated={authenticated}