Merge pull request #522 from systemli/Update-prettier-configuration

💄 Update prettier configuration
systemli · Oct 20, 2023 · c7a71f1 · c7a71f1
2 parents 15019fc + 290fb9c
commit c7a71f1
Show file tree

Hide file tree

Showing 22 changed files with 61 additions and 268 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -7,9 +7,7 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
-    "prettier"
+    "plugin:@typescript-eslint/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -24,10 +22,10 @@
   ],
   "rules": {
     "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-unused-vars": "error",
     "no-console": "error",
-    "react/jsx-no-bind": "error",
+    "react/jsx-no-bind": "off",
     "react/jsx-sort-props": [
       "warn",
       {

diff --git a/.prettierrc.json b/.prettierrc.json
@@ -3,5 +3,7 @@
   "semi": false,
   "singleQuote": true,
   "tabWidth": 2,
+  "endOfLine": "auto",
+  "printWidth": 160,
   "trailingComma": "es5"
 }
diff --git a/src/Ticker.test.tsx b/src/Ticker.test.tsx
@@ -47,28 +47,16 @@ describe('Ticker', function () {
 
     expect(screen.getByText('Loading')).toBeInTheDocument()
 
-    expect(
-      await screen.findByText('It seems that you are offline.')
-    ).toBeInTheDocument()
+    expect(await screen.findByText('It seems that you are offline.')).toBeInTheDocument()
   })
 
   test('renders ErrorView', async function () {
-    jest
-      .spyOn(api, 'getInit')
-      .mockRejectedValue(
-        new Error(
-          'The server responses with an error: Internal Server Error (500)'
-        )
-      )
+    jest.spyOn(api, 'getInit').mockRejectedValue(new Error('The server responses with an error: Internal Server Error (500)'))
     renderTicker()
 
     expect(screen.getByText('Loading')).toBeInTheDocument()
 
-    expect(
-      await screen.findByText(
-        'There seems to be a problem connecting to the server.'
-      )
-    ).toBeInTheDocument()
+    expect(await screen.findByText('There seems to be a problem connecting to the server.')).toBeInTheDocument()
   })
 
   test('renders InactiveView', async function () {
@@ -82,9 +70,7 @@ describe('Ticker', function () {
 
     expect(screen.getByText('Loading')).toBeInTheDocument()
 
-    expect(
-      await screen.findByText('The ticker is currently inactive.')
-    ).toBeInTheDocument()
+    expect(await screen.findByText('The ticker is currently inactive.')).toBeInTheDocument()
   })
 
   test('renders ActiveView', async function () {
@@ -102,21 +88,13 @@ describe('Ticker', function () {
     const intersectionObserverMock = () => ({
       observe: () => null,
     })
-    window.IntersectionObserver = jest
-      .fn()
-      .mockImplementation(intersectionObserverMock)
+    window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock)
     renderTicker()
 
     expect(screen.getByText('Loading')).toBeInTheDocument()
 
-    expect(
-      await screen.findByText(
-        'The messages update automatically. There is no need to reload the entire page.'
-      )
-    ).toBeInTheDocument()
+    expect(await screen.findByText('The messages update automatically. There is no need to reload the entire page.')).toBeInTheDocument()
 
-    expect(
-      await screen.findByText('We dont have any messages at the moment.')
-    ).toBeInTheDocument()
+    expect(await screen.findByText('We dont have any messages at the moment.')).toBeInTheDocument()
   })
 })
diff --git a/src/Ticker.tsx b/src/Ticker.tsx
@@ -25,9 +25,7 @@ const Ticker: FC = () => {
   }
 
   if (hasError) {
-    return (
-      <ErrorView message="There seems to be a problem connecting to the server." />
-    )
+    return <ErrorView message="There seems to be a problem connecting to the server." />
   }
 
   if (isOffline) {

diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -20,47 +20,16 @@ const About: FC<Props> = ({ isModal }) => {
 
   const renderDescriptionList = () => (
     <List>
-      {ticker.information.author && (
-        <DescriptionItem
-          info={ticker.information.author}
-          type={DescriptionTypes.Author}
-        />
-      )}
-      {ticker.information.email && (
-        <DescriptionItem
-          info={ticker.information.email}
-          type={DescriptionTypes.Email}
-        />
-      )}
-      {ticker.information.url && (
-        <DescriptionItem
-          info={ticker.information.url}
-          type={DescriptionTypes.Homepage}
-        />
-      )}
-      {ticker.information.twitter && (
-        <DescriptionItem
-          info={ticker.information.twitter}
-          type={DescriptionTypes.Twitter}
-        />
-      )}
-      {ticker.information.facebook && (
-        <DescriptionItem
-          info={ticker.information.facebook}
-          type={DescriptionTypes.Facebook}
-        />
-      )}
-      {ticker.information.telegram && (
-        <DescriptionItem
-          info={ticker.information.telegram}
-          type={DescriptionTypes.Telegram}
-        />
-      )}
+      {ticker.information.author && <DescriptionItem info={ticker.information.author} type={DescriptionTypes.Author} />}
+      {ticker.information.email && <DescriptionItem info={ticker.information.email} type={DescriptionTypes.Email} />}
+      {ticker.information.url && <DescriptionItem info={ticker.information.url} type={DescriptionTypes.Homepage} />}
+      {ticker.information.twitter && <DescriptionItem info={ticker.information.twitter} type={DescriptionTypes.Twitter} />}
+      {ticker.information.facebook && <DescriptionItem info={ticker.information.facebook} type={DescriptionTypes.Facebook} />}
+      {ticker.information.telegram && <DescriptionItem info={ticker.information.telegram} type={DescriptionTypes.Telegram} />}
       <List.Item>
         <List.Icon name="feed" />
         <List.Content>
-          <a href={getAtomFeedUrl()}>Atom</a> |{' '}
-          <a href={getRssFeedUrl()}>RSS</a>
+          <a href={getAtomFeedUrl()}>Atom</a> | <a href={getRssFeedUrl()}>RSS</a>
         </List.Content>
       </List.Item>
     </List>

diff --git a/src/components/Attachments.test.tsx b/src/components/Attachments.test.tsx
@@ -3,9 +3,7 @@ import Attachments from './Attachments'
 
 describe('Attachment', function () {
   test('renders single image correctly', function () {
-    const attachments = [
-      { contentType: 'image/jpeg', url: 'https://example.com/image.jpg' },
-    ]
+    const attachments = [{ contentType: 'image/jpeg', url: 'https://example.com/image.jpg' }]
     const { asFragment } = render(<Attachments attachments={attachments} />)
 
     expect(asFragment()).toMatchSnapshot()

diff --git a/src/components/Attachments.tsx b/src/components/Attachments.tsx
@@ -1,13 +1,5 @@
 import { FC } from 'react'
-import {
-  ButtonBack,
-  ButtonNext,
-  CarouselProvider,
-  Dot,
-  Image,
-  Slide,
-  Slider,
-} from 'pure-react-carousel'
+import { ButtonBack, ButtonNext, CarouselProvider, Dot, Image, Slide, Slider } from 'pure-react-carousel'
 import styled from 'styled-components'
 import { Attachment } from '../lib/types'
 import 'pure-react-carousel/dist/react-carousel.es.css'
@@ -48,40 +40,18 @@ const Attachments: FC<Props> = props => {
             ))}
           </Button.Group>
         </DotWrapper>
-        <Button
-          as={ButtonBack}
-          color="grey"
-          floated="left"
-          icon="arrow circle left"
-          size="large"
-          style={{ ...style, ...{ left: 5 } }}
-        />
-        <Button
-          as={ButtonNext}
-          color="grey"
-          floated="right"
-          icon="arrow circle right"
-          size="large"
-          style={{ ...style, ...{ right: 5 } }}
-        />
+        <Button as={ButtonBack} color="grey" floated="left" icon="arrow circle left" size="large" style={{ ...style, ...{ left: 5 } }} />
+        <Button as={ButtonNext} color="grey" floated="right" icon="arrow circle right" size="large" style={{ ...style, ...{ right: 5 } }} />
       </>
     )
   }
 
   return (
-    <Wrapper
-      naturalSlideHeight={0.75}
-      naturalSlideWidth={1}
-      totalSlides={props.attachments.length}
-    >
+    <Wrapper naturalSlideHeight={0.75} naturalSlideWidth={1} totalSlides={props.attachments.length}>
       <Slider>
         {props.attachments.map((image, key) => (
           <Slide key={key} index={key}>
-            <Image
-              hasMasterSpinner={false}
-              src={image.url}
-              style={{ objectFit: 'scale-down' }}
-            />
+            <Image hasMasterSpinner={false} src={image.url} style={{ objectFit: 'scale-down' }} />
           </Slide>
         ))}
       </Slider>

diff --git a/src/components/Credits.tsx b/src/components/Credits.tsx
@@ -11,11 +11,7 @@ const Credits: FC = () => {
   return (
     <Wrapper>
       <Icon name="code" /> with <Icon color="red" name="heart" /> by{' '}
-      <a
-        href="https://www.systemli.org"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
+      <a href="https://www.systemli.org" rel="noopener noreferrer" target="_blank">
         systemli.org
       </a>
     </Wrapper>

diff --git a/src/components/DescriptionItem.tsx b/src/components/DescriptionItem.tsx
@@ -30,11 +30,7 @@ const DescriptionItem: FC<Props> = props => {
         <List.Item>
           <List.Icon name="facebook" />
           <List.Content>
-            <a
-              href={`https://fb.com/${props.info}`}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
+            <a href={`https://fb.com/${props.info}`} rel="noopener noreferrer" target="_blank">
               fb.com/{props.info}
             </a>
           </List.Content>
@@ -56,11 +52,7 @@ const DescriptionItem: FC<Props> = props => {
         <List.Item>
           <List.Icon name="twitter" />
           <List.Content>
-            <a
-              href={`https://twitter.com/${props.info}`}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
+            <a href={`https://twitter.com/${props.info}`} rel="noopener noreferrer" target="_blank">
               @{props.info}
             </a>
           </List.Content>
@@ -71,11 +63,7 @@ const DescriptionItem: FC<Props> = props => {
         <List.Item>
           <List.Icon name="telegram" />
           <List.Content>
-            <a
-              href={`https://t.me/${props.info}`}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
+            <a href={`https://t.me/${props.info}`} rel="noopener noreferrer" target="_blank">
               @{props.info}
             </a>
           </List.Content>

diff --git a/src/components/DynamicMetaTags.tsx b/src/components/DynamicMetaTags.tsx
@@ -15,12 +15,7 @@ const DynamicMetaTags: FC = () => {
       <meta content="summary" name="twitter:card" />
       <meta content={ticker.title} name="twitter:title" />
       <meta content={ticker.description} name="twitter:description" />
-      <meta
-        content={
-          ticker.information.twitter ? `@${ticker.information.twitter}` : ''
-        }
-        name="twitter:site"
-      />
+      <meta content={ticker.information.twitter ? `@${ticker.information.twitter}` : ''} name="twitter:site" />
       <meta content={ticker.title} property="og:title" />
       <meta content="website" property="og:type" />
       <meta content={window.location.href} property="og:url" />

diff --git a/src/components/Map.tsx b/src/components/Map.tsx
@@ -38,9 +38,7 @@ interface Props {
 
 const Map: FC<Props> = props => {
   const [mapExpanded, setMapExpanded] = useState<boolean>(false)
-  const featureCollection: GeoJSON.FeatureCollection = JSON.parse(
-    props.featureCollection
-  )
+  const featureCollection: GeoJSON.FeatureCollection = JSON.parse(props.featureCollection)
 
   const handleIconClick = useCallback(() => {
     setMapExpanded(!mapExpanded)
@@ -79,10 +77,7 @@ const Map: FC<Props> = props => {
           add: handleDataAdd,
         }}
       />
-      <ExpandButton
-        icon={mapExpanded ? 'compress' : 'expand'}
-        onClick={handleIconClick}
-      />
+      <ExpandButton icon={mapExpanded ? 'compress' : 'expand'} onClick={handleIconClick} />
     </Wrapper>
   )
 }

diff --git a/src/components/Message.tsx b/src/components/Message.tsx
@@ -48,13 +48,7 @@ const Message: FC<Props> = props => {
         <Grid>
           <Grid.Row>
             <Grid.Column width={10}>
-              <Popup
-                content={creationDate}
-                flowing
-                inverted
-                size="tiny"
-                trigger={relativeCreationDate}
-              />
+              <Popup content={creationDate} flowing inverted size="tiny" trigger={relativeCreationDate} />
             </Grid.Column>
           </Grid.Row>
         </Grid>

diff --git a/src/components/MessageList.test.tsx b/src/components/MessageList.test.tsx
@@ -10,15 +10,11 @@ describe('MessageList', function () {
     const intersectionObserverMock = () => ({
       observe: () => null,
     })
-    window.IntersectionObserver = jest
-      .fn()
-      .mockImplementation(intersectionObserverMock)
+    window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock)
 
     render(<MessageList />)
 
     expect(screen.getByText('Loading messages')).toBeInTheDocument()
-    expect(
-      await screen.findByText('We dont have any messages at the moment.')
-    ).toBeInTheDocument()
+    expect(await screen.findByText('We dont have any messages at the moment.')).toBeInTheDocument()
   })
 })
diff --git a/src/components/MessageList.tsx b/src/components/MessageList.tsx
@@ -74,10 +74,7 @@ const MessageList: FC = () => {
   }, [])
 
   useEffect(() => {
-    const observer = new IntersectionObserver(
-      fetchOlderMessagesCallback,
-      intersectionObserverOptions
-    )
+    const observer = new IntersectionObserver(fetchOlderMessagesCallback, intersectionObserverOptions)
     const currentRef = loadMoreSpinnerRef.current
 
     if (currentRef) {
@@ -89,18 +86,11 @@ const MessageList: FC = () => {
         observer.unobserve(currentRef)
       }
     }
-  }, [
-    fetchOlderMessagesCallback,
-    intersectionObserverOptions,
-    loadMoreSpinnerRef,
-  ])
+  }, [fetchOlderMessagesCallback, intersectionObserverOptions, loadMoreSpinnerRef])
 
   // periodically fetch new messages
   useEffect(() => {
-    const interval = setInterval(
-      () => fetchMessages(),
-      settings?.refreshInterval || 60000
-    )
+    const interval = setInterval(() => fetchMessages(), settings?.refreshInterval || 60000)
 
     return () => clearInterval(interval)
   }, [fetchMessages, messages, settings?.refreshInterval])