feat(setup): user and message sync

This commit is contained in:
molvqingtai 2024-09-22 05:16:10 +08:00
parent 578c79cec3
commit cc3424d4d8
2 changed files with 20 additions and 17 deletions

View file

@ -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)

View file

@ -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">