feat(homePage): search location

data-for-change · Aug 16, 2023 · 0358e14 · 0358e14
1 parent 516b3d8
commit 0358e14
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 50 deletions.
diff --git a/src/components/molecules/Header.tsx b/src/components/molecules/Header.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@material-ui/core/styles';
@@ -12,9 +12,6 @@ import LanguageMenu from 'components/organisms/LanguageMenu';
 import { FEATURE_FLAGS } from 'utils/env.utils';
 import anywayLogo from 'assets/anyway.png';
 import { SignInIcon } from 'components/atoms/SignInIcon';
-import MapDialog from 'components/molecules/MapDialog';
-import { IPoint } from 'models/Point';
-import { useNavigate } from 'react-router-dom';
 
 const useStyles = makeStyles({
   userSection: {
@@ -30,39 +27,12 @@ const reloadHomePage = () => {
 };
 
 const Header: FC = () => {
-  const navigate = useNavigate();
   const { t } = useTranslation();
   const classes = useStyles();
   const store: RootStore = useStore();
-  const { userStore, settingsStore } = store;
-
-  const [open, setOpen] = useState(false);
+  const { userStore } = store;
 
   const isUserDetailsRequired: boolean = !userStore.userInfo?.meta.isCompleteRegistration;
-  const roadSegmentLocation = store.gpsLocationData;
-
-  const onLocationChange = useCallback(
-    (location: IPoint) => {
-      store.fetchGpsLocation(location);
-    },
-    [store],
-  );
-
-  const onLocationSearch = () => {
-    if (roadSegmentLocation) {
-      navigate(`${settingsStore.currentLanguageRouteString}/location/${roadSegmentLocation?.road_segment_id}`);
-      setOpen(false);
-      store.setGpsLocationData(null);
-    }
-  };
-
-  const onStreetAndCitySearch = (street?: string, city?: string) => {
-    // change to constant values until backend issues are fixed
-    console.log('city is', city);
-    console.log('street is', street);
-    navigate(`${settingsStore.currentLanguageRouteString}/cityAndStreet/${street}/${city}`);
-    setOpen(false);
-  };
 
   useEffect(() => {
     userStore.getUserLoginDetails();
@@ -99,21 +69,8 @@ const Header: FC = () => {
     <AppBar>
       <Logo src={logo} alt={'Anyway'} height={30} onClick={reloadHomePage} />
       <Box className={classes.userSection}>
-        <Button.Standard onClick={() => setOpen(true)}>{t('header.Search')}</Button.Standard>
         {authElement}
       </Box>
-      <MapDialog
-        open={open}
-        section={roadSegmentLocation?.road_segment_name}
-        roadNumber={roadSegmentLocation?.road1}
-        onLocationChange={onLocationChange}
-        onClose={() => {
-          setOpen(false);
-          store.setGpsLocationData(null);
-        }}
-        onSearch={onLocationSearch}
-        onStreetAndCitySearch={onStreetAndCitySearch}
-      />
     </AppBar>
   );
 };

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -1,13 +1,39 @@
-import React, { useState } from 'react';
-import { Box, makeStyles, Theme } from '@material-ui/core';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Box, Button, makeStyles, Theme, Typography } from '@material-ui/core';
 import { observer } from 'mobx-react-lite';
+import MapDialog from 'components/molecules/MapDialog';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { IPoint } from 'models/Point';
+import RootStore from 'store/root.store';
+import { useStore } from 'store/storeConfig';
 
 import StreetCard, { StreetCardProps } from 'components/StreetCard';
 import ResponsiveDrawer from 'components/molecules/infoDrawer/Drawer';
 import SectionInfo from 'components/molecules/sectionInfo';
 
+enum LocationType {
+  cityAndStreet,
+  sagment
+}
+
+type Location = {
+  type: LocationType,
+  location: string,
+  id?: string
+}
+
 const HomePage = () => {
   const classes = useStyles();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const store: RootStore = useStore();
+
+  const { settingsStore } = store;
+
+  const [open, setOpen] = useState(false);
+
+  const [currentLocation, setCurrentLocation] = useState<Location>({ type: LocationType.cityAndStreet, location: 'תל אביב, אלנבי' })
 
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [selectedSection, setSelectedSection] = useState({});
@@ -16,7 +42,6 @@ const HomePage = () => {
     setIsDrawerOpen(!isDrawerOpen);
   };
 
-
   const [cards, setCards] = useState<StreetCardProps[]>([
     { streetName: 'בוגרשוב', city: 'תל אביב', handleClick: handleDrawerToggle },
     { streetName: 'בוגרשוב', city: 'תל אביב', handleClick: handleDrawerToggle },
@@ -29,15 +54,58 @@ const HomePage = () => {
     { streetName: 'בוגרשוב', city: 'תל אביב', handleClick: handleDrawerToggle },
   ]);
 
+  const roadSegmentLocation = store.gpsLocationData;
+
+  const onLocationChange = useCallback(
+    (location: IPoint) => {
+      store.fetchGpsLocation(location);
+    },
+    [store],
+  );
+
+  const onLocationSearch = () => {
+    if (roadSegmentLocation) {
+      //navigate(`${settingsStore.currentLanguageRouteString}/location/${roadSegmentLocation?.road_segment_id}`);
+      setCurrentLocation({ type: LocationType.sagment, location: roadSegmentLocation.road_segment_name, id: roadSegmentLocation.road_segment_id.toString() })
+      setOpen(false);
+      store.setGpsLocationData(null);
+    }
+  };
+
+  const onStreetAndCitySearch = (street?: string, city?: string) => {
+    // change to constant values until backend issues are fixed
+    console.log('city is', city);
+    console.log('street is', street);
+    //navigate(`${settingsStore.currentLanguageRouteString}/cityAndStreet/${street}/${city}`);
+    setCurrentLocation({ type: LocationType.cityAndStreet, location: `${street}, ${city}` })
+    setOpen(false);
+  };
+
   return (
     <Box className={classes.container}>
       <Box className={classes.columnContainer}>
-        {cards.map((streetData, index) => (
+        <Typography>
+          {currentLocation.location} - <Button onClick={() => setOpen(true)}>שינוי כתובת</Button>
+        </Typography>
+        {cards.map((streetData: StreetCardProps, index: number) => (
           <StreetCard key={index} {...streetData} />
         ))}
+
+        <MapDialog
+          open={open}
+          section={roadSegmentLocation?.road_segment_name}
+          roadNumber={roadSegmentLocation?.road1}
+          onLocationChange={onLocationChange}
+          onClose={() => {
+            setOpen(false);
+            store.setGpsLocationData(null);
+          }}
+          onSearch={onLocationSearch}
+          onStreetAndCitySearch={onStreetAndCitySearch}
+        />
       </Box>
       <Box className={classes.columnContainer}>
-          <SectionInfo section={selectedSection}/>
+        <SectionInfo section={selectedSection} />
       </Box>
       {/* <ResponsiveDrawer isDrawerOpen={isDrawerOpen}>