Standardize phone number format

[trevorshannon]

People enter phone numbers in our database with a variety of formats, but we want to display a single format to our users. Examples of varying phone format:

https://www.theunitedeffort.org/housing/affordable-housing/1389/

https://www.theunitedeffort.org/housing/affordable-housing/filter?city=Mountain+View&availability=Available&availability=Waitlist+Open&rentMax=&includeUnknownRent=on&income=&includeUnknownIncome=on&propertyName=#results

The format we want to show is XXX-XXX-XXXX, e.g. 123-456-5555

If there is an extension, we want to show XXX-XXX-XXXX ext XXX, e.g. 123-456-5555 ext 321

[trevorshannon]

The list of all current phone number input formats is compiled here:

phone-formats.txt

[trevorshannon]

There is a function formatPhone that tries to do this already but does not do a good enough job.

https://github.com/theunitedeffort/theunitedeffort.org/blob/1e6ab7b9a3e42b798c9c923947d1b76d5eb32854/src/config/eleventy-base-config.js#L905

I imagine some improvements can be made by using regex.

[DairyProducts]

Even with the original formatPhone function, the phone numbers appear to display properly.

Furthermore, could you please show an example of a phone number with an extension on the current website? I'm not sure what that looks like.

[trevorshannon]

Well here's a mystery. The production site and my own development site (from netlify dev) show the incorrectly-formatted numbers.

formatPhone as it's written now simply replaces parentheses to convert (XXX) XXX-XXXX to XXX-XXX-XXXX so it would do absolutely nothing for phone numbers that have all 10 digits in a row with no separators.

I wonder if the values are coming from Airtable slightly differently for us due to version differences. What's the result when you run npm list?

Here's what I have:

demo-site@1.0.0 /Users/trevor/projects/theunitedeffort.org
├── @11ty/eleventy-fetch@4.0.1
├── @11ty/eleventy-img@4.0.2
├── @11ty/eleventy@2.0.1
├── @babel/cli@7.24.1
├── @babel/core@7.24.4
├── @babel/preset-env@7.24.4
├── @stryker-mutator/core@8.2.6
├── @stryker-mutator/jest-runner@8.2.6
├── @testing-library/cypress@10.0.1
├── airtable@0.12.2
├── cypress@13.7.3
├── eleventy-plugin-nesting-toc@1.3.0
├── eslint-config-google@0.14.0
├── eslint-plugin-builtin-compat@0.0.2 (git+ssh://git@github.com/theunitedeffort/eslint-plugin-builtin-compat.git#35b234ba06ea86ce726b0c54e565cfd88282b304)
├── eslint-plugin-cypress@2.15.2
├── eslint@8.41.0
├── jest-environment-jsdom@29.7.0
├── jest-expect-message@1.1.3
├── jest@29.7.0
├── marked@12.0.1
├── netlify-cli@17.22.1
├── npm-run-all@4.1.5
└── sass@1.75.0

As for numbers with extensions, you can look at Monroe Commons: https://www.theunitedeffort.org/housing/affordable-housing/1408/

You should be able to develop your format function just from the list of phone numbers in this comment. If your code can take all those values as input and output a list of standardized phone numbers, then it should work with all property listings.

There are some online regex tools that could be helpful if you decide to go that route. For example, regexr.com

[DairyProducts]

Here's my npm list

npm list
demo-site@1.0.0 C:\Users\Derek\Desktop\theunitedeffort.org
+-- @11ty/eleventy-fetch@4.0.1
+-- @11ty/eleventy-img@4.0.2
+-- @11ty/eleventy@2.0.1
+-- @babel/cli@7.24.1
+-- @babel/core@7.24.4
+-- @babel/preset-env@7.24.4
+-- @stryker-mutator/core@8.2.6
+-- @stryker-mutator/jest-runner@8.2.6
+-- @testing-library/cypress@10.0.1
+-- airtable@0.12.2
+-- cypress@13.7.3
+-- eleventy-plugin-nesting-toc@1.3.0
+-- eslint-config-google@0.14.0
+-- eslint-plugin-builtin-compat@0.0.2 (git+ssh://git@github.com/theunitedeffort/eslint-plugin-builtin-compat.git#35b234ba06ea86ce726b0c54e565cfd88282b304)
+-- eslint-plugin-cypress@2.15.2
+-- eslint@8.41.0
+-- jest-environment-jsdom@29.7.0
+-- jest-expect-message@1.1.3
+-- jest@29.7.0
+-- marked@12.0.1
+-- netlify-cli@17.22.1
+-- npm-run-all@4.1.5
`-- sass@1.75.0