Merge branch 'develop' into feature/successNotifications

src/App.tsx

@@ -1,18 +1,10 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, {useEffect} from 'react';
+import React from 'react';
 import {Provider} from 'react-redux';
-import {useTranslation} from 'react-i18next';
 
 import store from './redux/store';
 import Theme from './Theme';
 
 const App = () => {
-    const {i18n} = useTranslation();
-
-    useEffect(() => {
-        i18n.changeLanguage(navigator.language);
-    }, []);
-
     return (
         <Provider store={store}>
             <Theme />

src/Routes/Routes.tsx

@@ -23,7 +23,6 @@ import RecoveryPassword from '../pages/Auth/RecoveryPassword';
 import Plan from '../pages/Plan';
 import CheckEmail from '../pages/Auth/CheckEmail';
 import Main from '../pages/Main';
-import PlanLayout from '../layouts/PlanLayout';
 import Profile from '../pages/Profile/Profile';
 import ProtectedRoute from '../components/routes/ProtectedRoute';
 
@@ -93,9 +92,7 @@ const Routes: React.FC = () => {
                 </Route>
                 <Route path="/" element={<MainLayout />}>
                     <Route path={'/'} element={<Main />} />
-                    <Route path={PLAN_PATH} element={<PlanLayout />}>
-                        <Route path={PLAN_PATH} element={<Plan />} />
-                    </Route>
+                    <Route path={PLAN_PATH} element={<Plan />} />
                 </Route>
             </RootRoutes>
         </Router>

src/components/Map/Map.tsx

@@ -1,20 +1,15 @@
 import React, {useCallback, useEffect, useState} from 'react';
-import {GoogleMap, useJsApiLoader, Marker} from '@react-google-maps/api';
+import {GoogleMap, Marker} from '@react-google-maps/api';
 import {useSelector} from 'react-redux';
 
 import {selectUserCoords} from '../../redux/common/selectors';
 import {useAppDispatch} from '../../redux/store';
 import {setUserCoords} from '../../redux/common/commonSlice';
-import {containerStyle, libraries} from './constants';
+import {containerStyle} from './constants';
 
 import {MapWrap} from './Styles';
 
 const Map = () => {
-    const {isLoaded} = useJsApiLoader({
-        googleMapsApiKey: process.env.REACT_APP_GOOGLE_API_KEY || '',
-        libraries,
-    });
-
     const [markersData, setMarkersData] = useState<google.maps.places.PlaceResult[]>([]);
 
     const coords = useSelector(selectUserCoords);
@@ -63,34 +58,32 @@ const Map = () => {
 
     return (
         <MapWrap>
-            {isLoaded ? (
-                <GoogleMap
-                    mapContainerStyle={containerStyle}
-                    center={coords}
-                    zoom={10}
-                    onLoad={onLoad}
-                    clickableIcons={false}
-                    options={{
-                        scrollwheel: true,
-                        streetViewControl: false,
-                        zoomControl: false,
-                        mapTypeControlOptions: {
-                            position: 7.0,
-                            style: 2.0,
-                        },
-                    }}>
-                    {markersData.map((item, index) => (
-                        <Marker
-                            key={index}
-                            position={{
-                                lat: item.geometry?.location?.lat() || 0,
-                                lng: item.geometry?.location?.lng() || 0,
-                            }}
-                        />
-                    ))}
-                    <Marker position={coords} />
-                </GoogleMap>
-            ) : null}
+            <GoogleMap
+                mapContainerStyle={containerStyle}
+                center={coords}
+                zoom={10}
+                onLoad={onLoad}
+                clickableIcons={false}
+                options={{
+                    scrollwheel: true,
+                    streetViewControl: false,
+                    zoomControl: false,
+                    mapTypeControlOptions: {
+                        position: 7.0,
+                        style: 2.0,
+                    },
+                }}>
+                {markersData.map((item, index) => (
+                    <Marker
+                        key={index}
+                        position={{
+                            lat: item.geometry?.location?.lat() || 0,
+                            lng: item.geometry?.location?.lng() || 0,
+                        }}
+                    />
+                ))}
+                <Marker position={coords} />
+            </GoogleMap>
         </MapWrap>
     );
 };

src/components/Map/constants.ts

@@ -2,9 +2,3 @@ export const containerStyle = {
     width: '100%',
     height: '100%',
 };
-
-export const libraries: ('drawing' | 'geometry' | 'places' | 'localContext' | 'visualization')[] = [
-    'drawing',
-    'geometry',
-    'places',
-];

src/components/common/Navigation/Navigation.tsx

@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import {useSelector} from 'react-redux';
 import {useNavigate} from 'react-router-dom';
 import {Grid, IconButton} from '@mui/material';
+import {changeLanguage} from 'i18next';
 
 import {ReactComponent as ProfileIcon} from '../../../assets/icons/profile.svg';
 import {ReactComponent as LogoIcon} from '../../../assets/icons/logo.svg';
@@ -24,6 +25,7 @@ const Navigation = () => {
     const navigate = useNavigate();
     const dispatch = useAppDispatch();
     const user = useSelector(selectUser);
+
     const handleRedirect = (path: string) => {
         navigate(path);
     };
@@ -40,8 +42,12 @@ const Navigation = () => {
         setAnchorEl(null);
     };
 
-    const handleLanguage = () => {
-        dispatch(changeUserLanguage(user.language));
+    const handleLanguage = (value: string) => {
+        if (value === user.language) return;
+
+        dispatch(changeUserLanguage(value)).then((res) => {
+            res.meta.requestStatus === 'fulfilled' && changeLanguage(res.payload as string);
+        });
     };
 
     return (
@@ -59,7 +65,7 @@ const Navigation = () => {
                             {isEditing && (
                                 <Select
                                     defaultValue={user.language}
-                                    onChange={handleLanguage}
+                                    parentOnChange={(value) => handleLanguage(value)}
                                     name="language"
                                     options={[
                                         {id: 'en', displayName: 'English'},

src/components/common/form/GoogleAutocompleteControl.tsx

@@ -16,9 +16,7 @@ const GoogleAutocompleteControl = <T extends FieldValues>({
     control,
     name,
 }: IGoogleAutocompleteProps<T> & TextFieldProps) => {
-    const {placesService, placePredictions, getPlacePredictions} = usePlacesService({
-        apiKey: process.env.REACT_APP_GOOGLE_API_KEY || '',
-    });
+    const {placesService, placePredictions, getPlacePredictions} = usePlacesService({});
 
     const [options, setOptions] = useState<google.maps.GeocoderAddressComponent[]>([]);
 

src/components/common/form/SelectControl.tsx

@@ -25,18 +25,7 @@ export const SelectControl: React.FC<IProps> = ({control, name, options, label,
         helperText: <ErrorMessage errors={errors} name={name} render={({message}) => message} />,
     };
 
-    return (
-        <Select
-            field={field}
-            onChange={field.onChange}
-            value={field.value}
-            name={name}
-            options={options}
-            label={label}
-            {...restProps}
-            {...errorProps}
-        />
-    );
+    return <Select field={field} name={name} options={options} label={label} {...restProps} {...errorProps} />;
 };
 
 export default SelectControl;

src/components/common/inputs/Select.tsx

@@ -9,7 +9,7 @@ interface IProps {
     options: {id: string; displayName: string}[];
     label?: string;
     value?: string;
-    onChange: (value: string) => void;
+    parentOnChange?: (value: string) => void;
     defaultValue?: string;
 }
 
@@ -20,16 +20,16 @@ const Select: React.FC<IProps & SelectProps> = ({
     defaultValue = '',
     label,
     value,
-    onChange,
+    parentOnChange,
     ...textFieldProps
 }) => {
-    const [selectedValue, setSelectedValue] = useState(defaultValue);
+    const [selectedValue, setSelectedValue] = useState('');
 
     const handleChange = useCallback(
-        (e: SelectChangeEvent<unknown>) => {
-            const value = e.target.value as string;
-            if (onChange) {
-                onChange(value);
+        (e: SelectChangeEvent<string>) => {
+            const value = e.target.value;
+            if (parentOnChange) {
+                parentOnChange(value);
             }
 
             if (field?.onChange) {
@@ -38,12 +38,12 @@ const Select: React.FC<IProps & SelectProps> = ({
 
             setSelectedValue(value);
         },
-        [field, onChange],
+        [field, parentOnChange],
     );
 
     const initValue = useCallback(() => {
-        setSelectedValue(value || field?.value || '');
-    }, [value, field]);
+        setSelectedValue(value || field?.value || defaultValue || '');
+    }, [value, field?.value, defaultValue]);
 
     useEffect(() => {
         initValue();

src/layouts/GoogleMapsLoader/GoogleMapsLoader.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {LoadScript} from '@react-google-maps/api';
+import {Grid} from '@mui/material';
+import {FormProvider, UseFormReturn} from 'react-hook-form';
+
+import GoogleAutocompleteControl from '../../components/common/form/GoogleAutocompleteControl';
+import Map from '../../components/Map';
+import {IPlan} from '../../pages/Plan/types';
+import {libraries} from './constants';
+
+type Props = {
+    children?: React.ReactNode;
+    methods: UseFormReturn<IPlan, any>;
+};
+
+const GoogleMapsLoader: React.FC<Props> = ({children, methods}) => {
+    const googleMapsApiKey = process.env.REACT_APP_GOOGLE_API_KEY || '';
+
+    return (
+        <LoadScript googleMapsApiKey={googleMapsApiKey} libraries={libraries} loadingElement={<div>Loading...</div>}>
+            <Grid container height="100%">
+                <Grid item xs={6} px={2}>
+                    <FormProvider {...methods}>
+                        <form>
+                            <Grid container>
+                                <Grid item xs={6}>
+                                    <GoogleAutocompleteControl name="search" control={methods.control} />
+                                </Grid>
+                            </Grid>
+                        </form>
+                    </FormProvider>
+                </Grid>
+                <Grid item xs={6}>
+                    <Map />
+                </Grid>
+            </Grid>
+            {children}
+        </LoadScript>
+    );
+};
+
+export default GoogleMapsLoader;

src/layouts/GoogleMapsLoader/constants.ts

@@ -0,0 +1,5 @@
+export const libraries: ('drawing' | 'geometry' | 'places' | 'localContext' | 'visualization')[] = [
+    'drawing',
+    'geometry',
+    'places',
+];

src/layouts/GoogleMapsLoader/index.ts

@@ -0,0 +1,3 @@
+import GoogleMapsLoader from './GoogleMapsLoader';
+
+export default GoogleMapsLoader;

src/pages/Plan/Plan.tsx

@@ -1,30 +1,18 @@
 import React from 'react';
-import {useForm, FormProvider} from 'react-hook-form';
+import {useForm} from 'react-hook-form';
 import {yupResolver} from '@hookform/resolvers/yup';
-import {Grid} from '@mui/material';
 
 import {IPlan} from './types';
 import {defaultValues, validation} from './form';
-import GoogleAutocompleteControl from '../../components/common/form/GoogleAutocompleteControl';
+import GoogleMapsLoader from '../../layouts/GoogleMapsLoader';
 
 const Plan = () => {
     const methods = useForm<IPlan>({
         resolver: yupResolver(validation),
         defaultValues,
     });
-    const {control} = methods;
 
-    return (
-        <FormProvider {...methods}>
-            <form>
-                <Grid container>
-                    <Grid item xs={6}>
-                        <GoogleAutocompleteControl name="search" control={control} />
-                    </Grid>
-                </Grid>
-            </form>
-        </FormProvider>
-    );
+    return <GoogleMapsLoader methods={methods} />;
 };
 
 export default Plan;