feat(setup): user and message sync
This commit is contained in:
parent
578c79cec3
commit
cc3424d4d8
2 changed files with 20 additions and 17 deletions
|
@ -24,8 +24,8 @@ export default defineContentScript({
|
||||||
const ui = await createShadowRootUi(ctx, {
|
const ui = await createShadowRootUi(ctx, {
|
||||||
name: __NAME__,
|
name: __NAME__,
|
||||||
position: 'inline',
|
position: 'inline',
|
||||||
// anchor: 'body',
|
anchor: 'body',
|
||||||
// append: 'first',
|
mode: __DEV__ ? 'open' : 'closed',
|
||||||
onMount: (container) => {
|
onMount: (container) => {
|
||||||
const app = createElement('<div id="app"></div>')
|
const app = createElement('<div id="app"></div>')
|
||||||
container.append(app)
|
container.append(app)
|
||||||
|
|
|
@ -40,10 +40,8 @@ const generateUserInfo = async (): Promise<UserInfo> => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const generateMessage = async (): Promise<Message> => {
|
const generateMessage = async (userInfo: UserInfo): Promise<Message> => {
|
||||||
const userAvatar = await generateRandomAvatar(MAX_AVATAR_SIZE)
|
const { name: username, avatar: userAvatar, id: userId } = userInfo
|
||||||
const username = generateRandomName()
|
|
||||||
const userId = nanoid()
|
|
||||||
return {
|
return {
|
||||||
id: nanoid(),
|
id: nanoid(),
|
||||||
body: mockTextList.shift()!,
|
body: mockTextList.shift()!,
|
||||||
|
@ -67,23 +65,28 @@ const Setup: FC = () => {
|
||||||
send(messageListDomain.command.ClearListCommand())
|
send(messageListDomain.command.ClearListCommand())
|
||||||
}
|
}
|
||||||
|
|
||||||
const refreshUserInfo = async () => setUserInfo(await generateUserInfo())
|
const refreshUserInfo = async () => {
|
||||||
const createMessage = async () => {
|
const userInfo = await generateUserInfo()
|
||||||
const message = await generateMessage()
|
setUserInfo(userInfo)
|
||||||
|
return userInfo
|
||||||
|
}
|
||||||
|
const createMessage = async (userInfo: UserInfo) => {
|
||||||
|
const message = await generateMessage(userInfo!)
|
||||||
send(messageListDomain.command.CreateItemCommand(message))
|
send(messageListDomain.command.CreateItemCommand(message))
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
send(messageListDomain.command.ClearListCommand())
|
send(messageListDomain.command.ClearListCommand())
|
||||||
const userInfoTimer = new Timer(refreshUserInfo, { delay: 2000, immediate: true })
|
const timer = new Timer(
|
||||||
const messageTimer = new Timer(createMessage, { delay: 2000, immediate: true, limit: mockTextList.length })
|
async () => {
|
||||||
|
const userInfo = await refreshUserInfo()
|
||||||
|
await createMessage(userInfo)
|
||||||
|
},
|
||||||
|
{ delay: 2000, immediate: true, limit: mockTextList.length }
|
||||||
|
)
|
||||||
|
|
||||||
userInfoTimer.start()
|
timer.start()
|
||||||
messageTimer.start()
|
return () => timer.stop()
|
||||||
return () => {
|
|
||||||
userInfoTimer.stop()
|
|
||||||
messageTimer.stop()
|
|
||||||
}
|
|
||||||
}, [])
|
}, [])
|
||||||
return (
|
return (
|
||||||
<div className="absolute inset-0 z-50 flex rounded-xl bg-black/10 shadow-2xl backdrop-blur-sm">
|
<div className="absolute inset-0 z-50 flex rounded-xl bg-black/10 shadow-2xl backdrop-blur-sm">
|
||||||
|
|
Loading…
Reference in a new issue