Tidy up and fix TS errors

guardian · Apr 29, 2024 · 76d5ad3 · 76d5ad3
1 parent cb08835
commit 76d5ad3
Show file tree

Hide file tree

Showing 15 changed files with 138 additions and 104 deletions.
diff --git a/fronts-client/src/bundles/recipesBundle.ts b/fronts-client/src/bundles/recipesBundle.ts
@@ -1,15 +1,13 @@
 import createAsyncResourceBundle from 'lib/createAsyncResourceBundle';
 import { Recipe } from 'types/Recipe';
-import recipe1 from "./fixtures/recipe1.json"
-import recipe2 from "./fixtures/recipe2.json"
+import recipe1 from './fixtures/recipe1.json';
+import recipe2 from './fixtures/recipe2.json';
 
 type RecipesState = Recipe[];
 
 export const { actions, reducer, selectors } =
   createAsyncResourceBundle<RecipesState>('recipes', {
     indexById: true,
     // Add stub data in the absence of proper search data.
-    initialData: [
-      recipe1, recipe2
-    ],
+    initialData: [recipe1, recipe2],
   });
diff --git a/fronts-client/src/components/FrontsEdit/CollectionComponents/Card.tsx b/fronts-client/src/components/FrontsEdit/CollectionComponents/Card.tsx
@@ -8,8 +8,7 @@ import {
   selectExternalArticleFromCard,
   selectSupportingArticleCount,
 } from 'selectors/shared';
