(PC-1707) better gestion navigation

package.json

@@ -71,7 +71,7 @@
     "react-dotdotdot": "^1.2.3",
     "react-dropzone": "^4.2.10",
     "react-final-form": "^4.1.0",
-    "react-final-form-utils": "0.0.2",
+    "react-final-form-utils": "1.1.0",
     "react-hot-loader": "^3.1.3",
     "react-icons": "^2.2.7",
     "react-leaflet": "^1.9.1",
@@ -100,7 +100,7 @@
     "webpack-manifest-plugin": "1.3.2",
     "whatwg-fetch": "2.0.3",
     "with-login": "2.4.0",
-    "with-query-router": "2.7.0"
+    "with-query-router": "2.9.1"
   },
   "devDependencies": {
     "coveralls": "^3.0.0",

src/components/layout/form/TextField.js

@@ -29,8 +29,10 @@ export const TextField = ({
   renderInner,
   renderValue,
   required,
+  title,
   type,
   validate,
+  ...inputProps
 }) => {
   const requiredValidate =
     required && typeof required === 'function'
@@ -65,12 +67,14 @@ export const TextField = ({
               <div className="field-inner flex-columns items-center">
                 <input
                   {...input}
+                  {...inputProps}
                   autoComplete={autoComplete ? 'on' : 'off'}
                   className={`field-input field-${type}`}
                   disabled={disabled || readOnly}
                   placeholder={readOnly ? '' : placeholder}
                   readOnly={readOnly}
                   required={!!required} // cast to boolean
+                  title={title}
                   type={type}
                 />
                 {renderInner()}
@@ -96,6 +100,7 @@ TextField.defaultProps = {
   renderInner: () => null,
   renderValue: () => null,
   required: false,
+  title: null,
   type: 'text',
   validate: null,
 }
@@ -112,6 +117,7 @@ TextField.propTypes = {
   renderInner: PropTypes.func,
   renderValue: PropTypes.func,
   required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  title: PropTypes.string,
   type: PropTypes.string,
   validate: PropTypes.func,
 }

src/components/layout/form/index.js

@@ -4,5 +4,3 @@ export * from './HiddenField'
 export * from './NumberField'
 export * from './TextField'
 export * from './TimeField'
-
-export * from './selectTimeDecoratorFromTimeNameAndDateNameAndTz'

src/components/pages/Offer/RawOffer.js

@@ -1,7 +1,6 @@
 import get from 'lodash.get'
 import {
   CancelButton,
-  closeModal,
   Field,
   Form,
   Icon,
@@ -22,7 +21,6 @@ import HeroSection from 'components/layout/HeroSection'
 import Main from 'components/layout/Main'
 import { musicOptions, showOptions } from 'utils/edd'
 import { offerNormalizer } from 'utils/normalizers'
-import { translateQueryParamsToApiParams } from 'utils/translate'
 
 const CONDITIONAL_FIELDS = {
   speaker: [
@@ -76,7 +74,7 @@ class RawOffer extends Component {
     const { eventId, thingId } = offer || {}
 
     const isEdit = search.indexOf('modifie') > -1
-    const isNew = offerId === 'nouveau'
+    const isNew = offerId === 'creation'
     const isEventType = get(selectedOfferType, 'type') === 'Event' || eventId
     const isReadOnly = !isNew && !isEdit
 
@@ -105,11 +103,9 @@ class RawOffer extends Component {
       query,
       types,
     } = this.props
-    const { offererId, venueId } = translateQueryParamsToApiParams(
-      query.parse()
-    )
+    const { offererId, venueId } = query.translate()
 
-    if (offerId !== 'nouveau') {
+    if (offerId !== 'creation') {
       dispatch(
         requestData({
           apiPath: `/offers/${offerId}`,
@@ -177,56 +173,36 @@ class RawOffer extends Component {
     handleSuccess()
   }
 
-  handleSuccess = (state, action) => {
+  handleFormSuccess = (state, action) => {
+    const { query } = this.props
     const {
-      config: { method },
-      payload,
+      payload: { datum },
     } = action
-    const { history, offer, venue } = this.props
-    const eventOrThing = payload.datum
-
-    if (method === 'PATCH') {
-      history.push(`/offres/${offer.id}`)
-      return
-    }
-
-    if (method === 'POST') {
-      const { offers } = eventOrThing || {}
-      const offer = offers && offers.find(o => o.venueId === get(venue, 'id'))
-      if (!offer) {
-        console.warn(
-          'Something wrong with returned data, we should retrieve the created offer here'
-        )
-        return
-      }
-      history.push(`/offres/${offer.id}?gestion`)
-    }
+    const offerId = datum.offers[0].id
+    query.changeToReadOnly({ gestion: '' }, { id: offerId })
   }
 
-  handleOffererRedirect = () => {
-    const { history, offer, query } = this.props
-    const apiParams = translateQueryParamsToApiParams(query.parse())
+  handleVenueRedirect = () => {
+    const { offer, query } = this.props
+    const translatedQueryParams = query.translate()
     const venueId = get(offer, 'venueId')
-    if (venueId && !apiParams.venueId) {
-      history.push(`/offres/${offer.id}?lieu=${venueId}`)
+    if (venueId && !translatedQueryParams.venueId) {
+      query.change({ venueId })
       return
     }
   }
 
-  handleShowManagerModal = () => {
-    const {
-      hasEventOrThing,
-      dispatch,
-      location: { search },
-    } = this.props
-    search.indexOf('gestion') > -1
-      ? hasEventOrThing &&
-        dispatch(
-          showModal(<StocksManager />, {
-            isUnclosable: true,
-          })
-        )
-      : dispatch(closeModal())
+  handleShowStocksManager = () => {
+    const { dispatch, query } = this.props
+    const { gestion } = query.parse()
+    if (typeof gestion === 'undefined') {
+      return
+    }
+    dispatch(
+      showModal(<StocksManager />, {
+        isUnclosable: true,
+      })
+    )
   }
 
   setDefaultBookingEmailIfNew(prevProps) {
@@ -243,8 +219,8 @@ class RawOffer extends Component {
   }
 
   componentDidMount() {
-    this.handleOffererRedirect()
-    this.handleShowManagerModal()
+    this.handleVenueRedirect()
+    this.handleShowStocksManager()
     this.setDefaultBookingEmailIfNew()
   }
 
@@ -254,26 +230,17 @@ class RawOffer extends Component {
       eventOrThingPatch,
       formOffererId,
       formVenueId,
-      hasEventOrThing,
-      location: { pathname, search },
-      offer,
+      location,
       offerer,
       offerTypeError,
       selectedOfferType,
-      stocks,
       venue,
     } = this.props
+    const { search } = location
 
-    if (search.indexOf('gestion') > -1) {
-      if (
-        prevProps.offer !== offer ||
-        prevProps.stocks !== stocks ||
-        prevProps.location.pathname !== pathname ||
-        prevProps.location.search !== search ||
-        (hasEventOrThing && !prevProps.hasEventOrThing)
-      ) {
-        this.handleShowManagerModal()
-      }
+    if (prevProps.location.search !== search) {
+      this.handleShowStocksManager()
+      return
     }
 
     if (
@@ -333,18 +300,19 @@ class RawOffer extends Component {
       eventOrThingPatch,
       hasEventOrThing,
       location: { search },
+      musicSubOptions,
       offer,
       offerer,
       offerers,
+      query,
       stocks,
       thing,
       selectedOfferType,
+      showSubOptions,
       types,
+      url,
       venue,
       venues,
-      url,
-      musicSubOptions,
-      showSubOptions,
     } = this.props
     const { apiPath, isNew, isReadOnly, isEventType } = this.state
     const eventOrThingName = get(event, 'name') || get(thing, 'name')
@@ -394,7 +362,7 @@ class RawOffer extends Component {
           <Form
             action={apiPath}
             name="offer"
-            handleSuccess={this.handleSuccess}
+            handleSuccess={this.handleFormSuccess}
             patch={eventOrThingPatch}
             readOnly={isReadOnly}>
             <div className="field-group">
@@ -485,9 +453,12 @@ class RawOffer extends Component {
                           isEventType ? 'date' : 'stock'
                         )}
                       </span>
-                      <NavLink
+                      <button
                         className="button is-primary is-outlined is-small manage-stock"
-                        to={`/offres/${offerId}?gestion`}>
+                        onClick={event => {
+                          event.preventDefault()
+                          query.change({ gestion: '' })
+                        }}>
                         <span className="icon">
                           <Icon svg="ico-calendar" />
                         </span>
@@ -496,7 +467,7 @@ class RawOffer extends Component {
                             ? 'Gérer les dates et les stocks'
                             : 'Gérer les stocks'}
                         </span>
-                      </NavLink>
+                      </button>
                     </div>
                   </div>
                 </div>