add manual address entry to letter form

src/components/common/DynamicList.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { DynamicListProps } from "./PropTypes";
+import { v1 as uuid } from "uuid";
+import { isFunction } from "lodash";
+
+interface DynamicListState<TModel> {
+  /** An array of objects that represent the state of the child components. */
+  listItems: Array<TModel>;
+  /** An array of UUID keys mapped 1:1 with listItems, used to indicate
+   * when React should re-render.
+   */
+  keys: Array<string>;
+}
+
+/**
+ * A component that can generate an arbitrary number
+ * of instances of a component provided by the caller.
+ */
+export default class DynamicList<TModel> extends React.Component<
+  DynamicListProps<TModel>,
+  DynamicListState<TModel>
+> {
+  /**
+   * Initialize component and its state.
+   * @param {DynamicListProps<TModel>} props
+   */
+  constructor(props: DynamicListProps<TModel>) {
+    super(props);
+    this.state = {
+      listItems: [],
+      keys: [],
+    };
+  }
+
+  /**
+   * Removes the child component instance at the provided index.
+   * @param {number} index
+   */
+  deleteItem(index: number): void {
+    const updatedListItems = [...this.state.listItems];
+    updatedListItems.splice(index, 1);
+
+    const updatedKeys = [...this.state.keys];
+    updatedKeys.splice(index, 1);
+
+    this.setState({ listItems: updatedListItems, keys: updatedKeys });
+    this.props.onListItemsUpdated(this.state.listItems);
+  }
+
+  /**
+   * Creates a new child component instance.
+   */
+  addItem(): void {
+    const updatedListItems = [
+      ...this.state.listItems,
+      this.props.modelFactory(),
+    ];
+    const updatedKeys = [...this.state.keys, uuid()];
+
+    this.setState({ listItems: updatedListItems, keys: updatedKeys });
+    this.props.onListItemsUpdated(this.state.listItems);
+  }
+
+  /**
+   * Replaces the child component state at the provided
+   * index with the provided value.
+   * @param {number} index the index of the child instance to update
+   * @param {TModel} value the new state value
+   */
+  updateItem(index: number, value: TModel): void {
+    const updatedModel = [...this.state.listItems];
+    updatedModel[index] = value;
+    this.setState({ listItems: updatedModel });
+    this.props.onListItemsUpdated(this.state.listItems);
+  }
+
+  /**
+   * Renders each child instance using the component provided in the caller.
+   * @return {React.ReactNode} the rendered child components
+   */
+  renderChildren(): React.ReactNode {
+    return this.state.listItems.map((entry: TModel, index: number) => {
+      return (
+        <div key={this.state.keys[index]}>
+          <button onClick={() => this.deleteItem(index)}>Delete</button>
+          {this.props.renderListItem((value: TModel) =>
+            this.updateItem(index, value)
+          )}
+        </div>
+      );
+    });
+  }
+
+  /**
+   * React render method.
+   * @return {React.ReactNode} the rendered component
+   */
+  render(): React.ReactNode {
+    return (
+      <>
+        {this.renderChildren()}
+        <button onClick={() => this.addItem()}>
+          {isFunction(this.props.addText)
+            ? this.props.addText(this.state.listItems)
+            : this.props.addText}
+        </button>
+      </>
+    );
+  }
+}

src/components/common/PropTypes.ts

@@ -0,0 +1,6 @@
+export interface DynamicListProps<TModel> {
+  addText: string | ((listItems: Array<TModel>) => string);
+  modelFactory: () => TModel;
+  onListItemsUpdated: (value: Array<TModel>) => void;
+  renderListItem: (onListItemUpdated: (value: TModel) => void) => JSX.Element;
+}

src/components/common/index.ts

@@ -0,0 +1,5 @@
+export { default as Footer } from "./Footer";
+export { default as Header } from "./Header";
+export { default as Layout } from "./Layout";
+export { default as DynamicList } from "./DynamicList";
+export * from "./PropTypes";

src/components/letter/AddressInput.tsx

@@ -0,0 +1,110 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { useState, ReactElement } from "react";
+
+import { LobAddress } from "./LetterTypes";
+
+type AddressInputProps = {
+  /** callback function for every time the address is updated */
+  onAddressUpdated: (a: LobAddress) => void;
+};
+
+/** Renders input fields for the user's address
+ *
+ * @return {ReactElement} the rendered component
+ */
+export default function AddressInput({
+  onAddressUpdated: onAddressUpdated,
+}: AddressInputProps): ReactElement {
+  const [address, setAddress] = useState({} as LobAddress);
+
+  /** Callback for when part of user's address is updated.
+   * adds it to the full address in our internal state and
+   * calls the parent's callback
+   *
+   * @param {Address} addressPatch the updated address
+   */
+  function updateAddress(addressPatch: Partial<LobAddress>) {
+    const updatedAddress = { ...address, ...addressPatch };
+    setAddress(updatedAddress);
+    onAddressUpdated(updatedAddress);
+  }
+
+  return (
+    <>
+      <fieldset className="pure-form-stacked">
+        <div className="pure-control-group">
+          <label>Name</label>
+          <input
+            className="pure-u-1"
+            placeholder="Name"
+            type="text"
+            name="name"
+            onChange={(e) =>
+              updateAddress({
+                name: e.target.value,
+              })
+            }
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <div className="pure-control-group">
+          <label>Address</label>
+
+          <input
+            className="pure-u-1"
+            placeholder="123 Main St"
+            type="text"
+            name="address"
+            onChange={(e) =>
+              updateAddress({
+                address_line1: e.target.value,
+              })
+            }
+          />
+
+          <div className="pure-g">
+            <div className="right-pad-input pure-u-1 pure-u-md-1-3">
+              <input
+                placeholder="City"
+                name="city"
+                onChange={(e) =>
+                  updateAddress({
+                    address_city: e.target.value,
+                  })
+                }
+              />
+            </div>
+            <div className="right-pad-input pure-u-1 pure-u-md-1-3">
+              <input
+                placeholder="State"
+                type="text"
+                name="state"
+                onChange={(e) =>
+                  updateAddress({
+                    address_state: e.target.value,
+                  })
+                }
+              />
+            </div>
+
+            <div className="pure-u-1 pure-u-md-1-3">
+              <input
+                className="full-width"
+                placeholder="Zipcode"
+                type="text"
+                name="zip"
+                onChange={(e) =>
+                  updateAddress({
+                    address_zip: e.target.value,
+                  })
+                }
+              />
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </>
+  );
+}

