Andras/BoundlessFlowCampus2K

Fork 0

#752-implement-automatically-cards-update #827

Merged

a22erigr merged 28 commits from #752-implement-automatically-cards-update into team_2_week_5

2026-05-12 10:55:11 +00:00

c24elipe commented

2026-05-08 05:47:30 +00:00

Collaborator

Implementing automatically update functionality for some views and adding associated tests

Environment

This was developed on an Arch-based Linux distribution and tested using Jest.

What has been done?

Config

Created the file frontend/src/configs/pollFrequencyConfig.js as the configuration file for each view's "refresh" interval.
The "refresh" time is the interval between API calls a component makes to self-update its content.

Views

In the following views:

TemperatureGraphView
TemperatureAllView
TemperatureWeekView
SMHIForecastView
SMHIForecastView
SMHITemperatureView
ParkingView
BookingView
ScheduleView

The following features were added:

Using useEffect, setInterval, and useState, each of the described views now self-updates based on the configured time interval by using the use* hooks
Basic tests have been added to each view

Tests

This section represents the bulk of the work done. The test structure is the same in all implemented tests.
Each test file contains two groups of tests. The first group covers general state testing, serving as a simple foundation for future developers to modify, expand, or remove as needed.
The second group consists of basic tests for the polling (refresh) functionality.

Because the test files follow a standardized pattern, they are practically identical in both structure and content.

General state tests

This group follows the same pattern across all test files:

shows a loading state while data is loading: Ensures that the loading indicator is displayed when triggered by the API.
shows an error state when the request fails: Ensures that errors are properly displayed when they occur.
renders the data when the request succeeds: Verifies that the data is correctly rendered when provided.

Polling tests

Similarly, this group follows a standardized pattern:

re-fetches at the configured interval: Tests that the component doesn't crash or throw when polling multiple times at the configured intervals. Note: These tests utilize Jest's fake timers, so they execute instantly rather than waiting in real-time.
reflects updated data after a poll: Verifies that the UI visually updates after a poll. This is achieved by setting an initial mock value, simulating a time skip, providing a new mock value, and inspecting the DOM for changes.
cleans up the interval on unmount: Ensures the component clears its timer upon unmounting, preventing memory leaks or background errors.

Currently, all tests would be considered the "happy path," meaning they only verify the best-case scenario and do not test for bad inputs/outputs. Adding "bad path" (edge case) tests would be highly advisable, but since it falls outside the scope of this PR and issue, it is left for future development.

Issue:

General: #752
The times each should refresh: #742
Inspiration from #702

# Implementing automatically update functionality for some views and adding associated tests ## Environment This was developed on an Arch-based Linux distribution and tested using Jest. ## What has been done? ### Config Created the file **frontend/src/configs/pollFrequencyConfig.js** as the configuration file for each view's "refresh" interval. The "refresh" time is the interval between API calls a component makes to self-update its content. ### Views In the following views: * TemperatureGraphView * TemperatureAllView * TemperatureWeekView * SMHIForecastView * SMHIForecastView * SMHITemperatureView * ParkingView * BookingView * ScheduleView The following features were added: * Using _useEffect_, _setInterval_, and _useState_, each of the described views now self-updates based on the configured time interval by using the use* hooks * Basic tests have been added to each view ### Tests This section represents the bulk of the work done. The test structure is the same in all implemented tests. Each test file contains two groups of tests. The first group covers general state testing, serving as a simple foundation for future developers to modify, expand, or remove as needed. The second group consists of basic tests for the polling (refresh) functionality. Because the test files follow a standardized pattern, they are practically identical in both structure and content. #### General state tests This group follows the same pattern across all test files: 1. **shows a loading state while data is loading**: Ensures that the loading indicator is displayed when triggered by the API. 2. **shows an error state when the request fails**: Ensures that errors are properly displayed when they occur. 3. **renders the data when the request succeeds**: Verifies that the data is correctly rendered when provided. #### Polling tests Similarly, this group follows a standardized pattern: 1. **re-fetches at the configured interval**: Tests that the component doesn't crash or throw when polling multiple times at the configured intervals. **Note**: These tests utilize Jest's fake timers, so they execute instantly rather than waiting in real-time. 2. **reflects updated data after a poll**: Verifies that the UI visually updates after a poll. This is achieved by setting an initial mock value, simulating a time skip, providing a new mock value, and inspecting the DOM for changes. 3. **cleans up the interval on unmount**: Ensures the component clears its timer upon unmounting, preventing memory leaks or background errors. Currently, **all** tests would be considered the "happy path," meaning they only verify the best-case scenario and do not test for bad inputs/outputs. Adding "bad path" (edge case) tests would be highly advisable, but since it falls outside the scope of this PR and issue, it is left for future development. ## Issue: General: #752 The times each should refresh: #742 Inspiration from #702

image.png

94 KiB

c24elipe added the

needs review

label

2026-05-08 05:47:30 +00:00

c24elipe added 23 commits

2026-05-08 05:47:31 +00:00

Clean up of code 12fba2aef3

Fixed some spelling mistakes 0c101ec70e

Pain 914beec040

Added test file for weatherGraph 51ce9b586a

Fixed import in weather graph c1207cf791

Sorry for activity farming

Added basic render test 1e90fe00b5

Added basic tests 8525b8e124

Added timers and tests 8abbe9639f

Improved weather Graph 8c412b71b4

Updated Tempature all view tests ecd9856a65

Added comments to Weather graph e610d046f8

Added more comments 96e0a4f4aa

