reza added ChatList to project views

front
Reza_ashrafi 4 years ago
parent 570ed28253
commit 6423cdeddf
  1. 9
      package.json
  2. 17
      src/App.js
  3. 6
      src/Redux/Reducers/Reduce.js
  4. 16
      src/Redux/store.js
  5. 34
      src/Router.js
  6. BIN
      src/assets/images/reza.png
  7. 2
      src/index.js
  8. 17
      src/views/Home/Body/Body.js
  9. 9
      src/views/Home/Body/Body.scss
  10. 24
      src/views/Home/Body/ChatList/Chat/Chat.js
  11. 52
      src/views/Home/Body/ChatList/Chat/Chat.scss
  12. 86
      src/views/Home/Body/ChatList/ChatList.js
  13. 9
      src/views/Home/Body/ChatList/ChatList.scss
  14. 13
      src/views/Home/Body/Info/Info.js
  15. 0
      src/views/Home/Body/Info/Info.scss
  16. 13
      src/views/Home/Body/Location/Location.js
  17. 0
      src/views/Home/Body/Location/Location.scss
  18. 15
      src/views/Home/Header/Header.js
  19. 11
      src/views/Home/Header/Header.scss
  20. 22
      src/views/Home/Home.js
  21. 8
      src/views/Home/Home.scss
  22. 39
      src/views/Home/TabBar/TabBar.js
  23. 23
      src/views/Home/TabBar/TabBar.scss
  24. 861
      yarn.lock

@ -3,12 +3,21 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"node-sass": "^5.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"web-vitals": "^1.0.1"
},
"scripts": {

@ -1,11 +1,12 @@
import './App.css';
import React,{Component} from 'react';
import AppRouter from "./Router";
function App() {
return (
<div className="App">
</div>
);
class App extends Component {
render(){
return (
<AppRouter />
);
}
}
export default App;
export default App;

@ -0,0 +1,6 @@
import { combineReducers } from "redux";
export default combineReducers({
});

@ -0,0 +1,16 @@
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer from "./Reducers/Reduce";
import thunk from "redux-thunk";
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware))
);
export default store;

