adding materialUI dashboard project

messanger/src/action/conversation.js

@@ -26,6 +26,11 @@ export const chooseEmoji = () => ({
   type: 'CHOSEN_EMOJI'
 })
 
+export const choosedUser = (choosedUser) => ({
+  type: 'CHOSEN_USER',
+  payload: choosedUser
+})
+
 export const saveConversationList = (conversationList) => ({
   type: 'SAVE_CONVERSATION_LIST',
   payload: conversationList

messanger/src/component/ChatScreen.js

@@ -7,6 +7,7 @@ import {
 import 'emoji-mart/css/emoji-mart.css'
 import FooterContainer from '../container/FooterContainer'
 import person from '../img/person.jpeg'
+import { PassThrough } from 'stream';
 
 export default class ChatScreen extends React.Component {
   constructor (props) {
@@ -51,7 +52,6 @@ export default class ChatScreen extends React.Component {
               ) : null}
             </div>
           </div>
-
           <FooterContainer />
         </div>
       </div>

messanger/src/component/ConversationList.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import axios from 'axios'
-import { saveConversationList, LoadUser, conversationInformation, AddNewMassage } from '../action/conversation'
+import { saveConversationList, LoadUser, conversationInformation, AddNewMassage, choosedUser } from '../action/conversation'
 import * as moment from 'moment'
 import person from '../img/person.jpeg'
 import Mysearch from '../specialComponent/mysearch'
@@ -24,6 +24,7 @@ export default class ConversationList extends React.Component {
       isClicked: false,
       openDrawer: false,
       isLoadingSearch: false,
+      choosedUser: false
     }
   }
 
@@ -34,6 +35,8 @@ export default class ConversationList extends React.Component {
       this.handleClickUser(this.state.user)
     }, 5000)
 
+    this.props.dispatch(choosedUser(this.state.choosedUser))
+
     axios.get('http://mrk24251.pythonanywhere.com/api/auth/user', {
       headers: { Authorization: `Token ${window.localStorage.getItem('token')}`
       }
@@ -69,7 +72,7 @@ export default class ConversationList extends React.Component {
       })
   }
 
-  async handleClick (user) {
+  handleClick (user) {
     let data = {
       user_id: user.id,
       first_name: user.first_name,
@@ -81,11 +84,11 @@ export default class ConversationList extends React.Component {
     })
       .then((response) => {
         console.log('respons,c33', response)
+        window.location.reload()
       })
       .catch((error) => {
         console.log('erroppppppp', error)
       })
-    await window.location.reload()
   }
 
   handleClickUser (user) {
@@ -101,6 +104,8 @@ export default class ConversationList extends React.Component {
         console.log('respons,c33', response.data)
         this.setState({ messages: response.data.Messages },
           () => this.props.dispatch(AddNewMassage(this.state.messages)))
+
+        this.setState({choosedUser: true}, () => this.props.dispatch(choosedUser(this.state.choosedUser)))
       })
       .catch((error) => {
         console.log('error::::', error)

messanger/src/component/Signup.js

@@ -58,18 +58,20 @@ class Signup extends React.Component {
       }
       if (emailError || passwordError){
       }else{
-        this.setState({isLoading: true})
-        axios.post('http://mrk24251.pythonanywhere.com/api/auth/register', data)
-        .then( (response)=> {
-          console.log('response::::',response);
-          window.localStorage.setItem('token', response.data.token)
-          window.localStorage.setItem('id', response.data.user.id)
-          this.props.history.push('/profile')
-        })
-        .catch( (error)=> {
-          console.log('error::::',error);
-          this.setState({isLoading:false})
-        });
+        if (this.state.Password===this.state.Password2){
+          this.setState({isLoading: true})
+          axios.post('http://mrk24251.pythonanywhere.com/api/auth/register', data)
+          .then( (response)=> {
+            console.log('response::::',response);
+            window.localStorage.setItem('token', response.data.token)
+            window.localStorage.setItem('id', response.data.user.id)
+            this.props.history.push('/profile')
+          })
+          .catch( (error)=> {
+            console.log('error::::',error);
+            this.setState({isLoading:false})
+          });
+        }
       }
     } else {
       this.setState({equalPassword: 'Passwod and retype password do not match!'})

messanger/src/container/ChatScreenContainer.js

@@ -11,7 +11,8 @@ const mapStateToProps = state => {
     message: state.message,
     showEmojiPicker: state.showEmojiPicker,
     messages: state.messages,
-    user: state.user
+    user: state.user,
+    choosedUser: state.choosedUser
   }
 }
 

messanger/src/reducer/Conversation.js

@@ -48,6 +48,10 @@ function conversation (state = INIT, action) {
       return { ...state,
         conversation: action.payload
       }
+    case 'CHOSEN_USER':
+      return {...state,
+        choosedUser: action.payload
+      }
     default:
       return state
   }

messanger/src/specialComponent/ProfileDialog.js

@@ -0,0 +1,11 @@
+import Dialog from '@material-ui/core/Dialog';
+import React from 'react'
+
+export default function ProfileDialog (props) {
+	return (
+		<Dialog
+			open={props.open}
+		>
+		</Dialog>
+	)
+}

messanger/src/specialComponent/myDrawer.js

@@ -12,51 +12,62 @@ import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Switch from '@material-ui/core/Switch';
+import PersonIcon from '@material-ui/icons/Person';
+import ProfileDialog from '../specialComponent/ProfileDialog';
+import { useState } from 'react';
 
 export default function MyDrawer (props) {
-  // constructor (props) {
-  //   super(props)
-  //   this.DrawerStyles = DrawerStyles.bind(this)
-  // }
+  const [Clicked, setClicked] = useState(false);
+
   const classes = DrawerStyles()
   return (
-    <Drawer
-      anchor='left'
-      open={props.open}
-      variant='temporary'
-      className='Drawer'
-      classes={{
-        paper: classes.drawerPaper
-      }}>
+    <div>
+      <Drawer
+        anchor='left'
+        open={props.open}
+        variant='temporary'
+        className='Drawer'
+        classes={{
+          paper: classes.drawerPaper
+        }}>
 
-      <div className='drawer_header'>
-        <IconButton onClick={props.onClick}>
-          <ChevronLeftIcon />
-        </IconButton>
-      </div>
-      <Divider />
-      <List>
-        <ListItem button>
-          <ListItemIcon><ColorLensIcon /></ListItemIcon>
-          <ListItemText primary={'Night Mode'} />
-          <Switch/>
-        </ListItem>
-      </List>
-      <ExpansionPanel>
-        <ExpansionPanelSummary
-          expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1a-content"
-          id="panel1a-header"
-        >
-          <ListItemIcon><InfoIcon /></ListItemIcon>
-          <Typography >About us</Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails>
-          <Typography>
-            Crow messanger is messanger for cool people that like free messanger
-          </Typography>
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
-    </Drawer>
+        <div className='drawer_header'>
+          <IconButton onClick={props.onClick}>
+            <ChevronLeftIcon />
+          </IconButton>
+        </div>
+        <Divider />
+        <List>
+          <ListItem button>
+            <ListItemIcon><ColorLensIcon /></ListItemIcon>
+            <ListItemText primary={'Night Mode'} />
+            <Switch/>
+          </ListItem>
+        </List>
+        <Divider />
+        <List>
+          <ListItem button>
+            <ListItemIcon><PersonIcon /></ListItemIcon>
+            <ListItemText primary={'Edit Profile'}  />
+          </ListItem>
+        </List>
+        <ExpansionPanel>
+          <ExpansionPanelSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+          >
+            <ListItemIcon><InfoIcon /></ListItemIcon>
+            <Typography >About us</Typography>
+          </ExpansionPanelSummary>
+          <ExpansionPanelDetails>
+            <Typography>
+              Crow messanger is messanger for cool people that like free messanger
+            </Typography>
+          </ExpansionPanelDetails>
+        </ExpansionPanel>
+      </Drawer>
+      <ProfileDialog open={Clicked} />
+    </div>
   )
-}
+}