From 7c822191203a6dffb2b1ea410084fbb4e61ea120 Mon Sep 17 00:00:00 2001
From: Ryan The <ryan.the.2006@gmail.com>
Date: Thu, 12 Mar 2020 21:12:14 +0800
Subject: [PATCH] Update pages

---
 src/components/Page/PageHeader/index.tsx  | 23 +++++++++++++
 src/components/Shadow/Touchable/index.tsx | 30 ++++++++++++++++
 src/components/Shadow/View/index.tsx      | 22 ++++++++++++
 src/components/Text/Body/index.tsx        | 23 +++++++++++++
 src/components/Text/Header/index.tsx      | 24 +++++++++++++
 src/pages/Find/index.tsx                  | 19 +++++-----
 src/pages/Home/index.tsx                  | 42 +++++++++++++----------
 src/pages/Settings/index.tsx              | 42 +++++++++++++++--------
 src/store/reducer.js                      |  7 +++-
 9 files changed, 191 insertions(+), 41 deletions(-)
 create mode 100644 src/components/Page/PageHeader/index.tsx
 create mode 100644 src/components/Shadow/Touchable/index.tsx
 create mode 100644 src/components/Shadow/View/index.tsx
 create mode 100644 src/components/Text/Body/index.tsx
 create mode 100644 src/components/Text/Header/index.tsx

diff --git a/src/components/Page/PageHeader/index.tsx b/src/components/Page/PageHeader/index.tsx
new file mode 100644
index 0000000..c45eda1
--- /dev/null
+++ b/src/components/Page/PageHeader/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Platform, StatusBar } from 'react-native';
+import { Text, Layout } from '@ui-kitten/components';
+
+import {HeaderText} from '../../Text/Header';
+export const PageHeader = (props: {theme: any, title: string}) => {
+    return (
+      <Layout
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 40,
+        marginBottom: 5
+      }}>
+        <StatusBar barStyle={props.theme === 'dark' ? 'light-content' : 'dark-content'}/>
+      <Layout style={{paddingLeft: 20, paddingTop: 30, paddingBottom: 10}}>
+        <HeaderText>
+          {props.title}
+        </HeaderText>
+      </Layout>
+    </Layout>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Shadow/Touchable/index.tsx b/src/components/Shadow/Touchable/index.tsx
new file mode 100644
index 0000000..f6ec95d
--- /dev/null
+++ b/src/components/Shadow/Touchable/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {TouchableOpacity, ViewStyle} from 'react-native';
+import {connect} from 'react-redux';
+
+export const TouchableShadow = (props: {
+  intensity?: number;
+  children?: React.ReactNode;
+  style?: ViewStyle;
+  onPress?(): void;
+  theme: String
+}) => {
+  return (
+    <TouchableOpacity
+      style={{
+        elevation: (props.intensity || 2) * 5,
+        shadowColor: props.theme === 'dark' ? 'black' : 'grey',
+        shadowOffset: {width: 0, height: 0},
+        shadowOpacity: 0.5,
+        shadowRadius: (props.intensity || 1) * 3,
+        ...props.style,
+      }}
+      onPress={() => {
+        if (props.onPress) {
+          props.onPress();
+        }
+      }}>
+      {props.children}
+    </TouchableOpacity>
+  );
+};
diff --git a/src/components/Shadow/View/index.tsx b/src/components/Shadow/View/index.tsx
new file mode 100644
index 0000000..9d40b54
--- /dev/null
+++ b/src/components/Shadow/View/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import {ViewStyle, View} from "react-native";
+
+import {ThemeContext} from "../../../functions/theme";
+
+export function ViewShadow(props: {intensity?: number; children?: React.ReactNode; style?: ViewStyle}) {
+  return (
+    <ThemeContext.Consumer>
+      {theme =>
+        <View style={{
+          elevation: (props.intensity || 2) * 5,
+          shadowColor: theme.theme === 'light' ? "gray" : 'black',
+          shadowOffset: {width: 0, height: 0},
+          shadowOpacity: 0.5,
+          shadowRadius: (props.intensity || 1) * 3,
+          ...props.style
+        }}>
+          {props.children}
+        </View>}
+    </ThemeContext.Consumer>
+  )
+}
diff --git a/src/components/Text/Body/index.tsx b/src/components/Text/Body/index.tsx
new file mode 100644
index 0000000..89f0fc0
--- /dev/null
+++ b/src/components/Text/Body/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import {Platform} from 'react-native';
+import {Text} from '@ui-kitten/components';
+
+export const BodyText = (props: {children?: string}) => {
+  return (
+    <Text
+      style={{
+        fontSize: 18,
+        ...Platform.select({
+          android: {
+            fontFamily: 'Montserrat 500',
+          },
+          ios: {
+            fontFamily: 'Montserrat',
+            fontWeight: '500',
+          },
+        }),
+      }}>
+      {props.children ?? ''}
+    </Text>
+  );
+};
\ No newline at end of file
diff --git a/src/components/Text/Header/index.tsx b/src/components/Text/Header/index.tsx
new file mode 100644
index 0000000..c918f33
--- /dev/null
+++ b/src/components/Text/Header/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {Platform} from 'react-native';
+import {Text} from '@ui-kitten/components';
+
+export const HeaderText = (props: {children?: string}) => {
+  return (
+    <Text
+      style={{
+        lineHeight: 30,
+        fontSize: 30,
+        ...Platform.select({
+          android: {
+            // fontFamily: 'Montserrat 700',
+          },
+          ios: {
+            // fontFamily: 'Montserrat-Regular',
+            fontWeight: '700',
+          },
+        }),
+      }}>
+      {props.children ?? ''}
+    </Text>
+  );
+};
\ No newline at end of file
diff --git a/src/pages/Find/index.tsx b/src/pages/Find/index.tsx
index a936c92..05bf023 100644
--- a/src/pages/Find/index.tsx
+++ b/src/pages/Find/index.tsx
@@ -1,22 +1,25 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { Layout, Text } from '@ui-kitten/components';
 import { connect } from 'react-redux';
 