-import cardTypes from 'constants/cardTypes';
-import { CardTypes, CardSizes, CardMeta } from 'types/Collection';
+import { CardSizes, CardMeta } from 'types/Collection';
 import SnapLink from 'components/snapLink/SnapLink';
 import {
   copyCardImageMetaWithPersist,
@@ -43,6 +42,7 @@ import { getPillarColor } from 'util/getPillarColor';
 import { isLive as isArticleLive } from 'util/CAPIUtils';
 import { DefaultDropIndicator } from 'components/DropZone';
 import DragIntentContainer from 'components/DragIntentContainer';
+import { CardTypes, CardTypesMap } from 'constants/cardTypes';
 
 export const createCardId = (id: string) => `collection-item-${id}`;
 
@@ -153,7 +153,7 @@ class Card extends React.Component<CardContainerProps> {
 
     const getCard = () => {
       switch (type) {
-        case cardTypes.ARTICLE:
+        case CardTypesMap.ARTICLE:
           return (
             <Article
               frontId={frontId}
@@ -180,7 +180,7 @@ class Card extends React.Component<CardContainerProps> {
               </EditModeVisibility>
             </Article>
           );
-        case cardTypes.SNAP_LINK:
+        case CardTypesMap.SNAP_LINK:
           return (
             <>
               <SnapLink

diff --git a/fronts-client/src/components/feed/ArticleFeedItem.tsx b/fronts-client/src/components/feed/ArticleFeedItem.tsx
@@ -1,21 +1,24 @@
-import {CapiArticle} from "../../types/Capi";
-import React from "react";
-import {dragOffsetX, dragOffsetY} from "../FrontsEdit/CollectionComponents/ArticleDrag";
-import {getPaths} from "../../util/paths";
-import {getArticleLabel, getThumbnail, isLive} from "../../util/CAPIUtils";
-import {hasMainVideo} from "../../util/externalArticle";
-import {getPillarColor} from "../../util/getPillarColor";
-import {liveBlogTones} from "../../constants/fronts";
-import {styled, theme} from "../../constants/theme";
-import startCase from "lodash/startCase";
-import ArticlePageNumberSection from "../util/ArticlePageNumberSection";
-import {State} from "../../types/State";
-import {selectFeatureValue} from "../../selectors/featureSwitchesSelectors";
-import {selectArticleAcrossResources} from "../../bundles/capiFeedBundle";
-import {Dispatch} from "../../types/Store";
-import {insertCardWithCreate} from "../../actions/Cards";
-import {connect} from "react-redux";
-import {FeedItem} from "./FeedItem";
+import { CapiArticle } from '../../types/Capi';
+import React from 'react';
+import {
+  dragOffsetX,
+  dragOffsetY,
+} from '../FrontsEdit/CollectionComponents/ArticleDrag';
+import { getPaths } from '../../util/paths';
+import { getArticleLabel, getThumbnail, isLive } from '../../util/CAPIUtils';
+import { hasMainVideo } from '../../util/externalArticle';
+import { getPillarColor } from '../../util/getPillarColor';
+import { liveBlogTones } from '../../constants/fronts';
+import { styled, theme } from '../../constants/theme';
+import startCase from 'lodash/startCase';
+import ArticlePageNumberSection from '../util/ArticlePageNumberSection';
+import { State } from '../../types/State';
+import { selectFeatureValue } from '../../selectors/featureSwitchesSelectors';
+import { selectArticleAcrossResources } from '../../bundles/capiFeedBundle';
+import { Dispatch } from '../../types/Store';
+import { insertCardWithCreate } from '../../actions/Cards';
+import { connect } from 'react-redux';
+import { FeedItem } from './FeedItem';
 
 const TagInfo = styled.div`
   padding-top: 2px;
@@ -38,31 +41,31 @@ interface ComponentProps extends ContainerProps {
   onAddToClipboard: (article: CapiArticle) => void;
 }
 
-const ArticleFeedItemComponent = ({ article, id, onAddToClipboard }: ComponentProps) => {
+const ArticleFeedItemComponent = ({
+  article,
+  id,
+  onAddToClipboard,
+}: ComponentProps) => {
   if (!article) {
     return <p>Article with id {id} not found.</p>;
   }
 
-  const handleDragStart = (event: React.DragEvent<HTMLDivElement>, dragNode: HTMLDivElement) => {
+  const handleDragStart = (
+    event: React.DragEvent<HTMLDivElement>,
+    dragNode: HTMLDivElement
+  ) => {
     event.dataTransfer.setData('capi', JSON.stringify(article));
     if (dragNode) {
-      event.dataTransfer.setDragImage(
-        dragNode,
-        dragOffsetX,
-        dragOffsetY
-      );
+      event.dataTransfer.setDragImage(dragNode, dragOffsetX, dragOffsetY);
     }
   };
 
   return (
     <FeedItem
       id={article.id}
       title={article.webTitle}
-      livePath={getPaths(article.id).live}
-      thumbnail={getThumbnail(
-        article.frontsMeta.defaults,
-        article
-      )}
+      liveUrl={getPaths(article.id).live}
+      thumbnail={getThumbnail(article.frontsMeta.defaults, article)}
       scheduledPublicationDate={article.fields.scheduledPublicationDate}
       firstPublishedDate={article.webPublicationDate}
       hasVideo={hasMainVideo(article)}
@@ -91,12 +94,10 @@ const ArticleFeedItemComponent = ({ article, id, onAddToClipboard }: ComponentPr
       }
     />
   );
-}
-
-const getState = (state: any) => state;
+};
 
 const mapStateToProps = (state: State, { id }: ContainerProps) => ({
-  shouldObscureFeed: selectFeatureValue(getState(state), 'obscure-feed'),
+  shouldObscureFeed: selectFeatureValue(state, 'obscure-feed'),
   article: selectArticleAcrossResources(state, id),
 });
 
@@ -113,4 +114,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => {
   };
 };
 
-export const ArticleFeedItem = connect(mapStateToProps, mapDispatchToProps)(ArticleFeedItemComponent);
+export const ArticleFeedItem = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ArticleFeedItemComponent);
diff --git a/fronts-client/src/components/feed/CapiSearchContainer.tsx b/fronts-client/src/components/feed/CapiSearchContainer.tsx
@@ -23,7 +23,6 @@ import ShortVerticalPinline from 'components/layout/ShortVerticalPinline';
 import { DEFAULT_PARAMS } from 'services/faciaApi';
 import ScrollContainer from '../ScrollContainer';
 import ClipboardHeader from 'components/ClipboardHeader';
-import { media } from 'util/mediaQueries';
 import ContainerHeading from 'components/typography/ContainerHeading';
 import { ClearIcon } from 'components/icons/Icons';
 import Button from 'components/inputs/ButtonDefault';

diff --git a/fronts-client/src/components/feed/Feed.tsx b/fronts-client/src/components/feed/Feed.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { styled } from 'constants/theme';
-import FeedItem from './FeedItem';
 import {
   liveSelectors,
   previewSelectors,
@@ -9,7 +8,7 @@ import {
 import { selectIsPrefillMode } from 'selectors/feedStateSelectors';
 import type { State } from 'types/State';
 import { connect } from 'react-redux';
-import {ArticleFeedItem} from "./ArticleFeedItem";
+import { ArticleFeedItem } from './ArticleFeedItem';
 
 interface ErrorDisplayProps {
   error?: string;

diff --git a/fronts-client/src/components/feed/FeedItem.tsx b/fronts-client/src/components/feed/FeedItem.tsx
@@ -13,9 +13,7 @@ import {
 } from 'components/inputs/HoverActionButtons';
 import noop from 'lodash/noop';
 import { ThumbnailSmall } from 'components/image/Thumbnail';
-import {
-  DraggingArticleComponent,
-} from 'components/FrontsEdit/CollectionComponents/ArticleDrag';
+import { DraggingArticleComponent } from 'components/FrontsEdit/CollectionComponents/ArticleDrag';
 import { media } from 'util/mediaQueries';
 import { VideoIcon } from 'components/icons/Icons';
 import CircularIconContainer from 'components/icons/CircularIconContainer';
@@ -53,7 +51,7 @@ const Title = styled.h2`
   font-weight: normal;
 `;
 
-const FeedItemContainer = styled.a<{ blur: boolean }>`
+const FeedItemContainer = styled.a<{ blur?: boolean }>`
   text-decoration: none;
   display: flex;
   color: inherit;
@@ -88,8 +86,6 @@ const ScheduledPublication = styled(FirstPublished)`
   color: ${notLiveColour};
 `;
 
-
-
 const Body = styled.div`
   padding-left: 8px;
 `;
@@ -103,15 +99,19 @@ const VideoIconContainer = styled(CircularIconContainer)`
 interface FeedItemProps {
   id: string;
   title: string;
-  liveUrl: string;
-  metaContent: JSX.Element;
+  liveUrl?: string;
+  metaContent?: JSX.Element;
   scheduledPublicationDate?: string;
   firstPublishedDate?: string;
   thumbnail?: string;
   hasVideo: boolean;
   isLive: boolean;
   onAddToClipboard: () => void;
-  handleDragStart: (event: React.DragEvent<HTMLDivElement>, dragNode: HTMLDivElement) => void;
+  handleDragStart: (
+    event: React.DragEvent<HTMLDivElement>,
+    dragNode: HTMLDivElement
+  ) => void;
+  shouldObscureFeed?: boolean;
 }
 
 export class FeedItem extends React.Component<FeedItemProps, {}> {
@@ -133,14 +133,16 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
       firstPublishedDate,
       thumbnail,
       hasVideo,
-      handleDragStart
+      handleDragStart,
     } = this.props;
 
     return (
       <Container
         data-testid="feed-item"
         draggable={true}
-        onDragStart={event => this.dragNode.current && handleDragStart(event, this.dragNode.current)}
+        onDragStart={(event) =>
+          this.dragNode.current && handleDragStart(event, this.dragNode.current)
+        }
       >
         <RenderOffscreen ref={this.dragNode}>
           <DraggingArticleComponent headline={title} />

diff --git a/fronts-client/src/components/feed/RecipeFeedItem.tsx b/fronts-client/src/components/feed/RecipeFeedItem.tsx
@@ -1,13 +1,18 @@
 import {Recipe} from "../../types/Recipe";
 import {FeedItem} from "./FeedItem";
 import React from "react";
+import {State} from "../../types/State";
 import {dragOffsetX, dragOffsetY} from "../FrontsEdit/CollectionComponents/ArticleDrag";
+import noop from "lodash/noop";
+import {selectFeatureValue} from "../../selectors/featureSwitchesSelectors";
+import {connect} from "react-redux";
 
 interface ComponentProps {
-  recipe: Recipe
+  recipe: Recipe,
+  shouldObscureFeed: boolean
 }
 
-export const RecipeFeedItem = ({ recipe }: ComponentProps) => {
+export const RecipeFeedItemComponent = ({ recipe, shouldObscureFeed }: ComponentProps) => {
   const handleDragStart = (event: React.DragEvent<HTMLDivElement>, dragNode: HTMLDivElement) => {
     event.dataTransfer.setData('recipe', JSON.stringify(recipe));
     if (dragNode) {
@@ -21,11 +26,21 @@ export const RecipeFeedItem = ({ recipe }: ComponentProps) => {
 
   return (
     <FeedItem
+      id={recipe.id}
       title={recipe.title}
       thumbnail={recipe.featuredImage.url}
       liveUrl={`https://theguardian.com/${recipe.canonicalArticle}`}
       hasVideo={false}
       isLive={true} // We do not yet serve preview recipes
-      handleDragStart={handleDragStart} />
+      handleDragStart={handleDragStart}
+      onAddToClipboard={noop}
+      shouldObscureFeed={shouldObscureFeed}
+      />
   )
 }
+
+const mapStateToProps = (state: State) => ({
+  shouldObscureFeed: selectFeatureValue(state, 'obscure-feed'),
+})
+
+export const RecipeFeedItem = connect(mapStateToProps)(RecipeFeedItemComponent)
diff --git a/fronts-client/src/components/feed/RecipeSearchContainer.tsx b/fronts-client/src/components/feed/RecipeSearchContainer.tsx
@@ -1,15 +1,15 @@
 import ClipboardHeader from 'components/ClipboardHeader';
 import TextInput from 'components/inputs/TextInput';
 import ShortVerticalPinline from 'components/layout/ShortVerticalPinline';
-import { styled, theme } from 'constants/theme';
+import { styled } from 'constants/theme';
 import React from 'react';
 import { connect } from 'react-redux';
 import { selectors as recipeSelectors } from 'bundles/recipesBundle';
 import { State } from 'types/State';
 import { Recipe } from 'types/Recipe';
 import { SearchResultsHeadingContainer } from './SearchResultsHeadingContainer';
 import { SearchTitle } from './SearchTitle';
-import {RecipeFeedItem} from "./RecipeFeedItem";
+import { RecipeFeedItem } from './RecipeFeedItem';
 
 const InputContainer = styled.div`
   margin-bottom: 10px;
@@ -48,7 +48,9 @@ const FeastSearchContainerComponent = ({
           <ShortVerticalPinline />
         </SearchTitle>
       </SearchResultsHeadingContainer>
-      {recipes.map((recipe) => <RecipeFeedItem recipe={recipe} />)}
+      {recipes.map((recipe) => (
+        <RecipeFeedItem key={recipe.id} recipe={recipe} />
+      ))}
     </FixedContentContainer>
   </React.Fragment>
 );

diff --git a/fronts-client/src/components/inputs/TextInput.tsx b/fronts-client/src/components/inputs/TextInput.tsx
@@ -59,13 +59,13 @@ interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   onClear?: () => void;
   onSearch?: () => void;
   displaySearchIcon: boolean;
-  searchTermsExist: boolean;
+  searchTermsExist?: boolean;
 }
 
 const TextInput = ({
   onClear,
   onSearch,
-  searchTermsExist,
+  searchTermsExist = true,
   displaySearchIcon,
   ...props
 }: TextInputProps) => (

diff --git a/fronts-client/src/constants/cardTypes.ts b/fronts-client/src/constants/cardTypes.ts
@@ -1,6 +1,7 @@
-import { CardTypes } from 'types/Collection';
+export const CardTypesMap = {
+  SNAP_LINK: 'snap-link',
+  ARTICLE: 'article',
+  RECIPE: 'recipe',
+} as const;
 
-export default {
-  SNAP_LINK: 'SNAP_LINK',
-  ARTICLE: 'ARTICLE',
-} as { [type: string]: CardTypes };
+export type CardTypes = (typeof CardTypesMap)[keyof typeof CardTypesMap];
diff --git a/fronts-client/src/selectors/__tests__/cardSelectors.spec.ts b/fronts-client/src/selectors/__tests__/cardSelectors.spec.ts
@@ -1,6 +1,6 @@
 import { createSelectCardType } from '../cardSelectors';
 import { stateWithSnaplinksAndArticles } from 'fixtures/shared';
-import cardTypes from 'constants/cardTypes';
+import { CardTypesMap } from 'constants/cardTypes';
 
 describe('Card selectors', () => {
   describe('createCardTypeSelector', () => {
@@ -11,7 +11,7 @@ describe('Card selectors', () => {
           stateWithSnaplinksAndArticles,
           '4c21ff2c-e2c5-4bac-ae14-24beb3f8d8b5'
         )
-      ).toEqual(cardTypes.SNAP_LINK);
+      ).toEqual(CardTypesMap.SNAP_LINK);
     });
     it('should identify articles', () => {
       const selectCardType = createSelectCardType();
@@ -20,7 +20,7 @@ describe('Card selectors', () => {
           stateWithSnaplinksAndArticles,
           '134c9d4f-b05c-43f4-be41-a605b6dccab9'
         )
-      ).toEqual(cardTypes.ARTICLE);
+      ).toEqual(CardTypesMap.ARTICLE);
     });
   });
 });