Ufdjrw

This is a new project I have taken on, first time working with someone elses code so I feel like I am missing a piece of the puzzle somewhere, the developer behind the codebase is a contractor and is not great with comms.

I have my react component here

 type TasksProps = TasksState.TasksState & MetadataState.MetadataState & typeof TasksState.actionCreators & RouteComponentProps<>;

class Tasks extends React.Component<TasksProps, > 
 constructor(props) 
 super(props);
 this.setDates = this.setDates.bind(this);
 

 setDates(event, picker) 
 this.setState( startDate: picker.startDate.toDate(), endDate: picker.endDate.toDate() );
 

 public render() 
 return <div data-w-tab="Tasks" className="frame-pane w-tab-pane w--tab-active">
 <div className="filter-container vertical">
 <div className="filter-row">
 <DateRangePicker startDate=moment((this.state as any).startDate) endDate=moment((this.state as any).endDate) onApply=this.setDates
 ranges=
 'Today': [moment(), moment()],
 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
 'Last 7 Days': [moment().subtract(6, 'days'), moment()],
 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
 'This Month': [moment().startOf('month'), moment().endOf('month')],
 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
 'Last 12 Months': [moment().subtract(12, 'month'), moment()],
 >
 <div className="input-container">
 <img src="../ClientApp/images/Calendar.png" width="16" alt="" className="calendar-icon" />
 <div className="search-label">
 moment((this.state as any).startDate).format("DD MMM YY") + " to " + moment((this.state as any).endDate).format("DD MMM YY")
 </div>
 </div>
 </DateRangePicker>

 </div>

 </div>
 </div>
 



function mapStateToProps(state) 
 return tasksData: state.tasks.tasksData, metadata: state.metadata.metadata ; // taskData undefined ??


export default connect(mapStateToProps as any, TasksState.actionCreators)(Tasks) as typeof Tasks; 

Which talks to my reducer file

 export interface TasksState 
 tasksData: any;


interface ReceiveTasksDataAction 
 type: 'RECEIVE_TASKS_DATA';
 tasksData: any;


type KnownAction = ReceiveTasksDataAction;



export const actionCreators = 
 requestData: (notify: boolean, self: any): AppThunkAction<KnownAction> => (dispatch, getState) => 
 $("#block-ui-container").css('visibility', 'visible');
 $.ajax(
 url: '/api/tasks',
 method: "POST",
 data: 
 StartDate: self.state.startDate.toDateString(),
 EndDate: self.state.endDate.toDateString(),
 OrchardId: $("#OrchardId").length > 0 ? $("#OrchardId").val() : "",
 SiteId: $("#SiteId").length > 0 ? $("#SiteId").val() : "",
 BlockId: $("#BlockId").length > 0 ? $("#BlockId").val() : "",
 AreaId: $("#AreaId").length > 0 ? $("#AreaId").val() : "",
 Row: $("#Row").length > 0 ? $("Row").val() : "",
 TaskType: $("#TaskType").length > 0 ? $("#TaskType").val() : "",
 SubType: $("#SubType").length > 0 ? $("#SubType").val() : "",
 SubSubType: $("#SubSubType").length > 0 ? $("#SubSubType").val() : "",
 IsComplete: $("#IsComplete").length > 0 ? $("#IsComplete").val() : "",
 IsReopened: $("#IsReopened").length > 0 ? $("#IsReopened").val() : ""
 ,
 headers: 'X-XSRF-Token': $('input[name="__RequestVerificationToken"]').val() 
 ).then(function (response) 
 dispatch(
 type: 'RECEIVE_TASKS_DATA',
 tasksData: response.response
 );

 if (!self.props.metadata.Loading && (self.props as any).history.location.pathname.indexOf('payroll') >= 0) 
 $("#block-ui-container").css('visibility', 'hidden');
 
 if (notify) 
 Utils.showToast('Filter applied', false);
 
 ).catch(function (error) 
 $("#block-ui-container").css('visibility', 'hidden');
 if (error.status == 403) 
 Cookies.remove("LOGIN");
 (self.props as any).history.push('/not-logged-in');
 
 else 
 var status = error.status ? "Error " + error.status + ": " + error.statusText : error.toString();
 Utils.showToast(status, true);
 console.log(status);
 
 );
 ,
 clearData: (): AppThunkAction<KnownAction> => (dispatch, getState) => 
 dispatch(
 type: 'RECEIVE_TASKS_DATA',
 tasksData: unloadedState.tasksData
 );
 


const unloadedState: TasksState = 
 tasksData: null
;

export const reducer: Reducer<TasksState> = (state: TasksState, incomingAction: Action) => 
 const action = incomingAction as KnownAction;
 switch (action.type) 
 case 'RECEIVE_TASKS_DATA':
 return 
 tasksData: action.tasksData
 ;
 
 return state ;

Right now the react component is not rendering... the full error is

TypeError: Cannot read property 'tasksData' of undefined
 at Function.mapStateToProps [as mapToProps] (Tasks.js:49)

Which is from the react component, however I think the error itself may be in the reducer file?