Fix important issues and start updating code base

.eslintrc

@@ -4,6 +4,7 @@
   "rules": {
     "strict": 0,
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "import/prefer-default-export": "off"
+    "import/prefer-default-export": "off",
+    "react/prop-types": 0
   }
 }

assets/images/index.js

@@ -0,0 +1 @@
+export const UNKNOWN = require('./unknown.png');

assets/styles/appStyle.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+});
+
+export default styles;

assets/styles/boxItem.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  box: {
+    padding: 20,
+    backgroundColor: 'rgba(0,0,0,0.05)',
+    margin: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontWeight: 'bold',
+    marginTop: 10,
+    fontSize: 18,
+  },
+});
+
+export default styles;

assets/styles/detailScreen.js

@@ -0,0 +1,22 @@
+// Is it unused?
+
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layout: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box: {
+    padding: 20,
+    backgroundColor: 'rgba(0,0,0,0.05)',
+    margin: 10,
+  },
+});
+
+export default styles;

assets/styles/index.js

@@ -0,0 +1,13 @@
+import boxItemStyle from './boxItem';
+import twoColumnViewStyle from './twoColumnView';
+import appStyle from './appStyle';
+import detailScreen from './detailScreen';
+import loaderStyle from './loaderStyle';
+
+export {
+  boxItemStyle,
+  twoColumnViewStyle,
+  appStyle,
+  detailScreen,
+  loaderStyle,
+};

assets/styles/loaderStyle.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+const TYPE = 'Wave';
+const COLOR = '#3F51B5';
+const SIZE = 100;
+
+const styles = StyleSheet.create({
+  loader: { marginTop: '50%' },
+});
+
+export default { styles, TYPE, COLOR, SIZE };

assets/styles/twoColumnView.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  layout: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
+
+export default styles;

src/api/Api.js

@@ -97,15 +97,15 @@ class Api {
                 ...value,
                 items: [],
               });
