Use more show-if

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/application-loader/loading-screen.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Alert } from 'react-bootstrap'
 import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
+import { ShowIf } from '../common/show-if'
 
 export interface LoadingScreenProps {
   failedTitle: string
@@ -13,16 +14,12 @@ export const LoadingScreen: React.FC<LoadingScreenProps> = ({ failedTitle }) =>
         <ForkAwesomeIcon icon="file-text" size="5x"
           className={failedTitle ? 'animation-shake' : 'animation-pulse'}/>
       </div>
-      {
+      <ShowIf condition={ failedTitle !== ''}>
-        failedTitle !== ''
+        <Alert variant={'danger'}>
-          ? (
+          The task '{failedTitle}' failed.<br/>
-            <Alert variant={'danger'}>
+          For further information look into the browser console.
-              The task '{failedTitle}' failed.<br/>
+        </Alert>
-              For further information look into the browser console.
+      </ShowIf>
-            </Alert>
-          )
-          : null
-      }
     </div>
   )
 }

src/components/editor/editor.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 import { useParams } from 'react-router'
 import { ApplicationState } from '../../redux'
+import { ShowIf } from '../common/show-if'
 import { EditorWindow } from './editor-window/editor-window'
 import { MarkdownPreview } from './markdown-preview/markdown-preview'
 import { EditorMode } from './task-bar/editor-view-mode'
@@ -20,8 +21,12 @@ const Editor: React.FC = () => {
       <TaskBar/>
       <h1>{id}</h1>
       <div className={'flex-fill flex-row d-flex'}>
-        { editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH ? <EditorWindow/> : null }
+        <ShowIf condition={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}>
-        { editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH ? <MarkdownPreview/> : null }
+          <EditorWindow/>
+        </ShowIf>
+        <ShowIf condition={editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH}>
+          <MarkdownPreview/>
+        </ShowIf>
       </div>
     </div>
   )

