Adding Photo Picker to project (#46)

package.json

@@ -10,6 +10,7 @@
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-image-picker-editor": "^1.3.3",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.18.0",
     "react-scripts": "^5.0.1",

src/utils/photo-picker/PhotoPicker.js

@@ -0,0 +1,48 @@
+import ReactImagePickerEditor, { ImagePickerConf } from 'react-image-picker-editor';
+import 'react-image-picker-editor/dist/index.css'
+import './PhotoPicker.scss';
+import { useState } from 'react';
+
+import Popup from 'reactjs-popup';
+
+export default function PhotoPicker({triggerButton, onSelect}){
+    const [imageBuffor, setImageBuffor] = useState('');
+    const config = {
+        borderRadius: '5px',
+        aspectRatio: 1,
+        language: 'en',
+        width: '300px',
+        height: '250px',
+        objectFit: 'contain',
+        compressInitial: null,
+        hideDeleteBtn: true,
+        hideDownloadBtn: true,
+        hideEditBtn: true,
+        hideAddBtn: true
+      };
+      // const initialImage: string = '/assets/images/8ptAya.webp';
+     return (<>
+        <Popup className='photo-picker-popup' trigger={triggerButton}>
+                {close => <>
+                    <div className='user-setting-popup-window-background'>
+                        <div className='photo-picker-popup-window'>
+                            <div className='photo-picker-popup-container'>
+                                <button className='photo-picker-popup-close-btn' onClick={close}>&times;</button>
+                                <div className='photo-picker-component'>
+                                    < ReactImagePickerEditor                
+                                        config={config}
+                                        imageSrcProp={imageBuffor}
+                                        imageChanged={setImageBuffor} /> 
+                                </div>
+                                <div className='photo-picker-popup-operation-btns'>
+                                    <button className='photo-picker-popup-save-btn' disabled={imageBuffor === ''} onClick={() => {onSelect(imageBuffor); close()}}>Save</button>
+                                    <button className='photo-picker-popup-cancel-btn' onClick={close}>Cancel</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </>
+                }
+            </Popup>
+        </>)
+}

src/utils/photo-picker/PhotoPicker.scss

@@ -0,0 +1,54 @@
+.photo-picker-popup {
+
+}
+
+.photo-picker-popup-window {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    width: 500px;
+    height: fit-content;
+
+    padding: 20px;
+
+    border-radius: 10px;
+    background-color: #6a6a6a;
+}
+
+.user-setting-popup-window-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.photo-picker-popup-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.photo-picker-popup-operation-btns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.photo-picker-popup-arrow {
+    visibility: hidden;
+}
+
+.photo-picker-popup-close-btn {
+    width: 50px;
+    margin-left: auto;
+
+    border-radius: 50%;
+}
+
+
+.photo-picker-component {
+    margin-left: auto;
+    margin-right: auto;
+}