src/components/letter/LetterForm.tsx

@@ -9,11 +9,13 @@ import "purecss/build/grids-responsive-min.css";
 import { Template, LobAddress } from "./LetterTypes";
 import CheckoutForm from "./CheckoutForm";
 import MyAddressInput from "./MyAddressInput";
+import AddressInput from "./AddressInput";
 import { CombinedOfficialFetchingService } from "../../services/CombinedOfficialFetchingService";
 import { OfficialAddressCheckboxList } from "./OfficialAddressCheckboxList";
 import { TemplateInputs } from "./TemplateInputs";
 import { OfficialAddress } from "../../services/OfficialTypes";
 import { lobAddressToSingleLine } from "./LobAddressUtils";
+import { DynamicList } from "../common";
 
 const SpecialVars = ["YOUR NAME"]; // , "YOUR DISTRICT"];
 
@@ -65,6 +67,9 @@ function LetterForm({ template, googleApiKey }: LetterFormProps): ReactElement {
   const [myAddress, setMyAddress] = useState({} as LobAddress);
   const [variableMap, setVariableMap] = useState({} as Record<string, string>);
   const [checkedAddresses, setCheckedAddresses] = useState([] as LobAddress[]);
+  const [additionalAddresses, setAdditionalAddresses] = useState(
+    [] as LobAddress[]
+  );
   const [officials, setOfficials] = useState([] as OfficialAddress[]);
   const [isSearching, setIsSearching] = useState(false);
 
@@ -214,8 +219,21 @@ function LetterForm({ template, googleApiKey }: LetterFormProps): ReactElement {
             />
           )}
 
+          <DynamicList
+            addText={(addresses) =>
+              addresses.length === 0
+                ? "Add Missing Representative"
+                : "Add Another"
+            }
+            onListItemsUpdated={setAdditionalAddresses}
+            modelFactory={() => ({} as LobAddress)}
+            renderListItem={(onListItemUpdated: (a: LobAddress) => void) => (
+              <AddressInput onAddressUpdated={onListItemUpdated} />
+            )}
+          />
+
           <CheckoutForm
-            checkedAddresses={checkedAddresses}
+            checkedAddresses={[...checkedAddresses, ...additionalAddresses]}
             myAddress={myAddress}
             body={bodyText}
             allVariablesFilledIn={allVariablesFilledIn}

src/components/letter/OfficialAddressCheckboxList.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from "react";
 import { OfficalAddressCheckbox } from "./OfficialAddressCheckbox";
 import { LobAddress } from "./LetterTypes";
 import { OfficialAddress } from "../../services/OfficialTypes";
+import _ from "lodash";
 
 type OfficialAddressCheckboxListProps = {
   /** list of addresses to render, currently not used by callers */
@@ -28,19 +29,39 @@ export function OfficialAddressCheckboxList({
 }: OfficialAddressCheckboxListProps): ReactElement {
   const officialAddresses: OfficialAddress[] = [...addresses, ...officials];
 
-  if (myAddress.address_line1 && officialAddresses.length === 0) {
-    return <div>No representatives found, sorry</div>;
-  }
-
   return (
-    <div className="pure-controls">
-      {officialAddresses?.map((officialAddress) => (
-        <OfficalAddressCheckbox
-          key={JSON.stringify(officialAddress)}
-          officialAddress={officialAddress}
-          onAddressSelected={onAddressSelected}
-        />
-      ))}
-    </div>
+    <>
+      {myAddress.address_line1 && officialAddresses.length === 0 ? (
+        <>
+          <div>No representatives found, sorry</div>
+          <br />
+        </>
+      ) : (
+        <div className="pure-controls">
+          {officialAddresses?.map((officialAddress) => (
+            <OfficalAddressCheckbox
+              key={JSON.stringify(officialAddress)}
+              officialAddress={officialAddress}
+              onAddressSelected={onAddressSelected}
+            />
+          ))}
+        </div>
+      )}
+
+      <div hidden={_.isEmpty(officialAddresses) && !myAddress.address_line1}>
+        <em>
+          This list is populated using the Google Civic Information API. If an
+          address is missing, you can use the "Add Missing Representative"
+          button below to enter it manually.
+          <span>
+            &nbsp;
+            <a href="https://docs.google.com/forms/d/e/1FAIpQLScA45a5Acnn6hK1R6dd45ttoVbI4tWc7oXl-pjQ-84yx7yuxA/viewform">
+              Additionally, consider giving feedback regarding the missing
+              information.
+            </a>
+          </span>
+        </em>
+      </div>
+    </>
   );
 }