[Feature] Implement Client Routing

[christianjro]

Description

Problem:
As a developer, I want the route paths to be dynamic, so that URLs can be used to personalize or specific what to render in particular views.

Solution:

• Used React Router to create dynamic routes for single mode and comparative mode use of the website. I also created a custom hook useCitationSearchParams to handle the logic of setting, retrieving, and deleting search query parameters.

• In single mode:

  • Setting Search Query Parameters:
    • Initially, only the place_name and place_type parameters are set in the URL. I decided to keep it this way because the citation data filters (data category and date preset) are still the default selections.
    • If the user changes the data category, date preset, or selects a custom date, the URL search query parameters will be added and saved to state in the single-search-visualization.tsx component.
  • Retrieving Search Query Parameters:
    • In citation-explorer.tsx, the place_name is obtained from the URL and is passed down to the SingleSearch component (as a savedQuery) and ultimately to the Geocoder component. I updated the Geocoder component to behave in the following way: if it recognizes that it’s receiving a savedQuery, it will automatically select the Geocoder result and pass it to the citation-explorer via a callback function. This way, we can use a savedQuery string to obtain a Geocoder result with all the necessary properties.
    • The citation data filters are retrieved in the single-search-visualization.tsx component.

• In comparative mode:

  • Setting Search Query Parameters:
    • To differentiate between single and comparative mode, the comparative_mode parameter is added to the URL when a user enters comparative mode.
    • Region type, first region, and second region are added to the URL when selected by the user. They are also saved to state in the citation-explorer.tsx component.
    • Unlike with single mode, the user has to click a button (comparison chart button) to enter visualization mode. When the user enters visualization mode, the visualization_mode parameter is added to the URL.
    • While in visualization mode, if the user selects a new citation category, the category parameter will be added to the URL.
  • Retrieving Search Query Parameters:
    • In citation-explorer.tsx, the isSingleSearchMode state variable will be set based on whether or not it finds the compare_mode parameter in the URL.
    • Similar to single search, it will look for a region1 and region2 (in the type string) and pass them to the ComparativeSearch component as region1SavedQuery and region2SavedQuery variables. To differentiate regions, I added the id property on the Geocoder component. This way when the onSelect callback function is called, the proper region is assigned.

Related Issues

Resolves #620

Testing

• Ran testing suites.

