Update home and checkout pages

aelassas · Apr 3, 2024 · c1dbb14 · c1dbb14
1 parent 09dcb5d
commit c1dbb14
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 61 deletions.
diff --git a/frontend/src/components/PropertyList.tsx b/frontend/src/components/PropertyList.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import {
   Card,
   CardContent,
@@ -53,6 +54,8 @@ const PropertyList = ({
   hideActions,
   onLoad,
 }: PropertyListProps) => {
+  const navigate = useNavigate()
+
   const [init, setInit] = useState(true)
   const [loading, setLoading] = useState(false)
   const [fetch, setFetch] = useState(false)
@@ -237,20 +240,35 @@ const PropertyList = ({
                     && (
                       <div className="action">
                         <Button
-                          type="submit"
                           variant="contained"
                           className="btn-action btn-margin-bottom"
-                          href={`/property?p=${property._id}${(from && `&f=${from?.getTime()}`) || ''}${(to && `&t=${to?.getTime()}`) || ''}`}
+                          onClick={() => {
+                            navigate('/property', {
+                              state: {
+                                propertyId: property._id,
+                                from,
+                                to
+                              }
+                            })
+                          }}
                         >
                           {strings.VIEW}
                         </Button>
                         {
                           !hidePrice && (
                             <Button
-                              type="submit"
                               variant="contained"
                               className="btn-action btn-margin-bottom"
-                              href={`/checkout?p=${property._id}&l=${location}&f=${(from as Date).getTime()}&t=${(to as Date).getTime()}`}
+                              onClick={() => {
+                                navigate('/checkout', {
+                                  state: {
+                                    propertyId: property._id,
+                                    locationId: location,
+                                    from,
+                                    to
+                                  }
+                                })
+                              }}
                             >
                               {strings.BOOK}
                             </Button>

diff --git a/frontend/src/pages/Checkout.tsx b/frontend/src/pages/Checkout.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useLocation } from 'react-router-dom'
 import {
   OutlinedInput, InputLabel,
   FormControl,
@@ -44,6 +45,8 @@ import SecurePayment from '../assets/img/secure-payment.png'
 import '../assets/css/checkout.css'
 
 const Checkout = () => {
+  const reactLocation = useLocation()
+
   const [user, setUser] = useState<movininTypes.User>()
   const [property, setProperty] = useState<movininTypes.Property>()
   const [location, setLocation] = useState<movininTypes.Location>()
@@ -448,34 +451,24 @@ const Checkout = () => {
     setAuthenticated(_user !== undefined)
     setLanguage(UserService.getLanguage())
 
-    let propertyId: string | null = null
-    let _property: movininTypes.Property | null = null
-    let locationId: string | null = null
-    let _location: movininTypes.Location | null = null
-    let _from: Date | null = null
-    let _to: Date | null = null
-    const params = new URLSearchParams(window.location.search)
-
-    if (params.has('p')) {
-      propertyId = params.get('p')
-    }
-    if (params.has('l')) {
-      locationId = params.get('l')
-    }
-    if (params.has('f')) {
-      const val = params.get('f')
-      _from = val && movininHelper.isInteger(val) ? new Date(Number.parseInt(val, 10)) : null
-    }
-    if (params.has('t')) {
-      const val = params.get('t')
-      _to = val && movininHelper.isInteger(val) ? new Date(Number.parseInt(val, 10)) : null
+    const { state } = reactLocation
+    if (!state) {
+      setNoMatch(true)
+      return
     }
 
+    const { propertyId } = state
+    const { locationId } = state
+    const { from: _from } = state
+    const { to: _to } = state
+
     if (!propertyId || !locationId || !_from || !_to) {
       setNoMatch(true)
       return
     }
 
+    let _property: movininTypes.Property | null = null
+    let _location: movininTypes.Location | null = null
     try {
       _property = await PropertyService.getProperty(propertyId)
       if (!_property) {

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -43,7 +43,13 @@ const Home = () => {
       return
     }
 
-    navigate(`/properties?l=${location}&f=${from.getTime()}&t=${to.getTime()}`)
+    navigate('/properties', {
+      state: {
+        locationId: location,
+        from,
+        to
+      }
+    })
   }
 
   const onLoad = () => { }

diff --git a/frontend/src/pages/Properties.tsx b/frontend/src/pages/Properties.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useLocation } from 'react-router-dom'
 import * as movininTypes from 'movinin-types'
 import * as movininHelper from 'movinin-helper'
 import env from '../config/env.config'
@@ -16,6 +17,8 @@ import PropertyTypeFilter from '../components/PropertyTypeFilter'
 import '../assets/css/properties.css'
 
 const Properties = () => {
+  const reactLocation = useLocation()
+
   const [visible, setVisible] = useState(false)
   const [noMatch, setNoMatch] = useState(false)
   const [location, setLocation] = useState<movininTypes.Location>()
@@ -46,30 +49,22 @@ const Properties = () => {
   }
 
   const onLoad = async (user?: movininTypes.User) => {
-    let locationId: string | null = null
-    let _location: movininTypes.Location | null = null
-    let _from: Date | null = null
-    let _to: Date | null = null
-
-    const params = new URLSearchParams(window.location.search)
-    if (params.has('l')) {
-      locationId = params.get('l')
-    }
-    if (params.has('f')) {
-      const val = params.get('f')
-      _from = val && movininHelper.isInteger(val) ? new Date(Number.parseInt(val, 10)) : null
-    }
-    if (params.has('t')) {
-      const val = params.get('t')
-      _to = val && movininHelper.isInteger(val) ? new Date(Number.parseInt(val, 10)) : null
+    const { state } = reactLocation
+    if (!state) {
+      setNoMatch(true)
+      return
     }
+    const { locationId } = state
+    const { from: _from } = state
+    const { to: _to } = state
 
     if (!locationId || !_from || !_to) {
       setLoading(false)
       setNoMatch(true)
       return
     }
 
+    let _location: movininTypes.Location | null = null
     try {
       _location = await LocationService.getLocation(locationId)
 

diff --git a/frontend/src/pages/Property.tsx b/frontend/src/pages/Property.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
 import {
   Button,
   FormControl,
 } from '@mui/material'
-import { useNavigate } from 'react-router-dom'
 import * as movininTypes from 'movinin-types'
 import * as movininHelper from 'movinin-helper'
 import Backdrop from '../components/SimpleBackdrop'
@@ -24,6 +24,7 @@ import '../assets/css/property.css'
 
 const Property = () => {
   const navigate = useNavigate()
+  const location = useLocation()
 
   const _minDate = new Date()
   _minDate.setDate(_minDate.getDate() + 1)
@@ -53,23 +54,14 @@ const Property = () => {
   }, [property])
 
   const onLoad = async () => {
-    let propertyId: string | null = null
-    let _from: Date | null = null
-    let _to: Date | null = null
-    const params = new URLSearchParams(window.location.search)
-
-    if (params.has('p')) {
-      propertyId = params.get('p')
-    }
-
-    if (params.has('f')) {
-      const val = params.get('f')
-      _from = val && movininHelper.isInteger(val) ? new Date(Number.parseInt(val, 10)) : null
-    }
-    if (params.has('t')) {
-      const val = params.get('t')
-      _to = val && movininHelper.isInteger(val) ? new Date(Number.parseInt(val, 10)) : null
+    const { state } = location
+    if (!state) {
+      setNoMatch(true)
+      return
     }
+    const { propertyId } = state
+    const { from: _from } = state
+    const { to: _to } = state
 
     if (!propertyId) {
       setNoMatch(true)
@@ -168,8 +160,15 @@ const Property = () => {
                       className="action"
                       onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
                         e.preventDefault()
-                        const url = `/checkout?p=${property._id}&l=${property.location._id}&f=${from?.getTime()}&t=${to?.getTime()}`
-                        navigate(url)
+
+                        navigate('/checkout', {
+                          state: {
+                            propertyId: property._id,
+                            locationId: property.location._id,
+                            from,
+                            to
+                          }
+                        })
                       }}
                     >
                       <FormControl className="from">