diff --git a/.eslintrc.json b/.eslintrc.json
index 57d4ac6..17c3430 100644
--- 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
index 368bebf..8f2802d 100644
--- 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
index e7f45b4..b97c69a 100644
--- 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
index b4ba31e..862957d 100644
--- a/src/Ticker.tsx
+++ b/src/Ticker.tsx
@@ -25,9 +25,7 @@ const Ticker: FC = () => {
}
if (hasError) {
- return (
-
- )
+ return
}
if (isOffline) {
diff --git a/src/components/About.tsx b/src/components/About.tsx
index 1e5a6d3..b90eadb 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -20,47 +20,16 @@ const About: FC = ({ isModal }) => {
const renderDescriptionList = () => (
- {ticker.information.author && (
-
- )}
- {ticker.information.email && (
-
- )}
- {ticker.information.url && (
-
- )}
- {ticker.information.twitter && (
-
- )}
- {ticker.information.facebook && (
-
- )}
- {ticker.information.telegram && (
-
- )}
+ {ticker.information.author && }
+ {ticker.information.email && }
+ {ticker.information.url && }
+ {ticker.information.twitter && }
+ {ticker.information.facebook && }
+ {ticker.information.telegram && }
- Atom |{' '}
- RSS
+ Atom | RSS
diff --git a/src/components/Attachments.test.tsx b/src/components/Attachments.test.tsx
index f019db6..2bfa7c1 100644
--- 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()
expect(asFragment()).toMatchSnapshot()
diff --git a/src/components/Attachments.tsx b/src/components/Attachments.tsx
index 11afd3c..6385ea1 100644
--- 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 => {
))}
-
-
+
+
)
}
return (
-
+
{props.attachments.map((image, key) => (
-
+
))}
diff --git a/src/components/Credits.tsx b/src/components/Credits.tsx
index dc8a2c2..84d1c61 100644
--- a/src/components/Credits.tsx
+++ b/src/components/Credits.tsx
@@ -11,11 +11,7 @@ const Credits: FC = () => {
return (
with by{' '}
-
+
systemli.org
diff --git a/src/components/DescriptionItem.tsx b/src/components/DescriptionItem.tsx
index 39e8c8a..56ccd09 100644
--- a/src/components/DescriptionItem.tsx
+++ b/src/components/DescriptionItem.tsx
@@ -30,11 +30,7 @@ const DescriptionItem: FC = props => {
-
+
fb.com/{props.info}
@@ -56,11 +52,7 @@ const DescriptionItem: FC = props => {
-
+
@{props.info}
@@ -71,11 +63,7 @@ const DescriptionItem: FC = props => {
-
+
@{props.info}
diff --git a/src/components/DynamicMetaTags.tsx b/src/components/DynamicMetaTags.tsx
index 620b175..40fbeae 100644
--- a/src/components/DynamicMetaTags.tsx
+++ b/src/components/DynamicMetaTags.tsx
@@ -15,12 +15,7 @@ const DynamicMetaTags: FC = () => {
-
+
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index 368389b..89ba1e5 100644
--- a/src/components/Map.tsx
+++ b/src/components/Map.tsx
@@ -38,9 +38,7 @@ interface Props {
const Map: FC = props => {
const [mapExpanded, setMapExpanded] = useState(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 => {
add: handleDataAdd,
}}
/>
-
+
)
}
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
index 90eda68..e3643a5 100644
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@@ -48,13 +48,7 @@ const Message: FC = props => {
-
+
diff --git a/src/components/MessageList.test.tsx b/src/components/MessageList.test.tsx
index db35c58..13e7140 100644
--- 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()
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
index 0b978ae..e0c587a 100644
--- 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])
diff --git a/src/components/ReloadInfo.test.tsx b/src/components/ReloadInfo.test.tsx
index 3e525cb..c420b8e 100644
--- a/src/components/ReloadInfo.test.tsx
+++ b/src/components/ReloadInfo.test.tsx
@@ -10,11 +10,7 @@ describe('ReloadInfo', function () {
test('renders correctly', async function () {
const { container } = render()
- expect(
- screen.getByText(
- 'The messages update automatically. There is no need to reload the entire page.'
- )
- ).toBeVisible()
+ expect(screen.getByText('The messages update automatically. There is no need to reload the entire page.')).toBeVisible()
const close = container.querySelector('i.close') as HTMLElement
const user = userEvent.setup()
@@ -27,11 +23,7 @@ describe('ReloadInfo', function () {
localStorage.setItem('showReloadInfo', '0')
const { container } = render()
- expect(
- screen.getByText(
- 'The messages update automatically. There is no need to reload the entire page.'
- )
- ).toBeInTheDocument()
+ expect(screen.getByText('The messages update automatically. There is no need to reload the entire page.')).toBeInTheDocument()
expect(container.firstElementChild).toHaveClass('hidden')
})
})
diff --git a/src/components/ReloadInfo.tsx b/src/components/ReloadInfo.tsx
index 8d1a639..dc960da 100644
--- a/src/components/ReloadInfo.tsx
+++ b/src/components/ReloadInfo.tsx
@@ -2,9 +2,7 @@ import { FC, useCallback, useState } from 'react'
import { Message } from 'semantic-ui-react'
const ReloadInfo: FC = () => {
- const [showReloadInfo, setShowReloadInfo] = useState(
- localStorage.getItem('showReloadInfo') === null
- )
+ const [showReloadInfo, setShowReloadInfo] = useState(localStorage.getItem('showReloadInfo') === null)
const handleDismiss = useCallback(() => {
setShowReloadInfo(false)
diff --git a/src/components/useTicker.tsx b/src/components/useTicker.tsx
index fe3d418..1c22a13 100644
--- a/src/components/useTicker.tsx
+++ b/src/components/useTicker.tsx
@@ -1,10 +1,4 @@
-import React, {
- createContext,
- ReactNode,
- useContext,
- useEffect,
- useMemo,
-} from 'react'
+import React, { createContext, ReactNode, useContext, useEffect, useMemo } from 'react'
import { getInit } from '../lib/api'
import { Settings, Ticker } from '../lib/types'
import { useState } from 'react'
@@ -19,11 +13,7 @@ interface TickerContext {
const TickerContext = createContext({} as TickerContext)
-export function TickerProvider({
- children,
-}: {
- children: ReactNode
-}): JSX.Element {
+export function TickerProvider({ children }: { children: ReactNode }): JSX.Element {
const [ticker, setTicker] = useState(null)
const [settings, setSettings] = useState()
const [isLoading, setIsLoading] = useState(true)
@@ -68,11 +58,7 @@ export function TickerProvider({
[ticker, settings, isLoading, isOffline, hasError]
)
- return (
-
- {children}
-
- )
+ return {children}
}
export default function useTicker() {
diff --git a/src/lib/api.test.ts b/src/lib/api.test.ts
index b90df6f..c2fcb25 100644
--- a/src/lib/api.test.ts
+++ b/src/lib/api.test.ts
@@ -41,9 +41,7 @@ describe('api', function () {
expect(response).not.toBeNull()
expect(fetch).toHaveBeenCalledTimes(1)
- expect(fetch).toHaveBeenCalledWith(
- 'http://localhost:8080/v1/timeline?after=1'
- )
+ expect(fetch).toHaveBeenCalledWith('http://localhost:8080/v1/timeline?after=1')
})
test('getTimeline w/ before pagination', async function () {
@@ -53,8 +51,6 @@ describe('api', function () {
expect(response).not.toBeNull()
expect(fetch).toHaveBeenCalledTimes(1)
- expect(fetch).toHaveBeenCalledWith(
- 'http://localhost:8080/v1/timeline?before=1'
- )
+ expect(fetch).toHaveBeenCalledWith('http://localhost:8080/v1/timeline?before=1')
})
})
diff --git a/src/lib/api.ts b/src/lib/api.ts
index c314833..116cfc8 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -23,9 +23,7 @@ async function get(path: string): Promise {
const response = await fetch(path)
if (!response.ok) {
- throw new Error(
- `The server responses with an error: ${response.statusText} (${response.status})`
- )
+ throw new Error(`The server responses with an error: ${response.statusText} (${response.status})`)
}
return response.json().catch(() => ({}))
@@ -40,9 +38,7 @@ export type TimelineOpts = {
before?: string | null
}
-export async function getTimeline(
- opts: TimelineOpts
-): Promise {
+export async function getTimeline(opts: TimelineOpts): Promise {
if (opts.after != null) {
return get(`${ApiUrl}/timeline?after=${opts.after}`)
}
diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index cc57d62..6752e54 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -3,10 +3,7 @@ import { breakpoints } from './theme'
// FIXME: Not sure if checking the width once and using it to decide upon
// what markup to render actually is the best solution here.
export const isMobile = (): boolean => {
- const width =
- window.innerWidth ||
- document.documentElement.clientWidth ||
- document.getElementsByTagName('body')[0].clientWidth
+ const width = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth
return width < breakpoints.mobile
}
@@ -15,22 +12,10 @@ export const isMobile = (): boolean => {
export const replaceMagic = (text: string): string => {
return text
? text
- .replace(
- /(https?:\/\/([a-zA-Z0-9._\-/]+))/g,
- '$2'
- )
- .replace(
- /#(\S+)/g,
- '#$1'
- )
- .replace(
- / @(\S+)/g,
- ' @$1'
- )
- .replace(
- /([a-zA-Z0-9_\-.]+@[a-zA-Z0-9_-]+.[a-zA-Z]+)/g,
- '$1'
- )
+ .replace(/(https?:\/\/([a-zA-Z0-9._\-/]+))/g, '$2')
+ .replace(/#(\S+)/g, '#$1')
+ .replace(/ @(\S+)/g, ' @$1')
+ .replace(/([a-zA-Z0-9_\-.]+@[a-zA-Z0-9_-]+.[a-zA-Z]+)/g, '$1')
.replace(/(?:\r\n|\r|\n)/g, '
')
: ''
}
diff --git a/src/views/ActiveView.tsx b/src/views/ActiveView.tsx
index 85df211..59ba600 100644
--- a/src/views/ActiveView.tsx
+++ b/src/views/ActiveView.tsx
@@ -23,8 +23,7 @@ const ActiveView: FC = () => {
const [stickyContext, setStickyContext] = useState()
const { ticker } = useTicker()
- const headline =
- ticker === null || ticker.title == undefined ? 'Ticker' : ticker.title
+ const headline = ticker === null || ticker.title == undefined ? 'Ticker' : ticker.title
const handleContextRef = useCallback((stickyContextValue: StickyContext) => {
setStickyContext(stickyContextValue)
diff --git a/src/views/InactiveView.tsx b/src/views/InactiveView.tsx
index f58ad97..d0eb510 100644
--- a/src/views/InactiveView.tsx
+++ b/src/views/InactiveView.tsx
@@ -29,41 +29,15 @@ const InactiveView: FC = props => {
- {props.settings.headline &&
- props.settings.subHeadline &&
- renderHeader()}
+ {props.settings.headline && props.settings.subHeadline && renderHeader()}
-
- {props.settings.description && (
- {props.settings.description}
- )}
-
+ {props.settings.description && {props.settings.description}}
- {props.settings.author && (
-
- )}
- {props.settings.email && (
-
- )}
- {props.settings.homepage && (
-
- )}
- {props.settings.twitter && (
-
- )}
+ {props.settings.author && }
+ {props.settings.email && }
+ {props.settings.homepage && }
+ {props.settings.twitter && }