From 880df2c2acec76257274b51f9f668add4c3e62b6 Mon Sep 17 00:00:00 2001 From: evgeniywas Date: Thu, 12 Oct 2023 08:20:13 +0100 Subject: [PATCH] RC-13: create search and buy page --- src/app/configs/routesConfig.js | 3 +- src/app/main/home/components/AboutUs.js | 2 +- src/app/main/home/components/Welcome.js | 9 ++++- src/app/main/rentAndBuy/RentAndBuy.js | 16 ++++++++ src/app/main/rentAndBuy/RentAndBuyConfig.js | 38 +++++++++++++++++++ .../PropertyPreview/PropertyPreview.js | 32 ++++++++++++++++ .../components/SearchAddress/SearchAddress.js | 18 +++++++++ src/app/main/rentAndBuy/i18n/en.js | 8 ++++ .../PropertyAnalysisHeader.js | 11 ++++++ .../layout2/components/NavLinks.js | 2 +- 10 files changed, 135 insertions(+), 4 deletions(-) create mode 100644 src/app/main/rentAndBuy/RentAndBuy.js create mode 100644 src/app/main/rentAndBuy/RentAndBuyConfig.js create mode 100644 src/app/main/rentAndBuy/components/PropertyPreview/PropertyPreview.js create mode 100644 src/app/main/rentAndBuy/components/SearchAddress/SearchAddress.js create mode 100644 src/app/main/rentAndBuy/i18n/en.js create mode 100644 src/app/main/shared-components/PropertyAnalysisHeader.js diff --git a/src/app/configs/routesConfig.js b/src/app/configs/routesConfig.js index 1b110ba..523924a 100644 --- a/src/app/configs/routesConfig.js +++ b/src/app/configs/routesConfig.js @@ -6,8 +6,9 @@ import Error404Page from '../main/404/Error404Page'; import navigationPagesConfigs from '../main/navigationPages/navigationPagesConfig'; import authPagesConfigs from '../main/authPages/authPagesConfigs'; import HomeConfig from '../main/home/HomeConfig'; +import RentAndBuyConfig from '../main/rentAndBuy/RentAndBuyConfig'; -const routeConfigs = [...navigationPagesConfigs, ...authPagesConfigs, HomeConfig]; +const routeConfigs = [...navigationPagesConfigs, ...authPagesConfigs, HomeConfig, RentAndBuyConfig]; const routes = [ ...FuseUtils.generateRoutesFromConfigs(routeConfigs, settingsConfig.defaultAuth), diff --git a/src/app/main/home/components/AboutUs.js b/src/app/main/home/components/AboutUs.js index 42ade72..19ed624 100644 --- a/src/app/main/home/components/AboutUs.js +++ b/src/app/main/home/components/AboutUs.js @@ -26,7 +26,7 @@ function AboutUs({ t }) { {t('research_btn')} diff --git a/src/app/main/home/components/Welcome.js b/src/app/main/home/components/Welcome.js index 1275c4f..e0167b3 100644 --- a/src/app/main/home/components/Welcome.js +++ b/src/app/main/home/components/Welcome.js @@ -1,9 +1,11 @@ import { memo, useState } from 'react'; import { withTranslation } from 'react-i18next'; +import { useNavigate } from 'react-router-dom'; import SearchInput from '../../shared-components/SearchInput'; function Welcome({ t }) { const [query, setQuery] = useState(''); + const navigate = useNavigate(); const onInputType = (event) => { const { target } = event; @@ -12,7 +14,12 @@ function Welcome({ t }) { }; const onSearch = () => { - // query + const trimmedQuery = query.trim(); + if (!trimmedQuery) { + return; + } + + navigate(`/rent-and-buy/search?query=${trimmedQuery}`); }; return ( diff --git a/src/app/main/rentAndBuy/RentAndBuy.js b/src/app/main/rentAndBuy/RentAndBuy.js new file mode 100644 index 0000000..df9c796 --- /dev/null +++ b/src/app/main/rentAndBuy/RentAndBuy.js @@ -0,0 +1,16 @@ +import Typography from '@mui/material/Typography'; +import { withTranslation } from 'react-i18next'; +import { Outlet } from 'react-router-dom'; + +function RentAndBuy({ t }) { + return ( +
+ + {t('title')} + + +
+ ); +} + +export default withTranslation('rentAndBuyPage')(RentAndBuy); diff --git a/src/app/main/rentAndBuy/RentAndBuyConfig.js b/src/app/main/rentAndBuy/RentAndBuyConfig.js new file mode 100644 index 0000000..ba3efbb --- /dev/null +++ b/src/app/main/rentAndBuy/RentAndBuyConfig.js @@ -0,0 +1,38 @@ +import { lazy } from 'react'; +import i18next from 'i18next'; + +import RentAndBuy from './RentAndBuy'; +import en from './i18n/en'; + +i18next.addResourceBundle('en', 'rentAndBuyPage', en); + +const SearchAddress = lazy(() => import('./components/SearchAddress/SearchAddress')); +const PropertyPreview = lazy(() => import('./components/PropertyPreview/PropertyPreview')); + +const RentAndBuyConfig = { + settings: { + layout: { + config: {}, + style: 'layout2', + }, + }, + auth: null, + routes: [ + { + path: '/rent-and-buy', + element: , + children: [ + { + path: 'search', + element: , + }, + { + path: 'preview', + element: , + }, + ], + }, + ], +}; + +export default RentAndBuyConfig; diff --git a/src/app/main/rentAndBuy/components/PropertyPreview/PropertyPreview.js b/src/app/main/rentAndBuy/components/PropertyPreview/PropertyPreview.js new file mode 100644 index 0000000..3feef5c --- /dev/null +++ b/src/app/main/rentAndBuy/components/PropertyPreview/PropertyPreview.js @@ -0,0 +1,32 @@ +import Button from '@mui/material/Button'; +import { useState } from 'react'; +import { withTranslation } from 'react-i18next'; +import RegistrationPopup from 'src/app/main/shared-components/popups/RegistrationPopup'; + +function PropertyPreview({ t }) { + const [isPopupOpen, setIsPopupOpen] = useState(false); + + const openPopup = () => setIsPopupOpen(true); + const closePopup = () => setIsPopupOpen(false); + + return ( + <> +
+ +
+ + + ); +} + +export default withTranslation('rentAndBuyPage')(PropertyPreview); diff --git a/src/app/main/rentAndBuy/components/SearchAddress/SearchAddress.js b/src/app/main/rentAndBuy/components/SearchAddress/SearchAddress.js new file mode 100644 index 0000000..deab1ff --- /dev/null +++ b/src/app/main/rentAndBuy/components/SearchAddress/SearchAddress.js @@ -0,0 +1,18 @@ +import { withTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; + +function SearchAddress({ t }) { + return ( +
+ How are you? + + {t('show_btn')} + +
+ ); +} + +export default withTranslation('rentAndBuyPage')(SearchAddress); diff --git a/src/app/main/rentAndBuy/i18n/en.js b/src/app/main/rentAndBuy/i18n/en.js new file mode 100644 index 0000000..b0eb919 --- /dev/null +++ b/src/app/main/rentAndBuy/i18n/en.js @@ -0,0 +1,8 @@ +const locale = { + title: 'Rent&Buy Analysis', + show_btn: 'show', + see_more_btn: 'See more', + view: 'View the Calculation', +}; + +export default locale; diff --git a/src/app/main/shared-components/PropertyAnalysisHeader.js b/src/app/main/shared-components/PropertyAnalysisHeader.js new file mode 100644 index 0000000..4549d7f --- /dev/null +++ b/src/app/main/shared-components/PropertyAnalysisHeader.js @@ -0,0 +1,11 @@ +import Paper from '@mui/material/Paper'; + +function PropertyAnalysisHeader() { + return ( + +
+ + ); +} + +export default PropertyAnalysisHeader; diff --git a/src/app/theme-layouts/layout2/components/NavLinks.js b/src/app/theme-layouts/layout2/components/NavLinks.js index 13a3266..4804eb7 100644 --- a/src/app/theme-layouts/layout2/components/NavLinks.js +++ b/src/app/theme-layouts/layout2/components/NavLinks.js @@ -7,7 +7,7 @@ function NavLinks({ className }) { return ( <> - + {t('rent_and_buy')}