Merge pull request #40 from igorkamyshev/income-form

Income/Outcome form

front/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@zeit/next-typescript": "^1.1.1",
+    "antd": "^3.13.4",
     "args-parser": "^1.1.0",
     "axios": "^0.18.0",
     "cookie-parser": "^1.4.3",
@@ -24,12 +25,14 @@
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-final-form": "^4.0.2",
+    "react-final-form-hooks": "^1.0.0",
     "react-redux": "^6.0.0",
     "redux": "^4.0.1",
     "redux-clear": "^1.0.3",
     "redux-devtools-extension": "^2.13.7",
     "redux-react-hook": "^3.1.0",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "utility-types": "^3.4.1"
   },
   "devDependencies": {
     "@types/js-cookie": "^2.2.0",

front/pages/_app.tsx

@@ -1,3 +1,4 @@
+import 'antd/dist/antd.css?CSSModulesDisable'
 import App, { Container, NextAppContext } from 'next/app'
 import Head from 'next/head'
 import React from 'react'

front/src/features/app/App.css

@@ -0,0 +1,34 @@
+.app {
+  display: grid;
+
+  grid-template:
+    'outcome income '
+    'history history'
+    'stats   stats  '
+    / 1fr 1fr;
+
+  align-items: end;
+  gap: 16px;
+  padding: 24px;
+
+  & > *:nth-child(odd) {
+    justify-self: end;
+  }
+
+  & > *:nth-child(even) {
+    justify-self: start;
+  }
+
+  @media (max-width: 576px) {
+    grid-template:
+      'outcome'
+      'income'
+      'history'
+      'stats';
+
+    & > *:nth-child(even),
+    & > *:nth-child(odd) {
+      justify-self: stretch;
+    }
+  }
+}

front/src/features/app/App.tsx

@@ -1,12 +1,15 @@
-import { CreateIncome } from './features/create-income'
-import { CreateOutcome } from './features/create-outcome'
+import * as styles from './App.css'
+import { CreateIncome } from './features/create/create-income'
+import { CreateOutcome } from './features/create/create-outcome'
 import { History } from './features/history'
 import { Stats } from './features/stats'
 
 export const App = () => (
   <>
-    <CreateIncome />
-    <CreateOutcome />
+    <section className={styles.app}>
+      <CreateOutcome />
+      <CreateIncome />
+    </section>
     <History />
     <Stats />
   </>

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

@@ -0,0 +1,49 @@
+.container {
+  max-width: 500px;
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+}
+
+.form {
+  display: grid;
+
+  grid-template:
+    'amount  currency'
+    'comment comment '
+    'date    submit  '
+    / 2fr minmax(150px, 1fr);
+
+  @media (max-width: 768px) {
+    grid-template:
+      'amount'
+      'currency'
+      'comment'
+      'date'
+      'submit';
+  }
+
+  align-items: end;
+  gap: 16px;
+}
+
+.amount {
+  grid-area: amount;
+}
+
+.comment {
+  grid-area: comment;
+}
+
+.date {
+  grid-area: date;
+}
+
+.currency {
+  grid-area: currency;
+}
+
+.submit {
+  grid-area: submit;
+}

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

@@ -0,0 +1,78 @@
+import { useCallback } from 'react'
+import { Form } from 'react-final-form'
+
+import { useCreateIncome } from '@front/domain/money/hooks/useCreateIncome'
+import {
+  DatePicker,
+  EnumSelect,
+  Input,
+  InputMoney,
+} from '@front/features/final-form'
+import { getCurrencyName } from '@front/helpers/getCurrencyName'
+import { Button } from '@front/ui/atoms/button'
+import { Label } from '@front/ui/atoms/label'
+import { Card } from '@front/ui/molecules/card'
+import { Currency } from '@shared/enum/Currency'
+import { IncomeModel } from '@shared/models/money/IncomeModel'
+
+import * as styles from '../SimpleForm.css'
+
+export const CreateIncome = () => {
+  const create = useCreateIncome()
+
+  const fieldsToIncomeModel = useCallback(
+    ({ amount, source, currency, date }: any): IncomeModel => ({
+      amount: Math.round(parseFloat(amount) * 100),
+      currency,
+      source,
+      date,
+    }),
+    [],
+  )
+
+  const onSubmit = useCallback(async fields => {
+    const income = fieldsToIncomeModel(fields)
+    await create(income)
+  }, [])
+
+  return (
+    <Form
+      onSubmit={onSubmit}
+      initialValues={{ currency: Currency.RUB, date: new Date() }}
+    >
+      {({ handleSubmit, form: { initialize }, values, initialValues }) => (
+        <form
+          onSubmit={e => handleSubmit(e)!.then(() => initialize(initialValues))}
+          className={styles.container}
+        >
+          <Card title="Create new income" 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>
+
+            <Label text="Currency" className={styles.currency}>
+              <EnumSelect
+                showSearch
+                name="currency"
+                options={Currency}
+                getLabel={getCurrencyName}
+              />
+            </Label>
+
+            <Label text="Date" className={styles.date}>
+              <DatePicker name="date" />
+            </Label>
+
+            <Button submit className={styles.submit}>
+              Create
+            </Button>
+          </Card>
+        </form>
+      )}
+    </Form>
+  )
+}