feat: address field #7966
feat: address field #7966
Conversation
Datadog ReportBranch report: ✅ 0 Failed, 995 Passed, 1 Skipped, 2m 46.47s Total duration (4m 16.62s time saved) |
merged with develop
Datadog ReportBranch report: ✅ 0 Failed, 710 Passed, 0 Skipped, 1m 30.29s Total duration (5m 45.35s time saved) |
| _id: new ObjectId().toHexString(), | ||
| question: `Address question`, | ||
| answerArray: [ | ||
| 'blockNumber_161', |
| export const DecryptedRow = memo( | ||
| ({ row, attachmentDecryptionKey }: DecryptedRowProps): JSX.Element => { | ||
| console.log(row) |
| } | ||
|
|
||
| // handle postal code additions | ||
| if (arr && arr[arr.length - 1]) |
There was a problem hiding this comment.
Would recommend avoiding implicit references. i.e., the last value of the array to be postal code.
Perhaps array destructing would be terser here as we would be able to avoid referencing by arr[n]
const arr = [
"blockNumber_161",
"streetName_BUKIT BATOK STREET 11",
"buildingName_",
"levelNumber_",
"unitNumber_",
"postalCode_650161",
];
const [
blockNumber,
streetName,
buildingName,
levelNumber,
unitNumber,
postalCode,
] = arr;
/*
[LOG]: {
"blockNumber": "blockNumber_161",
"streetName": "streetName_BUKIT BATOK STREET 11",
"buildingName": "buildingName_",
"levelNumber": "levelNumber_",
"unitNumber": "unitNumber_",
"postalCode": "postalCode_650161"
}
*/| // handle leve;/unit number additions | ||
| if (arr && arr[arr.length - 2] && arr[arr.length - 3]) { | ||
| const combinedUnit = '#' + arr[arr.length - 3] + '-' + arr[arr.length - 2] | ||
| arr.splice(arr.length - 3, 2, combinedUnit) |
There was a problem hiding this comment.
Generally, we try to avoid in-place modification as it can easily lead to mistakes.
| * responses format: | ||
| * ["blockNumber_161","streetName_BUKIT BATOK STREET 11","buildingName_","levelNumber_","unitNumber_","postalCode_650161"] |
There was a problem hiding this comment.
We can use jsdocs to annotate input format.
| * responses format: | |
| * ["blockNumber_161","streetName_BUKIT BATOK STREET 11","buildingName_","levelNumber_","unitNumber_","postalCode_650161"] | |
| * @param responses ["blockNumber_161","streetName_BUKIT BATOK STREET 11","buildingName_","levelNumber_","unitNumber_","postalCode_650161"] |
There was a problem hiding this comment.
We can also annotate return values
| @@ -49,6 +49,7 @@ export const CSP_CORE_DIRECTIVES = { | |||
| 'https://*.google-analytics.com', | |||
| 'https://*.analytics.google.com', | |||
| 'https://*.googletagmanager.com', | |||
| 'https://www.onemap.gov.sg/api/common/elastic/search?searchVal=*&returnGeom=Y&getAddrDetails=Y', | |||
There was a problem hiding this comment.
We can whitelist a more general API.
The intention of having this is to protect our users from CORS via unsolicited requests to random sites. (i.e., our web app shouldn't need to call evil.com as part of the normal application usage).
Since we do intent to call onemap.gov.sg we can have it to be https://www.onemap.gov.sg/api/ instead.
|
|
||
| /** | ||
| * @param responses answerArray from address field | ||
| * @returns human-readable format of address, similar to handleAddressResponseDisplay (mutations.ts) |
There was a problem hiding this comment.
If the function's input and output are the same, could we move them to a shared utils for better reuse?
| method: 'GET', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| Cookie: '_toffsuid=rB8uPWZEP/wp9bsoBHUZAg==', // check this |
There was a problem hiding this comment.
We can likely omit this cookie.
| import FormLabel from '~components/FormControl/FormLabel' | ||
| import Input from '~components/Input' | ||
|
|
||
| import { verifyAddress } from '../../../../../src/app/services/address/address.service' |
There was a problem hiding this comment.
FE code should not reference BE code. If there's a need we'll have to move them to shared.
Specifically for this function, it should exist as a FE service. We can pair on creating this.
| @@ -0,0 +1,44 @@ | |||
| /** | |||
There was a problem hiding this comment.
See comment on frontend/src/templates/Field/Address/AddressField.tsx to move this BE service to FE service
Problem
Closes FRM-1931
There is no current good way to collect address information for forms. Current users are either (1) creating 1 text field to grab address information or (2) creating multiple text fields to grab separated address information (postal code, block number, street name etc.). These can lead to multiple problems:
Solution
Build a new basic field focused on collecting local address information. Explicily collect
Additionally:
provide auto-complete of address population using OneMap API to get address info (block number and street name) based on postal code for ease of input for users
allow editing after auto-complete for user input flexibility
enforce type-checking for particular address fields
address output is handled 2 different ways depending on use case
161, BUKIT BATOK STREET 11, #1-2, SINGAPORE 650161Breaking Changes
Features:
Screenshots:
Tests
(to check email notification display)