More user library polish (#66)

* fixing username/password auth * Clean up tasks for the User Library Screen - Added a spinner when scrolling through library lists - Mark library entries as moved on the user library list - Fixed sign in issue with username/password - Fixed an issue with SelectMenu not updating when options changed - Using on_hold instead of onHold. Though I prefer the latter, it's just not worth the hell of making sure you've always got the camelcased version
hummingbird-me · Sep 21, 2017 · 875322a · 875322a
1 parent 0b488d1
commit 875322a
Show file tree

Hide file tree

Showing 10 changed files with 225 additions and 112 deletions.
diff --git a/src/components/SelectMenu/component.js b/src/components/SelectMenu/component.js
@@ -1,10 +1,10 @@
-import React, { PureComponent } from 'react';
+import * as React from 'react';
 import { TouchableOpacity } from 'react-native';
 import PropTypes from 'prop-types';
 import ActionSheet from 'react-native-actionsheet';
 import * as colors from 'kitsu/constants/colors';
 
-export class SelectMenu extends PureComponent {
+export class SelectMenu extends React.PureComponent {
   static propTypes = {
     cancelButtonIndex: PropTypes.number,
     children: PropTypes.element,
@@ -26,18 +26,6 @@ export class SelectMenu extends PureComponent {
     tintColor: colors.black,
   };
 
-  constructor(props) {
-    super(props);
-
-    this.displayOptions = props.options.map((option) => {
-      if (typeof option === 'string') {
-        return option.charAt(0).toUpperCase() + option.slice(1);
-      }
-
-      return option.text;
-    });
-  }
-
   getCancelButtonIndex() {
     return this.props.cancelButtonIndex > -1
       ? this.props.cancelButtonIndex
@@ -48,6 +36,14 @@ export class SelectMenu extends PureComponent {
     this.ActionSheet = component;
   };
 
+  displayOptions = () => this.props.options.map((option) => {
+    if (typeof option === 'string') {
+      return option.charAt(0).toUpperCase() + option.slice(1);
+    }
+
+    return option.text;
+  });
+
   handleFilterChange = (selectedIndex) => {
     const cancelButtonIndex = this.getCancelButtonIndex();
 
@@ -78,7 +74,7 @@ export class SelectMenu extends PureComponent {
         <ActionSheet
           cancelButtonIndex={this.getCancelButtonIndex()}
           onPress={this.handleFilterChange}
-          options={this.displayOptions}
+          options={this.displayOptions()}
           ref={this.setActionSheet}
           tintColor={this.props.tintColor}
         />

diff --git a/src/screens/Auth/LoginScreen.js b/src/screens/Auth/LoginScreen.js
@@ -21,14 +21,13 @@ class LoginScreen extends Component {
     loading: false,
   };
 
-  onSubmit = (isFb = false) => {
+  onSubmit = () => {
     const { username, password } = this.state;
     const { navigation } = this.props;
-    console.log('isFB', isFb, username, password);
-    if (isFb) {
-      this.props.loginUser(null, navigation);
-    } else if (username.length > 0 && password.length > 0) {
+    if (username.length > 0 && password.length > 0) {
       this.props.loginUser({ username, password }, navigation);
+    } else {
+      this.props.loginUser(null, navigation);
     }
   };
 

diff --git a/src/screens/Profiles/UserLibrary/components/UserLibraryListCard/component.js b/src/screens/Profiles/UserLibrary/components/UserLibraryListCard/component.js
@@ -16,17 +16,25 @@ const USER_LIBRARY_EDIT_SCREEN = 'UserLibraryEdit';
 export const STATUS_SELECT_OPTIONS = [
   { value: 'current', anime: 'Currently Watching', manga: 'Currently Reading' },
   { value: 'planned', anime: 'Want To Watch', manga: 'Want To Read' },
-  { value: 'onHold', anime: 'On Hold', manga: 'On Hold' },
+  { value: 'on_hold', anime: 'On Hold', manga: 'On Hold' },
   { value: 'dropped', anime: 'Dropped', manga: 'Dropped' },
   { value: 'completed', anime: 'Completed', manga: 'Completed' },
   { value: 'remove', anime: 'Remove From Library', manga: 'Remove From Library' },
   { value: 'cancel', anime: 'Nevermind', manga: 'Nevermind' },
 ];
 
+const HEADER_TEXT_MAPPING = {
+  current: { anime: 'Watching', manga: 'Reading' },
+  planned: { anime: 'Want To Watch', manga: 'Want to Read' },
+  completed: { anime: 'Complete', manga: 'Complete' },
+  on_hold: { anime: 'On Hold', manga: 'On Hold' },
+  dropped: { anime: 'Dropped', manga: 'Dropped' },
+};
+
 export class UserLibraryListCard extends React.Component {
   static propTypes = {
     currentUser: PropTypes.object.isRequired,
-    data: PropTypes.object.isRequired,
+    libraryEntry: PropTypes.object.isRequired,
     libraryStatus: PropTypes.string.isRequired,
     libraryType: PropTypes.string.isRequired,
     navigate: PropTypes.func.isRequired,
@@ -37,10 +45,12 @@ export class UserLibraryListCard extends React.Component {
 
   state = {
     isUpdating: false,
-    libraryStatus: this.props.data.status,
-    progress: this.props.data.progress,
-    progressPercentage: Math.floor((this.props.data.progress / this.getMaxProgress()) * 100),
-    ratingTwenty: this.props.data.ratingTwenty,
+    libraryStatus: this.props.libraryEntry.status,
+    progress: this.props.libraryEntry.progress,
+    progressPercentage: Math.floor(
+      (this.props.libraryEntry.progress / this.getMaxProgress()) * 100,
+    ),
+    ratingTwenty: this.props.libraryEntry.ratingTwenty,
     isSliderActive: false,
   }
 
@@ -74,8 +84,8 @@ export class UserLibraryListCard extends React.Component {
   onSwipeRelease = () => this.props.onSwipingItem(false)
 
   getMaxProgress() {
-    const { data, libraryType } = this.props;
-    const mediaData = data[libraryType];
+    const { libraryEntry, libraryType } = this.props;
+    const mediaData = libraryEntry[libraryType];
 
     if (mediaData.type === 'anime') {
       return mediaData.episodeCount;
@@ -111,11 +121,11 @@ export class UserLibraryListCard extends React.Component {
     // send the status from props because that is the list we're looking
     // at not the status from state because that is what the value of the
     // card may have just been changed to
-    const { libraryStatus, libraryType } = this.props;
+    const { libraryEntry, libraryType } = this.props;
     const { libraryStatus: newStatus, progress, ratingTwenty } = this.state;
 
-    await this.props.updateUserLibraryEntry(libraryType, libraryStatus, {
-      id: this.props.data.id,
+    this.props.updateUserLibraryEntry(libraryType, libraryEntry.status, {
+      id: this.props.libraryEntry.id,
       progress,
       ratingTwenty,
       status: newStatus,
@@ -124,15 +134,15 @@ export class UserLibraryListCard extends React.Component {
 
   debounceSave = debounce(this.saveEntry, 200);
 
-  selectOptions = STATUS_SELECT_OPTIONS.map(option => ({
+  selectOptions = () => STATUS_SELECT_OPTIONS.map(option => ({
     value: option.value,
     text: option[this.props.libraryType],
-  })).filter(option => option.value !== this.props.libraryStatus);
+  })).filter(option => option.value !== this.props.libraryEntry.status);
 
   render() {
-    const { data, libraryType, currentUser } = this.props;
+    const { libraryEntry, libraryType, currentUser } = this.props;
     const { progressPercentage, isSliderActive } = this.state;
-    const mediaData = data[libraryType];
+    const mediaData = libraryEntry[libraryType];
     const canEdit = this.props.profile.id === this.props.currentUser.id;
     const maxProgress = this.getMaxProgress();
 
@@ -157,59 +167,72 @@ export class UserLibraryListCard extends React.Component {
         ]}
       >
         <View style={styles.container}>
-          <MediaCard
-            cardDimensions={{ height: 75, width: 65 }}
-            cardStyle={styles.posterImage}
-            mediaData={mediaData}
-            navigate={this.props.navigate}
-          />
-
-          <View style={styles.content}>
-            <View style={styles.titleSection}>
-              <Text
-                numberOfLines={1}
-                style={styles.titleText}
-              >
-                {mediaData.canonicalTitle}
+          { libraryEntry.status !== this.props.libraryStatus &&
+            <View style={styles.moved}>
+              <View style={styles.horizontalRule} />
+              <Text style={styles.movedText}>
+                Moved to <Text style={styles.movedToText}>
+                  {HEADER_TEXT_MAPPING[libraryEntry.status][libraryType]}
+                </Text>
               </Text>
-              {canEdit && (
-                <SelectMenu
-                  options={this.selectOptions}
-                  onOptionSelected={this.onStatusSelected}
-                  style={styles.menuButtonContainer}
-                >
-                  <Image
-                    source={menuImage}
-                    style={styles.menuButton}
-                    resizeMode="contain"
-                  />
-                </SelectMenu>
-              )}
+              <View style={styles.horizontalRule} />
             </View>
-            <View style={styles.progressContainer}>
-              <ProgressBar
-                height={6}
-                fillPercentage={progressPercentage}
-                backgroundStyle={styles.progressBarBackground}
-              />
-            </View>
-            <View style={styles.statusSection}>
-              <Counter
-                disabled={!canEdit}
-                initialValue={data.progress}
-                maxValue={typeof maxProgress === 'number' ? maxProgress : undefined}
-                progressCounter={typeof maxProgress === 'number'}
-                onValueChanged={this.onProgressValueChanged}
-              />
-              <Rating
-                disabled={!canEdit}
-                size="small"
-                viewType="single"
-                onRatingChanged={this.onRatingChanged}
-                style={styles.ratingStyle}
-                rating={data.ratingTwenty}
-                ratingSystem={currentUser.ratingSystem}
-              />
+          }
+          <View style={styles.metaDataContainer}>
+            <MediaCard
+              cardDimensions={{ height: 75, width: 65 }}
+              cardStyle={styles.posterImage}
+              mediaData={mediaData}
+              navigate={this.props.navigate}
+            />
+
+            <View style={styles.content}>
+              <View style={styles.titleSection}>
+                <Text
+                  numberOfLines={1}
+                  style={styles.titleText}
+                >
+                  {mediaData.canonicalTitle}
+                </Text>
+                {canEdit && (
+                  <SelectMenu
+                    options={this.selectOptions()}
+                    onOptionSelected={this.onStatusSelected}
+                    style={styles.menuButtonContainer}
+                  >
+                    <Image
+                      source={menuImage}
+                      style={styles.menuButton}
+                      resizeMode="contain"
+                    />
+                  </SelectMenu>
+                )}
+              </View>
+              <View style={styles.progressContainer}>
+                <ProgressBar
+                  height={6}
+                  fillPercentage={progressPercentage}
+                  backgroundStyle={styles.progressBarBackground}
+                />
+              </View>
+              <View style={styles.statusSection}>
+                <Counter
+                  disabled={!canEdit}
+                  initialValue={libraryEntry.progress}
+                  maxValue={typeof maxProgress === 'number' ? maxProgress : undefined}
+                  progressCounter={typeof maxProgress === 'number'}
+                  onValueChanged={this.onProgressValueChanged}
+                />
+                <Rating
+                  disabled={!canEdit}
+                  size="small"
+                  viewType="single"
+                  onRatingChanged={this.onRatingChanged}
+                  style={styles.ratingStyle}
+                  rating={libraryEntry.ratingTwenty}
+                  ratingSystem={currentUser.ratingSystem}
+                />
+              </View>
             </View>
           </View>
         </View>

diff --git a/src/screens/Profiles/UserLibrary/components/UserLibraryListCard/styles.js b/src/screens/Profiles/UserLibrary/components/UserLibraryListCard/styles.js
@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import * as colors from 'kitsu/constants/colors';
-import { commonStyles } from 'kitsu/common/styles';
+import { commonStyles, flattenCommon } from 'kitsu/common/styles';
 
 const MENU_BUTTON_WIDTH = 24;
 
@@ -9,7 +9,6 @@ export const styles = StyleSheet.create({
     backgroundColor: colors.white,
     borderBottomWidth: 1,
     borderColor: colors.lightGrey,
-    flexDirection: 'row',
     padding: 10,
   },
   content: {
@@ -19,12 +18,33 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingLeft: 10,
   },
+  horizontalRule: {
+    borderColor: colors.lightGrey,
+    flex: 1,
+    borderTopWidth: 1,
+    margin: 5,
+  },
   menuButton: {
     width: MENU_BUTTON_WIDTH,
   },
   menuButtonContainer: {
     marginLeft: 'auto',
   },
+  metaDataContainer: {
+    flexDirection: 'row',
+  },
+  moved: {
+    ...flattenCommon('centerCenter'),
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  movedText: {
+    color: colors.grey,
+  },
+  movedToText: {
+    fontWeight: '600',
+    color: colors.grey,
+  },
   posterImage: {
     borderRadius: 4,
   },