Add app information, copyright, and thanks to about page

src/actions/actionTypes.js

@@ -7,3 +7,4 @@ export const MAIN = 'MAIN';
 export const CHART = 'CHART';
 export const HELP = 'HELP';
 export const EXAMPLE = 'EXAMPLE';
+export const ABOUT = 'ABOUT';

src/actions/menuActions.js

@@ -35,3 +35,9 @@ export function example() {
 		type: types.EXAMPLE
 	};
 }
+
+export function about() {
+	return {
+		type: types.ABOUT
+	};
+}

src/components/about.js

@@ -0,0 +1,64 @@
+import React, {Component} from 'react';
+import {ScrollView, View} from 'react-native';
+
+import MyText from './mytext.js';
+import MyLink from './mylink.js';
+import Section from './section.js';
+
+export default class About extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<ScrollView>
+				<View style={{padding: 20}}>
+					<Section>
+						<MyText style={{textAlign: 'center'}}>
+							Exact Resistor Calculator v1.0.0
+						</MyText>
+						<MyText style={{textAlign: 'center'}}>
+							© 2017 Tanner Collin
+						</MyText>
+					</Section>
+					<Section>
+						<MyText>
+							This app was written by <MyLink url="http://tannercollin.com">Tanner Collin</MyLink> and based off a spreadsheet he created in university to help him finish electronics labs faster.
+						</MyText>
+					</Section>
+					<Section>
+						<MyText>
+							This app is free and open-source software licensed under the MIT License.
+						</MyText>
+						<MyText>
+							That means you have the right to study, change, and distribute the software and source code to anyone and for any purpose.
+						</MyText>
+					</Section>
+					<Section>
+						<MyText>
+							You can find the source code and report bugs here:
+						</MyText>
+						<MyText>
+							<MyLink url="https://github.com/tannercollin/exact-resistor-calculator">https://github.com/tannercollin/exact-resistor-calculator</MyLink>
+						</MyText>
+					</Section>
+					<Section>
+						<MyText>
+							Instead of donating to me, please give to the Electronic Frontier Foundation.
+						</MyText>
+					</Section>
+					<Section>
+						<MyText>
+							Thanks to all the devs behind Node.js, React, React Native, and Redux.
+						</MyText>
+						<MyText>
+							Thanks to Jakub Jankiewicz for the circuit image. It and my derivatives are licensed CC BY-SA.
+						</MyText>
+					</Section>
+				</View>
+			</ScrollView>
+		);
+	}
+}
+

src/components/menu.js

@@ -22,7 +22,7 @@ export default class Menu extends Component {
 	}
 
 	render() {
-		const {main, chart, help, example} = this.props;
+		const {about, main, chart, help, example} = this.props;
 
 		return (
 			<View style={styles.main}>
@@ -33,7 +33,7 @@ export default class Menu extends Component {
 					<MyText style={styles.menutable} onPress={help}>Help</MyText>
 					<MyText style={styles.menutable} onPress={example}>Example</MyText>
 					<MyText style={styles.menutable} onPress={null}>Tips</MyText>
-					<MyText style={[styles.menutable, {borderBottomWidth: 0}]} onPress={null}>About</MyText>
+					<MyText style={[styles.menutable, {borderBottomWidth: 0}]} onPress={about}>About</MyText>
 				</ScrollView>
 				<Image style={{alignSelf: 'flex-end', height: 20, width: 116}} source={require('../images/menulogobottom.png')} resizeMode={'contain'} />
 			</View>

src/components/mylink.js

@@ -0,0 +1,40 @@
+import React, {Component} from 'react';
+import {Linking, Text} from 'react-native';
+
+const styles = {
+	mylink: {
+		color: 'cornflowerblue',
+		textDecorationLine: 'underline',
+	},
+};
+
+export default class MyLink extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	handleClick = () => {
+		Linking.canOpenURL(this.props.url).then(supported => {
+			if (supported) {
+				Linking.openURL(this.props.url);
+			} else {
+				console.log('Don\'t know how to open URI: ' + this.props.url);
+			}
+		});
+	};
+
+	render() {
+		return (
+			<Text
+				{...this.props}
+				style={[styles.mylink, this.props.style]}
+				onPress={this.handleClick}
+			>
+				{this.props.children}
+			</Text>
+		);
+	}
+}
+
+
+

src/containers/aboutApp.js

@@ -0,0 +1,16 @@
+'use strict';
+
+import React, {Component} from 'react';
+import About from '../components/about';
+
+export default class AboutApp extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<About />
+		);
+	}
+}

src/containers/nav.js

@@ -12,6 +12,7 @@ import ChartApp from '../containers/chartApp';
 import CalcApp from '../containers/calcApp';
 import HelpApp from '../containers/helpApp';
 import ExampleApp from '../containers/exampleApp';
+import AboutApp from '../containers/aboutApp';
 
 class Nav extends Component {
 	constructor(props) {
@@ -66,6 +67,8 @@ class Nav extends Component {
 									return <HelpApp />;
 								case 'example':
 									return <ExampleApp />;
+								case 'about':
+									return <AboutApp />;
 								default:
 									return <CalcApp />;
 							}

src/reducers/menu.js

@@ -48,6 +48,13 @@ export default function menu(state = initialState, action = {}) {
 				page: 'example',
 				subtitle: 'Example Usage',
 			};
+		case types.ABOUT:
+			return {
+				...state,
+				isOpen: false,
+				page: 'about',
+				subtitle: 'About',
+			};
 		default:
 			return state;
 	}