Merge branch 'master' of https://github.com/SardonyxApp/sardonyx

src/actions.js

@@ -15,20 +15,39 @@ export const setUserLabels = (subjects, categories) => ({
   categories
 });
 
+export const addUserLabels = (labelType, id) => ({
+  type: 'ADD_USER_LABELS',
+  labelType,
+  id
+});
+
+export const deleteUserLabels = (labelType, id) => ({
+  type: 'DELETE_USER_LABELS',
+  labelType,
+  id
+});
+
 export const setLabels = (subjects, categories) => ({
   type: 'SET_LABELS',
   subjects,
   categories
 });
 
-export const addUserLabels = (labelType, id) => ({
-  type: 'ADD_USER_LABELS',
+export const addLabel = (labelType, obj) => ({
+  type: 'ADD_LABEL',
   labelType,
-  id
+  obj
 });
 
-export const deleteUserLabels = (labelType, id) => ({
-  type: 'DELETE_USER_LABELS',
+export const updateLabel = (labelType, id, obj) => ({
+  type: 'UPDATE_LABEL',
+  labelType,
+  id,
+  obj
+});
+
+export const deleteLabel = (labelType, id) => ({
+  type: 'DELETE_LABEL',
   labelType,
   id
 });

src/components/TaskLabels.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import { ScrollView, View, Text, StyleSheet } from 'react-native';
 import { Icon } from 'react-native-elements';
+
+import { connect } from 'react-redux';
+
 import { fonts, styles } from '../styles';
 import TasksLabel from './TasksLabel';
 
 // TaskLabels (this) -> display labels for each task
 // TasksLabel -> updatable/removable label
 // TasksSelectableLabel -> checkable label
-export default class TaskLabels extends React.Component {
+class TaskLabels extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -63,7 +66,7 @@ export default class TaskLabels extends React.Component {
             color: this.state.subject_color
           }}
           key="subject"
-          onUpdate={() => this.props.navigation.navigate('LabelsSelector', { ...this.props, ...this.state, onChange: this._handleChange })}
+          onUpdate={() => this.props.navigation.navigate('LabelsSelector', { ...this.state, onChange: this._handleChange })}
           updatable={true}
         />
       );
@@ -77,7 +80,7 @@ export default class TaskLabels extends React.Component {
             color: this.state.category_color
           }}
           key="category"
-          onUpdate={() => this.props.navigation.navigate('LabelsSelector', { ...this.props, ...this.state, onChange: this._handleChange })}
+          onUpdate={() => this.props.navigation.navigate('LabelsSelector', { ...this.state, onChange: this._handleChange })}
           updatable={true}
         />
       );
@@ -108,6 +111,14 @@ export default class TaskLabels extends React.Component {
   }
 }
 
