Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix important issues and start updating code base #49

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Fix important issues and start updating code base #49

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03ea439
Patch & Improvement
TheLukaszNs Feb 19, 2018
d8e9028
Finished Code Base update
TheLukaszNs Feb 21, 2018
68d8cce
Patch loaderStyle
TheLukaszNs Feb 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
10 changes: 10 additions & 0 deletions assets/styles/appStyle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
});

export default styles;
20 changes: 20 additions & 0 deletions assets/styles/boxItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
22 changes: 22 additions & 0 deletions assets/styles/detailScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
13 changes: 13 additions & 0 deletions assets/styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually u don't need to do this again.
Since in each of your individual style.js u have exported the function, this is a repetition.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know, I could just use ../styles/... import but I wanted the code to be available like this (for example):

import { loaderStyle } from '../assets/styles'

and not like this (which you can still use 😄):

import loaderStyle from '../assets/styles/loaderStyle'

It's up to you which one you want to use.

Copy link

@vibhavagarwal5 vibhavagarwal5 Feb 21, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for import { loaderStyle } from '../assets/styles' to be used, you do export loaderStyle instead of export default loaderStyle.
Plus to me, the code looks a complete duplicate except the boxItem.js styling 😄

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I know what you mean (I'll fix it now)! For the duplication - styles were already done, the point was just to move them to separate files - that's why it all looks so similar.

boxItemStyle,
twoColumnViewStyle,
appStyle,
detailScreen,
loaderStyle,
};
11 changes: 11 additions & 0 deletions assets/styles/loaderStyle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 };
11 changes: 11 additions & 0 deletions assets/styles/twoColumnView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
layout: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
},
});

export default styles;
6 changes: 3 additions & 3 deletions src/api/Api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: iterationNo,
key: key,
});
if (iterationNo === data.length) {
resolveItems(arrToReturn);
Expand All @@ -116,7 +116,7 @@ class Api {
arrToReturn[index].items.push({
...valueItems,
thumbnail: null,
key: iterationNo,
key: key,
});
if (iterationNo === data.length) {
resolveItems(arrToReturn);
Expand Down
25 changes: 4 additions & 21 deletions src/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: 'අන්තර්ජාල නැබ',
};
Expand Down Expand Up @@ -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>
Expand Down
28 changes: 1 addition & 27 deletions src/components/DetailScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}`,
});
Expand Down
17 changes: 5 additions & 12 deletions src/components/Loading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
<Spinner
type={TYPE}
color={COLOR}
size={SIZE}
style={styles.loader}
type={loaderStyle.TYPE}
color={loaderStyle.COLOR}
size={loaderStyle.SIZE}
style={loaderStyle.style.loader}
/>
);

Expand Down
29 changes: 5 additions & 24 deletions src/components/common/BoxItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,27 @@
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 (
<TouchableHighlight onPress={onPress} underlayColor='rgba(0,0,0,0.12)'>
<View style={styles.box}>
<View style={boxItemStyle.box}>
<Image
source={thumbUri}
style={{
height: 135,
width: 135,
}}
/>
<Text style={boxItemStyle.title}>{title}</Text>
</View>
</TouchableHighlight>
);
Expand Down
17 changes: 3 additions & 14 deletions src/components/common/TwoColumnView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -30,7 +23,7 @@ const TwoColumnView = (props) => {
});

return (
<View style={styles.layout}>
<View style={twoColumnViewStyle.layout}>
<View>
{left}
</View>
Expand All @@ -41,8 +34,4 @@ const TwoColumnView = (props) => {
);
};

TwoColumnView.propTypes = {
children: PropTypes.arrayOf(PropTypes.node).isRequired,
};

export default TwoColumnView;