feat(home-page): add location search

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.14.7",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -32,7 +33,8 @@
     "react-i18next": "^11.11.1",
     "react-leaflet": "3.1.0",
     "react-leaflet-google-layer": "^2.0.4",
-    "react-router-dom": "^6.0.2",
+    "react-router-dom": "^6.15.0",
+    "react-scripts": "^5.0.1",
     "react-share": "^4.4.0",
     "recharts": "^2.0.9",
     "tinycolor2": "^1.4.2",
@@ -97,8 +99,8 @@
     "@storybook/addon-essentials": "^6.3.2",
     "@storybook/addon-links": "^6.3.2",
     "@storybook/node-logger": "^6.3.2",
-    "@storybook/preset-create-react-app": "^7.3.0",
-    "@storybook/react": "^6.3.2",
+    "@storybook/preset-create-react-app": "^1.2.0",
+    "@storybook/react": "^7.3.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.1.9",

src/App.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 import { useTheme } from '@material-ui/core/styles';
 import PopUpRedirect from './components/atoms/PopUpRedirect';
 import WidgetsTemplate from './components/organisms/WidgetsTemplate';
+import MapDialog from 'components/molecules/MapDialog';
 // main components height - must add up to 100
 
 const headerHeight = '6vh';

src/components/StreetCard.tsx

@@ -85,3 +85,5 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
 }));
+
+        <Typography variant="h1" component="div" style={{ fontWeight: 'bold' }} />

src/components/atoms/AppBar.tsx

@@ -19,7 +19,11 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-const AppBar: FC = ({ children }) => {
+interface AppBarProps {
+  children: React.ReactNode;
+}
+
+const AppBar: FC<AppBarProps> = ({ children }) => {
   const classes = useStyles();
 
   return <MatAppBar className={classes.root}>{children}</MatAppBar>;

src/components/atoms/Dialog.tsx

@@ -6,6 +6,7 @@ interface IProps {
   onClose: () => any;
   fullWidth?: boolean;
   maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+  children: React.ReactNode;
 }
 
 const Dialog: FC<IProps> = ({ isShowing, onClose, children, fullWidth, maxWidth }) => {

src/components/molecules/Header.tsx

@@ -14,7 +14,6 @@ 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 +29,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 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 +71,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>
   );
 };

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}>