107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
import { createSignal, For, createEffect } from 'solid-js'
|
|
import styles from './CreateModalContent.module.scss'
|
|
import { t } from '../../utils/intl'
|
|
import InviteUser from './InviteUser'
|
|
import type { Author } from '../../graphql/types.gen'
|
|
import { hideModal } from '../../stores/ui'
|
|
import { useInbox } from '../../context/inbox'
|
|
|
|
type inviteUser = Author & { selected: boolean }
|
|
type Props = {
|
|
users: Author[]
|
|
}
|
|
|
|
const CreateModalContent = (props: Props) => {
|
|
const inviteUsers: inviteUser[] = props.users.map((user) => ({ ...user, selected: false }))
|
|
const [theme, setTheme] = createSignal<string>(' ')
|
|
const [usersId, setUsersId] = createSignal<number[]>([])
|
|
const [collectionToInvite, setCollectionToInvite] = createSignal<inviteUser[]>(inviteUsers)
|
|
let textInput: HTMLInputElement
|
|
|
|
const reset = () => {
|
|
setTheme('')
|
|
setUsersId([])
|
|
hideModal()
|
|
}
|
|
|
|
createEffect(() => {
|
|
setUsersId(() => {
|
|
return collectionToInvite()
|
|
.filter((user) => {
|
|
return user.selected === true
|
|
})
|
|
.map((user) => {
|
|
return user['id']
|
|
})
|
|
})
|
|
if (usersId().length > 1 && theme().length === 1) {
|
|
setTheme(t('group_chat'))
|
|
}
|
|
})
|
|
|
|
const handleSetTheme = () => {
|
|
setTheme(textInput.value.length > 0 && textInput.value)
|
|
}
|
|
|
|
const handleClick = (user) => {
|
|
setCollectionToInvite((userCollection) => {
|
|
return userCollection.map((clickedUser) =>
|
|
user.id === clickedUser.id ? { ...clickedUser, selected: !clickedUser.selected } : clickedUser
|
|
)
|
|
})
|
|
}
|
|
|
|
const { actions } = useInbox()
|
|
|
|
const handleCreate = async () => {
|
|
try {
|
|
const initChat = await actions.createChat(usersId(), theme())
|
|
console.debug('[initChat]', initChat)
|
|
hideModal()
|
|
await actions.loadChats()
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div class={styles.CreateModalContent}>
|
|
<h4>{t('create_chat')}</h4>
|
|
{usersId().length > 1 && (
|
|
<input
|
|
ref={textInput}
|
|
onInput={handleSetTheme}
|
|
type="text"
|
|
required={true}
|
|
class="form-control form-control-lg fs-3"
|
|
placeholder={t('discourse_theme')}
|
|
/>
|
|
)}
|
|
|
|
<div class="invite-recipients" style={{ height: '400px', overflow: 'auto' }}>
|
|
<For each={collectionToInvite()}>
|
|
{(author) => (
|
|
<InviteUser onClick={() => handleClick(author)} author={author} selected={author.selected} />
|
|
)}
|
|
</For>
|
|
</div>
|
|
|
|
<div class={styles.footer}>
|
|
<button type="button" class="btn btn-lg fs-3 btn-outline-danger" onClick={reset}>
|
|
{t('cancel')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-lg fs-3 btn-outline-primary"
|
|
onClick={handleCreate}
|
|
disabled={usersId().length === 0}
|
|
>
|
|
{usersId().length > 1 ? t('create_group') : t('create_chat')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CreateModalContent
|