overleaf/services/web/frontend/stories/chat.stories.js

70 lines
1.4 KiB
JavaScript
Raw Normal View History

import { useEffect } from 'react'
import ChatPane from '../js/features/chat/components/chat-pane'
import useFetchMock from './hooks/use-fetch-mock'
import { generateMessages } from './fixtures/chat-messages'
import { ScopeDecorator } from './decorators/scope'
export const Conversation = args => {
useFetchMock(fetchMock => {
fetchMock.get(/messages/, generateMessages(35)).post(/messages/, {})
})
return <ChatPane {...args} />
}
export const NoMessages = args => {
useFetchMock(fetchMock => {
fetchMock.get(/messages/, [])
})
return <ChatPane {...args} />
}
export const Loading = args => {
useFetchMock(fetchMock => {
fetchMock.get(/messages/, generateMessages(6), {
delay: 1000 * 10,
})
})
return <ChatPane {...args} />
}
export const LoadingError = args => {
useFetchMock(fetchMock => {
fetchMock.get(/messages/, 500)
})
return <ChatPane {...args} />
}
export default {
title: 'Editor / Chat',
component: ChatPane,
argTypes: {
resetUnreadMessages: { action: 'resetUnreadMessages' },
},
args: {
resetUnreadMessages: () => {},
},
decorators: [
ScopeDecorator,
Story => {
useEffect(() => {
window.MathJax = {
Hub: {
Queue: () => {},
config: { tex2jax: { inlineMath: [['$', '$']] } },
},
}
return () => {
delete window.MathJax
}
}, [])
return <Story />
},
],
}