Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
9 tasks done
Tracked by #6059
roslynwythe opened this issue Jan 2, 2024 · 28 comments · Fixed by #6815
Closed
9 tasks done
Tracked by #6059
Assignees
Labels
Complexity: Large P-Feature: Events https://www.hackforla.org/events/ role: front end Tasks for front end developers size: 2pt Can be done in 7-12 hours

Comments

@roslynwythe
Copy link
Member

roslynwythe commented Jan 2, 2024

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. For testing purposes, a new page events-check will be created that will maintain the behavior of the current events page.

Details

The project pages currently sources meeting 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

  • Copy events.html then rename the copy to events-check.html and change the permalink to /events-check
  • Copy events.js then rename the copy events-check.js and update events-check.html to reference the renamed file
  • Copy _includes/events-page/right-col-content.html then rename the copy to _includes/events-page/right-col-content-check.html and update events-check.html to reference the renamed file
  • Copy assets/js/right-col-content.js then rename the copy assets/js/right-col-content-check.js and modify _includes/events-page/right-col-content-check.html to reference the renamed file
  • Confirm that the appearance and meeting data on /events-check are identical to /events
  • Open the file assets/js/project.js in your IDE and understand the code used to display project meetings. If there is code that can be shared between the project and events pages, move those elements to a new file assets/js/utility/vrms-events.js.
  • If code was moved to assets/js/utility/vrms-events.js, refactor the code in assets/js/project.js to reference function(s) in the new file, and perform testing to confirm that functionality on the Project page1 is unchanged.
  • Refactor the code in assets/js/right-col-content.js and _includes/events-page/right-col-content.html to reference the function(s) in assets/js/utility/vrms-events.js and perform testing to confirm that functionality on the Event page2 is unchanged.

Resources/Instructions

Merge Team

Footnotes

  1. Project page - sample

  2. Events webpage

@roslynwythe roslynwythe added Feature Missing This label means that the issue needs to be linked to a precise feature label. size: missing role missing Complexity: Missing Complexity: Large labels Jan 2, 2024

This comment was marked as outdated.

@roslynwythe roslynwythe added size: 2pt Can be done in 7-12 hours P-Feature: Events https://www.hackforla.org/events/ role: front end Tasks for front end developers Ready for Prioritization and removed Feature Missing This label means that the issue needs to be linked to a precise feature label. size: missing role missing Complexity: Missing labels Jan 2, 2024
@pravintargaryen

This comment was marked as outdated.

This comment was marked as outdated.

@njackman-2344

This comment was marked as outdated.

@github-actions github-actions bot added the To Update ! No update has been provided label Feb 9, 2024

This comment was marked as outdated.

@njackman-2344

This comment was marked as off-topic.

@njackman-2344 njackman-2344 removed the To Update ! No update has been provided label Feb 10, 2024
@ExperimentsInHonesty
Copy link
Member

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.

@github-actions github-actions bot added the To Update ! No update has been provided label Feb 23, 2024

This comment was marked as outdated.

@github-actions github-actions bot removed the To Update ! No update has been provided label Mar 1, 2024
@gaylem

This comment was marked as outdated.

@roslynwythe

This comment was marked as outdated.

@roslynwythe

This comment was marked as outdated.

@roslynwythe roslynwythe added ready for product and removed ready for dev lead Issues that tech leads or merge team members need to follow up on labels Mar 31, 2024
@aqandrew

This comment was marked as outdated.

@roslynwythe roslynwythe added the Draft Issue is still in the process of being created label Apr 2, 2024
@roslynwythe roslynwythe self-assigned this Apr 2, 2024

This comment was marked as outdated.

@roslynwythe

This comment was marked as resolved.

Copy link

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
Copy link
Member

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

@ExperimentsInHonesty
Copy link
Member

@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
Copy link
Member

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

@roslynwythe
Copy link
Member Author

@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
Copy link
Member

@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
Copy link
Member Author

@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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment