Refactor Dashboard

[ecumene]

• [x] Make a delete project button that renders this:

          <Button onClick={handleDeleteShow} variant="dark">
            Delete Project
          </Button>
          <>
            <Modal show={isDeleteModalOpen} onHide={handleDeleteClose}>
              <Modal.Header>
                <Modal.Title>Delete Project</Modal.Title>
              </Modal.Header>
              <Modal.Body>Are you sure? This can&apos;t be undone.</Modal.Body>
              <Modal.Footer>
                <Button variant="secondary" onClick={handleDeleteClose}>
                  Close
                </Button>
                <Button onClick={deleteProject} variant="primary">
                  Yes, delete this project!
                </Button>
              </Modal.Footer>
            </Modal>
          </>

• [x] Make a calculator button that opens the calculator modal, similar to the above

• [x] Separate totals into its own component

  const numberOfFeetOfPlate = isImperialUnit
    ? Math.ceil(numberOfStuds * 3.3)
    : Math.ceil(numberOfStuds * (3.3 * CONVERSION_COEFFICIENT));
  const topAndBottomPlates = isImperialUnit
    ? `${numberOfFeetOfPlate} feet `
    : `${numberOfFeetOfPlate} metres `;
  const studHeightDivisor = isImperialUnit ? 8 : 2.4;
  // TODO make this toggleable
  const studCost = twoByFourPrice;
  const totalCost =
    numberOfStuds * studCost + (numberOfFeetOfPlate / studHeightDivisor) * studCost;

[JPM709]

DeleteProject.jsx Modal finished.

[JPM709]

Calculator Modal abstracted to its own component.

[JPM709]

totals calculations moved into the component that uses it: TotalModal.jsx