@ -0,0 +1,34 @@
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import store from "./Redux/store";
import { Provider } from "react-redux";
import Home from "./views/Home/Home";
export default class AppRouter extends Component {
render() {
let home;
if(1){
home = <Route exact path={'/'}>
{/* <Navbar /> */}
<Home />
</Route>
}else{
// home = <Route exact path={'/'}>
// <Auth page="login" />
// </Route>
return null;
}
return (
<Provider store={store} >
<Router>
<Switch>
{home}
</Switch>
</Router>
</Provider>
)
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

@ -1,7 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>

@ -0,0 +1,17 @@
import React, { Component } from 'react';
import ChatList from './ChatList/ChatList';
import Location from './Location/Location';
import Info from './Info/Info';
import './Body.scss';
export default class Body extends Component {
render(){
return (
<div className="body d-flex">
{this.props.tabBar === 'chat' ? <ChatList /> : null}
{this.props.tabBar === 'location' ? <Location /> : null}
{this.props.tabBar === 'info' ? <Info /> : null}
</div>
);
}
}

@ -0,0 +1,9 @@
@media screen and (max-width: 450px){
.body{
background-color: rgb(240, 240, 240);
flex : 1;
border-radius: 40px;
z-index: 10;
overflow-y : scroll;
}
}

@ -0,0 +1,24 @@
import React, { Component } from 'react';
import './Chat.scss';
export default class Chat extends Component {
render(){
const {data} = this.props;
return (
<div className="chat d-flex">
<img src={data.imageUrl} alt="عکس کاربر" />
<div className="chat__data d-flex flex-column">
<h1 className="chat__data--name">
{data.name}
</h1>
<p className="chat__data--lastMessage">
{data.lastMessage.slice(0,40) + '...'}
</p>
<span>2</span>
<div>07:45</div>
</div>
</div>
);
}
}

@ -0,0 +1,52 @@
@media screen and (max-width: 450px){
.chat{
width: 100%;
direction: rtl;
align-items:center;
margin-bottom: 20px;
position: relative;
border-bottom : 1px solid rgb(45, 173, 242);
padding : 0px 0px 20px;
img {
width: 70px;
height: 70px;
border-radius:35px;
object-fit: cover;
}
&__data{
text-align:right;
flex : 1;
justify-content: space-around;
height : 100%;
padding : 10px 10px;
h1{
font-size: 15px;
margin: 0;
}
p{
font-size: 12px;
margin: 0;
max-width: calc(100vw - 100px);
}
span{
background-color: blue;
width: 20px;
height: 20px;
display: flex;
justify-content:center;
align-items:center;
border-radius: 13px;
position: absolute;
left : 20px;
top : 37px;
color: white;
}
div{
color : rgb(99, 99, 99);
position: absolute;
left : 20px;
top : 5px;
}
}
}
}

@ -0,0 +1,86 @@
import React, { Component } from 'react';
import Chat from './Chat/Chat';
import photo from '../../../../assets/images/reza.png';
import './ChatList.scss';
export default class ChatList extends Component {
constructor(props) {
super(props);
this.state = {
chats : [
{
id : 0,
name : 'محسن محمدی',
lastMessage : 'باشه.رسیدم بهت خبر میدم',
imageUrl : photo
},
{
id : 1,
name : 'غلامرضا',
lastMessage : 'رضا داداش امروز وقت داشتی یه نیم ساعت بیای اینو بهم بگو',
imageUrl : photo
},
{
id : 2,
name : 'محسن محمدی',
lastMessage : 'باشه.رسیدم بهت خبر میدم',
imageUrl : photo
},
{
id : 3,
name : 'غلامرضا',
lastMessage : 'رضا داداش امروز وقت داشتی یه نیم ساعت بیای اینو بهم بگو',
imageUrl : photo
},
{
id : 4,
name : 'محسن محمدی',
lastMessage : 'باشه.رسیدم بهت خبر میدم',
imageUrl : photo
},
{
id : 5,
name : 'غلامرضا',
lastMessage : 'رضا داداش امروز وقت داشتی یه نیم ساعت بیای اینو بهم بگو',
imageUrl : photo
},
{
id : 6,
name : 'محسن محمدی',
lastMessage : 'باشه.رسیدم بهت خبر میدم',
imageUrl : photo
},
{
id : 7,
name : 'غلامرضا',
lastMessage : 'رضا داداش امروز وقت داشتی یه نیم ساعت بیای اینو بهم بگو',
imageUrl : photo
},
{
id : 8,
name : 'محسن محمدی',
lastMessage : 'باشه.رسیدم بهت خبر میدم',
imageUrl : photo
},
{
id : 9,
name : 'غلامرضا',
lastMessage : 'رضا داداش امروز وقت داشتی یه نیم ساعت بیای اینو بهم بگو',
imageUrl : photo
},
],
}
}
render(){
return (
<div className="chat-list d-flex flex-column">
{
this.state.chats.map(item => (
<Chat key={item.id} data={item} />
))
}
</div>
);
}
}

@ -0,0 +1,9 @@
@media screen and (max-width: 450px){
.chat-list{
flex : 1;
border-radius: 40px;
padding: 40px 14px;
position: relative;
}
}

@ -0,0 +1,13 @@
import React, { Component } from 'react';
import './Info.scss';
export default class Info extends Component {
render(){
return (
<div className="info d-flex">
</div>
);
}
}

@ -0,0 +1,13 @@
import React, { Component } from 'react';
import './Location.scss';
export default class Location extends Component {
render(){
return (
<div className="location d-flex">
</div>
);
}
}

@ -0,0 +1,15 @@
import React, { Component } from 'react';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import './Header.scss';
export default class Header extends Component {
render(){
return (
<div className="header d-flex">
<SearchIcon style={{color : "white" , width : 38, height : 38}} />
<MenuIcon style={{color : "white" , width : 38, height : 38}} />
</div>
);
}
}

@ -0,0 +1,11 @@
@media screen and (max-width: 450px){
.header{
border-top-right-radius: 40px;
border-top-left-radius: 40px;
height: 70px;
width: 100%;
justify-content : space-between;
align-items: flex-end;
padding : 0px 15px;
}
}

@ -1,10 +1,28 @@
import React, { Component } from 'react';
import Header from './Header/Header';
import TabBar from './TabBar/TabBar';
import Body from './Body/Body';
import './Home.scss';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
tabBar : 'chat',
}
}
setTabBar = (value) => {
this.setState({
tabBar : value,
})
}
render(){
return (
<div className="home d-flex">
<div className="home d-flex flex-column">
<Header />
<TabBar tabBar={this.state.tabBar} setTabBar={this.setTabBar} />
<Body tabBar={this.state.tabBar} />
</div>
);
}

@ -0,0 +1,8 @@
@media screen and (max-width: 450px){
.home{
flex : 1;
background-color: rgb(15, 93, 209);
border-radius: 40px;
height: 100vh;
}
}

@ -0,0 +1,39 @@
import React, { Component } from 'react';
import ChatIcon from '@material-ui/icons/Chat';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import InfoIcon from '@material-ui/icons/Info';
import './TabBar.scss';
export default class TabBar extends Component {
render(){
return (
<div className="tabBar d-flex">
<div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('info')}>
<InfoIcon style={{color : this.props.tabBar === "info" ? "white" : "#afafaf" , width : 60, height : 60}} />
{
this.props.tabBar === 'info' ?
<div className="tabBar__item--active">
</div> : null
}
</div>
<div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('location')}>
<LocationOnIcon style={{color : this.props.tabBar === "location" ? "white" : "#afafaf" , width : 60, height : 60}} />
{
this.props.tabBar === 'location' ?
<div className="tabBar__item--active">
</div> : null
}
</div>
<div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('chat')}>
<ChatIcon style={{color : this.props.tabBar === "chat" ? "white" : "#afafaf" , width : 60, height : 60}} />
{
this.props.tabBar === 'chat' ?
<div className="tabBar__item--active">
</div> : null
}
</div>
</div>
);
}
}

@ -0,0 +1,23 @@
@media screen and (max-width: 450px){
.tabBar{
margin-top: 30px;
height: 80px;
width: 100%;
justify-content : space-around;
align-items: center;
padding : 0px 5px;
&__item{
position: relative;
&--active{
width: 60px;
height: 60px;
border-radius: 30px;
position: absolute;
top : 58px;
left: 0px;
z-index: 0px;
background-color: rgb(240, 240, 240)
}
}
}
}

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save