React: how to properly type the HOC component?

Question

I searched around the suggestions but could not find any answer. I'm basically think that I can properly type the HOC as follows:

This is my component at the moment:

// @flow
import React, { Component } from 'react';
import moment from 'moment';
import type { ApolloClient } from 'apollo-client';

import { convertDatesToISO } from 'components/Calendar/utils';


type Props = {
  client: ApolloClient<any>,
  location: {
    search: string,
  },
};

type SelectedDates = {
  startOn: moment,
  endOn: moment,
};



const withInitialSelectedDates = (WrappedComponent: Component<Props>): Component => {
  return class extends Component<Props> {
    initialSelectedDates: ?SelectedDates;

    initialSelectedDatesFromQueryString(): ?SelectedDates {
      const searchString = this.props.location.search;
      const searchParams = new URLSearchParams(searchString);
      const startOn = moment.utc(searchParams.get('start_date'));
      const endOn = moment.utc(searchParams.get('end_date'));

      if (!startOn.isValid() || !endOn.isValid()) return null;
      if (startOn < moment.utc().startOf('day')) return null;
      if (endOn < startOn) return null;

      return { startOn, endOn };
    }

    setInitialSelectedDatesOnGraphQLClient(): void {
      if (this.initialSelectedDates == null) return;

      this.props.client.writeData({
        data: {
          selectedDates: convertDatesToISO([this.initialSelectedDates]),
        },
      });
    }

    componentDidMount(): void {
      this.initialSelectedDates = this.initialSelectedDatesFromQueryString();
      this.setInitialSelectedDatesOnGraphQLClient();
    }

    render(): React.Element {
      return (
        <WrappedComponent
          initialSelectedDates={this.initialSelectedDates}
          {...this.props}
        />
      );
    }
  };
};

export default withInitialSelectedDates;

I think I can change:

const withInitialSelectedDates = (WrappedComponent: Component<Props>): Component => {

to this:

const withInitialSelectedDates = <PassedProps: {} & Props>(WrappedComponent: ComponentType<PassedProps>): ComponentType<PassedProps> => {

It will require importing ComponentType. My question is where should I change my current code and add PassedProps?

Answer 1

You'll want to follow the example from the "Injecting Props" section of the HOC Flow documentation. An example implementation could look like,

import * as React from 'react';

// Since Try Flow doesn't have access to these types
type ApolloClient<T> = any;
type moment = any;

type Props = {
  client: ApolloClient<any>,
  location: { 
    search: string,
  },
};

type SelectedDates = {
  startOn: moment,
  endOn: moment,
};

function withInitialSelectedDates(
  Component: React.AbstractComponent<Props>
): React.AbstractComponent<$Diff<Props, { initialSelectedDates: SelectedDates | void }>> {
  return class WrappedComponent extends React.Component<
    $Diff<Props, { initialSelectedDates: SelectedDates | void }>,
    { initialSelectedDates: SelectedDates | null }
  > {
    state = {
      initialSelectedDates: null,
    }

    getInitialSelectedDatesFromQueryString(): SelectedDates | null {
      if (true) {
        return { startOn: 'start', endOn: 'end' };
      } else {
        return null;
      }
      // use actual implementation; I just needed to satisfy type check
    }

    setInitialSelectedDatesOnGraphQLClient(selectedDates: SelectedDates | null): void {
      // implementation
    }

    componentDidMount(): void {
      const initialSelectedDates = this.getInitialSelectedDatesFromQueryString();
      this.setState({ initialSelectedDates });
      this.setInitialSelectedDatesOnGraphQLClient(initialSelectedDates);
    }

    render() {
      return (
        <Component
          {...this.props}
          initialSelectedDates={this.state.initialSelectedDates}
        />
      );
    }
  }
}

Try Flow