220 lines
8.7 KiB
JavaScript
220 lines
8.7 KiB
JavaScript
|
|
import * as React from 'react';
|
|
import {useState, useEffect} from 'react';
|
|
import { connect } from "react-redux";
|
|
import { SafeAreaView, Button, View, Text, Image, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import {useNetInfo} from "@react-native-community/netinfo";
|
|
import NetInfo from "../../components/netstatus";
|
|
// import NetInfo from "@react-native-community/netinfo";
|
|
import CustomHeader from '../../components/header.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Elements from '../../components/elements.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import {Icon} from 'react-native-elements';
|
|
import DB from '../../components/storage/';
|
|
import REQUEST from '../../components/api/';
|
|
import CustomSafeArea from '../../components/safeArea.component';
|
|
|
|
const Content = require("./aboutus.json");
|
|
|
|
class About extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
drop1: false,
|
|
drop2: false,
|
|
data: {},
|
|
connected: false
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.initAbount()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
initAbount = () => {
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected) {
|
|
this.init()
|
|
} else {
|
|
Elements.nointernet2(this.props)
|
|
}
|
|
})
|
|
}
|
|
|
|
init = async () => {
|
|
this.setState({ connected: true })
|
|
await REQUEST("contact_us", "get", {}, {}, {},
|
|
async (res) => {
|
|
console.log(res)
|
|
if(res.status == 1 && res.data) {
|
|
this.setState({ data: res.data })
|
|
} else {
|
|
console.log(res.message, res.data)
|
|
}
|
|
}, (error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
fetch = (detail) => {
|
|
if(!this.state.connected) return null
|
|
let r = ""
|
|
let d = detail.split(`"`)
|
|
for(var x=0;x<d.length;x++){
|
|
if(!d[x].includes(`:`) && !d[x].includes(`;`)) r += "\u2022 " + d[x] + "\n\n"
|
|
}
|
|
return r
|
|
}
|
|
|
|
renderDetails = () => {
|
|
if(!this.state.connected) return null
|
|
return (
|
|
<View>
|
|
<View style={{flex: 0, marginTop: 5}}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'center'}}>
|
|
<TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => this.setState({ drop1: !this.state.drop1 })}>
|
|
<Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>WHAT WE DO</Text>
|
|
<View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
|
|
<Icon name={ this.state.drop1 ? "expand-more" : "chevron-right"} color="gray" />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{this.state.drop1 ? <Text style={{fontSize: 16, marginTop: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{this.fetch(this.state.data.what_we_do_content)}</Text> : null}
|
|
</View>
|
|
|
|
<View style={{flex: 0, marginTop: 15}}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'center'}}>
|
|
<TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => this.setState({ drop2: !this.state.drop2 })}>
|
|
<Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>WHY UNIOIL</Text>
|
|
<View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
|
|
<Icon name={ this.state.drop2 ? "expand-more" : "chevron-right"} color="gray" />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{this.state.drop2 ? <Text style={{fontSize: 16, marginTop: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{this.fetch(this.state.data.why_unioil_content)}</Text> : null}
|
|
</View>
|
|
</View>)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader title="About Us" menu={false} navigation={this.props.navigation} />
|
|
{this.state.connected ? <View style={{flex: 1}}>
|
|
<Image source={Assets.bg.about} style={{width: '100%', height: '38%', resizeMode: 'cover'}} />
|
|
<ScrollView style={{flex: 1, padding: 20}}>
|
|
<Text style={{marginTop: 10, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontWeight: 'bold'}}>WHO WE ARE</Text>
|
|
<Text style={{marginTop: 15, fontSize: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{this.state.data.who_we_are_content}</Text>
|
|
{this.renderDetails()}
|
|
<Text></Text>
|
|
</ScrollView>
|
|
</View> : null }
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(About)
|
|
|
|
// export default function About(navigation) {
|
|
|
|
// const [drop1, setdrop1] = useState(false)
|
|
// const [drop2, setdrop2] = useState(false)
|
|
// const [data, setdata] = useState({})
|
|
// const netInfo = useNetInfo()
|
|
|
|
// const init = async () => {
|
|
// await REQUEST("contact_us", "get", {}, {}, {},
|
|
// async (res) => {
|
|
// if(res.status == 1 && res.data){
|
|
// await setdata(await res.data)
|
|
// }else{
|
|
// console.log(res.message, res.data)
|
|
// }
|
|
// }, function(error){
|
|
// console.log(error)
|
|
// })
|
|
// }
|
|
|
|
// useEffect(() => {
|
|
// NetInfo.fetch().then(state => {
|
|
// console.log("Connection type", state.type);
|
|
// console.log("Is connected?", state.isConnected);
|
|
// if(state.isConnected){
|
|
// init()
|
|
// }else{
|
|
// Elements.nointernet2()
|
|
// }
|
|
// });
|
|
// }, [])
|
|
|
|
// const fetch = (detail) => {
|
|
// if(!netInfo.isConnected) return null
|
|
// let r = ""
|
|
// let d = detail.split(`"`)
|
|
// for(var x=0;x<d.length;x++){
|
|
// if(!d[x].includes(`:`) && !d[x].includes(`;`)) r += "\u2022 " + d[x] + "\n\n"
|
|
// }
|
|
// return r
|
|
// }
|
|
|
|
// // console.log(fetch(data.what_we_do_content))
|
|
|
|
// const renderDetails = () => {
|
|
// if(!netInfo.isConnected) return null
|
|
// return (
|
|
// <View>
|
|
// <View style={{flex: 0, marginTop: 5}}>
|
|
// <View style={{ flexDirection: 'row', justifyContent: 'center'}}>
|
|
// <TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => setdrop1(!drop1)}>
|
|
// <Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: Theme.colors.textPrimary}}>WHAT WE DO</Text>
|
|
// <View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
|
|
// <Icon name={ drop1 ? "expand-more" : "chevron-right"} color="gray" />
|
|
// </View>
|
|
// </TouchableOpacity>
|
|
// </View>
|
|
// {drop1 ? <Text style={{fontSize: 16, marginTop: 15, color: Theme.colors.textPrimary}}>{fetch(data.what_we_do_content)}</Text> : null}
|
|
// </View>
|
|
|
|
// <View style={{flex: 0, marginTop: 15}}>
|
|
// <View style={{ flexDirection: 'row', justifyContent: 'center'}}>
|
|
// <TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => setdrop2(!drop2)}>
|
|
// <Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: Theme.colors.textPrimary}}>WHY UNIOIL</Text>
|
|
// <View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
|
|
// <Icon name={ drop2 ? "expand-more" : "chevron-right"} color="gray" />
|
|
// </View>
|
|
// </TouchableOpacity>
|
|
// </View>
|
|
// {drop2 ? <Text style={{fontSize: 16, marginTop: 15, color: Theme.colors.textPrimary}}>{fetch(data.why_unioil_content)}</Text> : null}
|
|
// </View>
|
|
// </View>)
|
|
// }
|
|
|
|
// return (
|
|
// <SafeAreaView style={{flex: 1}}>
|
|
// <CustomHeader title="About Us" menu={false} navigation={navigation} />
|
|
// {netInfo.isConnected ? <View style={{flex: 1}}>
|
|
// <Image source={Assets.bg.about} style={{width: '100%', height: '38%', resizeMode: 'cover'}} />
|
|
// <ScrollView style={{flex: 1, padding: 20}}>
|
|
// <Text style={{marginTop: 10, fontSize: 16, color: Theme.colors.textPrimary, fontWeight: 'bold'}}>WHO WE ARE</Text>
|
|
// <Text style={{marginTop: 15, fontSize: 15, color: Theme.colors.textPrimary}}>{data.who_we_are_content}</Text>
|
|
// {renderDetails()}
|
|
// <Text></Text>
|
|
// </ScrollView>
|
|
// </View> : null }
|
|
// </SafeAreaView>
|
|
// );
|
|
// }
|