Eslint: update rules and adjust code accordingly.

.eslintrc.js

@@ -56,8 +56,12 @@ module.exports = {
       "beforeClosing": "never"
     }],
     "react/jsx-boolean-value": ["error", "never"],
-    "react/jsx-curly-spacing": ["error", "never"],
+    "react/jsx-curly-spacing": ["error", { "when": "never", "children": true }],
+    "react/jsx-equals-spacing": ["error", "never"],
+    "react/jsx-indent-props": ["error", 2],
+    "react/jsx-curly-brace-presence": ["error", "never"],
     "react/jsx-key": ["error", { "checkFragmentShorthand": true }],
+    "react/jsx-indent": ["error", 2, { checkAttributes: true, indentLogicalExpressions: true }],
 
     "quotes": "off",
     "@typescript-eslint/quotes": ["error", "single", { "allowTemplateLiterals": true, "avoidEscape": true }],

src/Journals/ImportDialog.tsx

@@ -70,7 +70,7 @@ class ImportDialog extends React.Component<PropsType> {
         >
           <DialogTitle>Import entries from file?</DialogTitle>
           <DialogContent>
-            { loading ?
+            {loading ?
               <LoadingIndicator style={{ display: 'block', margin: 'auto' }} />
               :
               <Dropzone

src/Journals/Journal.tsx

@@ -105,7 +105,7 @@ class Journal extends React.Component<PropsTypeInner> {
     return (
       <React.Fragment>
         <AppBarOverride title={collectionInfo.displayName}>
-          { isOwner &&
+          {isOwner &&
             <>
               <IconButton
                 component={Link}
@@ -139,12 +139,12 @@ class Journal extends React.Component<PropsTypeInner> {
           <Tab label={itemsTitle} disabled={journalOnly} />
           <Tab label="Journal Entries" />
         </Tabs>
-        { currentTab === 0 &&
+        {currentTab === 0 &&
           <Container>
             {itemsView}
           </Container>
         }
-        { currentTab === 1 &&
+        {currentTab === 1 &&
           <Container>
             <JournalEntries journal={journal} entries={syncEntries} />
           </Container>

src/Journals/JournalMemberAddDialog.tsx

@@ -85,7 +85,7 @@ class JournalMemberAddDialog extends React.PureComponent<PropsType> {
             onOk={this.onAddRequest}
             onCancel={onClose}
           >
-            { userChosen ?
+            {userChosen ?
               <LoadingIndicator />
               :
               <TextField

src/Journals/JournalMembers.tsx

@@ -54,7 +54,7 @@ class JournalMembers extends React.PureComponent<PropsTypeInner> {
       <>
         <AppBarOverride title={`${info.displayName} - Members`} />
         <Container style={{ maxWidth: '30rem' }}>
-          { members ?
+          {members ?
             <List>
               <ListItem rightIcon={<IconMemberAdd />} onClick={() => this.setState({ addMemberOpen: true })}>
                   Add member
@@ -86,7 +86,7 @@ class JournalMembers extends React.PureComponent<PropsTypeInner> {
           Please be advised that a malicious user would potentially be able to retain access to encryption keys. Please refer to the FAQ for more information.
         </ConfirmationDialog>
 
-        { addMemberOpen &&
+        {addMemberOpen &&
           (sharingAllowed ?
             <JournalMemberAddDialog
               etesync={this.props.etesync}

src/LoginGate.tsx

@@ -37,7 +37,7 @@ function EncryptionPart(props: { credentials: CredentialsType, onEncryptionFormS
   return (
     <Container style={{ maxWidth: '30rem' }}>
       <h2>Encryption Password</h2>
-      { (isNewUser) ?
+      {(isNewUser) ?
         <div>
           <h3>Welcome to EteSync!</h3>
           <p>

src/Pim/PimMain.tsx

@@ -130,17 +130,17 @@ class PimMain extends React.PureComponent<PropsType> {
         </Tabs>
 
         <Container>
-          { tab === 0 &&
+          {tab === 0 &&
             <SearchableAddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
           }
-          { tab === 1 &&
+          {tab === 1 &&
             <PersistCalendar
               entries={this.props.events}
               onItemClick={this.eventClicked}
               onSlotClick={this.newEvent}
             />
           }
-          { tab === 2 &&
+          {tab === 2 &&
             <TaskList
               entries={this.props.tasks}
               onItemClick={this.taskClicked}

src/components/ContactEdit.tsx

@@ -101,11 +101,9 @@ const ValueTypeComponent = (props: ValueTypeComponentProps) => {
       <TypeSelector
         value={props.value.type}
         types={props.types}
-        onChange={
-          (event: React.ChangeEvent<HTMLSelectElement>) => (
-            props.onChange(props.name, event.target.value, props.value.value)
-          )
-        }
+        onChange={(event: React.ChangeEvent<HTMLSelectElement>) => (
+          props.onChange(props.name, event.target.value, props.value.value)
+        )}
       />
     </React.Fragment>
   );

src/components/Task.tsx

@@ -29,10 +29,10 @@ class Task extends React.PureComponent {
     return (
       <React.Fragment>
         <PimItemHeader text={this.props.item.summary} backgroundColor={this.props.item.color}>
-          { item.startDate &&
+          {item.startDate &&
             <div>Start: {formatDate(item.startDate)} {timezone && <small>({timezone})</small>}</div>
           }
-          { item.dueDate &&
+          {item.dueDate &&
             <div>Due: {formatDate(item.dueDate)} {timezone && <small>({timezone})</small>}</div>
           }
           <br />