-              value.items.map((valueItems) => {
+              value.items.map((valueItems, key) => {
                 if (valueItems.thumbnail) {
                   images(valueItems.thumbnail)
                     .then((image) => {
                       iterationNo += 1;
                       arrToReturn[index].items.push({
                         ...valueItems,
                         thumbnail: image,
-                        key: index,
+                        key: key,
                       });
                       if (iterationNo === data.length) {
                         resolveItems(arrToReturn);
@@ -116,7 +116,7 @@ class Api {
                   arrToReturn[index].items.push({
                     ...valueItems,
                     thumbnail: null,
-                    key: index,
+                    key: key,
                   });
                   if (iterationNo === data.length) {
                     resolveItems(arrToReturn);

src/components/App.js

@@ -1,33 +1,16 @@
 import React, { Component } from 'react';
-import {
-  StyleSheet,
-  View,
-} from 'react-native';
+import { View } from 'react-native';
 import { Container, Content } from 'native-base';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-
 import Loading from './Loading';
 import TwoColumnView from './common/TwoColumnView';
 import BoxItem from './common/BoxItem';
 
-import * as actions from './../actions';
+import { appStyle } from '../../assets/styles';
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-  },
-});
+import * as actions from './../actions';
 
 class Categories extends Component {
-  static propTypes = {
-    actionFetchData: PropTypes.func.isRequired,
-    categories: PropTypes.array.isRequired,
-    isFetching: PropTypes.bool.isRequired,
-    navigation: PropTypes.object.isRequired,
-  };
-
   static navigationOptions = {
     title: 'අන්තර්ජාල නැබ',
   };
@@ -60,7 +43,7 @@ class Categories extends Component {
     return (
       <Container>
         <Content>
-          <View style={styles.container}>
+          <View style={appStyle.container}>
             { isFetching ? <Loading /> : this.renderCategories() }
           </View>
         </Content>

src/components/DetailScreen.js

@@ -1,37 +1,11 @@
 import React, { Component } from 'react';
-import {
-  StyleSheet,
-  Linking,
-} from 'react-native';
+import { Linking } from 'react-native';
 import { Container, Content } from 'native-base';
-import PropTypes from 'prop-types';
 
 import TwoColumnView from './common/TwoColumnView';
 import BoxItem from './common/BoxItem';
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layout: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  box: {
-    padding: 20,
-    backgroundColor: 'rgba(0,0,0,0.05)',
-    margin: 10,
-  },
-});
-
 export default class DetailScreen extends Component {
-
-  static propTypes = {
-    navigation: PropTypes.object.isRequired,
-  };
-
   static navigationOptions = ({ navigation }) => ({
     title: `${navigation.state.params.title}`,
   });

src/components/Loading.js

@@ -1,19 +1,14 @@
 import React from 'react';
 
 import Spinner from 'react-native-spinkit';
-
-const loaderStyle = {
-  type: 'FoldingCube',
-  color: '#3F51B5',
-  size: 100,
-}
+import { loaderStyle } from '../../assets/styles';
 
 const Loading = () => (
   <Spinner
-    type={loaderStyle.type}
-    color={loaderStyle.color}
-    size={loaderStyle.size}
-    style={{ marginTop: '50%' }}
+    type={loaderStyle.TYPE}
+    color={loaderStyle.COLOR}
+    size={loaderStyle.SIZE}
+    style={loaderStyle.styles.loader}
   />
 );
 

src/components/common/BoxItem.js

@@ -1,43 +1,27 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { StyleSheet, TouchableHighlight, View, Platform } from 'react-native';
-import ResponsiveImage from 'react-native-responsive-image';
+import { TouchableHighlight, View, Platform, Image, Text } from 'react-native';
+import { UNKNOWN } from '../../../assets/images/index';
 
-import { UNKNOWN } from '../../../img/index';
-
-const styles = StyleSheet.create({
-  box: {
-    padding: 20,
-    backgroundColor: 'rgba(0,0,0,0.05)',
-    margin: 10,
-  },
-});
+import { boxItemStyle } from '../../../assets/styles';
 
 class Item extends Component {
-  static defaultProps = {
-    thumbnail: 'UNKNOWN',
-    onPress: () => {},
-  };
-
-  static propTypes = {
-    thumbnail: PropTypes.string,
-    onPress: PropTypes.func,
-  };
-
   render() {
-    const { thumbnail, onPress } = this.props;
+    const { thumbnail, onPress, title } = this.props;
     let thumbUri = UNKNOWN;
     if (thumbnail !== null) {
       thumbUri = { uri: Platform.OS === 'android' ? `file://${thumbnail}` : thumbnail };
     }
     return (
-      <TouchableHighlight onPress={onPress} >
-        <View style={styles.box} >
-          <ResponsiveImage
+      <TouchableHighlight onPress={onPress} underlayColor='rgba(0,0,0,0.12)'>
+        <View style={boxItemStyle.box}>
+          <Image
             source={thumbUri}
-            initWidth="138"
-            initHeight="138"
+            style={{
+              height: 135,
+              width: 135,
+            }}
           />
+          <Text style={boxItemStyle.title}>{title}</Text>
         </View>
       </TouchableHighlight>
     );

src/components/common/TwoColumnView.js

@@ -1,14 +1,7 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import PropTypes from 'prop-types';
+import { View } from 'react-native';
 
-const styles = StyleSheet.create({
-  layout: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-});
+import { twoColumnViewStyle } from '../../../assets/styles';
 
 const TwoColumnView = (props) => {
   const { children } = props;
@@ -30,7 +23,7 @@ const TwoColumnView = (props) => {
   });
 
   return (
-    <View style={styles.layout}>
+    <View style={twoColumnViewStyle.layout}>
       <View>
         {left}
       </View>
@@ -41,8 +34,4 @@ const TwoColumnView = (props) => {
   );
 };
 
-TwoColumnView.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-
 export default TwoColumnView;

src/reducers/data_reducer.js

@@ -8,15 +8,9 @@ const InitialState = {
 export default (state = InitialState, action) => {
   switch (action.type) {
     case FETCHED_DATA:
-      return Object.assign({}, state, {
-        categories: action.payload,
-        isFetching: false,
-      });
+      return { ...state, categories: action.payload, isFetching: false };
     case START_FETCHING:
-      return Object.assign({}, state, {
-        categories: [],
-        isFetching: true,
-      });
+      return { ...state, isFetching: true };
     default:
       return state;
   }