Merge pull request #97 from Goldenrash-lab/feature/edit-modal-fixes

fixed text colors, added close mode and fixed editing
Goldenrash-lab · Jan 15, 2024 · b55afb6 · b55afb6
2 parents d4c07c6 + 56a33f2
commit b55afb6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/src/components/ModalEditTransaction/ModalEditTransaction.styled.jsx b/src/components/ModalEditTransaction/ModalEditTransaction.styled.jsx
@@ -237,22 +237,15 @@ export const ToggleButtonGroup = styled.div`
   gap: 12px;
 `;
 
-export const ToggleButton = styled.button`
+export const StyledText = styled.p`
   flex: 1;
   font-size: 16px;
   cursor: pointer;
   border: none;
   //   border-radius: 4px;
   height: 24px;
   background: none;
-  color: #fff;
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--dashboard-text);
-    border: none;
-    outline: none;
-  }
+  color: ${props => props.$color || '#fff'};
 `;
 export const SpanButton = styled.span`
   font-size: 14px;

diff --git a/src/components/ModalEditTransaction/ModalEditTransactions.jsx b/src/components/ModalEditTransaction/ModalEditTransactions.jsx
@@ -17,12 +17,12 @@ import {
   SaveButton,
   CancelButton,
   ToggleButtonGroup,
-  ToggleButton,
   SpanButton,
   FormGroupType,
   CloseBtn,
   DatePickerWrapper,
   CalendarImg,
+  StyledText,
 } from './ModalEditTransaction.styled';
 import { Backdrop } from 'components/ModalAddTransactions/ModalAddTransaction.styled';
 import { useForm } from 'react-hook-form';
@@ -41,14 +41,20 @@ export const ModalEditTransactions = ({ close, transaction }) => {
   const dispatch = useDispatch();
   const categories = useSelector(selectCategories);
 
+  const [transactionType] = useState(transaction.type);
+
   function submit({ amount, comment }) {
+    const newAmount = +amount;
+    const amountChange = newAmount - transaction.amount;
+
     const updatedTransaction = {
-      amount: +amount,
+      amount: newAmount,
       comment,
       categoryId: transaction.categoryId,
-      type: transaction.type,
+      type: transactionType,
       transactionDate: getFormattedDate(startDate),
     };
+
     const patchBody = {
       id: transaction.id,
       updatedTransaction,
@@ -57,8 +63,9 @@ export const ModalEditTransactions = ({ close, transaction }) => {
     dispatch(updateTransactionThunk(patchBody))
       .unwrap()
       .then(() => {
-        dispatch(changeBalance(transaction.amount - updatedTransaction.amount));
+        dispatch(changeBalance(amountChange));
         toast.success('Transaction updated!');
+        close(false);
       })
       .catch(err => toast.error(err));
   }
@@ -79,11 +86,19 @@ export const ModalEditTransactions = ({ close, transaction }) => {
             <FormGroupType>
               <Label htmlFor="transaction-type">
                 <ToggleButtonGroup>
-                  <ToggleButton>Income</ToggleButton>
+                  <StyledText
+                    $color={transactionType === 'INCOME' && '#ffb627'}
+                  >
+                    Income
+                  </StyledText>
                   <SpanButton>
                     <img alt="" src={slash}></img>
                   </SpanButton>
-                  <ToggleButton>Expense</ToggleButton>
+                  <StyledText
+                    $color={transactionType === 'EXPENSE' && '#ff868d'}
+                  >
+                    Expense
+                  </StyledText>
                 </ToggleButtonGroup>
               </Label>
             </FormGroupType>