// import { Grid } from "@mui/material";
import React, { createContext, useContext, useEffect, useState } from "react";
// import { Route, Switch } from "react-router-dom";
import { actionAboutMe } from "../actions/actionAboutMe";
import { actionGetMessageForChat } from "../actions/actionGetMessageForChat";
import { store} from './../App';

import {Avatar, Grid, List, ListItem} from '@mui/material';
import {Router, Route, Link,  Navigate, Switch, Redirect} from 'react-router-dom';
import { Provider,connect } from 'react-redux';
import { actionSentOrUpdateMSG } from "../actions/actionsMessages";
import CreateNewChat from "../components/CreateNewChat";

import { backendURL } from "../helpers/gql";

import { Aside } from "../components/Aside/Aside";
import ChatPageData from "../components/ChatPageData/ChatPageData";
import ModalComponent, { CModalComponent } from '../components/Modal';

///////////////////////////////////////////////////////////////////////////////////////////////

export const MainPage = () => {
    useEffect(() => {
        store.dispatch(actionAboutMe())
    },[])
    
	return(
			<main className='Main'>
				
				<Grid container columns={12}>
					<Grid item xs={4} >
							<Aside/>
					</Grid>

					<Grid item xs={8}>
							<Switch>
								<Route path="/main/:_id" exact component={ChatPageData}/>
								
							</Switch>
					</Grid>
				</Grid>

				<CModalComponent/>
			</main>
	)	
}