src/components/element-separator/element-separator.tsx

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react'
+import { ShowIf } from '../common/show-if'
 
 export interface ElementSeparatorProps {
     separator: React.ReactElement
@@ -14,9 +15,9 @@ export const ElementSeparator: React.FC<ElementSeparatorProps> = ({ children, se
           .map((child, index) => {
             return (
               <Fragment>
-                {
+                <ShowIf condition={index > 0}>
-                  (index > 0) ? separator : null
+                  {separator}
-                }
+                </ShowIf>
                 {child}
               </Fragment>
             )

src/components/landing/layout/version-info/version-info.tsx

@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { ApplicationState } from '../../../../redux'
 import frontendVersion from '../../../../version.json'
+import { ShowIf } from '../../../common/show-if'
 import { TranslatedExternalLink } from '../../../links/translated-external-link'
 import { VersionInputField } from './version-input-field'
 
@@ -22,10 +23,12 @@ export const VersionInfo: React.FC = () => {
     <Col md={6} className={'flex-column'}>
       <h5>{title}</h5>
       <VersionInputField version={version}/>
-      {sourceCodeLink
+      <ShowIf condition={!!sourceCodeLink}>
-        ? <TranslatedExternalLink i18nKey={'landing.versionInfo.sourceCode'} className={'btn btn-sm btn-primary d-block mb-2'} href={sourceCodeLink}/> : null}
+        <TranslatedExternalLink i18nKey={'landing.versionInfo.sourceCode'} className={'btn btn-sm btn-primary d-block mb-2'} href={sourceCodeLink}/>
-      {issueTrackerLink
+      </ShowIf>
-        ? <TranslatedExternalLink i18nKey={'landing.versionInfo.issueTracker'} className={'btn btn-sm btn-primary d-block mb-2'} href={issueTrackerLink}/> : null}
+      <ShowIf condition={!!issueTrackerLink}>
+        <TranslatedExternalLink i18nKey={'landing.versionInfo.issueTracker'} className={'btn btn-sm btn-primary d-block mb-2'} href={issueTrackerLink}/>
+      </ShowIf>
     </Col>
   )
 

src/components/landing/pages/login/login.tsx

@@ -15,9 +15,6 @@ export const Login: React.FC = () => {
   const authProviders = useSelector((state: ApplicationState) => state.backendConfig.authProviders)
   const customAuthNames = useSelector((state: ApplicationState) => state.backendConfig.customAuthNames)
   const userLoginState = useSelector((state: ApplicationState) => state.user)
-  const emailForm = authProviders.email ? <ViaEMail/> : null
-  const ldapForm = authProviders.ldap ? <ViaLdap/> : null
-  const openIdForm = authProviders.openid ? <ViaOpenId/> : null
 
   const oneClickProviders = [authProviders.dropbox, authProviders.facebook, authProviders.github, authProviders.gitlab,
     authProviders.google, authProviders.oauth2, authProviders.saml, authProviders.twitter]
@@ -45,9 +42,9 @@ export const Login: React.FC = () => {
       <Row className="h-100 flex justify-content-center">
         <ShowIf condition={authProviders.email || authProviders.ldap || authProviders.openid}>
           <Col xs={12} sm={10} lg={4}>
-            {emailForm}
+            <ShowIf condition={authProviders.email}><ViaEMail/></ShowIf>
-            {ldapForm}
+            <ShowIf condition={authProviders.ldap}><ViaLdap/></ShowIf>
-            {openIdForm}
+            <ShowIf condition={authProviders.openid}><ViaOpenId/></ShowIf>
           </Col>
         </ShowIf>
         <ShowIf condition={oneClickProviders.includes(true)}>

src/components/landing/pages/profile/profile.tsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'
 import { Redirect } from 'react-router'
 import { ApplicationState } from '../../../../redux'
 import { LoginProvider } from '../../../../redux/user/types'
+import { ShowIf } from '../../../common/show-if'
 import { ProfileAccountManagement } from './settings/profile-account-management'
 import { ProfileChangePassword } from './settings/profile-change-password'
 import { ProfileDisplayName } from './settings/profile-display-name'
@@ -22,7 +23,9 @@ export const Profile: React.FC = () => {
       <Row className="h-100 flex justify-content-center">
         <Col lg={6}>
           <ProfileDisplayName/>
-          {user.provider === LoginProvider.EMAIL ? <ProfileChangePassword/> : null}
+          <ShowIf condition={user.provider === LoginProvider.EMAIL}>
+            <ProfileChangePassword/>
+          </ShowIf>
           <ProfileAccountManagement/>
         </Col>
       </Row>

src/components/links/external-link.tsx

@@ -1,5 +1,6 @@
-import React, { Fragment } from 'react'
+import React from 'react'
-import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
+import { ForkAwesomeIcon, IconName } from '../../fork-awesome/fork-awesome-icon'
+import { ShowIf } from '../common/show-if'
 import { LinkWithTextProps } from './types'
 
 export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
@@ -8,13 +9,9 @@ export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, cl
       target="_blank"
       rel="noopener noreferrer"
       className={className}>
-      {
+      <ShowIf condition={!!icon}>
-        icon
+        <ForkAwesomeIcon icon={icon as IconName} fixedWidth={true}/>&nbsp;
-          ? <Fragment>
+      </ShowIf>
-            <ForkAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
-          </Fragment>
-          : null
-      }
       {text}
     </a>
   )

src/components/links/internal-link.tsx

@@ -1,22 +1,17 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import { Link } from 'react-router-dom'
-import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
+import { ForkAwesomeIcon, IconName } from '../../fork-awesome/fork-awesome-icon'
+import { ShowIf } from '../common/show-if'
 import { LinkWithTextProps } from './types'
 
 export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
   return (
     <Link to={href}
       className={className}>
-      <Fragment>
+      <ShowIf condition={!!icon}>
-        {
+        <ForkAwesomeIcon icon={icon as IconName} fixedWidth={true}/>&nbsp;
-          icon
+      </ShowIf>
-            ? <Fragment>
+      {text}
-              <ForkAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
-            </Fragment>
-            : null
-        }
-        {text}
-      </Fragment>
     </Link>
   )
 }

src/components/pagination/pager-pagination.tsx

@@ -1,11 +1,12 @@
-import React, { Fragment, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Pagination } from 'react-bootstrap'
+import { ShowIf } from '../common/show-if'
 import { PagerItem } from './pager-item'
 
 export interface PaginationProps {
-    numberOfPageButtonsToShowAfterAndBeforeCurrent: number
+  numberOfPageButtonsToShowAfterAndBeforeCurrent: number
-    onPageChange: (pageIndex: number) => void
+  onPageChange: (pageIndex: number) => void
-    lastPageIndex: number
+  lastPageIndex: number
 }
 
 export const PagerPagination: React.FC<PaginationProps> = ({ numberOfPageButtonsToShowAfterAndBeforeCurrent, onPageChange, lastPageIndex }) => {
@@ -23,28 +24,28 @@ export const PagerPagination: React.FC<PaginationProps> = ({ numberOfPageButtons
   }, [onPageChange, pageIndex])
 
   const correctedLowerPageIndex =
-      Math.min(
+    Math.min(
-        Math.max(
-          Math.min(
-            wantedLowerPageIndex,
-            wantedLowerPageIndex + lastPageIndex - wantedUpperPageIndex
-          ),
-          0
-        ),
-        lastPageIndex
-      )
-
-  const correctedUpperPageIndex =
       Math.max(
         Math.min(
-          Math.max(
+          wantedLowerPageIndex,
-            wantedUpperPageIndex,
+          wantedLowerPageIndex + lastPageIndex - wantedUpperPageIndex
-            wantedUpperPageIndex - wantedLowerPageIndex
-          ),
-          lastPageIndex
         ),
         0
-      )
+      ),
+      lastPageIndex
+    )
+
+  const correctedUpperPageIndex =
+    Math.max(
+      Math.min(
+        Math.max(
+          wantedUpperPageIndex,
+          wantedUpperPageIndex - wantedLowerPageIndex
+        ),
+        lastPageIndex
+      ),
+      0
+    )
 
   const paginationItemsBefore = Array.from(new Array(correctedPageIndex - correctedLowerPageIndex)).map((k, index) => {
     const itemIndex = correctedLowerPageIndex + index
@@ -58,25 +59,17 @@ export const PagerPagination: React.FC<PaginationProps> = ({ numberOfPageButtons
 
   return (
     <Pagination>
-      {
+      <ShowIf condition={correctedLowerPageIndex > 0}>
-        correctedLowerPageIndex > 0
+        <PagerItem key={0} index={0} onClick={setPageIndex}/>
-          ? <Fragment>
+        <Pagination.Ellipsis disabled/>
-            <PagerItem key={0} index={0} onClick={setPageIndex}/>
+      </ShowIf>
-            <Pagination.Ellipsis disabled/>
-          </Fragment>
-          : null
-      }
       {paginationItemsBefore}
       <Pagination.Item active>{correctedPageIndex + 1}</Pagination.Item>
       {paginationItemsAfter}
-      {
+      <ShowIf condition={correctedUpperPageIndex < lastPageIndex}>
-        correctedUpperPageIndex < lastPageIndex
+        <Pagination.Ellipsis disabled/>
-          ? <Fragment>
+        <PagerItem key={lastPageIndex} index={lastPageIndex} onClick={setPageIndex}/>
-            <Pagination.Ellipsis disabled/>
+      </ShowIf>
-            <PagerItem key={lastPageIndex} index={lastPageIndex} onClick={setPageIndex}/>
-          </Fragment>
-          : null
-      }
     </Pagination>
   )
 }