Remove react-if

package.json

@@ -16,7 +16,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.17.0",
-    "react-if": "^4.1.1",
     "react-number-format": "^4.7.3",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",

src/components/FormContainer.tsx

@@ -14,7 +14,6 @@ import {
   Theme
 } from '@material-ui/core'
 import { Delete, Edit } from '@material-ui/icons'
-import { Else, If, Then } from 'react-if'
 import { SubmitHandler, useFormContext } from 'react-hook-form'
 import _ from 'lodash'
 import { ReactNode } from 'react'
@@ -265,29 +264,28 @@ const FormListContainer = <A,>(
   return (
     <>
       {itemDisplay}
-      <If condition={formState !== FormState.Closed}>
-        <Then>
-          <FormContainer onDone={handleSubmit(onSave)} onCancel={onClose}>
-            {children}
-          </FormContainer>
-        </Then>
-        <Else>
-          <If condition={max === undefined || items.length < max}>
-            <Then>
-              <div className={classes.buttonList}>
-                <Button
-                  type="button"
-                  onClick={openAddForm}
-                  color={prefersDarkMode ? 'default' : 'secondary'}
-                  variant="contained"
-                >
-                  Add
-                </Button>
-              </div>
-            </Then>
-          </If>
-        </Else>
-      </If>
+      {(() => {
+        if (formState !== FormState.Closed) {
+          return (
+            <FormContainer onDone={handleSubmit(onSave)} onCancel={onClose}>
+              {children}
+            </FormContainer>
+          )
+        } else if (max === undefined || items.length < max) {
+          return (
+            <div className={classes.buttonList}>
+              <Button
+                type="button"
+                onClick={openAddForm}
+                color={prefersDarkMode ? 'default' : 'secondary'}
+                variant="contained"
+              >
+                Add
+              </Button>
+            </div>
+          )
+        }
+      })()}
     </>
   )
 }

src/components/Questions.tsx

@@ -11,7 +11,6 @@ import { TaxesState } from 'ustaxes/redux/data'
 import { answerQuestion } from 'ustaxes/redux/actions'
 import { FormProvider, useForm } from 'react-hook-form'
 import { usePager } from './pager'
