feat(money): add styleing of controls

front/package.json

@@ -12,6 +12,7 @@
     "antd": "^3.13.4",
     "args-parser": "^1.1.0",
     "axios": "^0.18.0",
+    "classnames": "^2.2.6",
     "cookie-parser": "^1.4.3",
     "express": "^4.16.4",
     "final-form": "^4.11.1",
@@ -35,6 +36,7 @@
     "utility-types": "^3.4.1"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.7",
     "@types/js-cookie": "^2.2.0",
     "@types/lodash": "^4.14.120",
     "@types/next": "^7.0.7",

front/src/features/app/features/history/History.css

@@ -1,3 +1,28 @@
+.header {
+  display: flex;
+  align-items: flex-end;
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  & > * {
+    margin-right: 16px;
+  }
+
+  @media (max-width: 576px) {
+    flex-direction: column;
+    align-items: stretch;
+
+    & > *:not(:first-child) {
+      margin-top: 16px;
+      margin-right: 0px;
+    }
+  }
+}
+
+.title {
+  margin-bottom: 0px;
+}
+
 .dataSet {
   display: grid;
 

front/src/features/app/features/history/History.tsx

@@ -1,5 +1,5 @@
 import { endOfMonth, startOfMonth } from 'date-fns'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useDispatch, useMappedState } from 'redux-react-hook'
 
 import { fetchHistory } from '@front/domain/money/actions/fetchHistory'
@@ -26,20 +26,30 @@ export const History = ({ className }: Props) => {
   const [from, setFrom] = useState(startOfMonth(new Date()))
   const [to, setTo] = useState(endOfMonth(new Date()))
 
-  const historySelector = useCallback(getHistory(from, to, groupBy), [from, to])
+  const [actualFrom, actualTo] = useMemo(
+    () => [startOfMonth(from), endOfMonth(to)],
+    [from, to],
+  )
+
+  const historySelector = useCallback(
+    getHistory(actualFrom, actualTo, groupBy),
+    [actualFrom, actualTo],
+  )
   const history = useMappedState(historySelector)
 
   useEffect(
     () => {
-      dispatch(fetchHistory(from, to, groupBy) as any)
+      dispatch(fetchHistory(actualFrom, actualTo, groupBy) as any)
     },
-    [from, to],
+    [actualFrom, actualTo],
   )
 
   return (
     <section className={className}>
-      <h2>History</h2>
-      <Period start={from} updateStart={setFrom} end={to} updateEnd={setTo} />
+      <header className={styles.header}>
+        <h2 className={styles.title}>History</h2>
+        <Period start={from} updateStart={setFrom} end={to} updateEnd={setTo} />
+      </header>
       <Loader status={fetching}>
         {history.nonEmpty() &&
           history.get().map(({ title, incomes, outcomes }) => (

front/src/ui/atoms/label/Label.css

@@ -1,4 +1,17 @@
+.container {
+  padding: 0;
+}
+
+.inlineContainer {
+  display: flex;
+  align-items: center;
+}
+
 .text {
   display: block;
   padding-bottom: 8px;
 }
+
+.textInline {
+  padding-right: 8px;
+}

front/src/ui/atoms/label/Label.tsx

@@ -1,16 +1,20 @@
+import cx from 'classnames'
 import { ReactNode } from 'react'
 
+import { resolveContainerClassName } from './helpers/resolveContainerClassName'
+import { resolveTextClassName } from './helpers/resolveTextClassName'
 import * as styles from './Label.css'
 
 interface Props {
   text: string
   children: ReactNode
   className?: string
+  inline?: boolean
 }
 
-export const Label = ({ text, children, className }: Props) => (
-  <label className={className}>
-    <span className={styles.text}>{text}</span>
+export const Label = ({ text, children, className, inline = false }: Props) => (
+  <label className={cx(className, styles[resolveContainerClassName(inline)])}>
+    <span className={styles[resolveTextClassName(inline)]}>{text}</span>
     {children}
   </label>
 )

front/src/ui/atoms/label/helpers/resolveContainerClassName.ts

@@ -0,0 +1,2 @@
+export const resolveContainerClassName = (inline: boolean) =>
+  inline ? 'inlineContainer' : 'container'

front/src/ui/atoms/label/helpers/resolveTextClassName.ts

@@ -0,0 +1,2 @@
+export const resolveTextClassName = (inline: boolean) =>
+  inline ? 'textInline' : 'text'

front/src/ui/organisms/period/Period.tsx

@@ -1,5 +1,5 @@
-import { format } from 'date-fns'
-import { ChangeEvent, useCallback } from 'react'
+import { Label } from '@front/ui/atoms/label'
+import { DatePicker } from '@front/ui/molecules/date-picker'
 
 interface Props {
   start: Date
@@ -8,42 +8,19 @@ interface Props {
   updateEnd: (newEnd: Date) => void
 }
 
-export const Period = ({ start, end, updateStart, updateEnd }: Props) => {
-  const createHandle = useCallback(
-    (update: (d: Date) => void) => ({
-      target,
-    }: ChangeEvent<HTMLInputElement>) => {
-      if (target.value) {
-        return update(new Date(target.value))
-      }
-    },
-    [],
-  )
-
-  const formatForInput = useCallback(
-    (date: Date) => format(date, 'YYYY-MM-DD'),
-    [],
-  )
+const createHandle = (update: (d: Date) => void) => (date?: Date) =>
+  update(date ? new Date(date) : new Date())
 
+export const Period = ({ start, end, updateStart, updateEnd }: Props) => {
   return (
     <>
-      <label>
-        <input
-          type="date"
-          value={formatForInput(start)}
-          onChange={createHandle(updateStart)}
-        />
-        Start
-      </label>
+      <Label text="Start" inline>
+        <DatePicker value={start} onChange={createHandle(updateStart)} />
+      </Label>
 
-      <label>
-        <input
-          type="date"
-          value={formatForInput(end)}
-          onChange={createHandle(updateEnd)}
-        />
-        End
-      </label>
+      <Label text="End" inline>
+        <DatePicker value={end} onChange={createHandle(updateEnd)} />
+      </Label>
     </>
   )
 }

yarn.lock

@@ -1124,6 +1124,11 @@
     "@types/connect" "*"
     "@types/node" "*"
 
+"@types/classnames@^2.2.7":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd"
+  integrity sha512-rzOhiQ55WzAiFgXRtitP/ZUT8iVNyllEpylJ5zHzR4vArUvMB39GTk+Zon/uAM0JxEFAWnwsxC2gH8s+tZ3Myg==
+
 "@types/connect@*":
   version "3.4.32"
   resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.32.tgz#aa0e9616b9435ccad02bc52b5b454ffc2c70ba28"