Roberto- changes open cage api call to backend

[robertoooc]

Description

Changing the OpenCage http request to happen on backend rather than client. Keeping the get request on the client allows for security risks since anyone can view the network tab and see the api key. By transitioning the request to happen on backend the api key can stay secure and concealed while just returning needed information to client.

Related PRS (if any):

This frontend PR is paired with the #639 backend PR.

Main changes explained:

• For the getTimeZone functions just added an axios get request to fetch timezone data from backend in BasicInformationTab.jsx, SetupProfileUserEntry.jsx, AddOrEditPopup.jsx, and UserProfileAdd.jsx.
• Deleted all redux properties related to the getTimeZone function as no longer needed and complicates logic.
• Corrects spelling for Kyiv and adds Zambia timezone to timeZones.js

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. log as owner
4. go to any user profile → Location → Enter a valid location → Click get timezone→ make sure the function works and timezone is appropriate
5. dashboard→ reports→ team locations→ select a user → edit location → verify it reflects well
6. dashboard → user management → create new user → verify location input works

Screenshots or videos of changes:

Screen.Recording.2023-12-04.at.2.24.16.PM.mov

Screen.Recording.2023-12-04.at.9.38.48.PM.mov

Screen.Recording.2023-12-04.at.9.37.21.PM.mov

Note:

Include the information the reviewers need to know.

[this-journey]

Tested all the functionality described. Please see attached videos. Great job!

Uploading PR 1640+639.mov…

[DragonSlayer2401]

I tested this PR everything is working correctly. I changed a team location, my own location, and another user's location successfully. Please watch the overview video below:

2023-12-08.16-56-11.mov

[Alforoan]

Everything works as it should. Nice!

pr.review.1640.mp4

[pshereen]

Tested the PR. Updated the API key.

In View Profile page, updating location to Vatican, Zagreb, Podgorica in Basic Info is causing the page to crash. See the video for details.

Uploading HGN APP and 11 more pages - Personal - Microsoft​ Edge 2024-01-25 21-51-03.mp4…

Approving

[pshereen]

Tested PR.
All the Timezone features are working as expected in all three pages.
Attaching video from basic info page.

HGN.APP.and.11.more.pages.-.Personal.-.Microsoft.Edge.2024-01-25.22-01-09.mp4

However, the basic info page is crashing if we try to get Time Zone for Vatican, Zagreb, Podgorica.

[Renanluizssx]

Hi @robertoooc, i tested your application and it´s correct, nice.

2024-01-26-09-17-53.mov

[Sophie-lei]

Hey! I just tested this PR for both the backend and frontend. I tested the PR for changing the timezone with the backend development and Opencage API just before this test and everything working fine. However, I changed to this backend of PR#639. The API call is not working and shows an error like this. I am not sure what the problem is but looks like the API for https://opencagedata.com is not connected.

[galgalinidhi]

Hi @robertoooc, I tested the PR and works well!

PR1640+639.mov

[SRamen1999]

I tested this PR everything works as expected. I used an owner account and changed a team location, my own location, and another user's location successfully.

Screen.Recording.2024-01-29.at.3.40.34.PM.mov

[Pandani07]

Followed the testing instructions, and the backend PR steps. Functionality works as intended. The timezone is updated based on the location typed in the text box.

Screen.Recording.2024-01-30.at.6.42.45.PM.mov

[KevHnh]

I tested using an owner account and everything works as expected. I was able to update my location and retrieve available time zones in my profile, from the team page, and from the location page.

2024-02-02.18-12-48.mp4

[xmyoot]

See comment on backend repo: OneCommunityGlobal/HGNRest#639 (comment)

[ClemarNunes]

I tested this PR everything is working correctly.

editar.online-video-cutter.com.mp4

[SaiDeepak-NEU]

Hello Roberto,
I have added the api key to my env variables in my backend and I have tested all the cases presented in the PR. Here are my results:

1. Was able to get the correct timezone on inputting location.
   
2. I am able to edit the location on the map in team locations successfully and it reflects well in the map as well.
   
   
3. Adding location input to the new user in user management also went smoothly.
   
   Good job!

[mohabbasd]

Hello, I tested this PR and it works excellently. No problems were faced.

[XiaohanMeng]

1640_result.mov

Everything works as intended! I tested this using the Owner account, attempting to change my location, the team location, add a user with a location, and edit locations in the user list. The only thing to note is that the map requires some time to update with the new location for the user.

[Coops023]

Hi i have reviewed your PR and checking functionality:

• [Y] go to any user profile → Location → Enter a valid location → Click get timezone→ make sure the function works and timezone is appropriate
• [Y] dashboard→ reports→ team locations→ select a user → edit location → verify it reflects well
• [Y] dashboard → user management → create new user → verify location input works
  All works as intended, well done!

[one-community]

Thank you all, moving this to final review!

[lacnoskillz]

Hello @robertoooc
Nice work!
everything works as intended except for one thing I noticed
When creating a user via user management the users location isnt displayed on the map
see video below. I tried making a few users with no luck. refreshing and editing location after creating but they dont display on the map.

2024-02-15.22-49-24.mp4

Maybe I am missing something so let me know if its just my end

here is me updating my profile location successfully

2024-02-15.22-25-25.mp4

Overall awesome job!

[ramyaram2092]

The page becomes un-responsive to me post login. Are you in the middle of making changes ?

[robertoooc]

@lacnoskillz, Hi about your comment of the user not showing up on the map after immediately creating them, I'm not too sure as I was not the creator of the map functionality but I'm pretty sure you would need to clock at least a week's worth of tangible time for the user to show up as seen here: #1503
This is the original pr creating the map, and the logic seems to work specifically after the user has completed a weeks worth of their tangible time.

[robertoooc]

Hi @ramyaram2092, I haven't encountered that problem myself during testing this pr.
Are you using the assigned backend ? Or is this error persistent on your local machine after a page refresh, Im not too sure what could be causing this?

[navneeeth]

Hello, @robertoooc! Reviewed your work and it looks ready to be merged! Excellent implementation throughout.

Test No. 1: Updating the Timezone for an existing user

location.get.timezone.mp4

Test No. 2: Updating an existing user's location on Reports -> Team Locations

location.edit.mp4

Test No. 3: Verifying a new user's location input

create.new.user.mp4

In addition to the functionality working as expected, the implementation that ports a major portion of the relevant functionality, with the OpenCage HTTP Request, to the backend, is well-written.

You're absolutely correct regarding the security risks posed when the API call is being done in the frontend, an example as you've mentioned being viewing the Network tab and retrieving the API key. This fix should eliminate such risks.

I was looking for the change you have mentioned in timeZones.js but then realized when reviewing the codebase on the IDE that the exact changes that you've mentioned were implemented & pulled in from a recent push to development from another PR and thus does not reflect in the Files changed tab here. Safe to remove that bullet point from the Main changes explained section in the PR's Description.

LGTM! Approving!

[one-community]

Thank you all, merging!