fix(client-electron): prevent conditional jsx from executing

marcincichocki · Oct 13, 2022 · f18cd7b · f18cd7b
1 parent 54fc847
commit f18cd7b
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 42 deletions.
diff --git a/src/electron/renderer/components/DaemonsViewer.tsx b/src/electron/renderer/components/DaemonsViewer.tsx
@@ -8,7 +8,6 @@ import { useMemo } from 'react';
 import styled from 'styled-components';
 import { Col, Row, Spacer } from './Flex';
 import { Highlight } from './HistoryViewer';
-import { Only } from './Only';
 
 const DaemonsWrapper = styled.div`
   display: flex;
@@ -113,9 +112,9 @@ export const DaemonsViewer = ({
                 : undefined
             }
           >
-            <Only when={types?.isValid}>
+            {types?.isValid && (
               <DaemonType>{eng[types.rawData[index]]}</DaemonType>
-            </Only>
+            )}
             <DaemonSequence>
               {raw.map((s, i) => (
                 <span key={i}>{s}</span>

diff --git a/src/electron/renderer/components/JSONTree.tsx b/src/electron/renderer/components/JSONTree.tsx
@@ -12,10 +12,6 @@ import styled from 'styled-components';
 import { LinkButton } from './Buttons';
 import { Col } from './Flex';
 
-const Only = ({ when, children }: PropsWithChildren<{ when: boolean }>) => {
-  return <>{when ? children : null}</>;
-};
-
 type JSONObject = Extract<JSONValue, object>;
 type JSONPrimitive = Exclude<JSONValue, object>;
 
@@ -277,14 +273,14 @@ const JSONViewerContainer = memo(
 
     return (
       <>
-        <Only when={isObject}>
-          <JSONBracket data={data as JSONObject} position="start" />
-          <JSONPropertyToggle data={data as JSONObject} />
-        </Only>
+        {isObject && (
+          <>
+            <JSONBracket data={data} position="start" />
+            <JSONPropertyToggle data={data} />
+          </>
+        )}
         {children}
-        <Only when={isObject}>
-          <JSONBracket data={data as JSONObject} position="end" />
-        </Only>
+        {isObject && <JSONBracket data={data} position="end" />}
       </>
     );
   }
@@ -321,13 +317,11 @@ const JSONViewer = memo(
 
           return (
             <JSONViewerListItem key={property}>
-              <Only when={!isArray}>
-                <JSONProperty property={property} />
-              </Only>
+              {!isArray && <JSONProperty property={property} />}
               <JSONViewerContainer data={value}>
                 <JSONViewer data={value} path={childPath}></JSONViewer>
               </JSONViewerContainer>
-              <Only when={!isLast}>,</Only>
+              {!isLast && <>,</>}
             </JSONViewerListItem>
           );
         })}

diff --git a/src/electron/renderer/components/Navigation.tsx b/src/electron/renderer/components/Navigation.tsx
@@ -3,7 +3,6 @@ import { useContext } from 'react';
 import { Link, NavLink as RouterNavLink } from 'react-router-dom';
 import styled from 'styled-components';
 import { RouterExtContext } from '../router-ext';
-import { Only } from './Only';
 
 const Nav = styled.nav`
   display: flex;
@@ -51,11 +50,11 @@ export const Navigation = () => {
 
   return (
     <Nav>
-      <Only when={!!from}>
+      {!!from && (
         <NavigateBackLink to={from}>
           <MdKeyboardBackspace size="2rem" />
         </NavigateBackLink>
-      </Only>
+      )}
       <List>
         {items.map((item, index) => (
           <ListItem key={index}>

diff --git a/src/electron/renderer/components/Only.tsx b/src/electron/renderer/components/Only.tsx
diff --git a/src/electron/renderer/components/ReleaseNotesDialog.tsx b/src/electron/renderer/components/ReleaseNotesDialog.tsx
@@ -4,7 +4,6 @@ import { useIpcEventDialog } from '../common';
 import { FlatButton } from './Buttons';
 import { Dialog, DialogBody, DialogTitle } from './Dialog';
 import { Row } from './Flex';
-import { Only } from './Only';
 
 export const ReleaseNotesDialog = () => {
   const {
@@ -40,11 +39,11 @@ export const ReleaseNotesDialog = () => {
         <FlatButton onClick={close} color="primary">
           Close
         </FlatButton>
-        <Only when={updateAvailable}>
+        {updateAvailable && (
           <FlatButton color="accent" onClick={update}>
             Update to {updateInfo.version}
           </FlatButton>
-        </Only>
+        )}
       </Row>
     </Dialog>
   );

diff --git a/src/electron/renderer/pages/HistoryDetails.tsx b/src/electron/renderer/pages/HistoryDetails.tsx
@@ -9,7 +9,6 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { useHistoryEntryFromParam } from '../common';
 import { Col, FlatButton, HistoryViewer, LinkButton, Row } from '../components';
-import { Only } from '../components/Only';
 import { StateContext } from '../state';
 
 const Heading2 = styled.h2`
@@ -76,9 +75,7 @@ const HistoryDetailsError = ({
     <FlatButton color="accent" as={Link} to={`/calibrate/${entry.uuid}/grid`}>
       Recalibrate
     </FlatButton>
-    <Only when={hasSource}>
-      <OpenInExplorer fileName={entry.fileName} />
-    </Only>
+    {hasSource && <OpenInExplorer fileName={entry.fileName} />}
     <SaveSnapshot entryId={entry.uuid} />
     <RemoveEntry entryId={entry.uuid} />
   </Col>
@@ -117,9 +114,7 @@ export const HistoryDetails = () => {
           <DetailText>Done in {duration}</DetailText>
         </Col>
         <Col style={{ alignItems: 'flex-end' }}>
-          <Only when={hasSource}>
-            <OpenInExplorer fileName={entry.fileName} />
-          </Only>
+          {hasSource && <OpenInExplorer fileName={entry.fileName} />}
           <TextLink to={`/calibrate/${entry.uuid}/grid`}>Recalibrate</TextLink>
           <SaveSnapshot entryId={entry.uuid} />
           <RemoveEntry entryId={entry.uuid} />

diff --git a/src/electron/renderer/pages/SelectSequence.tsx b/src/electron/renderer/pages/SelectSequence.tsx
@@ -4,7 +4,6 @@ import { useContext, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { dispatchAsyncRequest } from '../common';
 import { Col, FlatButton, HistoryViewer, Row, Spacer } from '../components';
-import { Only } from '../components/Only';
 import { StateContext } from '../state';
 
 const SequenceList = styled.ul`
@@ -96,11 +95,11 @@ export const SelectSequence = () => {
             </Sequence>
           ))}
         </SequenceList>
-        <Only when={result.hasNext}>
+        {result.hasNext && (
           <FlatButton disabled={isWorking} color="accent" onClick={loadMore}>
             Load more
           </FlatButton>
-        </Only>
+        )}
       </Col>
       <Col gap>
         <HistoryViewer