Tidy up

Factor out common components and reshuffle feed components to 'feed' folder

fronts-client/src/components/FrontsEdit/Edit.tsx

@@ -15,7 +15,7 @@ import {
 import type { State } from 'types/State';
 import { ActionError } from 'types/Action';
 import FrontContainer from './FrontSection';
-import FeedSection from '../FeedSection';
+import FeedSection from '../feed/FeedSection';
 import ErrorBannner from '../ErrorBanner';
 import SectionContainer from '../layout/SectionContainer';
 import SectionsContainer from '../layout/SectionsContainer';

fronts-client/src/components/FeedsContainer.tsx → fronts-client/src/components/feed/CapiSearchContainer.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { styled, theme } from 'constants/theme';
-import SearchInput, {
-  SearchInputState,
-  initState,
-} from './FrontsCAPIInterface/SearchInput';
-import Feed from './FrontsCAPIInterface/Feed';
-import { RadioButton, RadioGroup } from './inputs/RadioButtons';
+import SearchInput, { SearchInputState, initState } from './SearchInput';
+import Feed from './Feed';
+import { RadioButton, RadioGroup } from '../inputs/RadioButtons';
 import type { State } from 'types/State';
 import {
   liveSelectors,
@@ -20,20 +17,22 @@ import { getTodayDate } from 'util/getTodayDate';
 import { getIdFromURL } from 'util/CAPIUtils';
 import { Dispatch } from 'types/Store';
 import debounce from 'lodash/debounce';
-import Pagination from './FrontsCAPIInterface/Pagination';
+import Pagination from './Pagination';
 import { IPagination } from 'lib/createAsyncResourceBundle';
 import ShortVerticalPinline from 'components/layout/ShortVerticalPinline';
 import { DEFAULT_PARAMS } from 'services/faciaApi';
-import ScrollContainer from './ScrollContainer';
+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';
 import { selectIsPrefillMode } from 'selectors/feedStateSelectors';
 import { feedArticlesPollInterval } from 'constants/polling';
+import { SearchTitle } from './SearchTitle';
+import { SearchResultsHeadingContainer } from './SearchResultsHeadingContainer';
 
-interface FeedsContainerProps {
+interface CapiSearchContainerProps {
   fetchLive: (params: object, isResource: boolean) => void;
   fetchPreview: (params: object, isResource: boolean) => void;
   hidePrefills: () => void;
@@ -45,30 +44,14 @@ interface FeedsContainerProps {
   prefillLoading: boolean;
 }
 
-interface FeedsContainerState {
+interface CapiSearchContainerState {
   capiFeedIndex: number;
   displaySearchFilters: boolean;
   inputState: SearchInputState;
   displayPrevResults: boolean;
   sortByParam: string;
 }
 
-const Title = styled.h1`
-  position: relative;
-  margin: 0 10px 0 0;
-  padding-top: 2px;
-  padding-right: 10px;
-  vertical-align: top;
-  font-family: TS3TextSans;
-  font-weight: bold;
-  font-size: 20px;
-  min-width: 80px;
-  ${media.large`
-    min-width: 60px;
-    font-size: 16px;
-  `}
-`;
-
 const RefreshButton = styled.button`
   padding-left: 0;
   appearance: none;
@@ -102,14 +85,6 @@ const ResultsContainer = styled.div`
   margin-right: 10px;
 `;
 
-const ResultsHeadingContainer = styled.div`
-  border-top: 1px solid ${theme.colors.greyVeryLight};
-  align-items: baseline;
-  display: flex;
-  margin-bottom: 10px;
-  flex-direction: row;
-`;
-
 const FixedContentContainer = styled.div`
   margin-bottom: 5px;
 `;
@@ -169,7 +144,6 @@ const getCapiFieldsToShow = (isPreview: boolean) => {
   return defaultFieldsToShow + ',scheduledPublicationDate';
 };
 
-export type directionParam = 'from-date' | 'to-date';
 const getParams = (
   query: string,
   {
@@ -202,9 +176,9 @@ const getParams = (
         'from-date': from && from.format('YYYY-MM-DD'),
       }),
 });
-class FeedsContainer extends React.Component<
-  FeedsContainerProps,
-  FeedsContainerState
+class CapiSearchContainer extends React.Component<
+  CapiSearchContainerProps,
+  CapiSearchContainerState
 > {
   public state = {
     capiFeedIndex: 0,
@@ -216,7 +190,7 @@ class FeedsContainer extends React.Component<
 
   private interval: null | number = null;
 
-  constructor(props: FeedsContainerProps) {
+  constructor(props: CapiSearchContainerProps) {
     super(props);
     this.debouncedRunSearchAndRestartPolling = debounce(
       () => this.runSearchAndRestartPolling(),
@@ -295,13 +269,13 @@ class FeedsContainer extends React.Component<
           rightHandContainer={<ClipboardHeader />}
         />
         <FixedContentContainer>
-          <ResultsHeadingContainer>
+          <SearchResultsHeadingContainer>
             <div>
               {displaySearchFilters ? (
-                <Title>
+                <SearchTitle>
                   {'Results'}
                   <ShortVerticalPinline />
-                </Title>
+                </SearchTitle>
               ) : (
                 <>
                   <Title>
@@ -357,7 +331,7 @@ class FeedsContainer extends React.Component<
                 </select>
               </SortByContainer>
             </Sorters>
-          </ResultsHeadingContainer>
+          </SearchResultsHeadingContainer>
         </FixedContentContainer>
       </React.Fragment>
     );
@@ -449,4 +423,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   hidePrefills: () => dispatch(hidePrefills()),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(FeedsContainer);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CapiSearchContainer);

fronts-client/src/components/EditionFeedSectionHeader.tsx → fronts-client/src/components/feed/EditionFeedSectionHeader.tsx

@@ -1,23 +1,23 @@
 import React, { ReactNode } from 'react';
-import { EditionsIssue } from '../types/Edition';
+import { EditionsIssue } from '../../types/Edition';
 import { connect } from 'react-redux';
 import type { State } from 'types/State';
-import { selectors as editionsIssueSelectors } from '../bundles/editionsIssueBundle';
-import { Dispatch } from '../types/Store';
+import { selectors as editionsIssueSelectors } from '../../bundles/editionsIssueBundle';
+import { Dispatch } from '../../types/Store';
 import {
   publishEditionIssue,
   proofEditionIssue,
   check,
-} from '../actions/Editions';
-import { styled } from '../constants/theme';
+} from '../../actions/Editions';
+import { styled } from '../../constants/theme';
 import startCase from 'lodash/startCase';
-import EditModeVisibility from './util/EditModeVisibility';
-import Button from './inputs/ButtonDefault';
+import EditModeVisibility from '../util/EditModeVisibility';
+import Button from '../inputs/ButtonDefault';
 import { Link } from 'react-router-dom';
 import url from 'constants/url';
 import noop from 'lodash/noop';
 import { startOptionsModal } from 'actions/OptionsModal';
-import IssueVersions from './Editions/IssueVersions';
+import IssueVersions from '../Editions/IssueVersions';
 import { getEditionIssue } from 'bundles/editionsIssueBundle';
 import format from 'date-fns/format';
 

fronts-client/src/components/FeedSection.tsx → fronts-client/src/components/feed/FeedSection.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { styled, theme } from 'constants/theme';
 
-import { selectors as editionsIssueSelectors } from '../bundles/editionsIssueBundle';
-import SectionContent from './layout/SectionContent';
-import FeedContainer from './FeedsContainer';
-import Clipboard from './Clipboard';
+import { selectors as editionsIssueSelectors } from '../../bundles/editionsIssueBundle';
+import SectionContent from '../layout/SectionContent';
+import CapiSearchContainer from './CapiSearchContainer';
+import Clipboard from '../Clipboard';
 import FeedSectionHeader from './FeedSectionHeader';
 import { media } from 'util/mediaQueries';
 import { connect } from 'react-redux';
 import { State } from 'types/State';
-import { FeastSearchContainer } from './feast/FeastSearchContainer';
+import { RecipeSearchContainer } from './RecipeSearchContainer';
 
 interface Props {
   isClipboardOpen: boolean;
@@ -37,7 +37,7 @@ const FeedSection = ({ isClipboardOpen, isFeast }: Props) => (
     <FeedSectionHeader />
     <FeedSectionContent>
       <FeedWrapper isClipboardOpen={isClipboardOpen}>
-        {isFeast ? <FeastSearchContainer /> : <FeedContainer />}
+        {isFeast ? <RecipeSearchContainer /> : <CapiSearchContainer />}
       </FeedWrapper>
       <Clipboard />
     </FeedSectionContent>

fronts-client/src/components/FeedSectionHeader.tsx → fronts-client/src/components/feed/FeedSectionHeader.tsx

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { styled, theme } from 'constants/theme';
-import SectionHeaderWithLogo from './layout/SectionHeaderWithLogo';
-import CurrentFrontsList from './CurrentFrontsList';
+import SectionHeaderWithLogo from '../layout/SectionHeaderWithLogo';
+import CurrentFrontsList from '../CurrentFrontsList';
 import FrontsLogo from 'images/icons/fronts-logo.svg';
 import Button from 'components/inputs/ButtonDefault';
 import type { State } from 'types/State';
@@ -14,7 +14,7 @@ import {
   createSelectEditorFrontsByPriority,
 } from 'bundles/frontsUI';
 import { Dispatch } from 'types/Store';
-import FadeTransition from './transitions/FadeTransition';
+import FadeTransition from '../transitions/FadeTransition';
 import { MoreIcon } from 'components/icons/Icons';
 import { RouteComponentProps } from 'react-router';
 import { selectEditMode } from 'selectors/pathSelectors';

fronts-client/src/components/feast/FeastSearchContainer.tsx → fronts-client/src/components/feed/RecipeSearchContainer.tsx

@@ -4,10 +4,11 @@ import ShortVerticalPinline from 'components/layout/ShortVerticalPinline';
 import { styled, theme } from 'constants/theme';
 import React from 'react';
 import { connect } from 'react-redux';
-import { media } from 'util/mediaQueries';
 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';
 
 const InputContainer = styled.div`
   margin-bottom: 10px;
@@ -23,36 +24,10 @@ const FixedContentContainer = styled.div`
   margin-bottom: 5px;
 `;
 
-// todo - copied
-const ResultsHeadingContainer = styled.div`
-  border-top: 1px solid ${theme.colors.greyVeryLight};
-  align-items: baseline;
-  display: flex;
-  margin-bottom: 10px;
-  flex-direction: row;
-`;
-
-// todo - copied
-const Title = styled.h1`
-  position: relative;
-  margin: 0 10px 0 0;
-  padding-top: 2px;
-  padding-right: 10px;
-  vertical-align: top;
-  font-family: TS3TextSans;
-  font-weight: bold;
-  font-size: 20px;
-  min-width: 80px;
-  ${media.large`
-    min-width: 60px;
-    font-size: 16px;
-  `}
-`;
-
-type Props = {
+interface Props {
   rightHandContainer?: React.ReactElement<any>;
   recipes: Recipe[];
-};
+}
 
 const FeastSearchContainerComponent = ({
   rightHandContainer,
@@ -66,12 +41,12 @@ const FeastSearchContainerComponent = ({
       <ClipboardHeader />
     </InputContainer>
     <FixedContentContainer>
-      <ResultsHeadingContainer>
-        <Title>
+      <SearchResultsHeadingContainer>
+        <SearchTitle>
           {'Results'}
           <ShortVerticalPinline />
-        </Title>
-      </ResultsHeadingContainer>
+        </SearchTitle>
+      </SearchResultsHeadingContainer>
       {recipes.map((recipe) => JSON.stringify(recipe))}
     </FixedContentContainer>
   </React.Fragment>
@@ -81,6 +56,6 @@ const mapStateToProps = (state: State) => ({
   recipes: recipeSelectors.selectAll(state),
 });
 
-export const FeastSearchContainer = connect(mapStateToProps)(
+export const RecipeSearchContainer = connect(mapStateToProps)(
   FeastSearchContainerComponent
 );

fronts-client/src/components/FrontsCAPIInterface/SearchInput.tsx → fronts-client/src/components/feed/SearchInput.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { styled } from 'constants/theme';
 import TextInput from '../inputs/TextInput';
-import CAPITagInput from '../FrontsCAPIInterface/TagInput';
-import CAPIFieldFilter from '../FrontsCAPIInterface/FieldFilter';
-import CAPIDateRangeInput from '../FrontsCAPIInterface/DateInput';
+import CAPITagInput from './/TagInput';
+import CAPIFieldFilter from './/FieldFilter';
+import CAPIDateRangeInput from './/DateInput';
 import moment from 'moment';
 import FilterItem from './FilterItem';
 import ButtonDefault from 'components/inputs/ButtonDefault';

fronts-client/src/components/feed/SearchResultsHeadingContainer.tsx

@@ -0,0 +1,9 @@
+import { styled, theme } from '../../constants/theme';
+
+export const SearchResultsHeadingContainer = styled.div`
+  border-top: 1px solid ${theme.colors.greyVeryLight};
+  align-items: baseline;
+  display: flex;
+  margin-bottom: 10px;
+  flex-direction: row;
+`;

fronts-client/src/components/feed/SearchTitle.tsx

@@ -0,0 +1,18 @@
+import { styled } from '../../constants/theme';
+import { media } from '../../util/mediaQueries';
+
+export const SearchTitle = styled.h1`
+  position: relative;
+  margin: 0 10px 0 0;
+  padding-top: 2px;
+  padding-right: 10px;
+  vertical-align: top;
+  font-family: TS3TextSans;
+  font-weight: bold;
+  font-size: 20px;
+  min-width: 80px;
+  ${media.large`
+    min-width: 60px;
+    font-size: 16px;
+  `}
+`;

fronts-client/src/types/Recipe.ts

@@ -1,4 +1,4 @@
-export type RecipeImage = {
+export interface RecipeImage {
   url: string;
   mediaId?: string;
   cropId?: string;
@@ -10,12 +10,12 @@ export type RecipeImage = {
   displayCredit?: boolean;
   width?: number;
   height?: number;
-};
+}
 
 // Incomplete – add as we need more properties. Eventually, this would
 // be useful to derive from a package.
-export type Recipe = {
+export interface Recipe {
   id: string;
   featuredImage: RecipeImage; // the latter is an old image format that appears in our test fixtures
   previewImage?: RecipeImage;
-};
+}