implements removing cash

src/pages/user/popups/modules/edit/choice.js

@@ -1,22 +1,25 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Button from "components/shared/button/button";
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from 'components/shared/button/button';
 
 const Choice = ({ setPath }) => {
   return (
     <div className="wrapper">
-      <Button className="btn" onClick={() => setPath("add")}>
+      <Button className="btn" onClick={() => setPath('add')}>
         Добавить
       </Button>
-      <Button className="btn-flat" onClick={() => setPath("edit")}>
+      <Button className="btn" onClick={() => setPath('remove')}>
+        Вычесть
+      </Button>
+      <Button className="btn-flat" onClick={() => setPath('edit')}>
         Редактировать
       </Button>
     </div>
   );
 };
 
 Choice.propTypes = {
-  setPath: PropTypes.func.isRequired
+  setPath: PropTypes.func.isRequired,
 };
 
 export default Choice;

src/pages/user/popups/modules/edit/edit.scss

@@ -5,6 +5,8 @@
 
   .wrapper {
     display: flex;
+    flex-direction: column;
+    gap: 15px;
     align-items: center;
     justify-content: space-between;
     margin: 10px 0;
@@ -13,6 +15,10 @@
       margin-right: 15px;
       cursor: pointer;
     }
+
+    button + button {
+      margin: 0;
+    }
   }
 
   .input-field {

src/pages/user/popups/modules/edit/removeCustom.js

@@ -1,13 +1,13 @@
-import React from "react";
-import PropTypes from "prop-types";
-import PopupForm from "../form";
+import React from 'react';
+import PropTypes from 'prop-types';
+import PopupForm from '../form';
 
 const RemoveCustomCashValue = ({ setPath, onChange }) => {
   return (
     <PopupForm
       className="wrapper"
-      onBack={() => setPath("remove")}
-      onChange={(count) => onChange("remove", count)}
+      onBack={() => setPath(null)}
+      onChange={(count) => onChange('remove', count)}
       title="Вычесть"
     />
   );

src/pages/user/popups/modules/editCash/index.js

@@ -1,18 +1,20 @@
-import React, { useState } from "react";
-import AddDefaultValue from "./modules/addDefault";
-import AddCustomValue from "../edit/addCustom";
-import SetCustomValue from "../edit/setCustom";
-import Choice from "../edit/choice";
+import React, { useState } from 'react';
+import AddDefaultValue from './modules/addDefault';
+import AddCustomValue from '../edit/addCustom';
+import RemoveCustomValue from '../edit/removeCustom';
+import SetCustomValue from '../edit/setCustom';
+import Choice from '../edit/choice';
 
 const CashPopup = ({ ...rest }) => {
   const [path, setPath] = useState(null);
   const components = {
     add: AddDefaultValue,
+    remove: RemoveCustomValue,
     edit: SetCustomValue,
     addCustom: AddCustomValue,
     default: Choice,
   };
-  const Component = components[path || "default"];
+  const Component = components[path || 'default'];
 
   return <Component setPath={setPath} {...rest} />;
 };

src/pages/users/modules/listItem.js

@@ -1,7 +1,7 @@
-import React from "react";
-import { useHistory } from "react-router-dom";
-import PropTypes from "prop-types";
-import "./listItem.scss";
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import './listItem.scss';
 
 const User = ({ user }) => {
   const history = useHistory();
@@ -12,16 +12,10 @@ const User = ({ user }) => {
 
   return (
     <div className="list-item" onClick={clickHandler}>
-      <img
-        className="list-item__icon"
-        src={`/images/${user.network}.png`}
-        alt="icon"
-      />
+      <img className="list-item__icon" src={`/images/${user.network}.png`} alt="icon" />
       <div className="list-item__title">
         <div className="list-item__name">{user.name}</div>
-        {user.email ? (
-          <div className="list-item__email">({user.email})</div>
-        ) : null}
+        {user.email ? <div className="list-item__email">({user.email})</div> : null}
       </div>
       <div className="list-item__cash">{user.cash} руб.</div>
     </div>
@@ -32,10 +26,9 @@ User.propTypes = {
   user: PropTypes.shape({
     id: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
-    email: PropTypes.string.isRequired,
     network: PropTypes.string.isRequired,
-    cash: PropTypes.number.isRequired
-  })
+    cash: PropTypes.number.isRequired,
+  }),
 };
 
 export default User;