build(editor/website-example): typescript 4.7 introduced a bug which …

…caused the build to silently fail (#878) This caused that Babel transpiled the code but no type checking ever failed, which meant we were basically just writing JavaScript with TypeScript syntax ref microsoft/TypeScript#53287
wepublish · Mar 16, 2023 · e1fc8f1 · e1fc8f1
1 parent 8e41987
commit e1fc8f1
Show file tree

Hide file tree

Showing 14 changed files with 102 additions and 62 deletions.
diff --git a/apps/editor/src/app/atoms/comment/commentStateDropdown.tsx b/apps/editor/src/app/atoms/comment/commentStateDropdown.tsx
@@ -5,7 +5,6 @@ import {useTranslation} from 'react-i18next'
 import {MdArrowDropDown} from 'react-icons/md'
 import {
   Badge,
-  Button,
   ButtonGroup,
   Dropdown,
   IconButton as RIconButton,
@@ -106,14 +105,14 @@ export function CommentStateDropdown({comment, size, onStateChanged}: CommentSta
       )}
       <div>
         <ButtonGroup>
-          <Button
+          <IconButton
             appearance="ghost"
             icon={<MdArrowDropDown />}
             placement="left"
             color={mapCommentStateToColor(comment.state)}
             size={size || 'md'}>
             {t(humanReadableCommentState(comment.state))}
-          </Button>
+          </IconButton>
           <Whisper placement="bottomEnd" trigger="click" speaker={renderMenu}>
             <IconButton
               size={size || 'md'}

diff --git a/apps/editor/src/app/atoms/listInput.tsx b/apps/editor/src/app/atoms/listInput.tsx
@@ -57,11 +57,11 @@ export interface ListItemProps<T = any> {
   readonly children: (props: FieldProps<T>) => JSX.Element
 }
 
-const DragHandle = SortableHandle(({disabled}: {disabled?: boolean}) => (
+const DragHandle = SortableHandle<{disabled?: boolean}>(({disabled}: {disabled?: boolean}) => (
   <IconButton icon={<MdDragIndicator />} disabled={disabled} />
 ))
 
-const ListItem = SortableElement(
+const ListItem = SortableElement<ListItemProps>(
   ({value, itemIndex, itemDisabled, onChange, onRemove, children}: ListItemProps) => {
     function handleValueChange(fieldValue: React.SetStateAction<any>) {
       onChange(itemIndex, value => ({
@@ -92,7 +92,7 @@ const ListItem = SortableElement(
   }
 )
 
-const SortableList = SortableContainer(
+const SortableList = SortableContainer<ListFieldProps>(
   ({value, defaultValue, disabled, children, onChange}: ListFieldProps) => {
     function handleItemChange(itemIndex: number, itemValue: React.SetStateAction<ListValue>) {
       onChange(value =>

diff --git a/apps/editor/src/app/atoms/poll/pollAnswers.tsx b/apps/editor/src/app/atoms/poll/pollAnswers.tsx
@@ -76,7 +76,7 @@ function getTotalExternalVoteSourcesByAnswerId(
   return (
     pollExternalVotes
       .filter(externalVote => externalVote.answerId === answerId)
-      .reduce((total, externalVote) => total + externalVote.amount, 0) || 0
+      .reduce((total, externalVote) => total + (externalVote.amount ?? 0), 0) || 0
   )
 }
 

diff --git a/apps/editor/src/app/atoms/poll/pollExternalVotes.tsx b/apps/editor/src/app/atoms/poll/pollExternalVotes.tsx
@@ -23,6 +23,7 @@ import {
   toaster
 } from 'rsuite'
 import FormControl from 'rsuite/FormControl'
+import {RowDataType} from 'rsuite-table'
 
 const Row = styled(RRow)`
   margin-top: 20px;
@@ -81,15 +82,15 @@ export function ExternalVoteTable({
       <Table.Column key={answer.id} width={150}>
         <Table.HeaderCell>{answer.answer}</Table.HeaderCell>
         <Table.Cell>
-          {(externalVoteSource: PollExternalVoteSource) => (
+          {(externalVoteSource: RowDataType<PollExternalVoteSource>) => (
             <InputNumber
               value={
                 externalVoteSource.voteAmounts?.find(
                   (externalVote: PollExternalVote) => externalVote.answerId === answer.id
                 )?.amount || 0
               }
               onChange={(newValue: string | number) => {
-                changeSource(answer, externalVoteSource, newValue)
+                changeSource(answer, externalVoteSource as PollExternalVoteSource, newValue)
               }}
             />
           )}
@@ -110,21 +111,25 @@ export function ExternalVoteTable({
       <Table.Column>
         <Table.HeaderCell>{t('delete')}</Table.HeaderCell>
         <Table.Cell>
-          {(voteSource: PollExternalVoteSource) => (
-            <IconButton icon={<MdDelete />} onClick={() => onClickDeleteBtn(voteSource)} />
+          {(voteSource: RowDataType<PollExternalVoteSource>) => (
+            <IconButton
+              icon={<MdDelete />}
+              onClick={() => onClickDeleteBtn(voteSource as PollExternalVoteSource)}
+            />
           )}
         </Table.Cell>
       </Table.Column>
     </Table>
   )
 }
 
-interface addSourceProps {
+interface AddSourceProps {
   poll: FullPoll | undefined
   setLoading(loading: boolean): void
   onPollChange(poll: FullPoll): void
 }
-export function AddSource({poll, setLoading, onPollChange}: addSourceProps) {
+
+export function AddSource({poll, setLoading, onPollChange}: AddSourceProps) {
   const {t} = useTranslation()
   const [newSource, setNewSource] = useState<string | undefined>(undefined)
 

diff --git a/apps/editor/src/app/blocks/teaserGridBlock.tsx b/apps/editor/src/app/blocks/teaserGridBlock.tsx
@@ -89,7 +89,7 @@ const Status = styled.div`
   flex-shrink: 0;
 `
 
-const GridItem = SortableElement((props: TeaserBlockProps) => {
+const GridItem = SortableElement<TeaserBlockProps>((props: TeaserBlockProps) => {
   return <TeaserBlock {...props} />
 })
 
@@ -98,7 +98,7 @@ interface GridProps {
   children?: ReactNode
 }
 
-const Grid = SortableContainer(({children, numColumns}: GridProps) => {
+const Grid = SortableContainer<GridProps>(({children, numColumns}: GridProps) => {
   return <SortableContainerComponent numColumns={numColumns}>{children}</SortableContainerComponent>
 })
 

diff --git a/apps/editor/src/app/blocks/teaserGridFlexBlock.tsx b/apps/editor/src/app/blocks/teaserGridFlexBlock.tsx
@@ -4,8 +4,8 @@ import 'react-resizable/css/styles.css'
 import styled from '@emotion/styled'
 import i18next from 'i18next'
 import nanoid from 'nanoid'
-import {useEffect, useState} from 'react'
-import GridLayout from 'react-grid-layout'
+import {ComponentType, PropsWithChildren, useEffect, useState} from 'react'
+import GridLayoutWithoutChildren, {ReactGridLayoutProps} from 'react-grid-layout'
 import {useTranslation} from 'react-i18next'
 import {MdAddBox, MdDelete, MdEdit, MdLock, MdLockOpen} from 'react-icons/md'
 import {
@@ -23,6 +23,10 @@ import {TeaserSelectAndEditPanel} from '../panel/teaserSelectAndEditPanel'
 import {ContentForTeaser, IconButton, IconWrapper, Teaser} from './teaserGridBlock'
 import {FlexAlignment, FlexTeaser, Teaser as TeaserType, TeaserGridFlexBlockValue} from './types'
 
+// Fixes that pre React 18, all components had the children prop.
+// With React 18 this is not the case anymore, so some types are wrong
+const GridLayout: ComponentType<PropsWithChildren<ReactGridLayoutProps>> = GridLayoutWithoutChildren
+
 const ButtonToolbar = styled(RButtonToolbar)`
   top: 0;
   left: 0;

diff --git a/apps/editor/src/app/panel/embedEditPanel.tsx b/apps/editor/src/app/panel/embedEditPanel.tsx
@@ -72,7 +72,7 @@ export function EmbedEditPanel({value, onClose, onConfirm}: EmbedEditPanel) {
       if (input) {
         const parser = new DOMParser()
         const element = parser.parseFromString(input, 'text/html')
-        const [iframe] = element.getElementsByTagName('iframe')
+        const iframe = element.getElementsByTagName('iframe')[0]
 
         if (iframe) {
           const soundCloudMatch = iframe.src.match(/api.soundcloud.com\/tracks\/([0-9]+)/)

diff --git a/apps/editor/src/app/panel/navigationEditPanel.tsx b/apps/editor/src/app/panel/navigationEditPanel.tsx
@@ -296,8 +296,9 @@ function NavigationEditPanel({id, onClose, onSave}: NavigationEditPanelProps) {
                   value={value.type}
                   data={linkTypes}
                   onChange={type => {
-                    if (!type) return
-                    onChange({...value, type})
+                    if (type) {
+                      onChange({...value, type: type as string})
+                    }
                   }}
                 />
                 {value.type === 'PageNavigationLink' || value.type === 'ArticleNavigationLink' ? (

diff --git a/apps/editor/src/app/panel/selectCommentsPanel.tsx b/apps/editor/src/app/panel/selectCommentsPanel.tsx
@@ -184,7 +184,7 @@ export function SelectCommentPanel({
             <Table.Column width={36}>
               <Table.HeaderCell>{}</Table.HeaderCell>
               <TableCellNoPadding>
-                {(rowData: FullCommentFragment) => (
+                {(rowData: RowDataType<FullCommentFragment>) => (
                   <CheckboxWrapper>
                     <Checkbox
                       defaultChecked={commentFilter?.includes(rowData.id) ?? false}
@@ -236,7 +236,7 @@ export function SelectCommentPanel({
           <Table.Column width={150} align="center" fixed="right">
             <Table.HeaderCell>{t('comments.overview.edit')}</Table.HeaderCell>
             <PermissionControlWrapper>
-              {(rowData: FullCommentFragment) => (
+              {(rowData: RowDataType<FullCommentFragment>) => (
                 <PermissionControl qualifyingPermissions={['CAN_UPDATE_COMMENTS']}>
                   <IconButtonTooltip caption={t('comments.overview.edit')}>
                     <Link target="_blank" to={`/comments/edit/${rowData.id}`}>

diff --git a/apps/editor/src/app/panel/selectPollPanel.tsx b/apps/editor/src/app/panel/selectPollPanel.tsx
@@ -89,14 +89,14 @@ export function SelectPollPanel({selectedPoll, onClose, onSelect}: SelectPollPan
           <Table.Column width={250} resizable>
             <Table.HeaderCell>{t('pollList.opensAt')}</Table.HeaderCell>
             <Table.Cell>
-              {(rowData: RowDataType<Poll>) => <PollOpensAtView poll={rowData} />}
+              {(rowData: RowDataType<Poll>) => <PollOpensAtView poll={rowData as Poll} />}
             </Table.Cell>
           </Table.Column>
 
           <Table.Column width={250} resizable>
             <Table.HeaderCell>{t('pollList.closedAt')}</Table.HeaderCell>
             <Table.Cell>
-              {(rowData: RowDataType<Poll>) => <PollClosedAtView poll={rowData} />}
+              {(rowData: RowDataType<Poll>) => <PollClosedAtView poll={rowData as Poll} />}
             </Table.Cell>
           </Table.Column>
 

diff --git a/apps/editor/src/app/panel/teaserSelectPanel.tsx b/apps/editor/src/app/panel/teaserSelectPanel.tsx
@@ -3,6 +3,7 @@ import {
   ArticleFilter,
   ArticleSort,
   PageFilter,
+  PeerArticle,
   SortOrder,
   TeaserStyle,
   useArticleListQuery,
@@ -43,7 +44,6 @@ import {generateID} from '../utility'
 import {ImageEditPanel} from './imageEditPanel'
 import {ImageSelectPanel} from './imageSelectPanel'
 import {previewForTeaser, TeaserMetadataProperty} from './teaserEditPanel'
-import {PeerArticle} from '@wepublish/api'
 
 const List = styled(RList)`
   box-shadow: none;
@@ -167,20 +167,25 @@ export function TeaserSelectPanel({onClose, onSelect}: TeaserSelectPanelProps) {
         skip: skipPeer * take
       },
       updateQuery: (prev, {fetchMoreResult}) => {
-        if (!fetchMoreResult?.peerArticles?.nodes) return {peerArticles: undefined}
+        if (!fetchMoreResult?.peerArticles?.nodes) {
+          return fetchMoreResult
+        }
 
         return {
           peerArticles: {
             ...fetchMoreResult.peerArticles,
-            nodes: [...fetchMoreResult.peerArticles.nodes]
+            nodes: [...(fetchMoreResult.peerArticles.nodes as PeerArticle[])]
           }
         }
       }
     })
   }
 
   useEffect(() => {
-    setPeerArticles([...peerArticles, ...(peerArticleListData?.peerArticles?.nodes || [])])
+    setPeerArticles([
+      ...peerArticles,
+      ...((peerArticleListData?.peerArticles?.nodes as PeerArticle[]) || [])
+    ])
   }, [peerArticleListData?.peerArticles])
 
   /**

diff --git a/apps/editor/src/app/routes/commentRatingEditView.tsx b/apps/editor/src/app/routes/commentRatingEditView.tsx
@@ -241,34 +241,38 @@ type PollAnswersProps = {
 export function RatingAnswers({answers, onDeleteAnswer, onUpdateAnswer}: PollAnswersProps) {
   const {t} = useTranslation()
 
-  return answers?.map(answer => (
-    <AnswerGrid key={answer.id}>
-      <Form.Control
-        name={`answer-${answer.id}`}
-        placeholder={t('comments.ratingEdit.placeholder')}
-        value={answer.answer || ''}
-        onChange={(value: string) => onUpdateAnswer(answer.id, value, answer.type)}
-      />
+  return (
+    <>
+      {answers?.map(answer => (
+        <AnswerGrid key={answer.id}>
+          <Form.Control
+            name={`answer-${answer.id}`}
+            placeholder={t('comments.ratingEdit.placeholder')}
+            value={answer.answer || ''}
+            onChange={(value: string) => onUpdateAnswer(answer.id, value, answer.type)}
+          />
 
-      <SelectPicker
-        cleanable={false}
-        value={answer.type}
-        onChange={(value: RatingSystemType) => onUpdateAnswer(answer.id, answer.answer, value)}
-        data={Object.entries(RatingSystemType).map(([label, value]) => ({label, value}))}
-      />
+          <SelectPicker
+            cleanable={false}
+            value={answer.type}
+            onChange={(value: RatingSystemType) => onUpdateAnswer(answer.id, answer.answer, value)}
+            data={Object.entries(RatingSystemType).map(([label, value]) => ({label, value}))}
+          />
 
-      <IconButtonTooltip caption={t('delete')}>
-        <RIconButton
-          icon={<MdDelete />}
-          circle
-          size="sm"
-          appearance="ghost"
-          color="red"
-          onClick={() => onDeleteAnswer(answer.id)}
-        />
-      </IconButtonTooltip>
-    </AnswerGrid>
-  ))
+          <IconButtonTooltip caption={t('delete')}>
+            <RIconButton
+              icon={<MdDelete />}
+              circle
+              size="sm"
+              appearance="ghost"
+              color="red"
+              onClick={() => onDeleteAnswer(answer.id)}
+            />
+          </IconButtonTooltip>
+        </AnswerGrid>
+      ))}
+    </>
+  )
 }
 
 const CheckedPermissionComponent = createCheckedPermissionComponent([

diff --git a/package-lock.json b/package-lock.json