Leon and Oleksandr add interactive map

.eslintignore

@@ -38,6 +38,7 @@ src/components/SummaryManagement/**
 src/components/TaskEditSuggestions/**
 src/components/TeamMemberTasks/**
 src/components/Teams/**
+src/components/TeamLocations/**
 src/components/Timelog/**
 src/components/UpdatePassword/**
 src/components/UserManagement/**

.prettierignore

@@ -37,6 +37,7 @@ src/components/SetupProfile/**
 src/components/SummaryBar/**
 src/components/SummaryManagement/**
 src/components/TaskEditSuggestions/**
+src/components/TeamLocations/**
 src/components/TeamMemberTasks/**
 src/components/Teams/**
 src/components/Timelog/**

jest.config.js

@@ -17,6 +17,8 @@ module.exports = {
   // Bundle mapper for d3 import
   moduleNameMapper: {
     d3: '<rootDir>/node_modules/d3/dist/d3.min.js',
+    'react-leaflet': '<rootDir>/src/_tests_/__mocks__/react-leaflet.js',
+    'marker-cluster-group': '<rootDir>/src/_tests_/__mocks__/react-leaflet-cluster.js',
   },
 
   // The paths to modules that run some code to configure or set up the testing environment before each test

package.json

@@ -30,6 +30,7 @@
     "joi": "^14.0.6",
     "js-levenshtein": "^1.1.6",
     "jwt-decode": "^2.2.0",
+    "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "moment": "^2.29.2",
     "moment-timezone": "^0.5.33",
@@ -49,6 +50,8 @@
     "react-icons": "^4.3.1",
     "react-image": "^2.4.0",
     "react-input-range": "^1.3.0",
+    "react-leaflet": "^4.2.1",
+    "react-leaflet-cluster": "^2.1.0",
     "react-moment": "^1.1.1",
     "react-multi-select-component": "^4.0.2",
     "react-phone-input-2": "^2.14.0",

src/__tests__/__mocks__/react-leaflet-cluster.js

@@ -0,0 +1,3 @@
+test('it should pass', () => {
+  expect(true).toBe(true);
+});

src/__tests__/__mocks__/react-leaflet.js

@@ -0,0 +1,3 @@
+test('it should pass', () => {
+  expect(true).toBe(true);
+});

src/components/Header/Header.jsx

@@ -12,6 +12,7 @@ import {
   TIMELOG,
   REPORTS,
   WEEKLY_SUMMARIES_REPORT,
+  TEAM_LOCATIONS,
   OTHER_LINKS,
   USER_MANAGEMENT,
   BADGE_MANAGEMENT,
@@ -148,9 +149,18 @@ export const Header = props => {
                         <DropdownItem tag={Link} to="/weeklysummariesreport">
                           {WEEKLY_SUMMARIES_REPORT}
                         </DropdownItem>
+                        <DropdownItem tag={Link} to="/teamlocations">
+                          {TEAM_LOCATIONS}
+                        </DropdownItem>
                   </DropdownMenu>
-                </UncontrolledDropdown>
-              ) : null}
+              </UncontrolledDropdown>
+              ) : 
+              <NavItem>
+                <NavLink tag={Link} to="/teamlocations">
+                  {TEAM_LOCATIONS}
+                </NavLink>
+              </NavItem>
+            }
               <NavItem>
                 <NavLink tag={Link} to={`/timelog/${user.userid}`}>
                   <i className="fa fa-bell i-large">

src/components/SetupProfile/SetupProfileUserEntry.jsx

@@ -50,7 +50,12 @@ const SetupProfileUserEntry = ({ token, userEmail }) => {
     collaborationPreference: 'Zoom',
     jobTitle: '',
     timeZone: '',
-    location: '',
+    location: {
+      userProvided: '',
+      coords: { lat: '', lng: '' },
+      country: '',
+      city: '',
+    },
     timeZoneFilter: '',
     token,
   });
@@ -90,6 +95,24 @@ const SetupProfileUserEntry = ({ token, userEmail }) => {
       [id]: value,
     }));
   };
+  const handleLocation = event => {
+    const { id, value } = event.target;
+    setUserProfile(prevProfile => ({
+      ...prevProfile,
+      [id]: {
+        ...prevProfile.location,
+        userProvided: value
+      },
+    }));
+  }
+  const handleToggle = event => {
+    const { id } = event.target;
+    const key = id === 'emailPubliclyAccessible' ? 'email' : 'phoneNumber';
+    setUserProfile(prevProfile => ({
+      ...prevProfile,
+      privacySettings: { ...prevProfile.privacySettings, [key]: !prevProfile.privacySettings[key] },
+    }));
+  };
 
   const phoneChange = phone => {
     setUserProfile(prevProfile => ({
@@ -103,29 +126,37 @@ const SetupProfileUserEntry = ({ token, userEmail }) => {
       ...prevErrors,
       timeZoneFilterClicked: '',
     }));
-
-    if (!userProfile.location) {
+    const location = userProfile.location.userProvided;
+    if (!location) {
       alert('Please enter valid location');
       return;
     }
     if (!APIkey) {
       console.log('Geocoding API key missing');
       return;
     }
-
-    getUserTimeZone(userProfile.location, APIkey)
+    getUserTimeZone(location, APIkey)
       .then(response => {
         if (
           response.data.status.code === 200 &&
           response.data.results &&
           response.data.results.length
         ) {
           let timezone = response.data.results[0].annotations.timezone.name;
-
+          let currentLocation = {
+            userProvided: location,
+            coords: {
+              lat: response.data.results[0].geometry.lat,
+              lng: response.data.results[0].geometry.lng,
+            },
+            country: response.data.results[0].components.country,
+            city: response.data.results[0].components.city,
+          };
           setUserProfile(prevProfile => ({
             ...prevProfile,
             timeZoneFilter: timezone,
             timeZone: timezone,
+            location: currentLocation
           }));
         } else {
           alert('Invalid location or ' + response.data.status.message);
@@ -271,7 +302,7 @@ const SetupProfileUserEntry = ({ token, userEmail }) => {
 
     // Validate Location
 
-    if (userProfile.location.trim() === '') {
+    if (userProfile.location.userProvided.trim() === '') {
       setFormErrors(prevErrors => ({
         ...prevErrors,
         location: 'Location is required',
@@ -322,7 +353,7 @@ const SetupProfileUserEntry = ({ token, userEmail }) => {
         },
         jobTitle: userProfile.jobTitle.trim(),
         timeZone: userProfile.timeZone.trim(),
-        location: userProfile.location.trim(),
+        location: userProfile.location,
         token,
       };
 
@@ -558,9 +589,9 @@ const SetupProfileUserEntry = ({ token, userEmail }) => {
                           name="location"
                           id="location"
                           placeholder="Location"
-                          value={userProfile.location}
+                          value={userProfile.location.userProvided}
                           onChange={e => {
-                            handleChange(e);
+                            handleLocation(e);
                           }}
                           invalid={formErrors.location !== ''}
                         />