Skip to content

Commit

Permalink
Taxonomy View
Browse files Browse the repository at this point in the history
  • Loading branch information
bkoether committed May 27, 2020
1 parent 2da46db commit a336124
Show file tree
Hide file tree
Showing 6 changed files with 160 additions and 38 deletions.
7 changes: 4 additions & 3 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,12 @@
"linebreak-style": ["error", "unix"],
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"react-native/no-inline-styles": 2,
"react-native/no-color-literals": 2,
"react-native/no-raw-text": 2,
"react-native/no-single-element-style-arrays": 2,
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
"react-hooks/exhaustive-deps": "warn",
"react-native/no-inline-styles": 0,
"react-native/no-color-literals": 0,
"react/prop-types": 0
}
}
5 changes: 5 additions & 0 deletions components/Displays/nodeTeaser.js
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ export default class NodeTeaser extends React.Component {

return <View style={styles.nodeWrapper}>
<View style={styles.nodeInnerWrapper}>
{this.props.showType && <Text style={styles.contentType}>{this.props.editableContentTypes[node.type].label}</Text>}
<TouchableHighlight style={styles.touchable} onPress={() => this.viewNode()}>
<Text style={styles.nodeTitle}>{node.title}</Text>
</TouchableHighlight>
Expand Down Expand Up @@ -211,6 +212,10 @@ const styles = StyleSheet.create({
width: '100%',
marginBottom: 15,
},
contentType: {
textTransform: 'uppercase',
fontSize: 12
},
touchable: {

}
Expand Down
9 changes: 8 additions & 1 deletion navigation/MainTabNavigator.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import OfflineScreen from '../screens/OfflineScreen';
import WebviewScreen from "../screens/WebviewScreen";
import NodeScreen from "../screens/NodeScreen";
import NodeListing from "../screens/NodeListingScreen";
import CategoryScreen from "../screens/CategoryScreen";
import Colors from "../constants/Colors";

const defaultScreenOptions = {
Expand All @@ -29,8 +30,14 @@ const defaultScreenOptions = {
const HomeStack = createStackNavigator(
{
Home: {screen: HomeScreen},
Node: {screen: NodeScreen},
NodeListing: {screen: NodeListing},
Node: {screen: NodeScreen},
Category: {
screen: CategoryScreen,
navigationOptions: ({navigation}) => ({
title: navigation.state.params.name
})
},
EditContentForm: {screen: CreateContentFormScreen}
},
{
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"expo-task-manager": "~8.1.0",
"expo-video-thumbnails": "~4.1.0",
"lodash": "^4.17.15",
"prop-types": "^15.7.2",
"react": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-appearance": "~0.3.3",
Expand Down
86 changes: 86 additions & 0 deletions screens/CategoryScreen.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import React, {useEffect, useMemo, useState} from 'react'
import PropTypes from 'prop-types'
import {ScrollView, Text, View, StyleSheet} from "react-native";
import _ from 'lodash';
import NodeTeaser from "../components/Displays/nodeTeaser";

export default function CategoryScreen({navigation, screenProps}) {
const [label, setLabel] = useState('');
const [title, setTitle] = useState('');
const [filter, setFilter] = useState({tid: null, field: null});

useEffect(() => {
const type = navigation.getParam('type');
const field = navigation.getParam('field');
const tid = navigation.getParam('tid');

const label = _.get(screenProps, ['displayModes', type, field, 'label'], 'Term');
const title = _.get(screenProps, ['terms', tid, 'name'], '');
navigation.setParams({name: `${label}: ${title}`})

setLabel(label);
setTitle(title);
setFilter({tid, field});
}, []); // eslint-disable-line react-hooks/exhaustive-deps

const list = useMemo(() => {
if (filter.tid === null) {
return [];
}
return _.filter(screenProps.nodes, (node) => {
const field = _.get(node, filter.field);
if (field === undefined || field.length === 0) {
return false;
}
const lang = _.has(field, 'en') ? 'en' : 'und';

const result = _.find(field[lang], {'tid': filter.tid})

return result !== undefined
});
}, [screenProps.refreshing, filter]); // eslint-disable-line react-hooks/exhaustive-deps


if (list.length === 0) {
return (
<View style={styles.container}>
<Text>No other content synced to the device for</Text>
<Text>{label}: {title}</Text>
</View>
)
}

return (
<ScrollView style={styles.container}>
{list.map((item) =>
<NodeTeaser
showType={true}
key={item.nid}
node={item}
token={screenProps.token}
cookie={screenProps.cookie}
url={screenProps.siteUrl}
db={screenProps.db}
terms={screenProps.terms}
allNodes={screenProps.nodes}
navigation={navigation}
editable={screenProps.editable}
editableContentTypes={screenProps.contentTypes}
/>)}
</ScrollView>
)
}

CategoryScreen.propTypes = {
navigation: PropTypes.object,
screenProps: PropTypes.object
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingLeft: 15,
paddingRight: 15,
paddingTop: 15}
})
90 changes: 56 additions & 34 deletions screens/NodeScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
Text,
View,
ScrollView,
Dimensions,
Dimensions, TouchableHighlight, TouchableOpacity,
} from 'react-native';
import {Feather} from '@expo/vector-icons';
import * as SQLite from 'expo-sqlite';
Expand All @@ -21,6 +21,7 @@ import {FieldCollection} from "../components/FieldCollection";
import _ from 'lodash';
import {NavigationActions} from "react-navigation";
import UnlockOrientation from "../components/UnlockOrientation";
import Colors from "../constants/Colors";

class NodeScreen extends React.Component {
static navigationOptions = ({navigation}) => {
Expand Down Expand Up @@ -118,6 +119,21 @@ class NodeScreen extends React.Component {
});
}

showCategory = (field, tid) => {
console.log('IN HERE')
const navigateAction = NavigationActions.navigate({
routeName: 'Category',
params: {
tid: tid,
field: field,
type: this.state.thisNode.type,
exclude: [this.state.thisNode.nid],
},
key: `term-${tid}`
});
this.props.navigation.dispatch(navigateAction);
}

render() {
const emptyView = (
<View style={{flex: 1}}>
Expand Down Expand Up @@ -215,7 +231,7 @@ class NodeScreen extends React.Component {
fieldObject.view_mode_properties.type === 'textformatter_list') {
const isObject = Object.prototype.toString.call(node[fieldName]) === '[object Object]';
if (isObject) {
let fieldData = '';
let fieldData = [];
let errorMessage = '';
let oneExists = false;
if (!this.props.screenProps.terms) {
Expand All @@ -232,11 +248,15 @@ class NodeScreen extends React.Component {
item to Mukurtu Mobile.</Text>
} else {
oneExists = true;
if (i > 0) {
fieldData += ', ';
}
// if (i > 0) {
// fieldData.push() += ', ';
// }
if (typeof this.props.screenProps.terms[tid] !== 'undefined') {
fieldData += this.props.screenProps.terms[tid].name;
// fieldData += this.props.screenProps.terms[tid].name;
fieldData.push(
<TouchableOpacity key={tid} onPress={() => this.showCategory(fieldName, tid)}>
<Text style={styles.termLink}>{this.props.screenProps.terms[tid].name}</Text>
</TouchableOpacity>);
} else {
// This is a catch in case the term isn't synced.
// let term = <Term
Expand All @@ -258,7 +278,7 @@ class NodeScreen extends React.Component {
}
}

renderedNode.push(<Text key={`${fieldName}_term_ref_${index}`} style={styles.text}>{fieldData}</Text>)
renderedNode.push(<View key={`${fieldName}_term_ref_${index}`} style={styles.text}>{fieldData}</View>)
}
}

Expand Down Expand Up @@ -579,32 +599,34 @@ class NodeScreen extends React.Component {
}
}

const
styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#DCDCDC',
padding: 10,
},
label: {
marginTop: 10,
marginBottom: 5,
color: '#000',
fontSize: 24
},
text: {
marginBottom: 10,
color: '#000',
fontSize: 16
},
map: {
width: Dimensions.get('window').width - 20,
height: 300,
marginBottom: 10
},
syncError: {
fontSize: 12
},
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#dcdcdc',
padding: 10,
},
label: {
marginTop: 10,
marginBottom: 5,
color: '#000',
fontSize: 24
},
text: {
marginBottom: 10,
color: '#000',
fontSize: 16
},
map: {
width: Dimensions.get('window').width - 20,
height: 300,
marginBottom: 10
},
syncError: {
fontSize: 12
},
termLink: {
color: Colors.primary
}
});

export default NodeScreen;

0 comments on commit a336124

Please sign in to comment.