Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from "react"; import { ApolloClient, ApolloProvider, from, HttpLink, InMemoryCache, split, } from "@apollo/client"; import { onError } from "@apollo/client/link/error"; import { WebSocketLink } from "@apollo/client/link/ws"; import { getMainDefinition } from "@apollo/client/utilities"; import usePreviousState from "../../_helpers/usePreviousState"; import PropTypes from "prop-types"; import ChatState from "../../context/chat/ChatState"; import { chatListOptions } from "../../sampleData/chatListOptions"; import ChatListShell from "../ChatListShell/ChatListShell"; import ConversationShell from "../ConversationShell/ConversationShell"; import styles from "./ChatShell.module.scss"; const ChatShell = ({ connectionUri, subscriptionUri, chatApiUrl, query, backendApiUrl, ...rest }) => { const [queryMessagesBody, setQueryMessagesBody] = React.useState(null); const prevQueryRef = usePreviousState(query); React.useEffect(() => { if ( query?.parameter.length === 0 || prevQueryRef?.parameter !== query.parameter ) { setQueryMessagesBody(null); } }, [query, prevQueryRef]); const errorLink = onError(({ graphqlErrors }) => { if (graphqlErrors) { graphqlErrors.map(({ message }) => { return alert(`Graphql error ${message}`); }); } }); const httpLink = from([errorLink, new HttpLink({ uri: connectionUri })]); const wsLink = process.browser ? new WebSocketLink({ uri: subscriptionUri, options: { reconnect: true, lazy: true, }, }) : null; const splitLink = process.browser ? split( ({ query }) => { const definition = getMainDefinition(query); return ( definition.kind === "OperationDefinition" && definition.operation === "subscription" ); }, wsLink, httpLink ) : httpLink; const client = new ApolloClient({ cache: new InMemoryCache(), link: splitLink, }); const [isUsername, setIsUsername] = React.useState(false); const handleSetIsUsername = (val) => { Iif (val) { setIsUsername(true); } else { setIsUsername(false); } }; const handleQueryMessage = (messageBody) => { setQueryMessagesBody(messageBody); }; return ( <ChatState backendApiUrl={backendApiUrl}> <ApolloProvider client={client}> <div className={styles.ChatShell}> <ChatListShell options={chatListOptions} isUsername={isUsername} query={query} setQueryMessagesBody={handleQueryMessage} {...rest} /> <ConversationShell query={query} chatApiUrl={chatApiUrl} backendApiUrl={backendApiUrl} queryMessagesBody={queryMessagesBody} handleSetIsUsername={handleSetIsUsername} /> </div> </ApolloProvider> </ChatState> ); }; ChatShell.propTypes = { query: PropTypes.shape({ parameter: PropTypes.string, }), resetChatList: PropTypes.func, }; ChatShell.defaultProps = { query: { parameter: "" }, resetChatList: () => console.log( "This function will reset the ChatListSheel to its default state" ), backendApiUrl: "https://backend.dgraph.smarter.codes", }; export default React.memo(ChatShell); |