From 3941f44f2942ba2963c5bb8b9d21323ee117e693 Mon Sep 17 00:00:00 2001 From: Gergo IVAN Date: Tue, 23 Jun 2020 09:43:48 +0200 Subject: [PATCH] Fix compile time issues. (redux) related to #48 --- constants/redux/Actions.ts | 5 +++-- constants/redux/Connecting.ts | 8 +++++--- constants/redux/Reducers.ts | 30 ++++++++++++++++++++++-------- screens/MainScreen.tsx | 23 +++++++++++------------ 4 files changed, 41 insertions(+), 25 deletions(-) diff --git a/constants/redux/Actions.ts b/constants/redux/Actions.ts index 76d9571..b558345 100644 --- a/constants/redux/Actions.ts +++ b/constants/redux/Actions.ts @@ -3,9 +3,10 @@ import { CHOOSE_IMAGE, EDIT_GOOD, CHECK_AVAILABLE, PICK_LOCATION } from './Types // Think of the state as read-only, since we cannot make changes to this object (which is represented in the form of a tree) directly. We need actions to do so. // Actions are like events in Redux. The nature of each event mentioned is mutable. An action is a JavaScript object. -function chooseImage() { +function chooseImage(uri: string) { return { - type: CHOOSE_IMAGE + type: CHOOSE_IMAGE, + uri }; } diff --git a/constants/redux/Connecting.ts b/constants/redux/Connecting.ts index c6308fb..a318df9 100644 --- a/constants/redux/Connecting.ts +++ b/constants/redux/Connecting.ts @@ -1,21 +1,23 @@ import { bindActionCreators } from 'redux'; import { actionCreators as actions } from './Actions'; +import { IState } from './Reducers'; // We need to bind action creators with our MainScreen in order to make it fully functional. // bindActionCreators maps action functions to an object using the names of the action functions. These functions automatically dispatch the action to the store when the function is called. To change the data, we need to dispatch an action. To enable this, we need two things: mapStateToProps and mapDispatchToProps, and we need to connect both of them with our component. // mapStateToProps is an object that lives in the store whose keys are passed down to the component as props. -export function mapStateToProps(state) { - const { isChosen, good, available, location } = state; +export function mapStateToProps(state: IState) { + const { isChosen, imageUri, good, available, location } = state; return { isChosen, + imageUri, goods: good, available, location }; } -export function mapDispatchToProps(dispatch) { +export function mapDispatchToProps(dispatch: any) { return { chooseImage: bindActionCreators(actions.chooseImage, dispatch), setStateGoods: bindActionCreators(actions.editGood, dispatch), diff --git a/constants/redux/Reducers.ts b/constants/redux/Reducers.ts index 5d6a0fd..cbf32e3 100644 --- a/constants/redux/Reducers.ts +++ b/constants/redux/Reducers.ts @@ -2,8 +2,21 @@ import { CHOOSE_IMAGE, EDIT_GOOD, CHECK_AVAILABLE, PICK_LOCATION } from './Types // In Redux, the state of the whole application is represented by one JavaScript object. -const initialState = { +export type ILocation = { + lat: number | null, + lng: number | null +}; +export type IState = { + isChosen: boolean, + imageUri: string | undefined, + good: string | undefined, + available: boolean, + location: ILocation +}; + +const initialState: IState = { isChosen: false, + imageUri: undefined, good: undefined, available: false, location: { @@ -12,28 +25,29 @@ const initialState = { } }; -function applyChooseImage(state) { +function applyChooseImage(state: IState, uri: string) { return { ...state, - isChosen: true + isChosen: true, + imageUri: uri }; } -function applyEditGood(state, good) { +function applyEditGood(state: IState, good: string) { return { ...state, good }; } -function applyCheckAvailable(state) { +function applyCheckAvailable(state: IState) { return { ...state, available: !state.available }; } -function applyPickLocation(state, location) { +function applyPickLocation(state: IState, location: ILocation) { return { ...state, location @@ -43,10 +57,10 @@ function applyPickLocation(state, location) { // The receiver of the action is known as a reducer. Whenever an action is triggered, the state of the application changes. The handling of the application’s state is done by the reducers. // A reducer is a pure function that calculates the next state based on the initial or previous state. It always produces the same output if the state is unchanged. -function reducer(state = initialState, action) { +function reducer(state = initialState, action: any) { switch (action.type) { case CHOOSE_IMAGE: - return applyChooseImage(state); + return applyChooseImage(state, action.uri); case EDIT_GOOD: return applyEditGood(state, action.parameter); case CHECK_AVAILABLE: diff --git a/screens/MainScreen.tsx b/screens/MainScreen.tsx index c0b25f0..5f85099 100644 --- a/screens/MainScreen.tsx +++ b/screens/MainScreen.tsx @@ -28,25 +28,25 @@ import StyledComponent from "../components/StyledComponent"; import { connect } from "react-redux"; import * as conn from "../constants/redux/Connecting"; -interface IProps { +interface IComponentProps { navigation: any; isChosen: boolean; + imageUri: string | undefined; goods: string; available: boolean; location: {lat: number, lng: number}; - chooseImage: () => void; + chooseImage: (uri: string) => void; setStateGoods: (name: string) => void; checkAvailable: () => void; pickLocation: (location: {lat: number, lng: number}) => void; } -interface IState { +interface IComponentState { expiry: Date; - photo: string | undefined; label: string; showDatePicker: boolean; } -class MainScreen extends React.Component { +class MainScreen extends React.Component { static navigationOptions = { title: i18n.new }; @@ -55,11 +55,10 @@ class MainScreen extends React.Component { multiplier = [-3, 2, 1]; _unsubscribe: any; - constructor(props: IProps) { + constructor(props: IComponentProps) { super(props); this.state = { expiry: new Date(), - photo: undefined, label: i18n.setLocation.toUpperCase(), showDatePicker: false }; @@ -103,11 +102,12 @@ class MainScreen extends React.Component { ); } - buttonAdd(object: IState) { + buttonAdd(object: IComponentState) { var now: Date = new Date(); let temp = object.expiry; temp.setHours(0, 0, 0, 0); var objectGoods = this.props.goods; + var objectPhoto = this.props.imageUri; let promises: Array> = []; for (var i = 0; i < this.multiplier.length; i++) { @@ -143,7 +143,7 @@ class MainScreen extends React.Component { !available ? null : this.props.location.lat, !available ? null : this.props.location.lng, available, - Utility.convertImageToDto(object.photo!) + Utility.convertImageToDto(objectPhoto!) ); } }); @@ -160,8 +160,7 @@ class MainScreen extends React.Component { }); if (!image.cancelled) { - this.setState({ photo: image.uri }); - this.props.chooseImage(); + this.props.chooseImage(image.uri); } }; @@ -184,7 +183,7 @@ class MainScreen extends React.Component { render() { const isDark = ('dark' === this.context); const withStyle = styles(isDark); - let { photo } = this.state; + let photo = this.props.imageUri; return (