You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.8 KiB
97 lines
2.8 KiB
import React from 'react'; |
|
import { ComponentStory, ComponentMeta } from '@storybook/react'; |
|
import { RecoilRoot } from 'recoil'; |
|
import ChatModerationActionMenu from '../components/chat/ChatModerationActionMenu/ChatModerationActionMenu'; |
|
|
|
const mocks = { |
|
mocks: [ |
|
{ |
|
// The "matcher" determines if this |
|
// mock should respond to the current |
|
// call to fetch(). |
|
matcher: { |
|
name: 'response', |
|
url: 'glob:/api/moderation/chat/user/*', |
|
}, |
|
// If the "matcher" matches the current |
|
// fetch() call, the fetch response is |
|
// built using this "response". |
|
response: { |
|
status: 200, |
|
body: { |
|
user: { |
|
id: 'hjFPU967R', |
|
displayName: 'focused-snyder', |
|
displayColor: 2, |
|
createdAt: '2022-07-12T13:08:31.406505322-07:00', |
|
previousNames: ['focused-snyder'], |
|
scopes: ['MODERATOR'], |
|
isBot: false, |
|
authenticated: false, |
|
}, |
|
connectedClients: [ |
|
{ |
|
messageCount: 3, |
|
userAgent: |
|
'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36', |
|
connectedAt: '2022-07-20T16:45:07.796685618-07:00', |
|
geo: 'N/A', |
|
}, |
|
], |
|
messages: [ |
|
{ |
|
id: 'bQp8UJR4R', |
|
timestamp: '2022-07-20T16:53:41.938083228-07:00', |
|
user: null, |
|
body: 'test message 3', |
|
}, |
|
{ |
|
id: 'ubK88Jg4R', |
|
timestamp: '2022-07-20T16:53:39.675531279-07:00', |
|
user: null, |
|
body: 'test message 2', |
|
}, |
|
{ |
|
id: '20v8UJRVR', |
|
timestamp: '2022-07-20T16:53:37.551084121-07:00', |
|
user: null, |
|
body: 'test message 1', |
|
}, |
|
], |
|
}, |
|
}, |
|
}, |
|
], |
|
}; |
|
|
|
export default { |
|
title: 'owncast/Chat/Moderation menu', |
|
component: ChatModerationActionMenu, |
|
parameters: { |
|
fetchMock: mocks, |
|
docs: { |
|
description: { |
|
component: `This should be a popup that is activated from a user's chat message. It should have actions to: |
|
- Remove single message |
|
- Ban user completely |
|
- Open modal to see user details |
|
`, |
|
}, |
|
}, |
|
}, |
|
} as ComponentMeta<typeof ChatModerationActionMenu>; |
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars |
|
const Template: ComponentStory<typeof ChatModerationActionMenu> = args => ( |
|
<RecoilRoot> |
|
<ChatModerationActionMenu |
|
accessToken="abc123" |
|
messageID="xxx" |
|
userDisplayName="Fake-User" |
|
userID="abc123" |
|
/> |
|
</RecoilRoot> |
|
); |
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars |
|
export const Basic = Template.bind({});
|
|
|