Merge pull request #103 from ecatch-kyst/develop

🔖release/1.0.0-beta5

Author: balazsorban44

CHANGELOG.md

@@ -3,6 +3,25 @@ All notable changes to this project will be documented in this file.
 
 ## Unreleased
 
+## [1.0.0-beta5] - 2019-04-08
+### Changed
+- notification, dialogs, dropdowns moved to their own namespaces in `locales` ([#57](https://github.com/ecatch-kyst/web/issues/57))
+- dashboard -> homepage ([#57](https://github.com/ecatch-kyst/web/issues/57))
+- DCA is split into two parts ([#93](https://github.com/ecatch-kyst/web/issues/93))
+
+### Added
+- preset for making favorites groups in dropdown ([#99](https://github.com/ecatch-kyst/web/issues/99))
+- page on "homescreen" for setting the preset
+- input validation ([#90](https://github.com/ecatch-kyst/web/issues/90))
+
+### Removed
+- unused translations ([#57](https://github.com/ecatch-kyst/web/issues/57))
+- delete option
+
+### Fixed
+- DU field is now calculated from fishingStart and fishingEnd
+
+
 ## [1.0.0-beta4] - 2019-03-25
 ### Changed
 - New Logo
@@ -15,7 +34,7 @@ All notable changes to this project will be documented in this file.
 
 ### Added
 - Assets for Android, iOS, macOS Safari, Windows
-- WIP: 🚧 Preset values ([#52](https://github.com/ecatch-kyst/web/issues/22))
+- WIP: 🚧 Preset values ([#52](https://github.com/ecatch-kyst/web/issues/52))
 - User can now add his own fishingSpots. ([#52](https://github.com/ecatch-kyst/web/issues/52))
 - date format interpolation to i18n (show dates differently for different languages)
 - Trips view

package.json

@@ -1,7 +1,7 @@
 {
   "name": "web",
   "license": "GPL",
-  "version": "1.0.0-beta4",
+  "version": "1.0.0-beta5",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.9.3",

src/App.js

@@ -4,6 +4,7 @@ import {Route, Switch, withRouter, Link} from "react-router-dom"
 import ProfileIcon from "@material-ui/icons/PersonOutlineOutlined"
 import DashboardIcon from "@material-ui/icons/DashboardOutlined"
 import TripIcon from "@material-ui/icons/CompareArrowsOutlined"
+import PresetIcon from "@material-ui/icons/AddSharp"
 
 import {withTheme, BottomNavigation, BottomNavigationAction} from '@material-ui/core'
 
@@ -14,16 +15,18 @@ import {
   Profile,
   Register,
   OfflineStatus,
-  Dashboard,
+  HomePage,
   NotFound,
   Dialog,
   Trips,
   Messages,
   Trip,
   EditCatch,
   Form,
-  Notification
+  Notification,
+  Preset
 } from './components'
+
 import {useTranslation} from 'react-i18next'
 
 
@@ -33,7 +36,8 @@ export const App = ({theme: {palette: {type}}}) =>
       <Route component={Landing} exact path={routes.ROOT}/>
       <Route component={Register} exact path={routes.REGISTER}/>
       <Route component={Profile} exact path={routes.PROFILE}/>
-      <Route component={Dashboard} exact path={routes.DASHBOARD}/>
+      <Route component={HomePage} exact path={routes.HOMEPAGE}/>
+      <Route component={Preset} exact path={routes.PRESET}/>
       <Route component={Trips} exact path={routes.TRIPS}/>
       <Route component={Trip} exact path={`${routes.TRIPS}/:tripId`}/>
       <Route component={Messages} exact path={routes.MESSAGES}/>
@@ -60,9 +64,9 @@ export default withRouter(withTheme()(App))
 
 const navigation = [
   {
-    id: "dashboard",
+    id: "homepage",
     icon: <DashboardIcon/>,
-    to: routes.DASHBOARD
+    to: routes.HOMEPAGE
   },
   {
     id: "trips",
@@ -73,6 +77,11 @@ const navigation = [
     id: "profile",
     icon: <ProfileIcon/>,
     to: routes.PROFILE
+  },
+  {
+    id: "preset",
+    icon: <PresetIcon/>,
+    to: routes.PRESET
   }
 ]
 

src/components/Forms/Form.jsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react'
 
-import {Link, Redirect, withRouter} from "react-router-dom"
+import {Link, withRouter} from "react-router-dom"
 import forms from "./forms.json"
 import {Grid, Button, Divider, Typography} from '@material-ui/core'
 import {routes} from '../../lib/router.js'
@@ -9,9 +9,8 @@ import {Page} from '../shared'
 
 import FormInput from './FormInput.jsx'
 import {useStore} from '../../hooks'
-import {addHours} from 'date-fns'
+import {addHours, format} from 'date-fns'
 
-import initialValues from "../../db/initialValues.json"
 
 /**
  * Form component
@@ -21,28 +20,27 @@ import initialValues from "../../db/initialValues.json"
  * @param {'DEP'|'DCA'|'POR'} props.match.params.type - Type of form
  * @param {number} props.match.params.messageId - id of message if form is used for editing
  */
-export const Form = ({match: {path, params: {type, messageId}}}) => {
-  const {fields, isEnRoute, handleFieldChange, messages, position, handleDialog, submitMessage} = useStore()
+export const Form = ({history, match: {path, params: {type, /*messageId*/}}}) => {
+  const {fields, handleFieldChange, messages, position, handleDialog, submitMessage, trips, toggleDCAStart} = useStore()
   const [t] = useTranslation("forms")
 
-  const [canEdit, setCanEdit] = useState(false)
+  // const [setCanEdit] = useState(false)
   const [baseMessage, setBaseMessage] = useState({})
 
   const [validType, setValidType] = useState(false)
 
 
   useEffect(() => {
-    setCanEdit(messageId && type === "DCA"&& messages.find(m => m.TM === "DCA" && m.RN === parseInt(messageId, 10)))
     const newValidType = Object.keys(forms).includes(type)
     setValidType(newValidType)
     if (newValidType)
       setBaseMessage(messages.find(m => m.TM === type) || {})
-  }, [type, messageId])
+  }, [])
 
 
   useEffect(() => {
     if(!validType) return
-    let newFields = {...initialValues.fields} // Start with empty fields, to prevent rogue values.
+    let newFields = {}//{...initialValues.fields} // Start with empty fields, to prevent rogue values.
     const now = new Date()
     switch (type) {
     case "DEP":
@@ -63,11 +61,27 @@ export const Form = ({match: {path, params: {type, messageId}}}) => {
       }
       break
 
-    case "DCA":
+    case "DCA0":
       newFields = { // These values will be preset, no matter if there is a base message.
         ...newFields,
         fishingStart: now,
-        expectedFishingStart: addHours(now, 2)
+        startFishingSpot: position,
+        GE: "DRB"
+      }
+      if (Object.keys(baseMessage).length) {
+        newFields = { // Preset from base (previous message, with the same type)
+          ...newFields,
+          AC: baseMessage.AC,
+          GS: baseMessage.GS,
+          QI: baseMessage.QI
+        }
+      }
+      break
+    case "DCA":
+      newFields = { // These values will be preset, no matter if there is a base message.
+        ...newFields,
+        endFishingSpot: position,
+        DU: fields.fishingStart ? parseInt(format(Date.now() - new Date(fields.fishingStart).getTime(), "m"), 10) : 0
       }
       if (Object.keys(baseMessage).length) {
         newFields = { // Preset from base (previous message, with the same type)
@@ -79,10 +93,7 @@ export const Form = ({match: {path, params: {type, messageId}}}) => {
           CA: baseMessage.CA,
           GE: baseMessage.GE,
           GS: baseMessage.GS,
-          DU: baseMessage.DU,
-          QI: baseMessage.QI,
-          startFishingSpot: position,
-          endFishingSpot: baseMessage.endFishingSpot
+          QI: baseMessage.QI
         }
       }
       break
@@ -92,11 +103,19 @@ export const Form = ({match: {path, params: {type, messageId}}}) => {
         portArrival: now // NOTE: try to calculate from position, speed and PO (port)
       }
       if (Object.keys(baseMessage).length) {
+        const activeTrip = trips.find(t => !t.isFinished)
+        const sum = activeTrip ? activeTrip.DCAList.reduce((acc, d) => {
+          Object.entries(d.CA).forEach(([type, weight]) => {
+            acc[type] ? acc[type] += weight : acc[type] = weight
+          })
+          return acc
+        }, {}) : {}
+
         newFields = { // Preset from base (previous message, with the same type)
           ...newFields,
-          KG: baseMessage.KG,
+          KG: sum,
           LS: baseMessage.LS,
-          OB: baseMessage.OB,
+          OB: sum,
           PO: baseMessage.PO
         }
       }
@@ -116,7 +135,7 @@ export const Form = ({match: {path, params: {type, messageId}}}) => {
 
   //   /** REVIEW: When this componentDidMount is called,
   //    * messages is probably still empty,
-  //    * if the user opens the form in a new tab, instead of coming from the dashboard.
+  //    * if the user opens the form in a new tab, instead of coming from the homepage.
   //    */
 
   //   const now = new Date()
@@ -186,18 +205,22 @@ export const Form = ({match: {path, params: {type, messageId}}}) => {
    */
   const handleSubmit = e => {
     e.preventDefault()
+    if (type === "DCA0") {
+      toggleDCAStart(true)
+      history.push(routes.DASHBOARD)
+      return
+    }
     handleDialog({type, submit: () => submitMessage(type)})
   }
 
   const form = forms[type] // Extract form from forms.json
 
-  const isAllowed = (isEnRoute ? ["DCA", "POR"].includes(type) : type === "DEP") || (canEdit && type === "DCA")
 
   return (
     <Page style={{marginBottom: 64}} title={t(`${type}.title`)}>
       <Grid alignItems="center" container direction="column" spacing={16}>
         <Grid component="form" item onSubmit={handleSubmit}>
-          {isAllowed ? form.map(({id, step}) => // If a valid form, iterate over its steps
+          {form.map(({id, step}) => // If a valid form, iterate over its steps
             <Grid container direction="column" key={id} spacing={16} style={{paddingBottom: 32}}>
               <Grid component={Typography} item variant="subtitle2" xs={12}>{t(`${type}.steps.${id}`)}</Grid>
               {step.map(({id, dataId, type, dependent, options={}}) => // Iterate over all the input fields in a Form step
@@ -217,8 +240,7 @@ export const Form = ({match: {path, params: {type, messageId}}}) => {
               )}
               <Divider style={{marginTop: 16}}/>
             </Grid>
-          ) :
-            <Redirect to={routes.DASHBOARD}/> // If the form is invalid, redirect to the dashboard
+          )
           }
         </Grid>
         <Grid container item justify="center">
@@ -227,7 +249,7 @@ export const Form = ({match: {path, params: {type, messageId}}}) => {
               color="secondary"
               component={Link}
               size="large"
-              to={routes.DASHBOARD}
+              to={routes.HOMEPAGE}
             >
               {t("links.back")}
             </Button>

src/components/Forms/FormInput.jsx

@@ -6,6 +6,7 @@ import TextInput from './components/TextInput'
 import DropdownMap from './components/DropdownMap'
 import GeoPointInput from './components/GeoPointInput'
 import {useStore} from '../../hooks'
+import {validate} from '../../utils'
 
 /**
  * Dynamic input field
@@ -18,25 +19,30 @@ import {useStore} from '../../hooks'
 
 export const FormInput = ({id, dataId, type, options}) => {
 
-  const {handleFieldChange, fields} = useStore()
+  const {handleFieldChange, fields, handleFieldError, errors, notify} = useStore()
   const [t] = useTranslation("forms")
 
-  const handleChange = (name, value) => {
-    const error = null // TODO: validate[dataId](value) // Validating the field
+  const handleChange = ({name, value}) => {
+    const {error, reason} = validate(name, value) // Validating the field
+    handleFieldError(name, error)
     if (error) {
-      console.error(error) // TODO: Add error notification
+      notify({name: `fields.${reason}`, type: "error"})
     } else {
+      handleFieldError(name, false)
       handleFieldChange(name, value)
     }
   }
 
   const value = fields[id || dataId]
+  const error = errors[id || dataId]
 
   const common = {
     onChange: handleChange,
-    label: t(`labels.${id}`),
+    label:t(`labels.${id}`),
+    // TODO: Add custom error labels //label: error ? t(`errors.${id}`) : t(`labels.${id}`),
     placeholder: t(`labels.${id}`),
     value,
+    error,
     disabled: !options.editable
   }
 

src/components/Forms/components/AddFishingSpot.js

@@ -8,7 +8,7 @@ import TextInput from './TextInput'
 import {useStore} from '../../../hooks'
 
 export const AddFishingSpot = () => {
-  const [t] = useTranslation("forms")
+  const [t] = useTranslation("dropdowns")
   const {
     handleDialog,
     handleCustomListChange,
@@ -29,15 +29,15 @@ export const AddFishingSpot = () => {
                 autoFocus
                 dataId="label"
                 fullWidth
-                label={t("dropdowns.customLists.fishingSpots.label")}
+                label={t("customLists.fishingSpots.label")}
                 onChange={handleCustomListChange}
                 value={label}
               />
             </Grid>
             <Grid container direction="column" item justify="center">
               <GeoPointInput
                 dataId="value"
-                // label={t("dropdowns.customLists.fishingSpots.coordinates")}
+                // label={t("customLists.fishingSpots.coordinates")}
                 onChange={handleCustomListChange}
                 value={value}
               />
@@ -46,7 +46,7 @@ export const AddFishingSpot = () => {
         })
       }
       variant="text"
-    >{t("dropdowns.customLists.fishingSpots.button")}
+    >{t("customLists.fishingSpots.button")}
     </Button>
   )
 }