Refactor of Filter -> SideMenu, Account -> Settings, and NoteOptions …

…screen

src/app.js

@@ -14,20 +14,21 @@ import ReviewManager from './lib/reviewManager';
 
 import Compose from "./screens/Compose"
 import Notes from "./screens/Notes"
-import Filter from "./screens/Filter"
-import Account from "./screens/Account"
+import SideMenu from "./screens/SideMenu"
+import Settings from "./screens/Settings"
+import NoteOptions from "./screens/NoteOptions"
 import InputModal from "./screens/InputModal"
 
 const AppStack = createStackNavigator({
   Notes: {screen: Notes},
   Compose: {screen: Compose},
-  NoteOptions: {screen : Filter},
+  NoteOptions: {screen : NoteOptions},
 }, {
   initialRouteName: 'Notes'
 })
 
 const SettingsStack = createStackNavigator({
-  Screen1: Account
+  Screen1: Settings
 })
 
 const InputModalStack = createStackNavigator({
@@ -46,7 +47,7 @@ const ModalStack = createStackNavigator({
 const DrawerStack = createDrawerNavigator({
   Main: ModalStack
 }, {
-  contentComponent: Filter,
+  contentComponent: SideMenu,
 });
 
 const AppContainer = createAppContainer(DrawerStack);

src/containers/TagList.js

@@ -0,0 +1,101 @@
+import React, { Component } from 'react';
+import { StyleSheet, View, FlatList, RefreshControl, ScrollView, Text } from 'react-native';
+import GlobalStyles from "../Styles"
+import TableSection from "../components/TableSection";
+import SectionHeader from "../components/SectionHeader";
+import SectionedAccessoryTableCell from "../components/SectionedAccessoryTableCell";
+import ItemActionManager from '../lib/itemActionManager'
+import ActionSheet from 'react-native-actionsheet'
+import ApplicationState from "../ApplicationState"
+
+export default class TagList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  onPress = (tag) => {
+    this.props.onTagSelect(tag);
+  }
+
+  onLongPress = (tag) => {
+    this.props.onTagLongPress(tag);
+  }
+
+  static ActionSheetCancelIndex = 0;
+  static ActionSheetDestructiveIndex = 1;
+
+  actionSheetActions() {
+    return [
+      ['Cancel', ""],
+      ['Delete', ItemActionManager.DeleteEvent]
+    ];
+  }
+
+  showActionSheet = (item) => {
+    // Dont show actionsheet for "All notes" tag
+    if(item.key !== "all") {
+      this.actionSheetItem = item;
+      this.setState((prevState) => {
+        return _.merge(prevState, {actionSheetTitle: item.title})
+      })
+      this.actionSheet.show();
+    }
+  }
+
+  handleActionSheetPress = (index) => {
+    if(index == 0) {
+      return;
+    }
+
+    this.props.onManageTagEvent(this.actionSheetActions()[index][1], this.actionSheetItem, () => {
+      this.forceUpdate();
+    });
+    this.actionSheetItem = null;
+  }
+
+  // must pass title, text, and tags as props so that it re-renders when either of those change
+  _renderItem = ({item}) => {
+    return (
+      <View>
+        <SectionedAccessoryTableCell
+          onPress={() => {this.onPress(item)}}
+          onLongPress={() => this.showActionSheet(item)}
+          text={item.deleted ? "Deleting..." : item.title}
+          color={item.deleted ? GlobalStyles.constants().mainTintColor : undefined}
+          key={item.uuid}
+          first={this.props.tags.indexOf(item) == 0}
+          last={this.props.tags.indexOf(item) == this.props.tags.length - 1}
+          selected={() => {return this.props.selected.includes(item.uuid)}}
+        />
+
+        <ActionSheet
+          title={this.state.actionSheetTitle}
+          ref={o => this.actionSheet = o}
+          options={this.actionSheetActions().map((action) => {return action[0]})}
+          cancelButtonIndex={TagList.ActionSheetCancelIndex}
+          destructiveButtonIndex={TagList.ActionSheetDestructiveIndex}
+          onPress={this.handleActionSheetPress}
+          {...GlobalStyles.actionSheetStyles()}
+        />
+      </View>
+    )
+  }
+
+  render() {
+    return (
+      <TableSection style={GlobalStyles.styles().view}>
+        <SectionHeader title={this.props.title} buttonText={this.props.hasClearButton && "Clear"} buttonAction={() => {this.props.clearSelection(true)}}/>
+
+        <FlatList style={{height: "100%"}}
+          initialNumToRender={10}
+          windowSize={10}
+          maxToRenderPerBatch={10}
+          data={this.props.tags}
+          renderItem={this._renderItem}
+        />
+
+      </TableSection>
+    );
+  }
+}

src/screens/Abstract.js

@@ -86,28 +86,65 @@ export default class Abstract extends Component {
   }
 
   componentWillUnmount() {
-    for(var listener of this.listeners) {
-      listener.remove();
+    this.willUnmount = true;
+    this.mounted = false;
+    ApplicationState.get().removeStateObserver(this._stateObserver);
+  }
+
+  componentDidMount() {
+    this.mounted = true;
+    this.configureNavBar(true);
+    console.log("componentDidMount");
+
+    if(ApplicationState.get().isUnlocked() && !this.loadedInitialState) {
+      console.log("Loading initial state");
+      this.loadInitialState();
+    }
+
+    if(this._renderOnMount) {
+      this._renderOnMount = false;
+      this.forceUpdate();
+
+      this._renderOnMountCallback && this._renderOnMountCallback();
+      this._renderOnMountCallback = null;
     }
   }
 
-  componentWillFocus(){
+  loadInitialState() {
+    this.loadedInitialState = true;
+    this.configureNavBar(true);
+  }
 
+  componentWillUnmount() {
+    for(var listener of this.listeners) {
+      listener.remove();
+    }
   }
 
-  componentDidFocus(){
+  componentWillFocus() {
+    this.willUnmount = false;
+    this.mounted = false;
+    if(ApplicationState.get().isUnlocked() && this.state.lockContent) {
+      this.unlockContent();
+    }
+  }
 
+  componentDidFocus() {
+    this.visible = true;
+    this.willBeVisible = true; // Just in case willAppear isn't called for whatever reason
+    this.configureNavBar(false);
   }
 
   componentWillBlur(){
 
   }
 
   componentDidBlur(){
-
+    this.willBeVisible = false;
+    this.visible = false;
   }
 
-  getProp(prop) {
+  getProp = (prop) => {
     // this.props.navigation could be undefined if we're in the drawer
     return this.props.navigation.getParam && this.props.navigation.getParam(prop);
   }
@@ -119,20 +156,6 @@ export default class Abstract extends Component {
     this.props.navigation.setParams(options);
   }
 
-  // Called by RNN
-  componentDidAppear() {
-    this.visible = true;
-    this.willBeVisible = true; // Just in case willAppear isn't called for whatever reason
-    this.configureNavBar(false);
-  }
-
-  // Called by RNN
-  componentDidDisappear() {
-    console.log("Component did disappear", this);
-    this.willBeVisible = false;
-    this.visible = false;
-  }
-
   lockContent() {
     this.mergeState({lockContent: true});
     this.configureNavBar();
@@ -145,42 +168,6 @@ export default class Abstract extends Component {
     this.mergeState({lockContent: false});
   }
 
-  componentWillUnmount() {
-    this.willUnmount = true;
-    this.mounted = false;
-    ApplicationState.get().removeStateObserver(this._stateObserver);
-  }
-
-  componentWillMount() {
-    this.willUnmount = false;
-    this.mounted = false;
-    if(ApplicationState.get().isUnlocked() && this.state.lockContent) {
-      this.unlockContent();
-    }
-  }
-
-  componentDidMount() {
-    this.mounted = true;
-    this.configureNavBar(true);
-
-    if(ApplicationState.get().isUnlocked() && !this.loadedInitialState) {
-      this.loadInitialState();
-    }
-
-    if(this._renderOnMount) {
-      this._renderOnMount = false;
-      this.forceUpdate();
-
-      this._renderOnMountCallback && this._renderOnMountCallback();
-      this._renderOnMountCallback = null;
-    }
-  }
-
-  loadInitialState() {
-    this.loadedInitialState = true;
-    this.configureNavBar(true);
-  }
-
   constructState(state) {
     this.state = _.merge({lockContent: ApplicationState.get().isLocked()}, state);
   }
@@ -209,7 +196,14 @@ export default class Abstract extends Component {
 
   }
 
-  dismissModal() {
-    Navigation.dismissModal();
+  popToRoot() {
+    this.props.navigation.popToTop();
+  }
+
+  dismiss() {
+    /*
+      the `null` parameter is actually very important: https://reactnavigation.org/docs/en/navigation-prop.html#goback-close-the-active-screen-and-move-back
+    */
+    this.props.navigation.goBack(null);
   }
 }

src/screens/Authenticate.js

@@ -73,7 +73,7 @@ export default class Authenticate extends Abstract {
 
   dismiss() {
     if(!this.props.pseudoModal) {
-      this.dismissModal();
+      this.dismiss();
     }
   }