Updated comment and code in week view 8bad54d96d

Updated SMHI forcast view e4f0eb6a9c

Added comments to SMHI tmp view 0a9f38f73b

Updated the clearing and added more comments d86ecf017c

Added comments to parking tests 36a10384ef

Added comments to booking tests 2a8f7c799d

Added comments to ScheduleView test 5c3a4a1b37

Fixed missed bugs 718be1d0a7

Renamed tests 1aac6abb5c

Re-renamed f738ce6261

Prettier quick fix f1b48fad99

a22erigr

2026-05-08 07:12:13 +00:00

added the
Under-review
label
requested review from c24carso

c24carso commented

2026-05-08 18:00:19 +00:00

Collaborator

Review on #752

Whats done

Tested on Windows using Firefox

App starts
- All views load without errors
- pollFrequencyConfig.js centralizes refresh intervals which is clean
- Tests included for all modified views

Inspected following files

configs/pollFrequencyConfig.js
- Indentation/code styling
  - Follows prettier
- Naming convention
  - Follows wiki standards
- Comments
  - Follows wiki standards
- General code quality
  - Clean and easy to read
features/parking/ParkingView.js
- General code quality
  - console.log statements left in on lines 20 and 43
  - useParking() does not accept refreshCount so passing it does nothing
features/smhi/SMHIForecastView.js, SMHITemperatureView.js, booking/BookingView.js, schedule/ScheduleView.js
- General code quality
  - Same problem
features/utility/sharedFeatures.js
- General code quality
  - Added options to useEffect dependency array this causes infinite re-renders because hooks like useSMHIForecast pass a new object every render.

What needs to be done

Remove console.log debug statements in ParkingView.js
The hooks (useParking, useSMHIForecast, useSMHIObservations, useBooking, useTimeedit) need to accept refreshCount and pass it to useApi, otherwise auto-refresh does not work.
Remove options from the useEffect dependency array in sharedFeatures.js

Conclusion

Config file and tests are well done. The main issues is that auto-refresh does not actually work for most views because the hooks ignore refreshCount and the sharedFeatures.js change causes infinite API calls. Needs fixes before merge.

# Review on #752 ## Whats done ### Tested on Windows using Firefox + App starts + All views load without errors + pollFrequencyConfig.js centralizes refresh intervals which is clean + Tests included for all modified views ### Inspected following files + configs/pollFrequencyConfig.js + Indentation/code styling + Follows prettier + Naming convention + Follows wiki standards + Comments + Follows wiki standards + General code quality + Clean and easy to read + features/parking/ParkingView.js + General code quality + console.log statements left in on lines 20 and 43 + useParking() does not accept refreshCount so passing it does nothing + features/smhi/SMHIForecastView.js, SMHITemperatureView.js, booking/BookingView.js, schedule/ScheduleView.js + General code quality + Same problem + features/utility/sharedFeatures.js + General code quality + Added options to useEffect dependency array this causes infinite re-renders because hooks like useSMHIForecast pass a new object every render. ## What needs to be done + Remove console.log debug statements in ParkingView.js + The hooks (useParking, useSMHIForecast, useSMHIObservations, useBooking, useTimeedit) need to accept refreshCount and pass it to useApi, otherwise auto-refresh does not work. + Remove options from the useEffect dependency array in sharedFeatures.js ## Conclusion + Config file and tests are well done. The main issues is that auto-refresh does not actually work for most views because the hooks ignore refreshCount and the sharedFeatures.js change causes infinite API calls. Needs fixes before merge. ![Screenshot 2026-05-08 195450](/attachments/3b496cbb-3134-439d-aad2-fff0d4c7bcbc)

Screenshot 2026-05-08 195450.png

3.3 KiB

c24carso removed the

Under-review

label

2026-05-08 18:00:34 +00:00

a22erigr commented

2026-05-10 13:09:45 +00:00

Collaborator

Can you fix the problems c24elipe

c24elipe added 1 commit

2026-05-11 09:11:40 +00:00

Removed console.log 126ff6e2ec

c24elipe added 1 commit

2026-05-11 09:47:37 +00:00

Still doen't work ce6bc22c8f

c24elipe added 1 commit

2026-05-11 09:52:28 +00:00

It works now? 5b98e75044

c24elipe added 1 commit

2026-05-11 11:56:31 +00:00

Fixed some of the views 96ad415eda

c24elipe added 1 commit

2026-05-11 12:13:37 +00:00

Fixed. I think 32e405673c

c24elipe commented

2026-05-11 12:14:25 +00:00

Author

Collaborator

I think it is fixed after the review requirements now

c24carso commented

2026-05-12 10:51:58 +00:00

Collaborator

Re-review on #752

Previous issues checked

console.log statements removed
Hooks now accept and pass refreshCount
sharedFeatures.js infinite re-render fixed

Conclusion

Main issues from previous review are fixed. Ready for merge.

# Re-review on #752 ## Previous issues checked + console.log statements removed + Hooks now accept and pass refreshCount + sharedFeatures.js infinite re-render fixed ## Conclusion + Main issues from previous review are fixed. Ready for merge.

c24carso added

reviewed

and removed

needs review

labels

2026-05-12 10:52:28 +00:00

a22erigr merged commit 278c9f148e into team_2_week_5

2026-05-12 10:55:11 +00:00

a22erigr referenced this pull request from a commit

2026-05-12 10:55:12 +00:00

Merge pull request '#752-implement-automatically-cards-update' (#827) from #752-implement-automatically-cards-update into team_2_week_5