{"size": 844, "ext": "js", "max_stars_repo_path": "src/containers/Chat.js", "max_stars_repo_name": "anarchymonkey/chat-app-frontend", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/containers/Chat.js", "max_issues_repo_name": "anarchymonkey/chat-app-frontend", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/containers/Chat.js", "max_forks_repo_name": "anarchymonkey/chat-app-frontend", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.1428571429, "max_line_length": 75, "alphanum_fraction": 0.5355450237}
import React, { useEffect, lazy, Suspense } from 'react';
import { Switch, Route } from 'react-router-dom';
import styles from './Chat.modules.css';

const ChatList = lazy(() => import('../components/chat/ChatList'));
const ChatMessages = lazy(() => import('../components/chat/ChatMessages'));

const Chat = () => {
    useEffect(() => {
        console.log('in chatlist');
    }, [window.location]);

    return (
        <div className={styles.homeContainer}>
            <div className={styles.chatContainer}>
                <ChatList />
                <Suspense fallback={<div> loding chat component </div>}>
                    <Switch>
                        <Route path="/chat/:id" component={ChatMessages} />
                    </Switch>
                </Suspense>
            </div>
        </div>
    );
};

export default Chat;
