feat(create): merge income and outcome form

front/src/features/app/App.css

@@ -2,9 +2,9 @@
   display: grid;
 
   grid-template:
-    'nav     nav    '
-    'outcome income '
-    'history pass   '
+    'nav     nav'
+    'create  now'
+    'history now'
     / 1fr 1fr;
 
   align-items: end;
@@ -13,35 +13,35 @@
   @media (max-width: 576px) {
     grid-template:
       'nav'
-      'outcome'
-      'income'
-      'history';
+      'create'
+      'history'
+      'now';
   }
 }
 
-.income {
-  grid-area: income;
+.create {
+  grid-area: create;
   justify-self: stretch;
 
   min-width: 100%;
 }
 
-.outcome {
-  grid-area: outcome;
+.history {
+  grid-area: history;
   justify-self: stretch;
 
   min-width: 100%;
 }
 
-.history {
-  grid-area: history;
+.nav {
+  grid-area: nav;
   justify-self: stretch;
 
   min-width: 100%;
 }
 
-.nav {
-  grid-area: nav;
+.now {
+  grid-area: now;
   justify-self: stretch;
 
   min-width: 100%;

front/src/features/app/App.tsx

@@ -1,16 +1,16 @@
 import { Container } from '@front/ui/components/layout/container'
 
 import * as styles from './App.css'
-import { CreateOutcome } from './features/create/create-outcome'
-import { CreateIncome } from './features/create/create-income'
 import { History } from './features/history'
 import { Navigation } from './features/navigation'
+import { CreateTransaction } from './features/create/CreateTransaction'
+import { Now } from './features/now'
 
 export const App = () => (
   <Container className={styles.app}>
     <Navigation className={styles.nav} />
-    <CreateOutcome className={styles.outcome} />
-    <CreateIncome className={styles.income} />
+    <CreateTransaction className={styles.create} />
+    <Now className={styles.now} />
     <History className={styles.history} />
   </Container>
 )

front/src/features/app/features/create/SimpleForm.css → front/src/features/app/features/create/CreateTransaction.css

@@ -4,15 +4,17 @@
   grid-template:
     'amount  currency'
     'comment comment '
-    'date    submit  '
-    / 2fr minmax(150px, 1fr);
+    'date    kind    '
+    'submit  submit  '
+    / 2fr minmax(200px, 1fr);
 
   @media (max-width: 768px) {
     grid-template:
       'amount'
       'currency'
       'comment'
       'date'
+      'kind'
       'submit';
   }
 
@@ -36,6 +38,10 @@
   grid-area: currency;
 }
 
+.kind {
+  grid-area: kind;
+}
+
 .submit {
   grid-area: submit;
 }

front/src/features/app/features/create/create-income/CreateIncome.tsx → front/src/features/app/features/create/CreateTransaction.tsx

@@ -2,65 +2,78 @@ import { useCallback } from 'react'
 import { Form } from 'react-final-form'
 import { useMappedState } from 'redux-react-hook'
 
-import { createIncome } from '@front/domain/money/actions/createIncome'
-import { getCreateIncomeFetching } from '@front/domain/money/selectors/getCreateIncomeFetching'
+import { createOutcome } from '@front/domain/money/actions/createOutcome'
+import { getCreateOutcomeFetching } from '@front/domain/money/selectors/getCreateOutcomeFetching'
 import { useThunk } from '@front/domain/store'
 import {
   DatePicker,
   EnumSelect,
   Input,
   InputMoney,
+  Toggle,
 } from '@front/features/final-form'
 import { getCurrencyName } from '@shared/helpers/getCurrencyName'
 import { Label } from '@front/ui/components/form/label'
 import { LoadingButton } from '@front/ui/components/form/loading-button'
 import { Card } from '@front/ui/components/layout/card'
 import { Currency } from '@shared/enum/Currency'
-import { IncomeModel } from '@shared/models/money/IncomeModel'
+import { Variant } from '@front/ui/components/form/toggle/Variant'
+import { createIncome } from '@front/domain/money/actions/createIncome'
+import { getCreateIncomeFetching } from '@front/domain/money/selectors/getCreateIncomeFetching'
+import { mergeFetchingState } from '@front/helpers/mergeFetchingState'
 
-import * as styles from '../SimpleForm.css'
+import * as styles from './CreateTransaction.css'
+import { fieldsToIncomeModel } from './helpers/fieldsToIncomeModel'
+import { fieldsToOutcomeModel } from './helpers/fieldsToOutcomeModel'
 
 interface Props {
   className?: string
 }
 
-export const CreateIncome = ({ className }: Props) => {
+export const CreateTransaction = ({ className }: Props) => {
   const dispatch = useThunk()
 
-  const fieldsToIncomeModel = useCallback(
-    ({ amount, source, currency, date }: any): IncomeModel => ({
-      amount: Math.round(parseFloat(amount) * 100),
-      currency,
-      source,
-      date,
-    }),
-    [],
+  const onSubmit = useCallback(
+    async fields => {
+      if (fields.kind === 'income') {
+        const income = fieldsToIncomeModel(fields)
+        await dispatch(createIncome(income))
+      }
+
+      if (fields.kind === 'outcome') {
+        const outcome = fieldsToOutcomeModel(fields)
+        await dispatch(createOutcome(outcome))
+      }
+    },
+    [dispatch],
   )
 
-  const onSubmit = useCallback(async fields => {
-    const income = fieldsToIncomeModel(fields)
-    await dispatch(createIncome(income))
-  }, [])
+  const outcomeFetching = useMappedState(getCreateOutcomeFetching)
+  const incomeFetching = useMappedState(getCreateIncomeFetching)
 
-  const fetching = useMappedState(getCreateIncomeFetching)
+  const fetching = mergeFetchingState(outcomeFetching, incomeFetching)
 
   return (
     <Form
       onSubmit={onSubmit}
-      initialValues={{ currency: Currency.RUB, date: new Date() }}
+      initialValues={{
+        currency: Currency.RUB,
+        date: new Date(),
+        kind: 'outcome',
+      }}
     >
       {({ handleSubmit, form: { initialize }, values, initialValues }) => (
         <form
           onSubmit={e => handleSubmit(e)!.then(() => initialize(initialValues))}
           className={className}
         >
-          <Card title="Create new income" className={styles.form}>
+          <Card title="Create new transaction" className={styles.form}>
             <Label text="Amount" className={styles.amount}>
               <InputMoney name="amount" currency={values.currency} />
             </Label>
 
-            <Label text="Source" className={styles.comment}>
-              <Input name="source" placeholder="NASA" />
+            <Label text="Comment" className={styles.comment}>
+              <Input name="comment" placeholder="Cafe" />
             </Label>
 
             <Label text="Currency" className={styles.currency}>
@@ -76,6 +89,11 @@ export const CreateIncome = ({ className }: Props) => {
               <DatePicker name="date" />
             </Label>
 
+            <Toggle name="kind" className={styles.kind}>
+              <Variant value="outcome">Outcome</Variant>
+              <Variant value="income">Income</Variant>
+            </Toggle>
+
             <LoadingButton fethcing={fetching} submit className={styles.submit}>
               Create
             </LoadingButton>

front/src/features/app/features/create/helpers/fieldsToIncomeModel.ts

@@ -0,0 +1,13 @@
+import { IncomeModel } from '@shared/models/money/IncomeModel'
+
+export const fieldsToIncomeModel = ({
+  amount,
+  comment,
+  currency,
+  date,
+}: any): IncomeModel => ({
+  amount: Math.round(parseFloat(amount) * 100),
+  currency,
+  source: comment,
+  date,
+})

front/src/features/app/features/create/helpers/fieldsToOutcomeModel.ts

@@ -0,0 +1,13 @@
+import { OutcomeModel } from '@shared/models/money/OutcomeModel'
+
+export const fieldsToOutcomeModel = ({
+  amount,
+  comment,
+  currency,
+  date,
+}: any): OutcomeModel => ({
+  amount: Math.round(parseFloat(amount) * 100),
+  currency,
+  category: comment,
+  date,
+})

front/src/features/app/features/create/index.ts

@@ -0,0 +1 @@
+export { CreateTransaction } from './CreateTransaction'

front/src/features/app/features/now/Now.tsx

@@ -0,0 +1,7 @@
+interface Props {
+  className?: string
+}
+
+export const Now = ({ className }: Props) => {
+  return <p className={className}>NOW</p>
+}

front/src/features/app/features/now/index.ts

@@ -0,0 +1 @@
+export { Now } from './Now'

front/src/features/final-form/components/Toggle.tsx

@@ -0,0 +1,23 @@
+import { Field, FieldRenderProps } from 'react-final-form'
+import { Diff } from 'utility-types'
+
+import {
+  Toggle as JustToggle,
+  ToggleProps,
+} from '@front/ui/components/form/toggle'
+
+interface OwnProps {
+  name: string
+}
+
+type ComponentProps = Diff<ToggleProps, FieldRenderProps['input']>
+
+export const Toggle = ({
+  name,
+  ...componentProps
+}: OwnProps & ComponentProps) => (
+  <Field
+    name={name}
+    render={({ input }) => <JustToggle {...componentProps} {...input} />}
+  />
+)

front/src/features/final-form/index.ts

@@ -3,3 +3,4 @@ export { InputMoney } from './components/InputMoney'
 export { Select } from './components/Select'
 export { EnumSelect } from './components/EnumSelect'
 export { DatePicker } from './components/DatePicker'
+export { Toggle } from './components/Toggle'