Skip to content

SEPTA Fare Calculator - First Iteration #208

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.

Sign up for GitHub

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

Open
lovo-h wants to merge 36 commits into
base: master
Choose a base branch
from
Open

SEPTA Fare Calculator - First Iteration #208

Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
c3211e9
Update .ignore: ignore IDE's '.idea/' directory
lovo-h Sep 7, 2025
36c2c1d
Add .nvmrc: v23.11.1
lovo-h Sep 7, 2025
5f81e23
Run 'npm init' and 'npm install' commands
lovo-h Sep 7, 2025
aa5380d
Install needed NPM packages for React
lovo-h Sep 7, 2025
9cd63d4
Setup Webpack + get a basic, working React app
lovo-h Sep 7, 2025
7f8afba
NPM: Add 'reset-css' package
lovo-h Sep 7, 2025
6e48b50
Setup Widget component's basic HTML layout
lovo-h Sep 7, 2025
0b39af3
Move fares.json into ./src/widgets/assets dir
lovo-h Sep 7, 2025
96d65ef
Add SEPTA.svg logo
lovo-h Sep 7, 2025
4704b88
Apply mobile design
lovo-h Sep 7, 2025
233c29e
Add Custom Input Components: Dropdown, RadioButton, InputBox
lovo-h Sep 8, 2025
5dd2889
NPM: Add 'axios' and 'dotenv' packages
lovo-h Sep 8, 2025
78cd005
Add Global Env Variables
lovo-h Sep 8, 2025
416e916
Use FareService To Populate Input Fields With Remote Data
lovo-h Sep 8, 2025
9bb70b8
DropDown: Resize Width Based On Content
lovo-h Sep 8, 2025
89d61cc
Bug Fix: Default To Empty String When InputBox's Value Is Empty
lovo-h Sep 9, 2025
5ad7084
Add Total Cost Calculations + Bulk Cost Breakdown And Savings
lovo-h Sep 9, 2025
8a3074c
Rename setZone to handleZoneChange
lovo-h Sep 9, 2025
19c947c
Rename setInputsHelper to handleInputsChange
lovo-h Sep 9, 2025
2b97240
Cleanup: Make Widget Markup Readable By Consolidating Inputs
lovo-h Sep 9, 2025
c21f7f5
Improve Readability: Move Cost UI Elements To Separate Cost Component
lovo-h Sep 9, 2025
cefe930
TODO: Remember to Test Total Cost Logic
lovo-h Sep 9, 2025
dbd7c94
Cleanup: Rename result.breakdown.remainder to result.breakdown.single
lovo-h Sep 9, 2025
9025f11
UI Adjustment: Spacing Between Divider & Inputs
lovo-h Sep 9, 2025
a73b288
Accessibility: Add Labels For Inputs & Add Header, Main, Footer
lovo-h Sep 9, 2025
059dbe1
Accessibility: Announce Total Price When Inputs Change
lovo-h Sep 9, 2025
7b5fd90
Rename result...pricePerRide to result...price
lovo-h Sep 9, 2025
1d5b1f2
TODO: Add Loading State For Slow Connections
lovo-h Sep 9, 2025
716d79a
TODO: Confirm Breakdown Section's UI/UX With Design
lovo-h Sep 9, 2025
c66cf00
Apply LightHouse Insights: Description Meta, CSS
lovo-h Sep 9, 2025
0e43eac
Accessibility: Read Helper Text Upon Dropdown Selection
lovo-h Sep 9, 2025
5ce22d9
Add Comments: Backend Integration Notes
lovo-h Sep 9, 2025
5d753c8
Add .gitignore: septa-fare-calculator/dist/ Directory
lovo-h Sep 9, 2025
09c1d6e
Add Loading States
lovo-h Sep 9, 2025
c15a22c
Fix: Add Horizontal Padding To Helper Text
lovo-h Sep 9, 2025
7b6e16b
Fix: Lowercase Word 'breakdown' in 'Fare Breakdown'
lovo-h Sep 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 34 additions & 8 deletions septa-fare-calculator/src/widget/components/Dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,45 @@
import React from 'react';
import React, { useEffect, useRef } from 'react';
import { dayTypeLabelLookup } from '../utils/common';

function DropDown( { options, value, onChange } ) {
const spanRef = useRef();
const [ width, setWidth ] = React.useState( 'auto' );
useEffect( () => {
if ( ! spanRef.current ) {
return;
}

setWidth( spanRef.current.offsetWidth + 100 );
}, [ value ] );

// Return early if no options.
if ( ! options || options.length === 0 ) {
return null;
}


const spanStyle = {
// TODO: fontSize should not be hardcoded but derived from CSS.
fontSize: '1.6rem',
position: 'absolute',
visibility: 'hidden',
whiteSpace: 'nowrap',
font: 'inherit'
};

return (
<select className="dropdown" value={ value } onChange={ onChange }>
{ options.map( ( option ) => (
<option key={ option.value } value={ option.value }>
{ option.label }
</option>
) ) }
</select>
<>
<select className="dropdown" style={ { width } } value={ value } onChange={ onChange }>
{ options.map( ( option ) => (
<option key={ option.value } value={ option.value }>
{ option.label }
</option>
) ) }
</select>
<span ref={ spanRef } style={ spanStyle }>
{ dayTypeLabelLookup[ value ] || value }
Copy link
Author

@lovo-h lovo-h Sep 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, @andyknapp.

This is where the "1" is being rendered. When I added the "resize width" functionality for the DropDown component, I based the width on the text length for the "When are you riding" dropdown.

However, the changes didn't account for the "Where are you going" drop-down. Hence the "1", since it can't be found in the dayTypeLabelLookup dictionary.

To fix this, I would need something like the following:

import React, { useEffect, useId, useRef } from 'react';
...
function DropDownSelect( { id, label, options, value, helperText, onChange } ) {
  ...
  // Note: May need to be optimized.
  const longestLabel = options.reduce( ( longest, option ) => {
    return option.label.length > longest.length ? option.label : longest;
  }, '' );
  ...
  return (
    <>
      ...
      <span ref={ spanRef } style={ spanStyle }>
        { longestLabel }
      </span>
    </>
  );
}

export default DropDownSelect;

</span>
</>
);
}

Expand Down