enter image description herei develop what's up web by using react. my scenario is when ever i execute in desktop it will be displayed in a desktop responsive and whenever i displayed in a mobile it will be displayed in a mobile responsive how to do that in react. Below i can add each and every page i develop for displaying what's up web.i want to display in mobile like what's up app so how to develop.click the enter description here it will show the image i developed.but i need only one app to have both responsivness & web.that means one url i want whats web & mobile whats app.
ChatListHeader.js
import React, { Component } from 'react';
class ChatListHeader extends Component {
render(){
return(
<div className="chatlist--header">
<div className="chatlist--header__image">
<img src={require('/home/srinath/Desktop/important/whats up web ui complete/whats up web
ui/src/images/Srinath.png')} alt={""}/>
</div>
<div className="chatlist--header__icons">
<i className="material-icons"></i>
<i className="material-icons"></i>
</div>
</div>
)
}
}
export default ChatListHeader;
import React, { Component } from 'react';
import ChatListHeader from '../presentational/ChatListHeader';
import ChatListSearch from './ChatListSearch';
import List from './List';
class ChatList extends Component {
render(){
return(
<div className="chatlist">
<ChatListHeader />
<ChatListSearch />
<List contacts={this.props.contacts} getChats={this.props.getChats}/>
</div>
)
}
}
export default ChatList;
import React, { Component } from 'react';
class ChatListSearch extends Component {
render(){
return(
<div className="chatlist--search" style={{"position": "relative"}}>
<input type="" placeholder="search or start a new chat"/>
<img src={require('../../images/searchicon.png')} alt={""} style={{"width": "15px", "position":"absolute","bottom":"18px","left":"20px","fontSize":"15px"}} />
</div>
)
}
}
export default ChatListSearch;
import React, { Component } from 'react';
import ListItem from '../presentational/ListItem';
class List extends Component {
render(){
let listitem = this.props.contacts.map((item) => {
return <ListItem item={item} key={item.id} getChats={ this.props.getChats }/>
})
return(
<div className="list">
{listitem}
</div>
)
}
}
export default List;
import React, { Component } from "react";
class ListItem extends Component {
render(){
let item = this.props.item;
return (
<div className="list--item" onClick={ (event) => { this.props.getChats(event, item.id) } }>
<div className="list--item__image">
<img src={item.profilePhoto} alt={item.name}/>
</div>
<div className="list--item__details">
<h3>{item.name}</h3>
<p>{item.lastMessage}</p>
</div>
</div>
)
}
}
export default ListItem;
import React, { Component } from 'react';
import ViewWhatsapp from '../presentational/ViewWhatsapp';
import ViewChatHistory from './ViewChatHistory';
class View extends Component {
render(){
let visibility = this.props.visibility;
let view;
view = (visibility) ? <ViewChatHistory selectedContactChat={ this.props.selectedContact } /> : <ViewWhatsapp />
return(
<div className="view" style={{"display": "flex", "flexGrow": "1"}}>
{ view }
</div>
)
}
}
export default View;
import React, { Component } from 'react';
class ViewChatHistory extends Component{
render(){
console.log(this.props.selectedContactChat);
return(
<div className="view--chat" >
{
this.props.selectedContactChat.map( (contact) =>{
return (
<header key={contact.id} >
<div className="user-details">
<img src={contact.profilePhoto} style={{"width": "45px", "height": "40px", "borderRadius": "100%", "marginRight": "20px"}} alt={""}/>
<div className="user-details-name">
<h3>{contact.name}</h3>
</div>
</div>
<nav className="extra-icons" style={{"width": "120px", "display": "flex", "justifyContent" : "space-between", "marginTop" : "10px"}}>
<i className="material-icons"></i>
<i className="material-icons"></i>
<i className="material-icons"></i>
</nav>
</header>
)
})
}
</div>
)
}
}
export default ViewChatHistory;
