Add prettier for codestyle and re-format everything (#1294)

src/components/landing-layout/footer/footer.tsx

@@ -11,10 +11,10 @@ import { SocialLink } from './social-links'
 
 export const Footer: React.FC = () => {
   return (
-    <footer className="text-light-50 small">
-      <LanguagePicker/>
-      <PoweredByLinks/>
-      <SocialLink/>
+    <footer className='text-light-50 small'>
+      <LanguagePicker />
+      <PoweredByLinks />
+      <SocialLink />
     </footer>
   )
 }

src/components/landing-layout/footer/language-picker.tsx

@@ -49,43 +49,38 @@ const languages = {
  *
  * @param wantedLanguage an ISO 639-1 standard language code
  */
-const findLanguageCode = (wantedLanguage: string): string => (
-  (
-    Object.keys(languages)
-          .find((supportedLanguage) => wantedLanguage === supportedLanguage)
-  ) ?? (
-    Object.keys(languages)
-          .find((supportedLanguage) => wantedLanguage.substr(0, 2) === supportedLanguage)
-  ) ?? ''
-)
+const findLanguageCode = (wantedLanguage: string): string =>
+  Object.keys(languages).find((supportedLanguage) => wantedLanguage === supportedLanguage) ??
+  Object.keys(languages).find((supportedLanguage) => wantedLanguage.substr(0, 2) === supportedLanguage) ??
+  ''
 
 export const LanguagePicker: React.FC = () => {
   const { i18n } = useTranslation()
 
-  const onChangeLang = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    const language = event.currentTarget.value
-    Settings.defaultLocale = language
-    i18n.changeLanguage(language)
-        .catch(error => console.error('Error while switching language', error))
-  }, [i18n])
+  const onChangeLang = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const language = event.currentTarget.value
+      Settings.defaultLocale = language
+      i18n.changeLanguage(language).catch((error) => console.error('Error while switching language', error))
+    },
+    [i18n]
+  )
 
   const languageCode = useMemo(() => findLanguageCode(i18n.language), [i18n.language])
 
-  const languageOptions = useMemo(() =>
-    Object.entries(languages)
-          .map(([language, languageName]) =>
-            <option key={ language } value={ language }>{ languageName }</option>), [])
+  const languageOptions = useMemo(
+    () =>
+      Object.entries(languages).map(([language, languageName]) => (
+        <option key={language} value={language}>
+          {languageName}
+        </option>
+      )),
+    []
+  )
 
   return (
-    <Form.Control
-      as="select"
-      size="sm"
-      className="mb-2 mx-auto w-auto"
-      value={ languageCode }
-      onChange={ onChangeLang }>
-      {
-        languageOptions
-      }
+    <Form.Control as='select' size='sm' className='mb-2 mx-auto w-auto' value={languageCode} onChange={onChangeLang}>
+      {languageOptions}
     </Form.Control>
   )
 }

src/components/landing-layout/footer/powered-by-links.tsx

@@ -18,25 +18,26 @@ import equal from 'fast-deep-equal'
 export const PoweredByLinks: React.FC = () => {
   useTranslation()
 
-  const specialUrls: [string, string][] = useSelector((state: ApplicationState) => Object.entries(state.config.specialUrls) as [string, string][], equal)
+  const specialUrls: [string, string][] = useSelector(
+    (state: ApplicationState) => Object.entries(state.config.specialUrls) as [string, string][],
+    equal
+  )
 
   return (
     <p>
-      <Trans i18nKey="landing.footer.poweredBy">
-        <ExternalLink href={ links.webpage } text="HedgeDoc"/>
+      <Trans i18nKey='landing.footer.poweredBy'>
+        <ExternalLink href={links.webpage} text='HedgeDoc' />
       </Trans>
       &nbsp;|&nbsp;
-      <TranslatedInternalLink href="/n/release-notes" i18nKey="landing.footer.releases"/>
-      {
-        specialUrls.map(([i18nKey, href]) =>
-          <Fragment key={ i18nKey }>
-            &nbsp;|&nbsp;
-            <TranslatedExternalLink href={ href } i18nKey={ 'landing.footer.' + i18nKey }/>
-          </Fragment>
-        )
-      }
+      <TranslatedInternalLink href='/n/release-notes' i18nKey='landing.footer.releases' />
+      {specialUrls.map(([i18nKey, href]) => (
+        <Fragment key={i18nKey}>
+          &nbsp;|&nbsp;
+          <TranslatedExternalLink href={href} i18nKey={'landing.footer.' + i18nKey} />
+        </Fragment>
+      ))}
       &nbsp;|&nbsp;
-      <VersionInfoLink/>
+      <VersionInfoLink />
     </p>
   )
 }