Updated Testing Coverage

 PASS  src/features/instructions/how-it-works-button.test.tsx
  Modal and click modal trigger
    ✓ renders title (77 ms)
    ✓ renders description (33 ms)
    ✓ renders SearchIcon (24 ms)
    ✓ renders SearchIcon's title (27 ms)
    ✓ renders SearchIcon's first list text (25 ms)
    ✓ renders SearchIcon's second list text (19 ms)
    ✓ renders DrawIcon (20 ms)
    ✓ renders DrawIcons's title (28 ms)
    ✓ renders CompareIcon (23 ms)
    ✓ renders CompareIcons's title (22 ms)
    ✓ renders with close button (30 ms)
    ✓ pressing close button closes modal (45 ms)
 PASS  src/features/citation/ui/citation-data-category-selection.test.tsx
  Citation-data-category-selection rendering
    ✓ should render citation data categories with initial placeholder (38 ms)
    ✓ should render all citation data categories options (140 ms)
  Citation-data-category-selection interactions
    ✓ should not render with default option (72 ms)
    ✓ should render with selected option (62 ms)
    ✓ should return selected option (66 ms)
 PASS  src/widgets/radius-tool/radius-tool.test.tsx
  Radius Tool UI
    ✓ renders default Select Option (36 ms)
    ✓ renders default input (8 ms)
    ✓ renders apply button (8 ms)
  Radius Tool Interaction
    ✓ renders select list (86 ms)
    ✓ should render Feet (72 ms)
    ✓ should convert miles to feet (59 ms)
    ✓ should convert miles to kilometer (66 ms)
    ✓ should convert miles to meter (68 ms)
 PASS  ../ui/src/components/date-input/date-input.test.tsx
  Date Input
    ✓ renders Calendar component when clicking date input component (79 ms)
    ✓ clicking outside of Calendar component closes calendar (57 ms)
    ✓ date input child prop works correctly - 'From' label (33 ms)
    ✓ date input placeholder text is 'mm/dd/yy' (30 ms)
    ✓ date input value in the Calendar component is today's date by default (40 ms)
    ✓ date input value updates when date is selected in Calendar (271 ms)
 PASS  src/widgets/header/header.test.tsx
  Header
    ✓ renders with branding (24 ms)
    ✓ renders with description (5 ms)
    ✓ renders with action button (2 ms)
 PASS  src/features/geocoder/lib/utilities.test.tsx
  Forward Geocode Neighborhood Council
    ✓ should return an empty array for a query string that does not match any neighborhood council (1 ms)
    ✓ should return the same results for a query string regardless of case (1 ms)
    ✓ should return neighborhood councils that partially match the query
    ✓ should return an array of GeocodeResult type for input query string (5 ms)
 PASS  ../ui/src/components/modal/modal.test.tsx
  Default Modal and click modal trigger
    ✓ renders announcement icon (44 ms)
    ✓ renders title (28 ms)
    ✓ renders description (24 ms)
    ✓ renders content test (20 ms)
    ✓ renders submit button (23 ms)
    ✓ clicking submit button closes modal (37 ms)
    ✓ renders close trigger button (27 ms)
    ✓ clicking close trigger button should close modal (36 ms)
  Custom Modal Description and Title and click modal trigger
    ✓ renders custom title (18 ms)
    ✓ renders custom description (21 ms)
 PASS  src/features/citation/ui/citation-date-presets-selection.test.tsx
  Citation-date-presets-selection rendering
    ✓ should render citation date presets with initial placeholder (21 ms)
    ✓ should render all citation date presets options (99 ms)
  Citation-date-presets-selection interactions
    ✓ should not render with default option (66 ms)
    ✓ should render with selected option (59 ms)
    ✓ should return selected option (60 ms)
 PASS  src/features/geocoder/ui/search-mode-toggle-button.test.tsx
  Search Mode Toggle Button
    ✓ renders visibly (15 ms)
    ✓ invokes onclick handler when clicked (23 ms)
 PASS  ../ui/src/components/radio-group/radio-group.test.tsx
  Radio Group Component
    ✓ renders radio group and all it's options (19 ms)
    ✓ able to select and re-slect one radio option at a time (83 ms)
    ✓ should return the selected option (4 ms)
 PASS  ../ui/src/components/pick-list/pick-list.test.tsx
  Pick List
    ✓ renders placeholder text (13 ms)
    ✓ renders ArrowDropDown icon (9 ms)
  Pick List's User Interaction
    ✓ renders ArrowDropUp icon (58 ms)
    ✓ renders list of items (39 ms)
 PASS  ../utilities/src/date.test.ts
  Date Utilities
    formatToMiddleEndian
      ✓ formats to middle-endian date format  (2 ms)
    formatToRangeString
      ✓ formats to date range string (1 ms)
 PASS  ../ui/src/components/loader/loader.test.tsx
  ✓ Renders the Loader component correctly (3 ms)
  ✓ Renders loader with custom background color (7 ms)
  ✓ Renders loader with custom height (1 ms)
 PASS  src/features/geocoder/ui/region-types-selection.test.tsx
  Region Types Selection
    ✓ should render all available Region Types (11 ms)
    ✓ should allow user select specific region type (8 ms)
 PASS  ../ui/src/components/stepper/stepper.test.tsx
  Renders Step Component
    ✓ renders check icon (6 ms)
    ✓ renders 1 finished circle (5 ms)
    ✓ renders 1 inProgress circle (4 ms)
    ✓ renders 1 incomplete circle (3 ms)
    ✓ renders first Step title (3 ms)
    ✓ renders first content text (2 ms)
 PASS  src/shared/lib/utilities/date.test.ts
  Date Utilities
    calculateDateRange
      ✓ calculates one year to now (2 ms)
      ✓ calculates year to now
      ✓ calculates three months to now
      ✓ calculates one month to now (1 ms)
 PASS  src/features/geocoder/api/endpoints.test.tsx
  Endpoint Testing
    ✓ should outline forward geocoding endpoint (1 ms)
    ✓ should correctly build a forward geocoding endpoint url with params
 PASS  ../ui/src/components/input/input.test.tsx
  Input
    ✓ renders input value value (2 ms)
 PASS  ../utilities/src/string.test.ts
  String Utilities
    isSubstring
      ✓ handles without case-sensitivity (1 ms)
      ✓ handles with case-sensitivity (3 ms)
 PASS  src/pages/page.test.tsx
  Page
    ✓ renders content (5 ms)
 PASS  ../utilities/src/enum.test.ts
  Enum Utilities
    getNth
      ✓ gets the nth enum (1 ms)
      ✓ returns undefined for out-of-bounds nth
    getFirst
      ✓ gets first enum
      ✓ returns undefined for empty enum
 PASS  src/features/citation/ui/citation-data-filter.test.tsx
  Citation-data-filter
    rendering
      ✓ renders citation data categories with initial placeholder (42 ms)
      ✓ renders citation date presets with initial placeholder (14 ms)
      ✓ renders date inputs with initial placeholders (19 ms)
    interactions
      ✓ should not render with default options (860 ms)
      ✓ should render with selected options (594 ms)
      ✓ should return selected options (504 ms)
