Refactor JavaScript so that Events page sources meeting data from vrms_data.json

[roslynwythe]

Overview

We need to refactor the JavaScript that generates the list of meetings on the Events page, so that it retrieves meeting data from the file data/external/vrms_data.json, in order to reduce the latency and improve the reliability of the Events page.

Details

The project pages currently source meeting time data from data/external/vrms_data.json and so elements of that code can be refactored so that functions can be called from the Events page as well.

Action Items

• [x] Open the file assets/js/project.js in your IDE and identify elements of the code that could be shared in the Events page. Move those elements to a new file assets/js/utility/vrms-events.js.
• [ ] Refactor the code in assets/js/project.js to reference function(s) in assets/js/utility/vrms-events.js and perform testing to confirm that functionality on the Events page[^1] is unchanged.
• [ ] Open the file assets/js/right-col-content.js and refactor the code to reference the function(s) in assets/js/utility/vrms-events.js and perform testing to confirm that functionality on the Project pages[^2] is unchanged.

Resources/Instructions

[^1]:Events webpage [^2]:Project page - sample

Merge Team

• [ ] Release dependency on #6059, move that issue to New Issue Approval and apply "ready for dev lead" label

[github-actions[bot]]

Hi @roslynwythe.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing: Complexity, Role, Feature

NOTE: Please ignore the adding proper labels comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards. To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels

[pravintargaryen]

@roslynwythe assign this to me

[github-actions[bot]]

Hi @njackman-2344, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[njackman-2344]

Availability: Thursday 2/1 7pm-10pm, Friday 2/2 5pm-10pm, Saturday 2/3 3pm-7pm, Sunday 2/4 12pm-4pm

ETA: Monday 2/12 EOD PST

[github-actions[bot]]

@njackman-2344

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, February 5, 2024 at 11:06 PM PST.}

[njackman-2344]

Progress: Moved code and created new file. I want to do some more tests but the code works as is in Docker.

Blockers: what tests and how much refactoring to do... Get a second person to bounce ideas.

Availability: This weekend and Monday: 8 hours

ETA: Wednesday 2/14 EOD

[ExperimentsInHonesty]

Hi @njackman-2344. I'm possibly going to increase the scope of this issue. I am leaving a note for the dev lead here and you will see the discussion

Hi @hackforla/website-merge I realized we are having the events page refactored in this issue, so that it doesn't pull the data directly from VRMS. However, it would be helpful to have a page so that we can visually test the VRMS data when we need to. So should we increase the scope of this issue to make a copy of the current events page and call it events-check so that we can use it much like we use the projects-check page (a different view on the data that makes it easy to do manual verification). Later, we can strip anything off the page that we don't need.

• I was working on this issue when I realized it might be helpful. https://github.com/hackforla/website/issues/6278

[github-actions[bot]]

@njackman-2344

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, February 19, 2024 at 11:06 PM PST.}

[github-actions[bot]]

@njackman-2344

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, February 26, 2024 at 11:06 PM PST.}

[njackman-2344]

1. 2 of 3 completed. Will refactor code.
2. Wanted to be sure if any changes beforehand with merge team. But I will go ahead.
3. Will work on through the weekend and next week.
4. ETA: 3/11 EOD

[ExperimentsInHonesty]

@njackman-2344 it has been decided that we are going to increase the scope of this issue. Please make sure that your PR includes taking the current copy of events page and call it events-check and making sure the script that pulls directly from VRMS instead of the https://github.com/hackforla/website/blob/gh-pages/_data/external/vrms_data.json file is what provides the data to the new events-check page.

[ExperimentsInHonesty]

p.s. thank you for your patience while we sorted that out.

[github-actions[bot]]

@njackman-2344

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, March 12, 2024 at 12:06 AM PST.}

[njackman-2344]

1. copied events.js and html to events-check. refactoring needed.
2. Have question on vrms api data into events-check and vrms json into events.
3. Weeknights - 6 hours
4. ETA-Sunday 24th
5. No visual changes

[gaylem]

• @bonniewolfe I spoke with @roslynwythe about this ticket and thought it could possibly be combined with this ER: https://github.com/hackforla/website/issues/6544

Just wanted to give you a heads up, happy to help if I can! Thanks 😄

[roslynwythe]

Thank you @gaylem for the suggestion. I added the fourth action item so that the Project Meetings code will share the code utility that will be created for use in the Events page.

[roslynwythe]

@ExperimentsInHonesty the previous assignee removed their assignment so I moved the item into New Issue Approval and added two Action Items:

• The first Action Item, for implementing your suggestion to maintain the current events page functionality in a new events-check page.
• the event retrieval process has recently been a topic of discussion because of some recent CodeQL-related PRs. We have two very sharp reviewers @gaylem and @aqandrew who have made valuable suggestions. @aqandrew wrote #6544 which suggests consolidating the duplicate code between the Project Meetings and Events pages. I thought we could add the refactoring of project-meetings.js to this issue and that can be found in the fourth action item. If you prefer, though, we could remove that fourth Action Item and manage the refactoring of Project Meetings in a separate issue

[aqandrew]

In all fairness, @ajb176 is a sharp reviewer too! They correctly identified the bug in in #5473 and wrote the implementation that I used for #6536

[github-actions[bot]]

Hi @roslynwythe, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[roslynwythe]

• @ExperimentsInHonesty @aqandrew this issue has been updated to create the "/events-check" page and also to make use of existing code behind the Projects page, to refactor the Events page, in order to enable the Events page to source data from vrms-data.json. Issue #6059 will address the Project Meetings page.

[github-actions[bot]]

Hi @irais-valenzuela, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[irais-valenzuela]

Availability for this week: Wednesday - Friday My estimated ETA for completing this issue: Friday

[ExperimentsInHonesty]

@irais-valenzuela I will move this issue to the in progress column, in the future, please remember to do that after you self assign.

[irais-valenzuela]

Availability for this week: Monday, Thursday, & Friday My estimated ETA for completing this issue: Friday

[roslynwythe]

@irais-valenzuela in answer to your question - if you search for the variable vrmsData in project.js, you'll see code that retrieves the event data from the _data/external/vrms_data.json file and displays it using a few helper functions for sorting and formatting. I'm guessing that at some that code could be used to render events on the events page. If so, I suggest moving the reusable functions to a new file then refactoring. If necessary, you can update _includes/events-page/right-col-content.html so that the HTML matches the HTML on the projects page more closely, but that is optional.

[irais-valenzuela]

@roslynwythe Thanks this is helpful! Is the idea to replace the API request made on ./utility/api-events.js to get meeting data for the right-col-content.html page with the vrmsData retrieval used in projects to get meeting data?

[roslynwythe]

@roslynwythe Thanks this is helpful! Is the idea to replace the API request made on ./utility/api-events.js to get meeting data for the right-col-content.html page with the vrmsData retrieval used in projects to get meeting data?

Yes, exactly. It is inefficient to make API calls to VRMS when the meeting data has already been retrieved and stored into vrms-data.json. But for the sake of testing, we would like a page /events-check that continues to retrieve meeting data via API.

[irais-valenzuela]

Progress: I figured out what code can be shared between both event.js and project.js. I'm currently familiarizing myself with Jekyll and Liquid to figure out how to get data using liquid. Will continue working next week 4/29-5/3 Blockers: Availability: Monday, Wednesday, Friday ETA: Friday