+const mapStateToProps = state => {
+  const subjects = state.labels.subjects;
+  const categories = state.labels.categories;
+  return { subjects, categories };
+};
+
+export default connect(mapStateToProps)(TaskLabels);
+
 const labelsStyles = StyleSheet.create({
   labelsContainer: {
     flexDirection: 'row',

src/components/TasksLabelsFilterSidebar.js

@@ -1,12 +1,14 @@
 import React from 'react';
-import { ScrollView, Text, FlatList } from 'react-native';
+import { ScrollView, FlatList } from 'react-native';
 import { SafeAreaView } from 'react-navigation';
 
+import { connect } from 'react-redux';
+
 import Label from './TasksSelectableLabel';
-import { colors } from '../styles';
 import OverviewHeading from './OverviewHeading';
+import { colors } from '../styles';
 
-export default class TasksLabelsFilterSidebar extends React.Component {
+class TasksLabelsFilterSidebar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -25,12 +27,9 @@ export default class TasksLabelsFilterSidebar extends React.Component {
       this.props.navigation.state.routes[0].params
     ) {
       const newParams = this.props.navigation.state.routes[0].params;
-      if (typeof newParams !== 'object') return;
       this.setState({
-        subjectsFilter:
-          'subjectsFilter' in newParams ? newParams.subjectsFilter : [],
-        categoriesFilter:
-          'categoriesFilter' in newParams ? newParams.categoriesFilter : []
+        subjectsFilter: newParams.subjectsFilter,
+        categoriesFilter: newParams.categoriesFilter
       });
     }
   }
@@ -73,14 +72,9 @@ export default class TasksLabelsFilterSidebar extends React.Component {
   }
 
   render() {
-    const params = this.props.navigation.state.routes[0].params;
-    let subjects = typeof params === 'object' && 'subjects' in params 
-      ? params.subjects.sort((a, b) => a.name.localeCompare(b.name)) 
-      : [];
-    let categories = typeof params === 'object' && 'categories' in params
-      ? params.categories.sort((a, b) => a.name.localeCompare(b.name))
-      : [];
-
+    const subjects = this.props.subjects.sort((a, b) => a.name.localeCompare(b.name));
+    const categories = this.props.categories.sort((a, b) => a.name.localeCompare(b.name));
+
     return (
       <ScrollView>
         <SafeAreaView
@@ -110,3 +104,11 @@ export default class TasksLabelsFilterSidebar extends React.Component {
     );
   }
 }
+
+const mapStateToProps = state => {
+  const subjects = state.labels.subjects;
+  const categories = state.labels.categories;
+  return { subjects, categories };
+};
+
+export default connect(mapStateToProps)(TasksLabelsFilterSidebar);

src/reducers.js

@@ -81,6 +81,21 @@ const labelsReducer = (state = LABELS_INITIAL_STATE, action) => {
         categories: action.categories,
         loaded: true
       };
+    case 'ADD_LABEL': 
+      return {
+        ...state,
+        [action.labelType]: state[action.labelType].concat(action.obj)
+      };
+    case 'UPDATE_LABEL': 
+      return {
+        ...state,
+        [action.labelType]: state[action.labelType].map(l => l.id === action.id ? action.obj : l)
+      };
+    case 'DELETE_LABEL': 
+      return {
+        ...state,
+        [action.labelType]: state[action.labelType].filter(l => l.id !== action.id)
+      };
     default: 
       return state;
   }

src/screens/TasksInfoScreen.js

@@ -33,8 +33,6 @@ export default class TasksInfoScreen extends React.Component {
           <TaskLabels 
             task={task}
             navigation={this.props.navigation}
-            subjects={this.props.navigation.getParam('subjects')}
-            categories={this.props.navigation.getParam('categories')}
             onUpdateTask={this.props.navigation.state.params.onUpdateTask}
           />
           <TaskDescription

src/screens/TasksLabelsSelectorScreen.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import { ScrollView} from 'react-native';
-import Label from '../components/TasksSelectableLabel';
+import { ScrollView } from 'react-native';
+
+import { connect } from 'react-redux';
 
 import { colors } from '../styles';
+import Label from '../components/TasksSelectableLabel';
 
-// This screen is for selecting labels for a task. To filter the tasklist with labels, use TasksLabelsFilterScreen
-export default class TasksLabelsSelectorScreen extends React.Component {
+// This screen is for selecting labels for a task. To filter the tasklist with labels
+class TasksLabelsSelectorScreen extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -33,26 +35,27 @@ export default class TasksLabelsSelectorScreen extends React.Component {
   }
 
   render() {
-    let subjects = this.props.navigation.getParam('subjects').sort((a, b) => a.name.localeCompare(b.name));
-    let categories = this.props.navigation.getParam('categories').sort((a, b) => a.name.localeCompare(b.name));
+    subjects = this.props.subjects
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map(label => (
+        <Label 
+          key={label.name}
+          label={label}
+          list={[this.state.subject_id]}
+          onFilter={() => this._handleChange('subject_id', label.id)}
+        />
+      ));
 
-    subjects = subjects.map(label => (
-      <Label 
-        key={label.name}
-        label={label}
-        list={[this.state.subject_id]}
-        onFilter={() => this._handleChange('subject_id', label.id)}
-      />
-    ));
-
-    categories = categories.map(label => (
-      <Label 
-        key={label.name}
-        label={label}
-        list={[this.state.category_id]}
-        onFilter={() => this._handleChange('category_id', label.id)}
-      />
-    ));
+    categories = this.props.categories
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map(label => (
+        <Label 
+          key={label.name}
+          label={label}
+          list={[this.state.category_id]}
+          onFilter={() => this._handleChange('category_id', label.id)}
+        />
+      ));
 
     return (
       <ScrollView style={{ flex: 1, backgroundColor: colors.lightBackground }}>
@@ -61,4 +64,12 @@ export default class TasksLabelsSelectorScreen extends React.Component {
       </ScrollView>
     );
   }
-}
+}
+
+const mapStateToProps = state => {
+  const subjects = state.labels.subjects;
+  const categories = state.labels.categories;
+  return { subjects, categories };
+};
+
+export default connect(mapStateToProps)(TasksLabelsSelectorScreen);

src/screens/TasksManageLabelsScreen.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import { ScrollView, Text, Alert } from 'react-native';
 
-import { fonts, colors } from '../styles';
+import { connect } from 'react-redux';
 
+import { fonts, colors } from '../styles';
 import Label from '../components/TasksLabel';
 
-export default class TasksManageLabelsScreen extends React.Component {
+class TasksManageLabelsScreen extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      labels: []
-    }
-
     this._handleUpdate = this._handleUpdate.bind(this);
     this._handleRemove = this._handleRemove.bind(this);
   }
@@ -23,18 +20,7 @@ export default class TasksManageLabelsScreen extends React.Component {
     };
   };
 
-  componentDidMount() {
-    this.setState({
-      labels: this.props.navigation.getParam('labels')
-    })
-  }
-
   _handleUpdate(type, obj) {
-    this.setState(prevState => {
-      prevState.labels = prevState.labels.map(l => l.id === obj.id ? {...l, ...obj} : l);
-      return prevState;
-    });
-
     this.props.navigation.state.params.onUpdate(type, obj);
   }
 
@@ -49,10 +35,6 @@ export default class TasksManageLabelsScreen extends React.Component {
         {
           text: 'OK',
           onPress: () => {
-            this.setState(prevState => {
-              prevState.labels = prevState.labels.filter(l => l.id !== id);
-              return prevState;
-            });
             this.props.navigation.state.params.onDelete(this.props.navigation.getParam('type'), id);
           }
         }
@@ -61,7 +43,7 @@ export default class TasksManageLabelsScreen extends React.Component {
   }
 
   render() {
-    const labels = this.state.labels
+    const labels = this.props[this.props.navigation.getParam('type')]
       .sort((a, b) => a.name.localeCompare(b.name))
       .map(label => {
         return (
@@ -89,4 +71,13 @@ export default class TasksManageLabelsScreen extends React.Component {
       </ScrollView>
     );
   }
-}
+}
+
+const mapStateToProps = state => {
+  const subjects = state.labels.subjects;
+  const categories = state.labels.categories;
+  // Include both in props because navigation parameters are not accessible outside of the class 
+  return { subjects, categories };
+};
+
+export default connect(mapStateToProps)(TasksManageLabelsScreen);

src/screens/TasksManageScreen.js

@@ -18,20 +18,11 @@ export default class TasksCreateScreen extends React.Component {
     };
   };
 
-  // These methods are necessary to update the navigation params accordingly
   _handleUpdate(type, obj) {
-    this.props.navigation.setParams({
-      [type]: this.props.navigation.getParam(type).map(l => l.id === obj.id ? {...l, ...obj} : l)
-    });
-
     this.props.navigation.state.params.onUpdateLabel(type, obj);
   }
 
   _handleDelete(type, id) {
-    this.props.navigation.setParams({
-      [type]: this.props.navigation.getParam(type).filter(l => l.id !== id)
-    });
-
     this.props.navigation.state.params.onDeleteLabel(type, id);
   }
 
@@ -72,15 +63,15 @@ export default class TasksCreateScreen extends React.Component {
           buttonStyle={{ backgroundColor: colors.blue }}
           containerStyle={styles.padding10}
           titleStyle={fonts.jost300}
-          onPress={() => navigation.navigate('ManageLabels', { onUpdate: this._handleUpdate, onDelete: this._handleDelete, labels: navigation.state.params.subjects, type: 'subjects' })}
+          onPress={() => navigation.navigate('ManageLabels', { onUpdate: this._handleUpdate, onDelete: this._handleDelete, type: 'subjects' })}
         />
         <Button 
           title="Manage category labels"
           type="solid"
           buttonStyle={{ backgroundColor: colors.blue }}
           containerStyle={styles.padding10}
           titleStyle={fonts.jost300}
-          onPress={() => navigation.navigate('ManageLabels', { onUpdate: this._handleUpdate, onDelete: this._handleDelete, labels: navigation.state.params.categories, type: 'categories' })}
+          onPress={() => navigation.navigate('ManageLabels', { onUpdate: this._handleUpdate, onDelete: this._handleDelete, type: 'categories' })}
         />
       </ScrollView>
     );