-const FindPageC = () => {
+import { TouchableShadow } from '../../components/Shadow/Touchable';
+import { PageHeader } from '../../components/Page/PageHeader';
+
+const FindPageC = (props: any) => {
   return (
-    <View>
-      <Text style={{width: '100%', textAlign: 'center', paddingTop: 100}}>Find</Text>
-    </View>
+    <Layout style={{height: '100%'}}>
+      <PageHeader theme={props.theme} title="Find" />
+    </Layout>
   )
 }
 
-const mapStateToProps = (state: Object) => {
+const mapStateToProps = (state: any) => {
   return {
-
+    theme: state.theme,
   }
 }
 
-const mapDispatchToProps = (dispatch: Object) => {
+const mapDispatchToProps = (dispatch: any) => {
   return {
 
   }
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 9dc8e64..38b302d 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,25 +1,31 @@
 import React from 'react';
-import { View, Text } from 'react-native';
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';
+import {Layout, Text} from '@ui-kitten/components';
 
-const HomePageC = () => {
-  return (
-    <View>
-      <Text style={{width: '100%', textAlign: 'center', paddingTop: 100}}>Home</Text>
-    </View>
-  )
-}
-
-const mapStateToProps = (state: Object) => {
-  return {
+import {PageHeader} from '../../components/Page/PageHeader';
+import {TouchableShadow} from '../../components/Shadow/Touchable';
 
-  }
-}
+const HomePageC = (props: any) => {
+  return (
+    <Layout style={{height: '100%'}}>
+      <PageHeader theme={props.theme} title="Home" />
+      <TouchableShadow theme={props.theme}>
+        <Layout style={{marginHorizontal: 15}}>
+          <Text>Hello</Text>
+        </Layout>
+      </TouchableShadow>
+    </Layout>
+  );
+};
 
-const mapDispatchToProps = (dispatch: Object) => {
+const mapStateToProps = (state: any) => {
   return {
+    theme: state.theme,
+  };
+};
 
-  }
-}
+const mapDispatchToProps = (dispatch: any) => {
+  return {};
+};
 
-export const HomePage = connect(mapStateToProps, mapDispatchToProps)(HomePageC);
\ No newline at end of file
+export const HomePage = connect(mapStateToProps, mapDispatchToProps)(HomePageC);
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
index 51b68c4..bbe2fd3 100644
--- a/src/pages/Settings/index.tsx
+++ b/src/pages/Settings/index.tsx
@@ -1,32 +1,46 @@
 import React from 'react';
-import { Layout, Text, List, ListItem } from '@ui-kitten/components';
-import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-native';
+import {Layout, Text, List, ListItem} from '@ui-kitten/components';
+import {connect} from 'react-redux';
+import {SafeAreaView} from 'react-native';
 
-const data = ['Theme', 'Password']
-const SettingsPageC = () => {
-  const renderItem = ({ item, index }) => (
-    <ListItem title={`${item} ${index + 1}`}/>
+import {PageHeader} from '../../components/Page/PageHeader';
+
+const SettingsPageC = (props: any) => {
+  const data = [
+    {
+      title: 'Toggle theme',
+      onPress: () => {
+        props.toggleTheme();
+      },
+    },
+  ];
+
+  const renderItem = ({item, index}) => (
+    <ListItem title={`${item.title}`} onPress={item.onPress} />
   );
   return (
     <Layout style={{height: '100%'}}>
+      <PageHeader title="Settings" theme={props.theme} />
       <List data={data} renderItem={renderItem}>
         <Text>Hello</Text>
       </List>
     </Layout>
-  )
-}
+  );
+};
 
 const mapStateToProps = (state: any) => {
-  console.log(state.theme);
   return {
+    theme: state.theme,
   };
 };
 
 const mapDispatchToProps = (dispatch: any) => {
   return {
+    toggleTheme: () => dispatch({type: 'TOGGLE_THEME'}),
+  };
+};
 
-  }
-}
-
-export const SettingsPage = connect(mapStateToProps, mapDispatchToProps)(SettingsPageC);
\ No newline at end of file
+export const SettingsPage = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(SettingsPageC);
diff --git a/src/store/reducer.js b/src/store/reducer.js
index 4431b3e..5c4bda4 100644
--- a/src/store/reducer.js
+++ b/src/store/reducer.js
@@ -1,10 +1,15 @@
 const initialState = {
   orientation: 'portrait', //portrait/landscape
-  theme: 'dark', //dark/light
+  theme: 'light', //dark/light
 }
 
 export const reducer = (state = initialState, action) => {
   switch (action.type) {
+    case 'TOGGLE_THEME':
+      return {
+        ...state,
+        theme: (state.theme === 'dark') ? 'light' : 'dark'
+      }
     default:
       return {
         ...state