All files / components/ChatShell ChatShell.js

70.37% Statements 19/27
35.71% Branches 5/14
37.5% Functions 3/8
70.37% Lines 19/27

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