-import { Else, If, Then } from 'react-if'
 
 const Questions = (): ReactElement => {
   const information = useSelector((state: TaxesState) => state.information)
@@ -65,14 +64,12 @@ const Questions = (): ReactElement => {
         <List>
           {questions.map((q, i) => (
             <ListItem key={i}>
-              <If condition={q.valueTag === 'boolean'}>
-                <Then>
-                  <LabeledCheckbox name={q.tag} label={q.text} />
-                </Then>
-                <Else>
-                  <LabeledInput name={q.tag} label={q.text} />
-                </Else>
-              </If>
+              {(() => {
+                if (q.valueTag === 'boolean') {
+                  return <LabeledCheckbox name={q.tag} label={q.text} />
+                }
+                return <LabeledInput name={q.tag} label={q.text} />
+              })()}
             </ListItem>
           ))}
         </List>

src/components/TaxPayer/Address.tsx

@@ -1,6 +1,5 @@
 import { ReactElement } from 'react'
 import { useFormContext, useWatch } from 'react-hook-form'
-import { If, Then } from 'react-if'
 import {
   LabeledCheckbox,
   LabeledInput,
@@ -75,11 +74,13 @@ export default function AddressFields(props: AddressProps): ReactElement {
         name="address.city"
         patternConfig={Patterns.name}
       />
-      <If condition={allowForeignCountry}>
-        <Then>
-          <LabeledCheckbox label={checkboxText} name="isForeignCountry" />
-        </Then>
-      </If>
+      {(() => {
+        if (allowForeignCountry) {
+          return (
+            <LabeledCheckbox label={checkboxText} name="isForeignCountry" />
+          )
+        }
+      })()}
       {csz}
     </>
   )

src/components/TaxPayer/PersonFields.tsx

@@ -15,7 +15,6 @@ import DeleteIcon from '@material-ui/icons/Delete'
 import EditIcon from '@material-ui/icons/Edit'
 import ListItemText from '@material-ui/core/ListItemText'
 import PersonIcon from '@material-ui/icons/Person'
-import { If, Then } from 'react-if'
 
 export const PersonFields = ({
   children
@@ -53,15 +52,17 @@ export const PersonListItem = ({
       primary={`${person.firstName} ${person.lastName}`}
       secondary={formatSSID(person.ssid)}
     />
-    <If condition={editing !== undefined}>
-      <Then>
-        <ListItemIcon>
-          <IconButton onClick={onEdit} edge="end" aria-label="edit">
-            <EditIcon />
-          </IconButton>
-        </ListItemIcon>
-      </Then>
-    </If>
+    {(() => {
+      if (editing !== undefined) {
+        return (
+          <ListItemIcon>
+            <IconButton onClick={onEdit} edge="end" aria-label="edit">
+              <EditIcon />
+            </IconButton>
+          </ListItemIcon>
+        )
+      }
+    })()}
     <ListItemSecondaryAction>
       <IconButton onClick={remove} edge="end" aria-label="delete">
         <DeleteIcon />

src/components/createPDF.tsx

@@ -10,7 +10,6 @@ import { createStatePDF, createStateReturn, stateForm } from '../stateForms'
 import { create1040 } from 'ustaxes/irsForms/Main'
 import { isRight } from 'ustaxes/util'
 import { savePDF } from 'ustaxes/pdfFiller/pdfHandler'
-import { If } from 'react-if'
 import { Box, Button } from '@material-ui/core'
 
 const useStyles = makeStyles((theme) => ({
@@ -84,27 +83,27 @@ export default function CreatePDF(): ReactElement {
           Create Federal 1040
         </Button>
       </Box>
-      <If
-        condition={
-          residency !== undefined && stateForm[residency] !== undefined
+      {(() => {
+        if (residency !== undefined && stateForm[residency] !== undefined) {
+          return (
+            <Box
+              display="flex"
+              justifyContent="flex-start"
+              paddingTop={2}
+              paddingBottom={1}
+            >
+              <Button
+                type="button"
+                onClick={stateReturn}
+                variant="contained"
+                color="primary"
+              >
+                Create {residency} Return
+              </Button>
+            </Box>
+          )
         }
-      >
-        <Box
-          display="flex"
-          justifyContent="flex-start"
-          paddingTop={2}
-          paddingBottom={1}
-        >
-          <Button
-            type="button"
-            onClick={stateReturn}
-            variant="contained"
-            color="primary"
-          >
-            Create {residency} Return
-          </Button>
-        </Box>
-      </If>
+      })()}
       {navButtons}
     </form>
   )

src/components/income/RealEstate.tsx

@@ -29,7 +29,6 @@ import { HouseOutlined } from '@material-ui/icons'
 import { FormListContainer } from 'ustaxes/components/FormContainer'
 import { Grid } from '@material-ui/core'
 import { CURRENT_YEAR } from 'ustaxes/data/federal'
-import { If, Then } from 'react-if'
 import _ from 'lodash'
 
 interface PropertyAddForm {
@@ -229,15 +228,17 @@ export default function RealEstate(): ReactElement {
           name="propertyType"
           valueMapping={(n) => n}
         />
-        <If condition={propertyType === 'other'}>
-          <Then>
-            <LabeledInput
-              name="otherPropertyType"
-              label="Short property type description"
-              required={true}
-            />
-          </Then>
-        </If>
+        {(() => {
+          if (propertyType === 'other') {
+            return (
+              <LabeledInput
+                name="otherPropertyType"
+                label="Short property type description"
+                required={true}
+              />
+            )
+          }
+        })()}
       </Grid>
       <h3>Use</h3>
       <Grid container spacing={2}>

src/components/income/W2JobInfo.tsx

@@ -27,7 +27,6 @@ import { FormListContainer } from 'ustaxes/components/FormContainer'
 import { Grid } from '@material-ui/core'
 import { Work } from '@material-ui/icons'
 import { addW2, editW2, removeW2 } from 'ustaxes/redux/actions'
-import { If, Then } from 'react-if'
 import { Alert } from '@material-ui/lab'
 
 interface IncomeW2UserInput {
@@ -226,17 +225,17 @@ export default function W2JobInfo(): ReactElement {
   )
 
   const spouseW2Message: ReactNode = (() => {
-    if (spouse !== undefined && spouseW2s.length > 0) {
+    if (
+      spouse !== undefined &&
+      spouseW2s.length > 0 &&
+      filingStatus === FilingStatus.MFS
+    ) {
       return (
-        <If condition={filingStatus === FilingStatus.MFS}>
-          <Then>
-            <Alert className="inner" severity="warning">
-              Filing status is set to Married Filing Separately.{' '}
-              <strong>{spouse.firstName}</strong>
-              &apos;s W2s will not be added to the return.
-            </Alert>
-          </Then>
-        </If>
+        <Alert className="inner" severity="warning">
+          Filing status is set to Married Filing Separately.{' '}
+          <strong>{spouse.firstName}</strong>
+          &apos;s W2s will not be added to the return.
+        </Alert>
       )
     }
   })()