src/components/landing-layout/footer/social-links.tsx

@@ -13,13 +13,16 @@ export const SocialLink: React.FC = () => {
   useTranslation()
   return (
     <p>
-      <Trans i18nKey="landing.footer.followUs" components={ [
-        <ExternalLink href={ links.githubOrg } icon='github' text="GitHub"/>,
-        <ExternalLink href={ links.community } icon='users' text="Discourse"/>,
-        <ExternalLink href={ links.chat } icon="comment" text="Matrix"/>,
-        <ExternalLink href={ links.mastodon } icon='mastodon' text="Mastodon"/>,
-        <ExternalLink href={ links.translate } icon="globe" text="POEditor"/>
-      ] }/>
+      <Trans
+        i18nKey='landing.footer.followUs'
+        components={[
+          <ExternalLink href={links.githubOrg} icon='github' text='GitHub' />,
+          <ExternalLink href={links.community} icon='users' text='Discourse' />,
+          <ExternalLink href={links.chat} icon='comment' text='Matrix' />,
+          <ExternalLink href={links.mastodon} icon='mastodon' text='Mastodon' />,
+          <ExternalLink href={links.translate} icon='globe' text='POEditor' />
+        ]}
+      />
     </p>
   )
 }

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

@@ -16,10 +16,10 @@ export const VersionInfoLink: React.FC = () => {
 
   return (
     <Fragment>
-      <Link data-cy={ 'show-version-modal' } to={ '#' } className={ 'text-light' } onClick={ showModal }>
-        <Trans i18nKey={ 'landing.versionInfo.versionInfo' }/>
+      <Link data-cy={'show-version-modal'} to={'#'} className={'text-light'} onClick={showModal}>
+        <Trans i18nKey={'landing.versionInfo.versionInfo'} />
       </Link>
-      <VersionInfoModal onHide={ closeModal } show={ show }/>
+      <VersionInfoModal onHide={closeModal} show={show} />
     </Fragment>
   )
 }

src/components/landing-layout/footer/version-info/version-info-modal-column.tsx

@@ -12,30 +12,39 @@ import { ShowIf } from '../../../common/show-if/show-if'
 import { Trans, useTranslation } from 'react-i18next'
 
 export interface VersionInfoModalColumnProps {
-  titleI18nKey: string,
-  version: string,
-  sourceCodeLink: string,
+  titleI18nKey: string
+  version: string
+  sourceCodeLink: string
   issueTrackerLink: string
 }
 