-----------------------------------------------|---------|----------|---------|---------|-------------------------------------------------------------------------------
File                                           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                                                             
-----------------------------------------------|---------|----------|---------|---------|-------------------------------------------------------------------------------
All files                                      |   26.96 |    14.28 |   20.11 |   27.58 |                                                                               
 src                                           |       0 |        0 |       0 |       0 |                                                                               
  vite-env.d.ts                                |       0 |        0 |       0 |       0 |                                                                               
 src/app/ui                                    |       0 |      100 |       0 |       0 |                                                                               
  app.tsx                                      |       0 |      100 |       0 |       0 | 1-17                                                                          
 src/app/ui/layouts                            |       0 |      100 |       0 |       0 |                                                                               
  screen-layout.tsx                            |       0 |      100 |       0 |       0 | 1-5                                                                           
 src/app/ui/routing                            |       0 |      100 |     100 |       0 |                                                                               
  router.tsx                                   |       0 |      100 |     100 |       0 | 1-14                                                                          
 src/entities/branding/ui                      |     100 |      100 |     100 |     100 |                                                                               
  logo.tsx                                     |     100 |      100 |     100 |     100 |                                                                               
 src/entities/map/lib/controls                 |       0 |        0 |       0 |       0 |                                                                               
  map-draw-control.tsx                         |       0 |        0 |       0 |       0 | 1-75                                                                          
  map-draw-styles.ts                           |       0 |      100 |     100 |       0 | 1-126                                                                         
  use-map-draw.tsx                             |       0 |      100 |       0 |       0 | 1-8                                                                           
 src/entities/map/lib/provider                 |       0 |      100 |       0 |       0 |                                                                               
  map-provider.tsx                             |       0 |      100 |       0 |       0 | 1-38                                                                          
 src/entities/navigation/lib                   |     100 |      100 |     100 |     100 |                                                                               
  paths.ts                                     |     100 |      100 |     100 |     100 |                                                                               
 src/features/citation/lib                     |     100 |      100 |     100 |     100 |                                                                               
  constants.ts                                 |     100 |      100 |     100 |     100 |                                                                               
 src/features/citation/ui                      |   43.85 |        0 |   13.63 |   53.33 |                                                                               
  citation-data-category-selection.tsx         |     100 |      100 |     100 |     100 |                                                                               
  citation-data-filter.tsx                     |     100 |      100 |     100 |     100 |                                                                               
  citation-data-insights.tsx                   |       0 |        0 |       0 |       0 | 1-39                                                                          
  citation-date-presets-selection.tsx          |     100 |      100 |     100 |     100 |                                                                               
  use-citation-search-params.ts                |   33.73 |        0 |    2.85 |   45.16 | 12-13,18-19,23-29,33-42,47-48,53-54,59-60,63-64,69-70,73-74,79-80,85-86,89-90 
 src/features/geocoder/api                     |   66.66 |       25 |      50 |   68.75 |                                                                               
  endpoints.ts                                 |     100 |       50 |     100 |     100 | 11                                                                            
  requests.ts                                  |       0 |        0 |       0 |       0 | 1-7                                                                           
 src/features/geocoder/lib                     |     100 |      100 |     100 |     100 |                                                                               
  constants.ts                                 |     100 |      100 |     100 |     100 |                                                                               
  utilities.ts                                 |     100 |      100 |     100 |     100 |                                                                               
 src/features/geocoder/ui                      |   14.47 |        0 |   13.33 |   15.49 |                                                                               
  geocoder-result-header.tsx                   |       0 |      100 |       0 |       0 | 1-4                                                                           
  geocoder-result.tsx                          |       0 |      100 |       0 |       0 | 1-26                                                                          
  geocoder.tsx                                 |       0 |        0 |       0 |       0 | 1-90                                                                          
  region-types-selection.tsx                   |     100 |      100 |     100 |     100 |                                                                               
  search-mode-toggle-button.tsx                |     100 |      100 |     100 |     100 |                                                                               
 src/features/instructions                     |     100 |      100 |     100 |     100 |                                                                               
  how-it-works-button.tsx                      |     100 |      100 |     100 |     100 |                                                                               
 src/features/map/ui                           |       0 |        0 |       0 |       0 |                                                                               
  map.tsx                                      |       0 |        0 |       0 |       0 | 1-60                                                                          
  use-map.tsx                                  |       0 |        0 |       0 |       0 | 1-9                                                                           
 src/features/map/ui/draw                      |       0 |        0 |       0 |       0 |                                                                               
  map-draw-action-button.tsx                   |       0 |      100 |       0 |       0 | 1-6                                                                           
  map-draw-apply-button.tsx                    |       0 |        0 |       0 |       0 | 1-17                                                                          
  map-draw-button.tsx                          |       0 |        0 |       0 |       0 | 1-21                                                                          
  map-draw-clear-button.tsx                    |       0 |        0 |       0 |       0 | 1-24                                                                          
  map-draw-instructions.tsx                    |       0 |      100 |       0 |       0 | 1-17                                                                          
 src/pages                                     |   22.22 |        0 |   33.33 |   22.22 |                                                                               
  page.tsx                                     |     100 |      100 |     100 |     100 |                                                                               
  parking-insights-page.tsx                    |       0 |        0 |       0 |       0 | 1-35                                                                          
 src/shared/data/store                         |   66.66 |      100 |       0 |   66.66 |                                                                               
  store.ts                                     |     100 |      100 |     100 |     100 |                                                                               
  ui-slice.ts                                  |   54.54 |      100 |       0 |   54.54 | 25-34,40                                                                      
 src/shared/lib/constants                      |     100 |      100 |     100 |     100 |                                                                               
  date.ts                                      |     100 |      100 |     100 |     100 |                                                                               
 src/shared/lib/utilities                      |     100 |      100 |     100 |     100 |                                                                               
  date.ts                                      |     100 |      100 |     100 |     100 |                                                                               
 src/shared/lib/utilities/testing              |     100 |       50 |     100 |     100 |                                                                               
  mock-component.tsx                           |     100 |      100 |     100 |     100 |                                                                               
  test-wrapper.tsx                             |     100 |        0 |     100 |     100 | 11                                                                            
  testing.tsx                                  |     100 |    66.66 |     100 |     100 | 7                                                                             
 src/shared/ui/fake-input                      |       0 |      100 |       0 |       0 |                                                                               
  fake-input.tsx                               |       0 |      100 |       0 |       0 | 3-14                                                                          
 src/shared/ui/visualization                   |       0 |      100 |       0 |       0 |                                                                               
  visualization-stub.tsx                       |       0 |      100 |       0 |       0 | 1-2                                                                           
 src/widgets/citation/ui/explorer              |       0 |        0 |       0 |       0 |                                                                               
  citation-explorer-divider.tsx                |       0 |      100 |       0 |       0 | 1-2                                                                           
  citation-explorer-section-title.tsx          |       0 |      100 |       0 |       0 | 3-4                                                                           
  citation-explorer-section.tsx                |       0 |      100 |       0 |       0 | 3-4                                                                           
  citation-explorer-title.tsx                  |       0 |        0 |       0 |       0 | 3-12                                                                          
  citation-explorer.tsx                        |       0 |        0 |       0 |       0 | 1-128                                                                         
 src/widgets/citation/ui/search                |       0 |        0 |       0 |       0 |                                                                               
  comparative-search.tsx                       |       0 |        0 |       0 |       0 | 1-127                                                                         
  draw-search.tsx                              |       0 |      100 |       0 |       0 | 1-10                                                                          
  single-seach.tsx                             |       0 |      100 |       0 |       0 | 2-18                                                                          
 src/widgets/citation/ui/visualization         |       0 |        0 |       0 |       0 |                                                                               
  comparative-search-visualization-focused.tsx |       0 |      100 |       0 |       0 | 1-31                                                                          
  comparative-search-visualization.tsx         |       0 |        0 |       0 |       0 | 1-48                                                                          
  single-search-visualization.tsx              |       0 |        0 |       0 |       0 | 1-78                                                                          
 src/widgets/header                            |   81.81 |      100 |      50 |   81.81 |                                                                               
  header.tsx                                   |   81.81 |      100 |      50 |   81.81 | 11-12                                                                         
 src/widgets/radius-tool                       |   72.72 |    22.22 |      50 |      80 |                                                                               
  radius-tool.tsx                              |   72.72 |    22.22 |      50 |      80 | 27-31,35,54                                                                   
 src/widgets/radius-tool/utils                 |   54.05 |       50 |   43.75 |   54.05 |                                                                               
  formatDecimals.ts                            |     100 |      100 |     100 |     100 |                                                                               
  unit-convertor.ts                            |   48.48 |       40 |      40 |   48.48 | 18-23,30-34,40,71-107                                                         
-----------------------------------------------|---------|----------|---------|---------|-------------------------------------------------------------------------------
Test Suites: 22 passed, 22 total
Tests:       95 passed, 95 total
Snapshots:   0 total
Time:        3.609 s
Ran all test suites.

Checklist

• I have followed all conventions outlined in our documentation.
• I have fully tested my changes and confirmed that all new and existing tests pass.
• I have written meaningful commit messages for all changes.
• I have linted and formatted my changes to follow the code style of this repository.
• I have updated our documentation, accordingly.
• I have checked currently opened pull requests to ensure that there are no pending pull request for the same changes or issues.
• I have confirmed that this pull request fully meets the acceptance criteria for all related issues listed above.

[netlify]

✅ Deploy Preview for luckyparking ready!

Name	Link
🔨 Latest commit	2113637
🔍 Latest deploy log	https://app.netlify.com/sites/luckyparking/deploys/660797aed13d790008da9270
😎 Deploy Preview	https://deploy-preview-631--luckyparking.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.