Use && operator to render JSX conditionally where possible

mxcube · Sep 30, 2024 · d5cee07 · d5cee07
1 parent b3a6811
commit d5cee07
Show file tree

Hide file tree

Showing 13 changed files with 79 additions and 82 deletions.
diff --git a/ui/src/components/Equipment/PlateManipulator.jsx b/ui/src/components/Equipment/PlateManipulator.jsx
@@ -278,7 +278,7 @@ export default function PlateManipulator(props) {
           >
             Move to drop {selectedDrop}
           </Item>
-          {crystalForSelectedWell?.shelf === selectedDrop ? (
+          {crystalForSelectedWell?.shelf === selectedDrop && (
             <>
               <Separator />
               <Item
@@ -292,14 +292,13 @@ export default function PlateManipulator(props) {
                 Move to Crystal Position
               </Item>
             </>
-          ) : null}
+          )}
         </Menu>
-        {crystalForSelectedWell?.shelf === selectedDrop
-          ? crimsImg(
-              crystalForSelectedWell.image_url,
-              crystalForSelectedWell.sample,
-            )
-          : null}
+        {crystalForSelectedWell?.shelf === selectedDrop &&
+          crimsImg(
+            crystalForSelectedWell.image_url,
+            crystalForSelectedWell.sample,
+          )}
         {plate.name === 'ChipX' ? (
           <div
             style={{
@@ -486,16 +485,16 @@ export default function PlateManipulator(props) {
                           >
                             Move to this Well
                           </Item>
-                          {crystal !== null
-                            ? ((<Separator />),
-                              (<b>Crystal Info : </b>),
-                              (
-                                <ul>
-                                  <li>Sample : {crystal.sample}</li>
-                                  <li>Drop : {crystal.shelf}</li>
-                                </ul>
-                              ))
-                            : null}
+                          {crystal !== null && (
+                            <>
+                              <Separator />
+                              <b>Crystal Info : </b>
+                              <ul>
+                                <li>Sample : {crystal.sample}</li>
+                                <li>Drop : {crystal.shelf}</li>
+                              </ul>
+                            </>
+                          )}
                         </Menu>
                       </div>
                     );
@@ -592,16 +591,16 @@ export default function PlateManipulator(props) {
                           >
                             Move to this Well
                           </Item>
-                          {crystal !== null
-                            ? ((<Separator />),
-                              (<b>Crystal Info : </b>),
-                              (
-                                <ul>
-                                  <li>Sample : {crystal.sample}</li>
-                                  <li>Drop : {crystal.shelf}</li>
-                                </ul>
-                              ))
-                            : null}
+                          {crystal !== null && (
+                            <>
+                              <Separator />
+                              <b>Crystal Info : </b>
+                              <ul>
+                                <li>Sample : {crystal.sample}</li>
+                                <li>Drop : {crystal.shelf}</li>
+                              </ul>
+                            </>
+                          )}
                         </Menu>
                       </div>
                     );

diff --git a/ui/src/components/Equipment/SampleChanger.jsx b/ui/src/components/Equipment/SampleChanger.jsx
@@ -114,11 +114,11 @@ function SampleChangerTreeItem(props) {
             </Dropdown.Header>
             <Dropdown.Divider />
             <Dropdown.Item onClick={handleMountClick}>Mount</Dropdown.Item>
-            {props.loadedSample === props.label ? (
+            {props.loadedSample === props.label && (
               <Dropdown.Item onClick={handleUnmountClick}>
                 Umount this position
               </Dropdown.Item>
-            ) : null}
+            )}
           </DropdownButton>
           <span style={ls}>
             &nbsp;

diff --git a/ui/src/components/Lims/LimsResultSummary.jsx b/ui/src/components/Lims/LimsResultSummary.jsx
@@ -76,7 +76,7 @@ export class LimsResultSummary extends React.Component {
         className="lims-result-summary"
         style={style}
       >
-        {!taskHasLimsData(task) ? this.taskSummary() : null}
+        {!taskHasLimsData(task) && this.taskSummary()}
         <div
           // ref="resultContainer"
           ref={(ref) => {

diff --git a/ui/src/components/SampleQueue/CharacterisationTaskItem.jsx b/ui/src/components/SampleQueue/CharacterisationTaskItem.jsx
@@ -238,16 +238,16 @@ export default class TaskItem extends Component {
         <td>
           <a>{parameters.energy.toFixed(4)}</a>
         </td>
-        {parameters.kappa_phi !== null ? (
+        {parameters.kappa_phi !== null && (
           <td>
             <a>{parameters.kappa_phi.toFixed(2)}</a>
           </td>
-        ) : null}
-        {parameters.kappa !== null ? (
+        )}
+        {parameters.kappa !== null && (
           <td>
             <a>{parameters.kappa.toFixed(2)}</a>
           </td>
-        ) : null}
+        )}
       </tr>
     );
   }
@@ -291,7 +291,6 @@ export default class TaskItem extends Component {
     );
   }
 
-  // eslint-disable-next-line sonarjs/cognitive-complexity
   render() {
     const { state, data, show } = this.props;
     const wedges =
@@ -342,16 +341,16 @@ export default class TaskItem extends Component {
               <b>
                 <span className="node-name" style={{ display: 'flex' }}>
                   {this.pointIDString(wedges)} {data.label}
-                  {state === TASK_RUNNING ? this.progressBar() : null}
+                  {state === TASK_RUNNING && this.progressBar()}
                 </span>
               </b>
-              {state === TASK_UNCOLLECTED ? (
+              {state === TASK_UNCOLLECTED && (
                 <i
                   className="fas fa-times"
                   onClick={this.deleteTask}
                   style={delTaskCSS}
                 />
-              ) : null}
+              )}
             </div>
           </div>
           <Collapse in={Boolean(show)}>
@@ -413,12 +412,12 @@ export default class TaskItem extends Component {
                           <th>T (%)</th>
                           <th>Res. (&Aring;)</th>
                           <th>E (keV)</th>
-                          {wedge.parameters.kappa_phi !== null ? (
+                          {wedge.parameters.kappa_phi !== null && (
                             <th>&phi; &deg;</th>
-                          ) : null}
-                          {wedge.parameters.kappa !== null ? (
+                          )}
+                          {wedge.parameters.kappa !== null && (
                             <th>&kappa; &deg;</th>
-                          ) : null}
+                          )}
                         </tr>
                       </thead>
                       <tbody>{this.wedgeParameters(wedge)}</tbody>

diff --git a/ui/src/components/SampleQueue/EnergyScanTaskItem.jsx b/ui/src/components/SampleQueue/EnergyScanTaskItem.jsx
@@ -224,13 +224,13 @@ export default class EnergyScanTaskItem extends Component {
                   </span>
                 </span>
               </b>
-              {state === TASK_UNCOLLECTED ? (
+              {state === TASK_UNCOLLECTED && (
                 <i
                   className="fas fa-times"
                   onClick={this.deleteTask}
                   style={delTaskCSS}
                 />
-              ) : null}
+              )}
             </div>
           </div>
           <Collapse in={Boolean(show)}>

diff --git a/ui/src/components/SampleQueue/TaskItem.jsx b/ui/src/components/SampleQueue/TaskItem.jsx
@@ -168,16 +168,16 @@ export default class TaskItem extends Component {
     const { parameters } = wedge;
     return (
       <tr>
-        {parameters.osc_start !== null ? (
+        {parameters.osc_start !== null && (
           <td>
             <a>{parameters.osc_start.toFixed(2)}</a>
           </td>
-        ) : null}
-        {parameters.osc_range !== null ? (
+        )}
+        {parameters.osc_range !== null && (
           <td>
             <a>{parameters.osc_range.toFixed(2)}</a>
           </td>
-        ) : null}
+        )}
         <td>
           <a>{parameters.exp_time.toFixed(6)}</a>
         </td>
@@ -193,16 +193,16 @@ export default class TaskItem extends Component {
         <td>
           <a>{parameters.energy.toFixed(4)}</a>
         </td>
-        {parameters.kappa_phi !== null ? (
+        {parameters.kappa_phi !== null && (
           <td>
             <a>{parameters.kappa_phi.toFixed(2)}</a>
           </td>
-        ) : null}
-        {parameters.kappa !== null ? (
+        )}
+        {parameters.kappa !== null && (
           <td>
             <a>{parameters.kappa.toFixed(2)}</a>
           </td>
-        ) : null}
+        )}
       </tr>
     );
   }
@@ -300,16 +300,16 @@ export default class TaskItem extends Component {
               <b>
                 <span className="node-name" style={{ display: 'flex' }}>
                   {this.pointIDString(wedges)} {data.label}
-                  {state === TASK_RUNNING ? this.progressBar() : null}
+                  {state === TASK_RUNNING && this.progressBar()}
                 </span>
               </b>
-              {state === TASK_UNCOLLECTED ? (
+              {state === TASK_UNCOLLECTED && (
                 <i
                   className="fas fa-times"
                   onClick={this.deleteTask}
                   style={delTaskCSS}
                 />
-              ) : null}
+              )}
             </div>
           </div>
           <Collapse in={Boolean(show)}>
@@ -364,23 +364,23 @@ export default class TaskItem extends Component {
                     >
                       <thead>
                         <tr>
-                          {wedge.parameters.osc_start !== null ? (
+                          {wedge.parameters.osc_start !== null && (
                             <th>Start &deg; </th>
-                          ) : null}
-                          {wedge.parameters.osc_range !== null ? (
+                          )}
+                          {wedge.parameters.osc_range !== null && (
                             <th>Osc. &deg; </th>
-                          ) : null}
+                          )}
                           <th>t (s)</th>
                           <th># Img</th>
                           <th>T (%)</th>
                           <th>Res. (&Aring;)</th>
                           <th>E (keV)</th>
-                          {wedge.parameters.kappa_phi !== null ? (
+                          {wedge.parameters.kappa_phi !== null && (
                             <th>&phi; &deg;</th>
-                          ) : null}
-                          {wedge.parameters.kappa !== null ? (
+                          )}
+                          {wedge.parameters.kappa !== null && (
                             <th>&kappa; &deg;</th>
-                          ) : null}
+                          )}
                         </tr>
                       </thead>
                       <tbody>{this.wedgeParameters(wedge)}</tbody>

diff --git a/ui/src/components/SampleQueue/WorkflowTaskItem.jsx b/ui/src/components/SampleQueue/WorkflowTaskItem.jsx
@@ -218,17 +218,17 @@ export default class WorkflowTaskItem extends Component {
               <b>
                 <span className="node-name" style={{ display: 'flex' }}>
                   {this.pointIDString(parameters)} {data.parameters.label}
-                  {state === TASK_RUNNING ? this.progressBar() : null}
+                  {state === TASK_RUNNING && this.progressBar()}
                 </span>
               </b>
-              {state === TASK_UNCOLLECTED ? (
+              {state === TASK_UNCOLLECTED && (
                 <i
                   key="delete_task"
                   className="fa fa-times"
                   onClick={this.deleteTask}
                   style={delTaskCSS}
                 />
-              ) : null}
+              )}
             </div>
           </div>
           <Collapse in={Boolean(show)}>

diff --git a/ui/src/components/SampleQueue/XRFTaskItem.jsx b/ui/src/components/SampleQueue/XRFTaskItem.jsx
@@ -292,13 +292,13 @@ export default class XRFTaskItem extends Component {
                   </span>
                 </span>
               </b>
-              {state === TASK_UNCOLLECTED ? (
+              {state === TASK_UNCOLLECTED && (
                 <i
                   className="fas fa-times"
                   onClick={this.deleteTask}
                   style={delTaskCSS}
                 />
-              ) : null}
+              )}
             </div>
           </div>
           <Collapse in={Boolean(show)}>

diff --git a/ui/src/components/Tasks/DataCollection.jsx b/ui/src/components/Tasks/DataCollection.jsx
@@ -265,7 +265,7 @@ class DataCollection extends React.Component {
                 label="Resolution"
               />
             </FieldsRow>
-            {this.props.taskResult.energyScan.length > 0 ? (
+            {this.props.taskResult.energyScan.length > 0 && (
               <FieldsRow>
                 <SelectField
                   col1="6"
@@ -275,7 +275,7 @@ class DataCollection extends React.Component {
                   list={energyList}
                 />
               </FieldsRow>
-            ) : null}
+            )}
             <CollapsableRows>
               <FieldsRow>
                 <InputField propName="kappa" type="number" label="Kappa" />

diff --git a/ui/src/components/Tasks/GenericTaskForm.jsx b/ui/src/components/Tasks/GenericTaskForm.jsx
@@ -218,13 +218,13 @@ class GenericTaskForm extends React.Component {
     } = props;
     return (
       <div className={classNames}>
-        {id !== 'root' ? (
+        {id !== 'root' && (
           <label htmlFor={id}>
             {label}
             {required ? '*' : null}
             {rawDescription ? ` (${rawDescription})` : null}
           </label>
-        ) : null}
+        )}
         {description}
         {children}
         {errors}

diff --git a/ui/src/components/Tasks/Workflow.jsx b/ui/src/components/Tasks/Workflow.jsx
@@ -78,7 +78,7 @@ function Workflow(props) {
               />
             </Row>
           ) : null}
-          {strategyNames.length > 0 ? (
+          {strategyNames.length > 0 && (
             <div className="mt-3">
               <SelectField
                 propName="strategy_name"
@@ -88,7 +88,7 @@ function Workflow(props) {
                 col2={7}
               />
             </div>
-          ) : null}
+          )}
         </Form>
       </Modal.Body>
 

diff --git a/ui/src/containers/GphlWorkflowParametersDialog.jsx b/ui/src/containers/GphlWorkflowParametersDialog.jsx
@@ -269,9 +269,8 @@ function GphlWorkflowParametersDialog(props) {
                                 <Form.Group as={Col} sm>
                                   <Form.Label>
                                     {schema.properties[fieldKey].type !==
-                                    'boolean'
-                                      ? schema.properties[fieldKey].title
-                                      : null}
+                                      'boolean' &&
+                                      schema.properties[fieldKey].title}
                                   </Form.Label>
                                   {schema.properties[fieldKey].type ===
                                   'boolean' ? (