{"size": 1394, "ext": "js", "max_stars_repo_path": "client/src/pages/Chat.js", "max_stars_repo_name": "adam-h/socializer", "max_stars_repo_stars_event_min_datetime": "2019-04-21T22:15:08.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-23T14:07:03.000Z", "max_issues_repo_path": "client/src/pages/Chat.js", "max_issues_repo_name": "adam-h/socializer", "max_issues_repo_issues_event_min_datetime": "2020-09-07T09:38:58.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T18:07:44.000Z", "max_forks_repo_path": "client/src/pages/Chat.js", "max_forks_repo_name": "adam-h/socializer", "max_forks_repo_forks_event_min_datetime": "2019-04-22T01:29:50.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-23T04:34:35.000Z"}
{"max_stars_count": 311, "max_issues_count": 9, "max_forks_count": 49, "avg_line_length": 24.0344827586, "max_line_length": 68, "alphanum_fraction": 0.512195122}
import React, { useContext } from "react";
import { Col, Container, Row } from "react-bootstrap";
import { Helmet } from "react-helmet";
import { Redirect, Route, Switch } from "react-router-dom";
import cx from "classnames";
import { ChatBar, Conversation } from "components";
import { AuthContext } from "util/context";
import "./Chat.css";

const ChatEmptyMessage = () => (
  <p>Select a conversation from the sidebar to begin chatting</p>
);

const Chat = ({
  match: {
    params: { id },
  },
}) => {
  const { token } = useContext(AuthContext);

  if (!token) {
    return <Redirect to="/" />;
  }

  return (
    <>
      <Helmet>
        <title>Socializer | Chat</title>
        <meta property="og:title" content="Socializer | Chat" />
      </Helmet>

      <Container>
        <Row className="chat-row">
          <Col
            xs={id ? 0 : 12}
            md={4}
            className={cx("chat-col", { "d-none d-md-block": id })}
          >
            <ChatBar />
          </Col>
          <Col
            xs={id ? 12 : 0}
            md={8}
            className={cx("chat-col", { "d-none d-md-block": !id })}
          >
            <Switch>
              <Route path="/chat/:id" component={Conversation} />
              <Route component={ChatEmptyMessage} />
            </Switch>
          </Col>
        </Row>
      </Container>
    </>
  );
};

export default Chat;
