Style conflict resolution page

Cue/app/actions/library.js

@@ -79,17 +79,11 @@ function rateDeck(uuid: string, user_rating: number): Action {
   }
 }
 
-async function resolveConflict(useServerDeck: Boolean, localDeck: Deck) : PromiseAction {
-  let updatedDeck
-  if (useServerDeck)
-    updatedDeck = await LibraryApi.fetchDeck(localDeck.uuid)
-  else
-    updatedDeck = await LibraryApi.overwriteDeck(localDeck)
-
-  return {
-    type: 'DECK_CONFLICT_RESOLVED',
-    updatedDeck,
-  }
+export type Conflict = {
+  localDeck: ?Deck,
+  serverDeck: ?Deck,
+  change: {},
+  useServerDeck: boolean,
 }
 
 //attempts to sync each deck once, returns list of failed syncs
@@ -117,37 +111,73 @@ function syncLibrary(localChanges): ThunkAction {
 // ex: { uuid: string, action: 'add', name: string } if a deck was added
 // ex: { uuid: string, action: 'edit', cards: [{action: 'edit', uuid: string, front: "fox", back: "20XX"}] } if 1 card in deck was changed
 async function syncDeck(change) : PromiseAction {
-  let serverDeck = {}
+  let updatedDeck = {}
   if (change.action === "add") {
-    serverDeck = await LibraryApi.createDeck(change.name, change.tags);
+    updatedDeck = await LibraryApi.createDeck(change.name, change.tags);
     // check if any other changes need to be synced
     for (let key in change) {
-      if((key === 'cards' && change.cards.length) || (change[key] != serverDeck[key] && !key.match("^(?:cards|uuid|action)$"))) {
-        serverDeck = await LibraryApi.editDeck({
+      if((key === 'cards' && change.cards.length) || (change[key] != updatedDeck[key] && !key.match("^(?:cards|uuid|action)$"))) {
+        updatedDeck = await LibraryApi.editDeck({
           ...change,
-          uuid: serverDeck.uuid,
-          parent_deck_version: serverDeck.user_data_version,
-          parent_user_data_version: serverDeck.deck_version})
+          uuid: updatedDeck.uuid,
+          parent_deck_version: updatedDeck.user_data_version,
+          parent_user_data_version: updatedDeck.deck_version})
         break
       }
     }
   } else if (change.action === "edit") {
-    serverDeck = await LibraryApi.editDeck(change)
+    updatedDeck = await LibraryApi.editDeck(change)
   } else if (change.action === "delete") {
     await LibraryApi.deleteDeck(change.uuid)
   } else if (change.action === "flag") {
-    let response = await LibraryApi.flagCard(change)
-    change = {...change, user_data_version: response.user_data_version}
+    let response = await LibraryApi.flagCard(change).catch(e => {
+      if (e.response && (e.response.status === 404 || e.response.status === 400)) {
+        // flagging private deleted deck returns 404
+        // flagging remote deleted deck returns 400
+        updatedDeck = {uuid: change.uuid, deleted: true}
+        return {}
+      } else {
+        throw e
+      }
+    })
+    change = {...change, ...response}
   } else if (change.action === "rate") {
     await LibraryApi.rateDeck(change.uuid, change.user_rating)
   }
   return {
     type: 'DECK_SYNCED',
-    serverDeck,
+    updatedDeck,
     change
   }
 }
 
+async function resolveConflict(conflict: Conflict) : PromiseAction {
+  let updatedDeck = {}
+  if (conflict.useServerDeck) {
+    updatedDeck = conflict.serverDeck
+      ? conflict.serverDeck
+      : {uuid: conflict.change.uuid, deleted: true}
+  } else {
+    let cards
+    if (conflict.localDeck && conflict.localDeck.cards) {
+      cards = conflict.localDeck.cards.map(card=>{
+        let change = conflict.change.cards.find(c => c.uuid == card.uuid)
+        return change && change.action === "add"
+          ? {...card, uuid: undefined}
+          : card
+      })
+    }
+    let deck = {...conflict.localDeck, cards}
+    updatedDeck = await LibraryApi.overwriteDeck(deck)
+  }
+
+  return {
+    type: 'DECK_CONFLICT_RESOLVED',
+    updatedDeck,
+    change: conflict.change
+  }
+}
+
 async function addLibrary(uuid: string, shareCode?: string): PromiseAction {
   try {
     await LibraryApi.addDeckToLibrary(uuid, shareCode);

Cue/app/actions/types.js

@@ -3,25 +3,25 @@
 import type {Deck, DeckMetadata} from '../api/types';
 
 export type Action =
-	{ type: 'LOADED_LIBRARY', decks: Array<Deck> }
-  |	{ type: 'LOADED_USERNAME', name: string }
+  { type: 'LOADED_LIBRARY', decks: Array<Deck> }
+  | { type: 'LOADED_USERNAME', name: string }
   | { type: 'LOGGED_IN', data: { userId: string; accessToken: string; } }
   | { type: 'LOGGED_OUT' }
   | { type: 'SWITCH_TAB', tab: 'library' | 'discover' | 'search' }
   | { type: 'DECK_CREATED', deck: {} }
   | { type: 'DECK_DELETED', uuid: string }
-  | { type: 'DECK_SYNCED', serverDeck: Deck, change: {} }
   | { type: 'DECK_EDITED', change: {} }
+  | { type: 'DECK_SYNCED', updatedDeck: Deck, change: {} }
+  | { type: 'DECK_CONFLICT_RESOLVED', updatedDeck: Deck, change: {} }
   | { type: 'SHARE_CODE_GENERATED', uuid: string, code: string }
-  | { type: 'DECK_CONFLICT_RESOLVED', updatedDeck: Deck }
   | { type: 'SEARCHED_DECKS', searchResults: Array<DeckMetadata>, searchString: string }
   | { type: 'DISCOVERED_DECKS', newDecks: Array<DeckMetadata>, topDecks: Array<DeckMetadata> }
-  | { type: 'CARD_FLAGGED', change: {uuid: string, cards:[uuid:string, needs_review: Boolean, action: 'edit']}}
-	| { type: 'DECK_ALREADY_IN_LIBRARY'}
-	| { type: 'DECK_ADDED_TO_LIBRARY', addedDeck: Deck}
-	| { type: 'CLEAR_INACCESSIBLE_DECKS'}
-	| { type: 'DECK_RATED', change: {uuid: string, userRating: number}}
-	;
+  | { type: 'CARD_FLAGGED', change: {uuid: string, cards:[{uuid:string, needs_review: Boolean, action: 'edit'}]} }
+  | { type: 'DECK_ALREADY_IN_LIBRARY'}
+  | { type: 'DECK_ADDED_TO_LIBRARY', addedDeck: Deck}
+  | { type: 'CLEAR_INACCESSIBLE_DECKS'}
+  | { type: 'DECK_RATED', change: {uuid: string, userRating: number}}
+  ;
 
 export type Dispatch = (action: Action | ThunkAction | PromiseAction | Array<Action>) => any;
 export type GetState = () => Object;

Cue/app/api/Library.js

@@ -1,7 +1,7 @@
 // @flow
 import CueApi from './CueApi'
 import DeviceInfo from 'react-native-device-info'
-
+import type { Deck } from './types'
 
 var LibraryApi = {
 
@@ -63,7 +63,12 @@ var LibraryApi = {
   deleteDeck(uuid: string) {
     let endpoint = '/api/v1/library/' + uuid
     console.info('deleting deck at endpoint ' + endpoint)
-    return CueApi.fetch(endpoint, 'DELETE')
+    return CueApi.fetch(endpoint, 'DELETE').catch(e=>{
+      if (e.response && e.response.status !== 404) {
+        // don't throw if deck already deleted
+        throw e
+      }
+    })
   },
 
   generateShareCode(uuid: string) {

Cue/app/common/SelectableTextTableRow.js

@@ -14,7 +14,7 @@ const styles = {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingVertical: Platform.OS === 'android' ? 16 : undefined,
+    paddingVertical: Platform.OS === 'android' ? 8 : undefined,
   },
   text: {
     color: CueColors.primaryText,
@@ -24,27 +24,42 @@ const styles = {
     color: CueColors.mediumGrey,
     fontSize: Platform.OS === 'android' ? 16 : 17,
   },
+  textSecondary: {
+    color: CueColors.mediumGrey,
+    paddingTop: 8,
+    fontSize: Platform.OS === 'android' ? 13 : 14,
+  },
   icon: {
+    flex: 0,
     tintColor: CueColors.primaryTint,
   },
   iconDisabled: {
+    flex: 0,
     tintColor: CueColors.mediumGrey,
   }
 }
 
 export default class SelectableTextTableRow extends React.Component {
   props: {
     text: string,
-    selected: boolean,
+    selected: ?boolean,
+    subText?: string,
     disabled?: boolean,
     onPress?: () => void,
   }
 
   _renderText = () => {
+    let subText
+    if (this.props.subText) {
+      subText = <Text style={styles.textSecondary}>{this.props.subText}</Text>
+    }
     return (
-      <Text style={this.props.disabled ? styles.textDisabled : styles.text}>
-        {this.props.text}
-      </Text>
+      <View style={{flex: 1}}>
+        <Text style={this.props.disabled ? styles.textDisabled : styles.text}>
+          {this.props.text}
+        </Text>
+        { subText }
+      </View>
     )
   }