-export const VersionInfoModalColumn: React.FC<VersionInfoModalColumnProps> = ({ titleI18nKey, issueTrackerLink, sourceCodeLink, version }) => {
+export const VersionInfoModalColumn: React.FC<VersionInfoModalColumnProps> = ({
+  titleI18nKey,
+  issueTrackerLink,
+  sourceCodeLink,
+  version
+}) => {
   useTranslation()
 
   return (
-    <Col md={ 6 } className={ 'flex-column' }>
-      <h5><Trans i18nKey={ titleI18nKey }/></h5>
-      <CopyableField content={ version }/>
-      <ShowIf condition={ !!sourceCodeLink }>
+    <Col md={6} className={'flex-column'}>
+      <h5>
+        <Trans i18nKey={titleI18nKey} />
+      </h5>
+      <CopyableField content={version} />
+      <ShowIf condition={!!sourceCodeLink}>
         <TranslatedExternalLink
-          i18nKey={ 'landing.versionInfo.sourceCode' }
-          className={ 'btn btn-sm btn-primary d-block mb-2' }
-          href={ sourceCodeLink }/>
+          i18nKey={'landing.versionInfo.sourceCode'}
+          className={'btn btn-sm btn-primary d-block mb-2'}
+          href={sourceCodeLink}
+        />
       </ShowIf>
-      <ShowIf condition={ !!issueTrackerLink }>
+      <ShowIf condition={!!issueTrackerLink}>
         <TranslatedExternalLink
-          i18nKey={ 'landing.versionInfo.issueTracker' }
-          className={ 'btn btn-sm btn-primary d-block mb-2' }
-          href={ issueTrackerLink }/>
+          i18nKey={'landing.versionInfo.issueTracker'}
+          className={'btn btn-sm btn-primary d-block mb-2'}
+          href={issueTrackerLink}
+        />
       </ShowIf>
     </Col>
   )

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

@@ -30,22 +30,27 @@ export const VersionInfoModal: React.FC<CommonModalProps> = ({ onHide, show }) =
     return version
   }, [serverVersion])
 
