Fix: rental dates not working properly in frontend and mobile app

Author: aelassas

frontend/src/components/DatePicker.tsx

@@ -41,7 +41,7 @@ const DatePicker = ({
   useEffect(() => {
     if (minDateValue) {
       const _minDate = new Date(minDateValue)
-      _minDate.setHours(10, 0, 0, 0)
+      _minDate.setHours(12, 0, 0, 0)
       setMinDate(_minDate)
     } else {
       setMinDate(undefined)
@@ -58,7 +58,7 @@ const DatePicker = ({
         onChange={(_value) => {
           if (_value) {
             const date = _value as Date
-            date.setHours(10, 0, 0, 0)
+            date.setHours(12, 0, 0, 0)
           }
           setValue(_value)
 

frontend/src/components/PropertyFilter.tsx

@@ -34,7 +34,6 @@ const PropertyFilter = ({
   const [from, setFrom] = useState<Date | undefined>(filterFrom)
   const [to, setTo] = useState<Date | undefined>(filterTo)
   const [minDate, setMinDate] = useState<Date>()
-  const [maxDate, setMaxDate] = useState<Date>()
   const [location, setLocation] = useState<movininTypes.Location | null | undefined>(filterLocation)
   const [fromError, setFromError] = useState(false)
   const [toError, setToError] = useState(false)
@@ -47,14 +46,6 @@ const PropertyFilter = ({
     }
   }, [filterFrom])
 
-  useEffect(() => {
-    if (filterTo) {
-      const __maxDate = new Date(filterTo)
-      __maxDate.setDate(__maxDate.getDate() - 1)
-      setMaxDate(__maxDate)
-    }
-  }, [filterTo])
-
   const handleLocationChange = (values: movininTypes.Option[]) => {
     const _location = (values.length > 0 && values[0]) || null
 
@@ -99,7 +90,6 @@ const PropertyFilter = ({
             label={commonStrings.FROM}
             value={from}
             minDate={_minDate}
-            maxDate={maxDate}
             variant="standard"
             required
             onChange={(date) => {
@@ -109,6 +99,10 @@ const PropertyFilter = ({
                 setFrom(date)
                 setMinDate(__minDate)
                 setFromError(false)
+
+                if (to && (to.getTime() - date.getTime() < 24 * 60 * 60 * 1000)) {
+                  setTo(undefined)
+                }
               } else {
                 setFrom(undefined)
                 setMinDate(_minDate)
@@ -133,14 +127,10 @@ const PropertyFilter = ({
             required
             onChange={(date) => {
               if (date) {
-                const _maxDate = new Date(date)
-                _maxDate.setDate(_maxDate.getDate() - 1)
                 setTo(date)
-                setMaxDate(_maxDate)
                 setToError(false)
               } else {
                 setTo(undefined)
-                setMaxDate(undefined)
               }
             }}
             onError={(err: DateTimeValidationError) => {

frontend/src/components/SearchForm.tsx

@@ -33,7 +33,6 @@ const SearchForm = (
   const [from, setFrom] = useState<Date>()
   const [to, setTo] = useState<Date>()
   const [minDate, setMinDate] = useState<Date>(_minDate)
-  const [maxDate, setMaxDate] = useState<Date>()
   const [fromError, setFromError] = useState(false)
   const [toError, setToError] = useState(false)
 
@@ -94,7 +93,6 @@ const SearchForm = (
           label={commonStrings.FROM}
           value={from}
           minDate={_minDate}
-          maxDate={maxDate}
           variant="outlined"
           required
           onChange={(date) => {
@@ -104,6 +102,10 @@ const SearchForm = (
               setFrom(date)
               setMinDate(__minDate)
               setFromError(false)
+
+              if (to && (to.getTime() - date.getTime() < 24 * 60 * 60 * 1000)) {
+                setTo(undefined)
+              }
             } else {
               setFrom(undefined)
               setMinDate(_minDate)
@@ -128,14 +130,10 @@ const SearchForm = (
           required
           onChange={(date) => {
             if (date) {
-              const _maxDate = new Date(date)
-              _maxDate.setDate(_maxDate.getDate() - 1)
               setTo(date)
-              setMaxDate(_maxDate)
               setToError(false)
             } else {
               setTo(undefined)
-              setMaxDate(undefined)
             }
           }}
           onError={(err: DateTimeValidationError) => {

mobile/screens/HomeScreen.tsx

@@ -32,7 +32,6 @@ const HomeScreen = ({ navigation, route }: NativeStackScreenProps<StackParams, '
   const [from, setFrom] = useState<Date>()
   const [to, setTo] = useState<Date>()
   const [minDate, setMinDate] = useState(_minDate)
-  const [maxDate, setMaxDate] = useState<Date>()
   const [language, setLanguage] = useState(env.DEFAULT_LANGUAGE)
   const [blur, setBlur] = useState(false)
   const [reload, setReload] = useState(false)
@@ -151,12 +150,11 @@ const HomeScreen = ({ navigation, route }: NativeStackScreenProps<StackParams, '
               label={i18n.t('FROM_DATE')}
               value={from}
               minDate={_minDate}
-              maxDate={maxDate}
               onChange={(date: Date | undefined) => {
                 if (date) {
                   date.setHours(12, 0, 0, 0)
 
-                  if (to && to.getTime() <= date.getTime()) {
+                  if (to && ((to.getTime() <= date.getTime()) || (date.getTime() > to.getTime()))) {
                     setTo(undefined)
                   }
 
@@ -182,12 +180,8 @@ const HomeScreen = ({ navigation, route }: NativeStackScreenProps<StackParams, '
                 if (date) {
                   date.setHours(12, 0, 0, 0)
                   setTo(date)
-                  const _maxDate = new Date(date)
-                  _maxDate.setDate(_maxDate.getDate() - 1)
-                  setMaxDate(_maxDate)
                 } else {
                   setTo(undefined)
-                  setMaxDate(undefined)
                 }
               }}
               onPress={blurLocations}