Create DurationPicker Component.

recipes/src/components/DurationPicker/index.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from "react";
+import moment from 'moment';
+
+import Input from 'components/Input';
+
+import './styles.scss';
+
+type DurationPickerProps = {
+  initialValue?: string,
+  label?: string,
+  onChange: (ISODuration: string) => void
+}
+
+const toISODuration = (hours: number, minutes: number) => moment.duration({ minutes, hours }).toISOString();
+
+export const DurationPicker: React.SFC<DurationPickerProps> = ({ initialValue = '', onChange, label }) => {
+  
+  const initial = moment.duration(initialValue);
+  const [minutes, setMinutes] = useState(initial.minutes());
+  const [hours, setHours] = useState(initial.hours());
+  
+  useEffect(() => {
+    setMinutes(initial.minutes())
+    setHours(initial.hours())
+  }, [initialValue])
+
+  return (
+    <div className='cbk-duration'>
+      <label>{label}</label>
+      <div className='cbk-duration__input'>
+        <Input
+          type='number'
+          label='H'
+          min={0}
+          value={hours}
+          onChange={({ currentTarget }) => {
+            setHours(parseInt(currentTarget.value));
+            onChange(toISODuration(parseInt(currentTarget.value), minutes))
+          }}
+        />
+        <Input
+          type='number'
+          label='M'
+          min={0}
+          max={59}
+          value={minutes} 
+          onChange={(e) => {
+            setMinutes(parseInt(e.currentTarget.value));
+            onChange(toISODuration(hours, parseInt(e.currentTarget.value)))
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default DurationPicker;

recipes/src/components/DurationPicker/styles.scss

@@ -0,0 +1,12 @@
+.cbk-duration {
+  &__input {
+    display: flex;
+    .cbk-light-input {
+      label {
+        position: absolute;
+        right: 25px;
+        top: 5px;
+      }
+    }
+  }
+}

recipes/src/components/RecipeForm/index.tsx

@@ -5,9 +5,11 @@ import { Grid, Row, Cell } from '@material/react-layout-grid';
 import { Field, FieldArray, Formik, useField, Form, FieldArrayRenderProps } from 'formik';
 import { MeasuresTypes } from 'services/measurements';
 import { Input, Textarea, ControlledInput } from 'components/Input';
+
 import Button from 'components/Button';
 import Dialog from 'components/DialogConverter';
 import TagInput from 'components/TagInput';
+import DurationPicker from 'components/DurationPicker';
 
 import sample_image from 'sample.png';
 import './styles.scss';
@@ -93,7 +95,6 @@ const FormikTextarea = ({ label, ...props }: FormikInputProps)  => {
 const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: RecipeFormProps<T>) => {
   const [selectedTab, setSelectedTab] = useState(0);
   const [focusLast, setFocusLast] = useState(false);
-
   return (
   <div>
     <h4>New form</h4>
@@ -136,8 +137,14 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
             <section>
               <Row>
                 <Cell columns={3}>
-                  <FormikInput name='details.preparationTime' label='preparation time' />
-                </Cell>                <Cell columns={3}>
+                  {/* <FormikInput name='details.preparationTime' label='preparation time' /> */}
+                  <DurationPicker
+                    initialValue={initialValues.details.preparationTime}
+                    onChange={(duration)=>{ setFieldValue('details.preparationTime', duration)}} 
+                    label='preparation time'
+                  />
+                </Cell>
+                <Cell columns={3}>
                   <FormikInput name='details.cookingTime' label='cooking time' />
                 </Cell>
                 <Cell columns={3}>
@@ -161,7 +168,7 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
                   <TagInput
                     tags={values.course}
                     label='dish course'
-                    onNewTag={(dishCourse) => setFieldValue('course', dishCourse)}
+                    onNewTag={(dishCourse) => {console.log("dish", dishCourse, values); setFieldValue('course', dishCourse)}}
                   />
                 </Cell>
               </Row>