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 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 | 1x 2x 2x 2x 2x 2x 2x 1x 1x | import React, { useState } from "react"; import { ApolloClient, ApolloProvider, from, HttpLink, InMemoryCache, split, } from "@apollo/client"; import { useNavigate, useParams, useSearchParams } from "react-router-dom"; 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, resetChatList, backendApiUrl, ...rest }) => { const { username } = useParams(); const navigate = useNavigate(); const [queryMessagesBody, setQueryMessagesBody] = React.useState(null); const [searching, setIsSearching] = React.useState(false) const prevQueryRef = usePreviousState(query); const [optionalParams] = useSearchParams(); const profileName = optionalParams.get('profileName') const threadId = optionalParams.get('threadId'); const messageId = optionalParams.get('messageId'); React.useEffect(() => { if ( query?.parameter.length === 0 || prevQueryRef?.parameter !== query.parameter ) { setQueryMessagesBody(null); } /** * This code is used in case when user tries to search a query when he is seeing the messages of a particular profile. * Then the route at that situation is like /chat/0X234d. In that scenerio, we want to show him search results rather the * current profile chats */ if (query?.parameter.length !== 0 && username) { navigate('/chat') } }, [query, prevQueryRef]); /** * This useEffect run when user open a particular search entry or close that entry * This will also handle the browser native back functionality */ React.useEffect(() => { console.log("I am running") if (threadId !== null && messageId !== null && query?.parameter.length !== 0) { setQueryMessagesBody({ threadId, messageId, profileName }) setIsSearching(true); } else { navigate('/chat') setIsSearching(false); } }, [threadId, messageId]) 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) => { if (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} resetChatList={resetChatList} searching={searching} setQueryMessagesBody={handleQueryMessage} {...rest} /> <ConversationShell query={query} chatApiUrl={chatApiUrl} 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); |