Fix compile time issues. (redux)

related to #48

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
     };
 }
 

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),

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:

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<IProps, IState> {
+class MainScreen extends React.Component<IComponentProps, IComponentState> {
   static navigationOptions = {
     title: i18n.new
   };
@@ -55,11 +55,10 @@ class MainScreen extends React.Component<IProps, IState> {
   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<IProps, IState> {
     );
   }
 
-  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<Promise<String | Number>> = [];
     for (var i = 0; i < this.multiplier.length; i++) {
@@ -143,7 +143,7 @@ class MainScreen extends React.Component<IProps, IState> {
             !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<IProps, IState> {
     });
 
     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<IProps, IState> {
   render() {
     const isDark = ('dark' === this.context);
     const withStyle = styles(isDark);
-    let { photo } = this.state;
+    let photo = this.props.imageUri;
     return (
       <View
         style={withStyle.mainView}