Refactoring after backend update

This commit is contained in:
ilya-bkv 2022-12-03 17:34:15 +03:00
parent bbabb69555
commit c124cfc971
11 changed files with 68 additions and 56 deletions

View File

@ -1,5 +1,6 @@
overwrite: true overwrite: true
schema: 'http://localhost:8080' #schema: 'http://localhost:8080'
schema: 'https://v2.discours.io'
generates: generates:
src/graphql/introspec.gen.ts: src/graphql/introspec.gen.ts:
plugins: plugins:

View File

@ -14,28 +14,27 @@ type Props = {
const CreateModalContent = (props: Props) => { const CreateModalContent = (props: Props) => {
const inviteUsers: inviteUser[] = props.users.map((user) => ({ ...user, selected: false })) const inviteUsers: inviteUser[] = props.users.map((user) => ({ ...user, selected: false }))
const [theme, setTheme] = createSignal<string>(' ') const [theme, setTheme] = createSignal<string>(' ')
const [slugs, setSlugs] = createSignal<string[]>([]) const [usersId, setUsersId] = createSignal<number[]>([])
const [collectionToInvite, setCollectionToInvite] = createSignal<inviteUser[]>(inviteUsers) const [collectionToInvite, setCollectionToInvite] = createSignal<inviteUser[]>(inviteUsers)
let textInput: HTMLInputElement let textInput: HTMLInputElement
const reset = () => { const reset = () => {
setTheme('') setTheme('')
setSlugs([]) setUsersId([])
hideModal() hideModal()
} }
createEffect(() => { createEffect(() => {
setSlugs(() => { setUsersId(() => {
return collectionToInvite() return collectionToInvite()
.filter((user) => { .filter((user) => {
return user.selected === true return user.selected === true
}) })
.map((user) => { .map((user) => {
return user['slug'] return user['id']
}) })
}) })
if (usersId().length > 1 && theme().length === 1) {
if (slugs().length > 1 && theme().length === 1) {
setTheme(t('group_chat')) setTheme(t('group_chat'))
} }
}) })
@ -47,7 +46,7 @@ const CreateModalContent = (props: Props) => {
const handleClick = (user) => { const handleClick = (user) => {
setCollectionToInvite((userCollection) => { setCollectionToInvite((userCollection) => {
return userCollection.map((clickedUser) => return userCollection.map((clickedUser) =>
user.slug === clickedUser.slug ? { ...clickedUser, selected: !clickedUser.selected } : clickedUser user.id === clickedUser.id ? { ...clickedUser, selected: !clickedUser.selected } : clickedUser
) )
}) })
} }
@ -56,7 +55,7 @@ const CreateModalContent = (props: Props) => {
const handleCreate = async () => { const handleCreate = async () => {
try { try {
const initChat = await actions.createChat(slugs(), theme()) const initChat = await actions.createChat(usersId(), theme())
console.debug('[initChat]', initChat) console.debug('[initChat]', initChat)
hideModal() hideModal()
await actions.loadChats() await actions.loadChats()
@ -68,7 +67,7 @@ const CreateModalContent = (props: Props) => {
return ( return (
<div class={styles.CreateModalContent}> <div class={styles.CreateModalContent}>
<h4>{t('create_chat')}</h4> <h4>{t('create_chat')}</h4>
{slugs().length > 1 && ( {usersId().length > 1 && (
<input <input
ref={textInput} ref={textInput}
onInput={handleSetTheme} onInput={handleSetTheme}
@ -95,9 +94,9 @@ const CreateModalContent = (props: Props) => {
type="button" type="button"
class="btn btn-lg fs-3 btn-outline-primary" class="btn btn-lg fs-3 btn-outline-primary"
onClick={handleCreate} onClick={handleCreate}
disabled={slugs().length === 0} disabled={usersId().length === 0}
> >
{slugs().length > 1 ? t('create_group') : t('create_chat')} {usersId().length > 1 ? t('create_group') : t('create_chat')}
</button> </button>
</div> </div>
</div> </div>

View File

@ -10,7 +10,7 @@ type DialogProps = {
message?: string message?: string
counter?: number counter?: number
title?: string title?: string
ownSlug: string ownId: number
members: ChatMember[] members: ChatMember[]
onClick?: () => void onClick?: () => void
isChatHeader?: boolean isChatHeader?: boolean
@ -18,13 +18,12 @@ type DialogProps = {
const DialogCard = (props: DialogProps) => { const DialogCard = (props: DialogProps) => {
const companions = createMemo( const companions = createMemo(
() => props.members && props.members.filter((member) => member.slug !== props.ownSlug) () => props.members && props.members.filter((member) => member.id !== props.ownId)
)
const names = createMemo(() =>
companions()
.map((companion) => companion.name)
.join(', ')
) )
const names = companions()
?.map((companion) => companion.name)
.join(', ')
return ( return (
<Show when={props.members}> <Show when={props.members}>
<div class={clsx(styles.DialogCard, { [styles.header]: props.isChatHeader })} onClick={props.onClick}> <div class={clsx(styles.DialogCard, { [styles.header]: props.isChatHeader })} onClick={props.onClick}>
@ -37,7 +36,7 @@ const DialogCard = (props: DialogProps) => {
</div> </div>
<div class={styles.row}> <div class={styles.row}>
<Switch fallback={<div class={styles.name}>{companions()[0].name}</div>}> <Switch fallback={<div class={styles.name}>{companions()[0].name}</div>}>
<Match when={companions().length > 1}> <Match when={companions().length > 2}>
<div class={styles.name}>{props.title}</div> <div class={styles.name}>{props.title}</div>
</Match> </Match>
</Switch> </Switch>

View File

@ -4,7 +4,7 @@ import DialogCard from './DialogCard'
type DialogHeader = { type DialogHeader = {
chat: Chat chat: Chat
currentSlug: string ownId: number
} }
const DialogHeader = (props: DialogHeader) => { const DialogHeader = (props: DialogHeader) => {
@ -14,7 +14,7 @@ const DialogHeader = (props: DialogHeader) => {
isChatHeader={true} isChatHeader={true}
title={props.chat.title} title={props.chat.title}
members={props.chat.members} members={props.chat.members}
ownSlug={props.currentSlug} ownId={props.ownId}
/> />
</header> </header>
) )

View File

@ -73,16 +73,16 @@ export const InboxView = () => {
const [sortByPerToPer, setSortByPerToPer] = createSignal<boolean>(false) const [sortByPerToPer, setSortByPerToPer] = createSignal<boolean>(false)
const [selectedChat, setSelectedChat] = createSignal<Chat>() const [selectedChat, setSelectedChat] = createSignal<Chat>()
const { session } = useSession() const { session } = useSession()
const currentSlug = createMemo(() => session()?.user?.slug) const currentUserId = createMemo(() => session()?.user?.id)
// Поиск по диалогам // Поиск по диалогам
const getQuery = (query) => { const getQuery = (query) => {
if (query().length >= 2) { // if (query().length >= 2) {
const match = userSearch(recipients(), query()) // const match = userSearch(recipients(), query())
setRecipients(match) // setRecipients(match)
} else { // } else {
setRecipients(cashedRecipients()) // setRecipients(cashedRecipients())
} // }
} }
let chatWindow let chatWindow
@ -109,7 +109,6 @@ export const InboxView = () => {
console.log(error) console.log(error)
} }
await loadChats() await loadChats()
console.log('!!! chats:', chats())
}) })
const handleSubmit = async () => { const handleSubmit = async () => {
@ -136,6 +135,10 @@ export const InboxView = () => {
showModal('inviteToChat') showModal('inviteToChat')
} }
createEffect(() => {
console.log('!!! chats():', chats())
})
const chatsToShow = () => { const chatsToShow = () => {
if (sortByPerToPer()) { if (sortByPerToPer()) {
return chats().filter((chat) => chat.title.trim().length === 0) return chats().filter((chat) => chat.title.trim().length === 0)
@ -199,7 +202,7 @@ export const InboxView = () => {
onClick={() => handleOpenChat(chat)} onClick={() => handleOpenChat(chat)}
title={chat.title} title={chat.title}
members={chat.members} members={chat.members}
ownSlug={currentSlug()} ownId={currentUserId()}
/> />
)} )}
</For> </For>
@ -209,7 +212,7 @@ export const InboxView = () => {
<div class="col-md-8 conversation"> <div class="col-md-8 conversation">
<Show when={selectedChat()}> <Show when={selectedChat()}>
<DialogHeader currentSlug={currentSlug()} chat={selectedChat()} /> <DialogHeader ownId={currentUserId()} chat={selectedChat()} />
</Show> </Show>
<div class="conversation__messages"> <div class="conversation__messages">

View File

@ -2,12 +2,11 @@ import type { Accessor, JSX } from 'solid-js'
import { createContext, createSignal, useContext } from 'solid-js' import { createContext, createSignal, useContext } from 'solid-js'
import type { Chat } from '../graphql/types.gen' import type { Chat } from '../graphql/types.gen'
import { apiClient } from '../utils/apiClient' import { apiClient } from '../utils/apiClient'
import { createStore } from 'solid-js/store'
type InboxContextType = { type InboxContextType = {
chats: Accessor<Chat[]> chats: Accessor<Chat[]>
actions: { actions: {
createChat: (members: string[], title: string) => Promise<void> createChat: (members: number[], title: string) => Promise<void>
loadChats: () => Promise<void> loadChats: () => Promise<void>
} }
} }
@ -33,7 +32,7 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
} }
} }
const createChat = async (members: string[], title: string) => { const createChat = async (members: number[], title: string) => {
const chat = await apiClient.createChat({ members, title }) const chat = await apiClient.createChat({ members, title })
setChats((prevChats) => { setChats((prevChats) => {
return [chat, ...prevChats] return [chat, ...prevChats]

View File

@ -1,7 +1,7 @@
import { gql } from '@urql/core' import { gql } from '@urql/core'
export default gql` export default gql`
mutation CreateChat($title: String, $members: [String]!) { mutation CreateChat($title: String, $members: [Int]!) {
createChat(title: $title, members: $members) { createChat(title: $title, members: $members) {
error error
chat { chat {

View File

@ -5,6 +5,7 @@ export default gql`
loadRecipients(limit: $limit, offset: $offset) { loadRecipients(limit: $limit, offset: $offset) {
members { members {
name name
id
slug slug
userpic userpic
} }

View File

@ -9,6 +9,7 @@ export default gql`
title title
admins admins
members { members {
id
slug slug
name name
userpic userpic

View File

@ -84,10 +84,10 @@ export type ChatMember = {
export type Collab = { export type Collab = {
authors: Array<Maybe<Scalars['String']>> authors: Array<Maybe<Scalars['String']>>
body?: Maybe<Scalars['String']> chat?: Maybe<Chat>
createdAt: Scalars['DateTime'] createdAt: Scalars['Int']
invites?: Maybe<Array<Maybe<Scalars['String']>>> invites?: Maybe<Array<Maybe<Scalars['String']>>>
title?: Maybe<Scalars['String']> shout?: Maybe<Shout>
} }
export type Collection = { export type Collection = {
@ -164,6 +164,7 @@ export type MessagesBy = {
} }
export type Mutation = { export type Mutation = {
acceptCoauthor: Result
confirmEmail: AuthResult confirmEmail: AuthResult
createChat: Result createChat: Result
createMessage: Result createMessage: Result
@ -177,11 +178,11 @@ export type Mutation = {
destroyTopic: Result destroyTopic: Result
follow: Result follow: Result
getSession: AuthResult getSession: AuthResult
inviteAuthor: Result inviteCoauthor: Result
markAsRead: Result markAsRead: Result
rateUser: Result rateUser: Result
registerUser: AuthResult registerUser: AuthResult
removeAuthor: Result removeCoauthor: Result
sendLink: Result sendLink: Result
unfollow: Result unfollow: Result
updateChat: Result updateChat: Result
@ -193,19 +194,23 @@ export type Mutation = {
updateTopic: Result updateTopic: Result
} }
export type MutationAcceptCoauthorArgs = {
shout: Scalars['Int']
}
export type MutationConfirmEmailArgs = { export type MutationConfirmEmailArgs = {
token: Scalars['String'] token: Scalars['String']
} }
export type MutationCreateChatArgs = { export type MutationCreateChatArgs = {
members: Array<InputMaybe<Scalars['String']>> members: Array<InputMaybe<Scalars['Int']>>
title?: InputMaybe<Scalars['String']> title?: InputMaybe<Scalars['String']>
} }
export type MutationCreateMessageArgs = { export type MutationCreateMessageArgs = {
body: Scalars['String'] body: Scalars['String']
chat: Scalars['String'] chat: Scalars['String']
replyTo?: InputMaybe<Scalars['String']> replyTo?: InputMaybe<Scalars['Int']>
} }
export type MutationCreateReactionArgs = { export type MutationCreateReactionArgs = {
@ -213,7 +218,7 @@ export type MutationCreateReactionArgs = {
} }
export type MutationCreateShoutArgs = { export type MutationCreateShoutArgs = {
input: ShoutInput inp: ShoutInput
} }
export type MutationCreateTopicArgs = { export type MutationCreateTopicArgs = {
@ -246,9 +251,9 @@ export type MutationFollowArgs = {
what: FollowingEntity what: FollowingEntity
} }
export type MutationInviteAuthorArgs = { export type MutationInviteCoauthorArgs = {
author: Scalars['String'] author: Scalars['String']
shout: Scalars['String'] shout: Scalars['Int']
} }
export type MutationMarkAsReadArgs = { export type MutationMarkAsReadArgs = {
@ -267,14 +272,15 @@ export type MutationRegisterUserArgs = {
password?: InputMaybe<Scalars['String']> password?: InputMaybe<Scalars['String']>
} }
export type MutationRemoveAuthorArgs = { export type MutationRemoveCoauthorArgs = {
author: Scalars['String'] author: Scalars['String']
shout: Scalars['String'] shout: Scalars['Int']
} }
export type MutationSendLinkArgs = { export type MutationSendLinkArgs = {
email: Scalars['String'] email: Scalars['String']
lang?: InputMaybe<Scalars['String']> lang?: InputMaybe<Scalars['String']>
template?: InputMaybe<Scalars['String']>
} }
export type MutationUnfollowArgs = { export type MutationUnfollowArgs = {
@ -301,7 +307,7 @@ export type MutationUpdateReactionArgs = {
} }
export type MutationUpdateShoutArgs = { export type MutationUpdateShoutArgs = {
input: ShoutInput inp: ShoutInput
} }
export type MutationUpdateTopicArgs = { export type MutationUpdateTopicArgs = {
@ -320,14 +326,16 @@ export type Operation = {
} }
export type Permission = { export type Permission = {
operation_id: Scalars['Int'] operation: Scalars['Int']
resource_id: Scalars['Int'] resource: Scalars['Int']
} }
export type ProfileInput = { export type ProfileInput = {
about?: InputMaybe<Scalars['String']>
bio?: InputMaybe<Scalars['String']> bio?: InputMaybe<Scalars['String']>
links?: InputMaybe<Array<InputMaybe<Scalars['String']>>> links?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
name?: InputMaybe<Scalars['String']> name?: InputMaybe<Scalars['String']>
slug?: InputMaybe<Scalars['String']>
userpic?: InputMaybe<Scalars['String']> userpic?: InputMaybe<Scalars['String']>
} }
@ -461,7 +469,7 @@ export type Reaction = {
old_id?: Maybe<Scalars['String']> old_id?: Maybe<Scalars['String']>
old_thread?: Maybe<Scalars['String']> old_thread?: Maybe<Scalars['String']>
range?: Maybe<Scalars['String']> range?: Maybe<Scalars['String']>
replyTo?: Maybe<Reaction> replyTo?: Maybe<Scalars['Int']>
shout: Shout shout: Shout
stat?: Maybe<Stat> stat?: Maybe<Stat>
updatedAt?: Maybe<Scalars['DateTime']> updatedAt?: Maybe<Scalars['DateTime']>
@ -576,13 +584,14 @@ export type Shout = {
} }
export type ShoutInput = { export type ShoutInput = {
authors?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
body: Scalars['String'] body: Scalars['String']
community: Scalars['String'] community?: InputMaybe<Scalars['Int']>
mainTopic?: InputMaybe<Scalars['String']> mainTopic?: InputMaybe<Scalars['String']>
slug: Scalars['String'] slug?: InputMaybe<Scalars['String']>
subtitle?: InputMaybe<Scalars['String']> subtitle?: InputMaybe<Scalars['String']>
title?: InputMaybe<Scalars['String']> title?: InputMaybe<Scalars['String']>
topic_slugs?: InputMaybe<Array<InputMaybe<Scalars['String']>>> topics?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
versionOf?: InputMaybe<Scalars['String']> versionOf?: InputMaybe<Scalars['String']>
visibleForRoles?: InputMaybe<Array<InputMaybe<Scalars['String']>>> visibleForRoles?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
visibleForUsers?: InputMaybe<Array<InputMaybe<Scalars['String']>>> visibleForUsers?: InputMaybe<Array<InputMaybe<Scalars['String']>>>

View File

@ -289,7 +289,7 @@ export const apiClient = {
getChatMessages: async (options: QueryLoadMessagesByArgs) => { getChatMessages: async (options: QueryLoadMessagesByArgs) => {
const resp = await privateGraphQLClient.query(chatMessagesLoadBy, options).toPromise() const resp = await privateGraphQLClient.query(chatMessagesLoadBy, options).toPromise()
console.log('!!! resp:', resp) console.log('!!! resp:', resp)
// return resp.data.loadChat return resp.data.loadChat
}, },
getRecipients: async (options: QueryLoadRecipientsArgs) => { getRecipients: async (options: QueryLoadRecipientsArgs) => {