Only multiple language support feature

7 files changed, 57 insertions, 100 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index 228fe554..5197a074 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -35,56 +35,58 @@ import LoginForm from './components/registration/LoginForm';
 import RegisterForm from './components/registration/RegisterForm';
 import ResetPasswordForm from './components/registration/ResetPasswordForm';
 
-import theme from './theme';
 import GeofencesPage from './GeofencesPage';
 import GeofencePage from './GeofencePage';
 import { LocalizationProvider } from './common/localization';
+import theme from './theme';
 
 const App = () => {
   const initialized = useSelector((state) => !!state.session.server && !!state.session.user);
 
   return (
     <LocalizationProvider>
-      <CssBaseline />
-      <SocketController />
-      <CachingController />
-      <Switch>
-        <Route exact path="/login" component={LoginForm} />
-        <Route exact path="/register" component={RegisterForm} />
-        <Route exact path="/reset-password" component={ResetPasswordForm} />
-        <Route>
-          {!initialized ? (<LinearProgress />) : (
-            <Switch>
-              <Route exact path="/" component={MainPage} />
-              <Route exact path="/replay" component={ReplayPage} />
-              <Route exact path="/position/:id?" component={PositionPage} />
-              <Route exact path="/user/:id?" component={UserPage} />
-              <Route exact path="/device/:id?" component={DevicePage} />
-              <Route exact path="/geofence/:id?" component={GeofencePage} />
-              <Route exact path="/geofences" component={GeofencesPage} />
-              <Route exact path="/settings/notifications" component={NotificationsPage} />
-              <Route exact path="/settings/notification/:id?" component={NotificationPage} />
-              <Route exact path="/settings/groups" component={GroupsPage} />
-              <Route exact path="/settings/group/:id?" component={GroupPage} />
-              <Route exact path="/settings/drivers" component={DriversPage} />
-              <Route exact path="/settings/driver/:id?" component={DriverPage} />
-              <Route exact path="/settings/attributes" component={ComputedAttributesPage} />
-              <Route exact path="/settings/attribute/:id?" component={ComputedAttributePage} />
-              <Route exact path="/settings/maintenances" component={MaintenancesPage} />
-              <Route exact path="/settings/maintenance/:id?" component={MaintenancePage} />
-              <Route exact path="/admin/server" component={ServerPage} />
-              <Route exact path="/admin/users" component={UsersPage} />
-              <Route exact path="/admin/statistics" component={StatisticsPage} />
-              <Route exact path="/reports/route" component={RouteReportPage} />
-              <Route exact path="/reports/event" component={EventReportPage} />
-              <Route exact path="/reports/trip" component={TripReportPage} />
-              <Route exact path="/reports/stop" component={StopReportPage} />
-              <Route exact path="/reports/summary" component={SummaryReportPage} />
-              <Route exact path="/reports/chart" component={ChartReportPage} />
-            </Switch>
-          )}
-        </Route>
-      </Switch>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <SocketController />
+        <CachingController />
+        <Switch>
+          <Route exact path="/login" component={LoginForm} />
+          <Route exact path="/register" component={RegisterForm} />
+          <Route exact path="/reset-password" component={ResetPasswordForm} />
+          <Route>
+            {!initialized ? (<LinearProgress />) : (
+              <Switch>
+                <Route exact path="/" component={MainPage} />
+                <Route exact path="/replay" component={ReplayPage} />
+                <Route exact path="/position/:id?" component={PositionPage} />
+                <Route exact path="/user/:id?" component={UserPage} />
+                <Route exact path="/device/:id?" component={DevicePage} />
+                <Route exact path="/geofence/:id?" component={GeofencePage} />
+                <Route exact path="/geofences" component={GeofencesPage} />
+                <Route exact path="/settings/notifications" component={NotificationsPage} />
+                <Route exact path="/settings/notification/:id?" component={NotificationPage} />
+                <Route exact path="/settings/groups" component={GroupsPage} />
+                <Route exact path="/settings/group/:id?" component={GroupPage} />
+                <Route exact path="/settings/drivers" component={DriversPage} />
+                <Route exact path="/settings/driver/:id?" component={DriverPage} />
+                <Route exact path="/settings/attributes" component={ComputedAttributesPage} />
+                <Route exact path="/settings/attribute/:id?" component={ComputedAttributePage} />
+                <Route exact path="/settings/maintenances" component={MaintenancesPage} />
+                <Route exact path="/settings/maintenance/:id?" component={MaintenancePage} />
+                <Route exact path="/admin/server" component={ServerPage} />
+                <Route exact path="/admin/users" component={UsersPage} />
+                <Route exact path="/admin/statistics" component={StatisticsPage} />
+                <Route exact path="/reports/route" component={RouteReportPage} />
+                <Route exact path="/reports/event" component={EventReportPage} />
+                <Route exact path="/reports/trip" component={TripReportPage} />
+                <Route exact path="/reports/stop" component={StopReportPage} />
+                <Route exact path="/reports/summary" component={SummaryReportPage} />
+                <Route exact path="/reports/chart" component={ChartReportPage} />
+              </Switch>
+            )}
+          </Route>
+        </Switch>
+      </ThemeProvider>
     </LocalizationProvider>
 
   );
diff --git a/modern/src/GeofencesPage.js b/modern/src/GeofencesPage.js
index 4d23d106..f16ea431 100644
--- a/modern/src/GeofencesPage.js
+++ b/modern/src/GeofencesPage.js
@@ -5,12 +5,11 @@ import {
 import Drawer from '@material-ui/core/Drawer';
 import ContainerDimensions from 'react-container-dimensions';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import Map from './map/Map';
 import CurrentLocationMap from './map/CurrentLocationMap';
 import GeofenceEditMap from './map/GeofenceEditMap';
 import GeofencesList from './GeofencesList';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
-
 
 import t from './common/localization';
 
diff --git a/modern/src/common/localization.js b/modern/src/common/localization.js
index 26b90e57..6f3e5855 100644
--- a/modern/src/common/localization.js
+++ b/modern/src/common/localization.js
@@ -1,7 +1,5 @@
 import React, { useState, createContext, useContext, useEffect } from "react";
 import { create } from 'jss';
-import rtl from 'jss-rtl';
-import { StylesProvider, jssPreset, useTheme, ThemeProvider } from '@material-ui/core/styles';
 
 import af from '../../../web/l10n/af.json';
 import ar from '../../../web/l10n/ar.json';
@@ -149,47 +147,28 @@ export default key => {
   return selectedLanguage.data[key];
 };
 
-const rtlLangueges = ['ar', 'he', 'fa'];
-const isRtl = (language) => rtlLangueges.indexOf(language) > -1;
-
 export const setSelectedLanguage = (language) => {
   selectedLanguage = supportedLanguages[language];
   localStorage.setItem('language', language);
-  localStorage.setItem('direction', isRtl(language) ? 'rtl' : 'ltr');
 }
 
 export const defaultLanguage = language;
-const defaultDirection = localStorage.getItem('direction') || 'ltr';
 
 export const LocalizationContext = createContext({
-  direction: defaultDirection,
   language
 });
 
-const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
 
 export function LocalizationProvider(props) {
   const [language, setLanguage] = useState(defaultLanguage);
 
-  const [direction, setDirection] = useState(defaultDirection);
-
   const handleLanguageChange = (nextLanguage) => {
     setSelectedLanguage(nextLanguage);
     setLanguage(nextLanguage);
-    setDirection(isRtl(nextLanguage) ? 'rtl' : 'ltr');
   };
 
-  useEffect(() => {
-    theme.direction = direction;
-    window.document.body.dir = direction
-  }, [direction])
-
-  return <LocalizationContext.Provider value={{ language, setLanguage: handleLanguageChange, languageList, direction }}>
-    <StylesProvider jss={jss}>
-      <ThemeProvider theme={theme}>
-        {props.children}
-      </ThemeProvider>
-    </StylesProvider>
+  return <LocalizationContext.Provider value={{ language, setLanguage: handleLanguageChange, languageList }}>
+    {props.children}
   </LocalizationContext.Provider>
 }
 
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index c5c1d6f2..461a1ab6 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -62,9 +62,9 @@ const LoginForm = () => {
     }
   };
 
-  const handleLanguageChange = e => {
+  const handleLanguageChange = (e) => {
     setLanguage(e.target.value);
-  }
+  };
 
   return (
     <StartPage>
@@ -130,7 +130,7 @@ const LoginForm = () => {
             <FormControl variant="filled" fullWidth>
               <InputLabel>{t('loginLanguage')}</InputLabel>
               <Select value={language} onChange={handleLanguageChange}>
-                {languageList.map(lang => <MenuItem key={lang.code} value={lang.code}>{lang.name}</MenuItem>)}
+                {languageList.map((lang) => <MenuItem key={lang.code} value={lang.code}>{lang.name}</MenuItem>)}
               </Select>
             </FormControl>
           </Grid>
@@ -145,7 +145,6 @@ const LoginForm = () => {
       </Grid>
     </StartPage>
   );
-
 };
 
 export default LoginForm;
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index 3a249c60..6260a0c5 100644
--- a/modern/src/components/registration/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -4,9 +4,9 @@ import {
 } from '@material-ui/core';
 import { useHistory } from 'react-router-dom';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import StartPage from '../../StartPage';
 import t from '../../common/localization';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 
 const useStyles = makeStyles((theme) => ({
   register: {
@@ -61,7 +61,7 @@ const RegisterForm = () => {
           <Grid item>
             <Typography className={classes.link} color="primary">
               <Link onClick={() => history.push('/login')}>
-              {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
+                {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
               </Link>
             </Typography>
           </Grid>
diff --git a/modern/src/map/CurrentLocationMap.js b/modern/src/map/CurrentLocationMap.js
index c875662d..69724ce1 100644
--- a/modern/src/map/CurrentLocationMap.js
+++ b/modern/src/map/CurrentLocationMap.js
@@ -1,14 +1,9 @@
 import maplibregl from 'maplibre-gl';
 import { useEffect } from 'react';
-import { useLocalization } from '../common/localization';
 import { map } from './Map';
 
 const CurrentLocationMap = () => {
-  const {direction} = useLocalization();
-
   useEffect(() => {
-    const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right';
-
     const control = new maplibregl.GeolocateControl({
       positionOptions: {
         enableHighAccuracy: true,
@@ -16,9 +11,9 @@ const CurrentLocationMap = () => {
       },
       trackUserLocation: true,
     });
-    map.addControl(control,controlsPosition);
+    map.addControl(control);
     return () => map.removeControl(control);
-  }, [direction]);
+  }, []);
 
   return null;
 };
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 64fc31a0..47ebb1f0 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -7,10 +7,10 @@ import React, {
 import { SwitcherControl } from './switcher/switcher';
 import deviceCategories from '../common/deviceCategories';
 import { prepareIcon, loadImage } from './mapUtil';
-import t, { useLocalization } from '../common/localization';
 import {
   styleCarto, styleMapbox, styleMapTiler, styleOsm,
 } from './mapStyles';
+import t from '../common/localization';
 import { useAttributePreference } from '../common/preferences';
 import palette from '../theme/palette';
 
@@ -64,9 +64,9 @@ const initMap = async () => {
 
 map.on('load', initMap);
 
-const navigationControl = new maplibregl.NavigationControl({
+map.addControl(new maplibregl.NavigationControl({
   showCompass: false,
-})
+}));
 
 const switcher = new SwitcherControl(
   [
@@ -92,32 +92,15 @@ const switcher = new SwitcherControl(
   },
 );
 
-const addPrimaryControls = position => {
-  map.addControl(navigationControl, position);
-  map.addControl(switcher, position);
-}
-
-const removePrimaryControls =()=> {
-  map.removeControl(navigationControl);
-  map.removeControl(switcher);
-}
-
-
 map.addControl(switcher);
 
 const Map = ({ children }) => {
   const containerEl = useRef(null);
-  const {direction} = useLocalization();
+
   const [mapReady, setMapReady] = useState(false);
 
   const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
 
-  useEffect(()=>{
-    const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right';
-    addPrimaryControls(controlsPosition);
-    return removePrimaryControls;
-  },[direction])
-
   useEffect(() => {
     maplibregl.accessToken = mapboxAccessToken;
   }, [mapboxAccessToken]);