-
   return (
-    <CommonModal data-cy={ 'version-modal' } show={ show } onHide={ onHide } closeButton={ true }
-                 titleI18nKey={ 'landing.versionInfo.title' }>
+    <CommonModal
+      data-cy={'version-modal'}
+      show={show}
+      onHide={onHide}
+      closeButton={true}
+      titleI18nKey={'landing.versionInfo.title'}>
       <Modal.Body>
         <Row>
           <VersionInfoModalColumn
-            titleI18nKey={ 'landing.versionInfo.serverVersion' }
-            version={ backendVersion }
-            issueTrackerLink={ links.backendIssues }
-            sourceCodeLink={ links.backendSourceCode }/>
+            titleI18nKey={'landing.versionInfo.serverVersion'}
+            version={backendVersion}
+            issueTrackerLink={links.backendIssues}
+            sourceCodeLink={links.backendSourceCode}
+          />
           <VersionInfoModalColumn
-            titleI18nKey={ 'landing.versionInfo.clientVersion' }
-            version={ frontendVersion.version }
-            issueTrackerLink={ frontendVersion.issueTrackerUrl }
-            sourceCodeLink={ frontendVersion.sourceCodeUrl }/>
+            titleI18nKey={'landing.versionInfo.clientVersion'}
+            version={frontendVersion.version}
+            issueTrackerLink={frontendVersion.issueTrackerUrl}
+            sourceCodeLink={frontendVersion.sourceCodeUrl}
+          />
         </Row>
       </Modal.Body>
     </CommonModal>

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

@@ -17,15 +17,13 @@ export const LandingLayout: React.FC = ({ children }) => {
 
   return (
     <Fragment>
-      <UiNotifications/>
-      <Container className="text-light d-flex flex-column mvh-100">
-        <MotdBanner/>
-        <HeaderBar/>
-        <div className={ 'd-flex flex-column justify-content-between flex-fill text-center' }>
-          <main>
-            { children }
-          </main>
-          <Footer/>
+      <UiNotifications />
+      <Container className='text-light d-flex flex-column mvh-100'>
+        <MotdBanner />
+        <HeaderBar />
+        <div className={'d-flex flex-column justify-content-between flex-fill text-center'}>
+          <main>{children}</main>
+          <Footer />
         </div>
       </Container>
     </Fragment>

src/components/landing-layout/navigation/header-bar/header-bar.tsx

@@ -21,30 +21,31 @@ const HeaderBar: React.FC = () => {
   const userExists = useSelector((state: ApplicationState) => !!state.user)
 
   return (
-    <Navbar className="justify-content-between">
-      <div className="nav header-nav">
-        <HeaderNavLink to="/intro" id='navLinkIntro'>
-          <Trans i18nKey="landing.navigation.intro"/>
+    <Navbar className='justify-content-between'>
+      <div className='nav header-nav'>
+        <HeaderNavLink to='/intro' id='navLinkIntro'>
+          <Trans i18nKey='landing.navigation.intro' />
         </HeaderNavLink>
-        <HeaderNavLink to="/history" id='navLinkHistory'>
-          <Trans i18nKey="landing.navigation.history"/>
+        <HeaderNavLink to='/history' id='navLinkHistory'>
+          <Trans i18nKey='landing.navigation.history' />
         </HeaderNavLink>
       </div>
-      <div className="d-inline-flex">
-        { !userExists
-          ? <Fragment>
-              <span className={ 'mx-1 d-flex' }>
-                <NewGuestNoteButton/>
-              </span>
-            <SignInButton size="sm"/>
+      <div className='d-inline-flex'>
+        {!userExists ? (
+          <Fragment>
+            <span className={'mx-1 d-flex'}>
+              <NewGuestNoteButton />
+            </span>
+            <SignInButton size='sm' />
           </Fragment>
-          : <Fragment>
-              <span className={ 'mx-1 d-flex' }>
-                <NewUserNoteButton/>
-              </span>
-            <UserDropdown/>
+        ) : (
+          <Fragment>
+            <span className={'mx-1 d-flex'}>
+              <NewUserNoteButton />
+            </span>
+            <UserDropdown />
           </Fragment>
-        }
+        )}
       </div>
     </Navbar>
   )

src/components/landing-layout/navigation/header-nav-link.tsx

@@ -16,8 +16,10 @@ export interface HeaderNavLinkProps {
 export const HeaderNavLink: React.FC<HeaderNavLinkProps> = ({ to, id, children }) => {
   return (
     <Nav.Item>
-      <LinkContainer to={ to }>
-        <Nav.Link id={ id } className="text-light" href={ to }>{ children }</Nav.Link>
+      <LinkContainer to={to}>
+        <Nav.Link id={id} className='text-light' href={to}>
+          {children}
+        </Nav.Link>
       </LinkContainer>
     </Nav.Item>
   )

src/components/landing-layout/navigation/new-guest-note-button.tsx

@@ -13,15 +13,13 @@ import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 export const NewGuestNoteButton: React.FC = () => {
   const { t } = useTranslation()
   return (
-    <LinkContainer to={ '/new' } title={ t('landing.navigation.newGuestNote') }>
-      <Button
-        variant="primary"
-        size="sm"
-        className="d-inline-flex align-items-center">
-        <ForkAwesomeIcon icon="plus" className="mx-1"/>
+    <LinkContainer to={'/new'} title={t('landing.navigation.newGuestNote')}>
+      <Button variant='primary' size='sm' className='d-inline-flex align-items-center'>
+        <ForkAwesomeIcon icon='plus' className='mx-1' />
         <span>
-          <Trans i18nKey='landing.navigation.newGuestNote'/>
+          <Trans i18nKey='landing.navigation.newGuestNote' />
         </span>
       </Button>
-    </LinkContainer>)
+    </LinkContainer>
+  )
 }

src/components/landing-layout/navigation/new-user-note-button.tsx

@@ -13,14 +13,11 @@ import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 export const NewUserNoteButton: React.FC = () => {
   const { t } = useTranslation()
   return (
-    <LinkContainer to={ '/new' } title={ t('landing.navigation.newNote') }>
-      <Button
-        variant="primary"
-        size="sm"
-        className="d-inline-flex align-items-center">
-        <ForkAwesomeIcon icon="plus" className="mx-1"/>
+    <LinkContainer to={'/new'} title={t('landing.navigation.newNote')}>
+      <Button variant='primary' size='sm' className='d-inline-flex align-items-center'>
+        <ForkAwesomeIcon icon='plus' className='mx-1' />
         <span>
-          <Trans i18nKey='landing.navigation.newNote'/>
+          <Trans i18nKey='landing.navigation.newNote' />
         </span>
       </Button>
     </LinkContainer>

src/components/landing-layout/navigation/sign-in-button.tsx

@@ -25,24 +25,21 @@ export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props })
 
   const loginLink = useMemo(() => {
     const activeProviders = Object.entries(authProviders)
-                                  .filter((entry: [string, boolean]) => entry[1])
-                                  .map(entry => entry[0])
-    const activeOneClickProviders = activeProviders.filter(entry => !INTERACTIVE_LOGIN_METHODS.includes(entry))
+      .filter((entry: [string, boolean]) => entry[1])
+      .map((entry) => entry[0])
+    const activeOneClickProviders = activeProviders.filter((entry) => !INTERACTIVE_LOGIN_METHODS.includes(entry))
 
     if (activeProviders.length === 1 && activeOneClickProviders.length === 1) {
-      return `${ getApiUrl() }auth/${ activeOneClickProviders[0] }`
+      return `${getApiUrl()}auth/${activeOneClickProviders[0]}`
     }
     return '/login'
   }, [authProviders])
 
   return (
-    <ShowIf condition={ authEnabled }>
-      <LinkContainer to={ loginLink } title={ t('login.signIn') }>
-        <Button
-          data-cy={ 'sign-in-button' }
-          variant={ variant || 'success' }
-          { ...props }>
-          <Trans i18nKey="login.signIn"/>
+    <ShowIf condition={authEnabled}>
+      <LinkContainer to={loginLink} title={t('login.signIn')}>
+        <Button data-cy={'sign-in-button'} variant={variant || 'success'} {...props}>
+          <Trans i18nKey='login.signIn' />
         </Button>
       </LinkContainer>
     </ShowIf>

src/components/landing-layout/navigation/user-dropdown.tsx

@@ -25,31 +25,32 @@ export const UserDropdown: React.FC = () => {
 
   return (
     <Dropdown alignRight>
-      <Dropdown.Toggle size="sm" variant="dark" id="dropdown-user" className={ 'd-flex align-items-center' }>
-        <UserAvatar name={ user.name } photo={ user.photo }/>
+      <Dropdown.Toggle size='sm' variant='dark' id='dropdown-user' className={'d-flex align-items-center'}>
+        <UserAvatar name={user.name} photo={user.photo} />
       </Dropdown.Toggle>
 
       <Dropdown.Menu className='text-start'>
-        <LinkContainer to={ '/n/features' }>
+        <LinkContainer to={'/n/features'}>
           <Dropdown.Item dir='auto'>
-            <ForkAwesomeIcon icon="bolt" fixedWidth={ true } className="mx-2"/>
-            <Trans i18nKey="editor.help.documents.features"/>
+            <ForkAwesomeIcon icon='bolt' fixedWidth={true} className='mx-2' />
+            <Trans i18nKey='editor.help.documents.features' />
           </Dropdown.Item>
         </LinkContainer>
-        <LinkContainer to={ '/profile' }>
+        <LinkContainer to={'/profile'}>
           <Dropdown.Item dir='auto'>
-            <ForkAwesomeIcon icon="user" fixedWidth={ true } className="mx-2"/>
-            <Trans i18nKey="profile.userProfile"/>
+            <ForkAwesomeIcon icon='user' fixedWidth={true} className='mx-2' />
+            <Trans i18nKey='profile.userProfile' />
           </Dropdown.Item>
         </LinkContainer>
         <Dropdown.Item
           dir='auto'
-          onClick={ () => {
+          onClick={() => {
             clearUser()
-          } }>
-          <ForkAwesomeIcon icon="sign-out" fixedWidth={ true } className="mx-2"/>
-          <Trans i18nKey="login.signOut"/>
+          }}>
+          <ForkAwesomeIcon icon='sign-out' fixedWidth={true} className='mx-2' />
+          <Trans i18nKey='login.signOut' />
         </Dropdown.Item>
       </Dropdown.Menu>
-    </Dropdown>)
+    </Dropdown>
+  )
 }