add webcam component add buttons

frontend/src/components/chatPage/ChatPage.jsx

@@ -70,13 +70,23 @@ export const ChatPage = () => {
                 { isTabletorMobile ? <SwitchButton/> : null}
                 
                 <Box className ={isTabletorMobile ? 'rootMessageFormMobile':'rootMessageForm'} >
-                {isCamActiv ? <WebcamCapture />:""}
+                {isCamActiv ? 
+                <div>  
+                    <Button
+                        variant="contained" 
+                        component="label"
+                        onClick = {() => webcamEventHandler()}
+                    >
+                        close camera
+                    </Button> 
+                    <WebcamCapture />   
+                 </div> 
+                 :
+                 ""}
                     <MessageForm/>
 
                     {isUserTyping.isTyping && (isUserTyping.userName !== user.userName)? <span> User {isUserTyping.userName} typing..</span> : ""}
-                     
 
-                     
                     <Box 
 
                         component="form" 

frontend/src/components/chatPage/service/webCam/WebcamCapture.jsx

@@ -1,18 +1,22 @@
-import WebcamComponent from "./WebcamComponent";
 import {useRef, useState, useCallback} from 'react';
+import Webcam from "react-webcam";
+import {Button} from '@mui/material';
+import { fileMessage } from '../../../../reducers/messageReducer';
+import { useDispatch } from 'react-redux';
+
 
 
 const WebcamCapture = () => {
 
+    const dispatch = useDispatch();
+
     const webcamRef = useRef(null);
     const [imgSrc, setImgSrc] = useState(null);
-    console.log(webcamRef)
 
     const capture = useCallback(() => {
-
-  
-     // const imageSrc = webcamRef.current.getScreenshot();
-      //setImgSrc(imageSrc);
+      const imageSrc = webcamRef.current.getScreenshot();
+      setImgSrc(imageSrc);
+     // dispatch(fileMessage( imageSrc))
     }, [webcamRef, setImgSrc]);
   
     return (
@@ -25,16 +29,46 @@ const WebcamCapture = () => {
         'zIndex': 9999,
         
     }}>
-        <WebcamComponent
+        <Webcam
           audio={false}
           ref={webcamRef}
           screenshotFormat="image/jpeg"
+          style={{
+            'maxHeight': '350px',
+            'maxWidth': '350px'
+        }}
         />
-        <button onClick={capture}>Capture photo</button>
-        {imgSrc && (
+        <Button
+                onClick={capture}
+                variant="contained" 
+                component="label" 
+          >
+            New photo 
+          </Button>          {imgSrc && (
+          <>        
+          <Button
+              variant="contained" 
+              component="label"
+            
+          >
+            Send
+          </Button>  
+          <Button
+              variant="contained" 
+              component="label" 
+          >
+            Save avatar
+          </Button>
           <img
             src={imgSrc}
+            style={{
+             'border':'4px solid blue',
+             'borderRadius': '10px'
+          }}
+            
           />
+
+          </>
         )}
       </div>
     );

frontend/src/components/chatPage/service/webCam/WebcamComponent.jsx

@@ -1,9 +0,0 @@
-import Webcam from "react-webcam";
-
-const WebcamComponent = () => <Webcam style={{
-    'maxHeight': '350px',
-    'maxWidth': '350px'
-}}/>;
-
-
-export default WebcamComponent;

frontend/src/reducers/messageReducer.js

@@ -35,6 +35,7 @@ export const fileMessage = createAsyncThunk(
         const token = localStorage.getItem('token')
         try {
             const formData = new FormData();
+            console.log(files)
             for (let i = 0; i < files.length; i++) {
                 formData.append('files', files[i])
             }