From 03ea439e9fb11c3f708be2ca3614bdc1bffc17b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20My=C5=9Bliwiec?= Date: Mon, 19 Feb 2018 19:13:00 +0100 Subject: [PATCH 1/3] Patch & Improvement * Patch & Improvement Fixed a problem with non-displayed items and added some improvements * Start updating code base & update styles --- {img => assets/images}/Banner.png | Bin {img => assets/images}/card-showcase.jpg | Bin {img => assets/images}/card-showcase.png | Bin {img => assets/images}/cooking.png | Bin {img => assets/images}/derana.png | Bin {img => assets/images}/divaina.png | Bin assets/images/index.js | 1 + {img => assets/images}/lankadeepa.png | Bin {img => assets/images}/login_logo.png | Bin {img => assets/images}/logo.png | Bin {img => assets/images}/news-papers.png | Bin .../images}/newspapers_dinamina.png | Bin {img => assets/images}/rivira.png | Bin {img => assets/images}/unknown.png | Bin ...0\340\266\272\340\267\222\340\266\261.jpg" | Bin ...7\340\266\257\340\267\223\340\266\264.jpg" | Bin img/index.js | 11 --------- src/api/Api.js | 4 ++-- src/components/Loading.js | 21 ++++++++++-------- src/components/common/BoxItem.js | 19 +++++++++------- src/reducers/data_reducer.js | 10 ++------- 21 files changed, 28 insertions(+), 38 deletions(-) rename {img => assets/images}/Banner.png (100%) rename {img => assets/images}/card-showcase.jpg (100%) mode change 100755 => 100644 rename {img => assets/images}/card-showcase.png (100%) mode change 100755 => 100644 rename {img => assets/images}/cooking.png (100%) rename {img => assets/images}/derana.png (100%) rename {img => assets/images}/divaina.png (100%) create mode 100644 assets/images/index.js rename {img => assets/images}/lankadeepa.png (100%) rename {img => assets/images}/login_logo.png (100%) mode change 100755 => 100644 rename {img => assets/images}/logo.png (100%) rename {img => assets/images}/news-papers.png (100%) rename {img => assets/images}/newspapers_dinamina.png (100%) rename {img => assets/images}/rivira.png (100%) rename {img => assets/images}/unknown.png (100%) rename "img/\340\266\257\340\267\222\340\267\200\340\266\272\340\267\222\340\266\261.jpg" => "assets/images/\340\266\257\340\267\222\340\267\200\340\266\272\340\267\222\340\266\261.jpg" (100%) mode change 100755 => 100644 rename "img/\340\266\275\340\266\202\340\266\232\340\267\217\340\266\257\340\267\223\340\266\264.jpg" => "assets/images/\340\266\275\340\266\202\340\266\232\340\267\217\340\266\257\340\267\223\340\266\264.jpg" (100%) mode change 100755 => 100644 delete mode 100644 img/index.js diff --git a/img/Banner.png b/assets/images/Banner.png similarity index 100% rename from img/Banner.png rename to assets/images/Banner.png diff --git a/img/card-showcase.jpg b/assets/images/card-showcase.jpg old mode 100755 new mode 100644 similarity index 100% rename from img/card-showcase.jpg rename to assets/images/card-showcase.jpg diff --git a/img/card-showcase.png b/assets/images/card-showcase.png old mode 100755 new mode 100644 similarity index 100% rename from img/card-showcase.png rename to assets/images/card-showcase.png diff --git a/img/cooking.png b/assets/images/cooking.png similarity index 100% rename from img/cooking.png rename to assets/images/cooking.png diff --git a/img/derana.png b/assets/images/derana.png similarity index 100% rename from img/derana.png rename to assets/images/derana.png diff --git a/img/divaina.png b/assets/images/divaina.png similarity index 100% rename from img/divaina.png rename to assets/images/divaina.png diff --git a/assets/images/index.js b/assets/images/index.js new file mode 100644 index 0000000..e602142 --- /dev/null +++ b/assets/images/index.js @@ -0,0 +1 @@ +export const UNKNOWN = require('./unknown.png'); diff --git a/img/lankadeepa.png b/assets/images/lankadeepa.png similarity index 100% rename from img/lankadeepa.png rename to assets/images/lankadeepa.png diff --git a/img/login_logo.png b/assets/images/login_logo.png old mode 100755 new mode 100644 similarity index 100% rename from img/login_logo.png rename to assets/images/login_logo.png diff --git a/img/logo.png b/assets/images/logo.png similarity index 100% rename from img/logo.png rename to assets/images/logo.png diff --git a/img/news-papers.png b/assets/images/news-papers.png similarity index 100% rename from img/news-papers.png rename to assets/images/news-papers.png diff --git a/img/newspapers_dinamina.png b/assets/images/newspapers_dinamina.png similarity index 100% rename from img/newspapers_dinamina.png rename to assets/images/newspapers_dinamina.png diff --git a/img/rivira.png b/assets/images/rivira.png similarity index 100% rename from img/rivira.png rename to assets/images/rivira.png diff --git a/img/unknown.png b/assets/images/unknown.png similarity index 100% rename from img/unknown.png rename to assets/images/unknown.png diff --git "a/img/\340\266\257\340\267\222\340\267\200\340\266\272\340\267\222\340\266\261.jpg" "b/assets/images/\340\266\257\340\267\222\340\267\200\340\266\272\340\267\222\340\266\261.jpg" old mode 100755 new mode 100644 similarity index 100% rename from "img/\340\266\257\340\267\222\340\267\200\340\266\272\340\267\222\340\266\261.jpg" rename to "assets/images/\340\266\257\340\267\222\340\267\200\340\266\272\340\267\222\340\266\261.jpg" diff --git "a/img/\340\266\275\340\266\202\340\266\232\340\267\217\340\266\257\340\267\223\340\266\264.jpg" "b/assets/images/\340\266\275\340\266\202\340\266\232\340\267\217\340\266\257\340\267\223\340\266\264.jpg" old mode 100755 new mode 100644 similarity index 100% rename from "img/\340\266\275\340\266\202\340\266\232\340\267\217\340\266\257\340\267\223\340\266\264.jpg" rename to "assets/images/\340\266\275\340\266\202\340\266\232\340\267\217\340\266\257\340\267\223\340\266\264.jpg" diff --git a/img/index.js b/img/index.js deleted file mode 100644 index 2568311..0000000 --- a/img/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export const UNKNOWN = require('./unknown.png'); - -export const CATEGORY_NEWSPAPERS = require('./news-papers.png'); -export const CATEGORY_COOKING = require('./cooking.png'); - -export const NEWSPAPERS_DIVAINA = require('./divaina.png'); -export const NEWSPAPERS_LANKADEEPA = require('./lankadeepa.png'); -export const NEWSPAPERS_RIVIRA = require('./rivira.png'); -export const NEWSPAPERS_DERANA = require('./derana.png'); -export const NEWSPAPERS_DINAMINA = require('./newspapers_dinamina.png'); - diff --git a/src/api/Api.js b/src/api/Api.js index a2c8842..3137586 100644 --- a/src/api/Api.js +++ b/src/api/Api.js @@ -105,7 +105,7 @@ class Api { arrToReturn[index].items.push({ ...valueItems, thumbnail: image, - key: index, + key: iterationNo, }); if (iterationNo === data.length) { resolveItems(arrToReturn); @@ -116,7 +116,7 @@ class Api { arrToReturn[index].items.push({ ...valueItems, thumbnail: null, - key: index, + key: iterationNo, }); if (iterationNo === data.length) { resolveItems(arrToReturn); diff --git a/src/components/Loading.js b/src/components/Loading.js index 8ebdfc5..2f00a68 100644 --- a/src/components/Loading.js +++ b/src/components/Loading.js @@ -1,19 +1,22 @@ import React from 'react'; +import { StyleSheet } from 'react-native'; import Spinner from 'react-native-spinkit'; -const loaderStyle = { - type: 'FoldingCube', - color: '#3F51B5', - size: 100, -} +const TYPE = 'FoldingCube'; +const COLOR = '#3F51B5'; +const SIZE = 100; + +const styles = StyleSheet.create({ + loader: { marginTop: '50%' }, +}); const Loading = () => ( ); diff --git a/src/components/common/BoxItem.js b/src/components/common/BoxItem.js index eb80f42..a780cc4 100644 --- a/src/components/common/BoxItem.js +++ b/src/components/common/BoxItem.js @@ -1,15 +1,16 @@ 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 { StyleSheet, TouchableHighlight, View, Platform, Image } from 'react-native'; -import { UNKNOWN } from '../../../img/index'; +import { UNKNOWN } from '../../../assets/images/index'; const styles = StyleSheet.create({ box: { padding: 20, backgroundColor: 'rgba(0,0,0,0.05)', margin: 10, + borderRadius: 10, + borderWidth: 1, }, }); @@ -31,12 +32,14 @@ class Item extends Component { thumbUri = { uri: Platform.OS === 'android' ? `file://${thumbnail}` : thumbnail }; } return ( - - - + + diff --git a/src/reducers/data_reducer.js b/src/reducers/data_reducer.js index 045c855..be67f44 100644 --- a/src/reducers/data_reducer.js +++ b/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; } From d8e90287e1fc6b04f1ff8cbfd6344920bd95b089 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20My=C5=9Bliwiec?= Date: Wed, 21 Feb 2018 21:56:21 +0100 Subject: [PATCH 2/3] Finished Code Base update * Patch & Improvement Fixed a problem with non-displayed items and added some improvements * Start updating code base & update styles * Finished code base update * Update loaderStyle.js --- .eslintrc | 3 ++- assets/styles/appStyle.js | 10 +++++++++ assets/styles/boxItem.js | 20 ++++++++++++++++++ assets/styles/detailScreen.js | 22 +++++++++++++++++++ assets/styles/index.js | 13 ++++++++++++ assets/styles/loaderStyle.js | 11 ++++++++++ assets/styles/twoColumnView.js | 11 ++++++++++ src/api/Api.js | 6 +++--- src/components/App.js | 25 ++++------------------ src/components/DetailScreen.js | 28 +------------------------ src/components/Loading.js | 17 +++++---------- src/components/common/BoxItem.js | 29 +++++--------------------- src/components/common/TwoColumnView.js | 17 +++------------ 13 files changed, 110 insertions(+), 102 deletions(-) create mode 100644 assets/styles/appStyle.js create mode 100644 assets/styles/boxItem.js create mode 100644 assets/styles/detailScreen.js create mode 100644 assets/styles/index.js create mode 100644 assets/styles/loaderStyle.js create mode 100644 assets/styles/twoColumnView.js diff --git a/.eslintrc b/.eslintrc index a6cf27e..9fab3b9 100644 --- a/.eslintrc +++ b/.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 } } diff --git a/assets/styles/appStyle.js b/assets/styles/appStyle.js new file mode 100644 index 0000000..c3151a9 --- /dev/null +++ b/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; diff --git a/assets/styles/boxItem.js b/assets/styles/boxItem.js new file mode 100644 index 0000000..450c9e6 --- /dev/null +++ b/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; diff --git a/assets/styles/detailScreen.js b/assets/styles/detailScreen.js new file mode 100644 index 0000000..0127dce --- /dev/null +++ b/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; diff --git a/assets/styles/index.js b/assets/styles/index.js new file mode 100644 index 0000000..d6ee9a6 --- /dev/null +++ b/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 * as loaderStyle from './loaderStyle'; + +export { + boxItemStyle, + twoColumnViewStyle, + appStyle, + detailScreen, + loaderStyle, +}; diff --git a/assets/styles/loaderStyle.js b/assets/styles/loaderStyle.js new file mode 100644 index 0000000..7a2bcc8 --- /dev/null +++ b/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 { styles, TYPE, COLOR, SIZE }; diff --git a/assets/styles/twoColumnView.js b/assets/styles/twoColumnView.js new file mode 100644 index 0000000..c151c2d --- /dev/null +++ b/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; diff --git a/src/api/Api.js b/src/api/Api.js index 3137586..11beda5 100644 --- a/src/api/Api.js +++ b/src/api/Api.js @@ -97,7 +97,7 @@ class Api { ...value, items: [], }); - value.items.map((valueItems) => { + value.items.map((valueItems, key) => { if (valueItems.thumbnail) { images(valueItems.thumbnail) .then((image) => { @@ -105,7 +105,7 @@ class Api { arrToReturn[index].items.push({ ...valueItems, thumbnail: image, - key: iterationNo, + key: key, }); if (iterationNo === data.length) { resolveItems(arrToReturn); @@ -116,7 +116,7 @@ class Api { arrToReturn[index].items.push({ ...valueItems, thumbnail: null, - key: iterationNo, + key: key, }); if (iterationNo === data.length) { resolveItems(arrToReturn); diff --git a/src/components/App.js b/src/components/App.js index 2ad69b7..46e5d06 100644 --- a/src/components/App.js +++ b/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 ( - + { isFetching ? : this.renderCategories() } diff --git a/src/components/DetailScreen.js b/src/components/DetailScreen.js index 371c372..08c9be3 100644 --- a/src/components/DetailScreen.js +++ b/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}`, }); diff --git a/src/components/Loading.js b/src/components/Loading.js index 2f00a68..496d98b 100644 --- a/src/components/Loading.js +++ b/src/components/Loading.js @@ -2,21 +2,14 @@ import React from 'react'; import { StyleSheet } from 'react-native'; import Spinner from 'react-native-spinkit'; - -const TYPE = 'FoldingCube'; -const COLOR = '#3F51B5'; -const SIZE = 100; - -const styles = StyleSheet.create({ - loader: { marginTop: '50%' }, -}); +import { loaderStyle } from '../../assets/styles'; const Loading = () => ( ); diff --git a/src/components/common/BoxItem.js b/src/components/common/BoxItem.js index a780cc4..304d61e 100644 --- a/src/components/common/BoxItem.js +++ b/src/components/common/BoxItem.js @@ -1,39 +1,19 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { StyleSheet, TouchableHighlight, View, Platform, Image } from 'react-native'; - +import { TouchableHighlight, View, Platform, Image, Text } from 'react-native'; import { UNKNOWN } from '../../../assets/images/index'; -const styles = StyleSheet.create({ - box: { - padding: 20, - backgroundColor: 'rgba(0,0,0,0.05)', - margin: 10, - borderRadius: 10, - borderWidth: 1, - }, -}); +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 ( - + + {title} ); diff --git a/src/components/common/TwoColumnView.js b/src/components/common/TwoColumnView.js index 754a67f..2420ee1 100644 --- a/src/components/common/TwoColumnView.js +++ b/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 ( - + {left} @@ -41,8 +34,4 @@ const TwoColumnView = (props) => { ); }; -TwoColumnView.propTypes = { - children: PropTypes.arrayOf(PropTypes.node).isRequired, -}; - export default TwoColumnView; From 68d8ccec75360552cbc5ee708e01bc4e87d38eed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20My=C5=9Bliwiec?= Date: Wed, 21 Feb 2018 22:36:19 +0100 Subject: [PATCH 3/3] Patch loaderStyle --- assets/styles/index.js | 2 +- assets/styles/loaderStyle.js | 2 +- src/components/Loading.js | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/assets/styles/index.js b/assets/styles/index.js index d6ee9a6..78dcfbe 100644 --- a/assets/styles/index.js +++ b/assets/styles/index.js @@ -2,7 +2,7 @@ import boxItemStyle from './boxItem'; import twoColumnViewStyle from './twoColumnView'; import appStyle from './appStyle'; import detailScreen from './detailScreen'; -import * as loaderStyle from './loaderStyle'; +import loaderStyle from './loaderStyle'; export { boxItemStyle, diff --git a/assets/styles/loaderStyle.js b/assets/styles/loaderStyle.js index 7a2bcc8..aaa7c74 100644 --- a/assets/styles/loaderStyle.js +++ b/assets/styles/loaderStyle.js @@ -8,4 +8,4 @@ const styles = StyleSheet.create({ loader: { marginTop: '50%' }, }); -export { styles, TYPE, COLOR, SIZE }; +export default { styles, TYPE, COLOR, SIZE }; diff --git a/src/components/Loading.js b/src/components/Loading.js index 496d98b..c64c2d5 100644 --- a/src/components/Loading.js +++ b/src/components/Loading.js @@ -1,5 +1,4 @@ import React from 'react'; -import { StyleSheet } from 'react-native'; import Spinner from 'react-native-spinkit'; import { loaderStyle } from '../../assets/styles'; @@ -9,7 +8,7 @@ const Loading = () => ( type={loaderStyle.TYPE} color={loaderStyle.COLOR} size={loaderStyle.SIZE} - style={loaderStyle.style.loader} + style={loaderStyle.styles.loader} /> );