feat(home-page): add location search

package.json

@@ -32,7 +32,7 @@
     "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-share": "^4.4.0",
     "recharts": "^2.0.9",
     "tinycolor2": "^1.4.2",
@@ -97,8 +97,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

@@ -88,6 +88,7 @@ const StreetCard: React.FC<StreetCardProps> = ({ streetName, city }) => {
         <CardIcon className={classes.cardIconButton} Icon={ErrorRounded} ariaLabel="report" />
         <CardIcon className={classes.cardIconButton} Icon={Chat} ariaLabel="comments" />
       </Box>
+        <Typography variant="h1" component="div" style={{ fontWeight: 'bold' }} />
     </Card>
   );
 };

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,7 +1,13 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import StreetCard, { StreetCardProps } from 'components/StreetCard';
-import { Box, makeStyles, Theme } from '@material-ui/core';
+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';
 
 const useStyles = makeStyles((theme: Theme) => ({
   container: {
@@ -13,6 +19,15 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 function 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<string>('תל אביב, אלנבי')
 
   const [cards, setCards] = useState<StreetCardProps[]>([
     { streetName: 'בוגרשוב', city: 'תל אביב' },
@@ -29,11 +44,55 @@ function HomePage() {
     { streetName: 'בוגרשוב', city: 'תל אביב' },
   ]);
 
+  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(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(`${street},${city}`)
+    setOpen(false);
+  };
+
+
   return (
     <Box className={classes.container}>
-      {cards.map((streetData, index) => (
+      <Typography variant="h1" component="div" style={{ fontWeight: 'bold', margin: '5px', width: "100%" }}>
+        {currentLocation} - <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>
   );
 }