save data for display order

Author: wangdicoder

js/actions/actionTypes.js

@@ -27,6 +27,6 @@ export const UNSTAR_DATA_SUCCESS = 'UNSTAR_DATA_SUCCESS';
 export const UPDATE_STAR_STATE = 'UPDATE_STAR_STATE';
 
 export const CHANGE_COLOR = 'CHANGE_COLOR';
-
+export const CHANGE_DISPLAY_ORDER = 'CHANGE_DISPLAY_ORDER';
 export const OPEN_SHOW_THUMBNAIL = 'OPEN_SHOW_THUMBNAIL';
 export const CLOSE_SHOW_THUMBNAIL = 'CLOSE_SHOW_THUMBNAIL';

js/actions/modifySettings.js

@@ -12,7 +12,6 @@ export function changeColor(color, flag=true) {
         dao.saveThemeColor(color);
     }
 
-    console.log(color);
     return {
         type: TYPES.CHANGE_COLOR,
         color: color
@@ -36,6 +35,18 @@ export function changeShowThumbnail(value, flag=true) {
     }
 }
 
+export function changeDisplayOrder(order, flag=true) {
+    if(flag) {
+        let dao = new SettingsDataDAO();
+        dao.saveDisplayOrder(order);
+    }
+
+    return {
+        type: TYPES.CHANGE_DISPLAY_ORDER,
+        displayOrder: order
+    };
+}
+
 function fetchShowThumbnailValue() {
     return (dispatch) => {
         let dao = new SettingsDataDAO();
@@ -51,18 +62,28 @@ function fetchThemeColorValue() {
     return (dispatch) => {
         let dao = new SettingsDataDAO();
         dao.getThemeColorValue().then((result)=>{
-            console.log('right');
             dispatch(changeColor(result, false));
         }, (error)=>{
-            console.log('wrong');
             dispatch(changeColor(error));
         });
     };
 }
 
+function fetchDisplayOrderValue() {
+    return (dispatch) => {
+        let dao = new SettingsDataDAO();
+        dao.getDisplayOrderValue().then((result)=>{
+            dispatch(changeDisplayOrder(result, false));
+        }, (error)=>{
+            dispatch(changeDisplayOrder(error));
+        });
+    };
+}
+
 export function initialSettingsStateFacade() {
     return (dispatch)=>{
         dispatch(fetchShowThumbnailValue());
         dispatch(fetchThemeColorValue());
+        dispatch(fetchDisplayOrderValue());
     }
 }

js/containers/HomeTab/index.js

@@ -53,7 +53,7 @@ class HomeFragment extends Component{
                                     labelTime={this.props.dataTime}/>
                             </View>
                             <View style={styles.scrollContents}>
-                                {Info.getCategoryList(dataSource).map((item, i) => {
+                                {this.props.displayOrder.map((item, i) => {
                                     if(item !== '福利' && Info.getTargetList(dataSource, item) != null)
                                     return(
                                         <ListViewForHome
@@ -187,7 +187,8 @@ const mapStateToProps = (state) => {
         hasData: state.homeData.hasData,
         dataSource: state.homeData.dataSource,
         dataTime: state.homeData.dataTime,
-        mainThemeColor: state.settingState.mainThemeColor
+        mainThemeColor: state.settingState.mainThemeColor,
+        displayOrder: state.settingState.displayOrder
     };
 };
 

js/containers/MoreTab/OrderContentPage.js

@@ -10,24 +10,34 @@ import BackPageComponent from '../BackPageComponent';
 import NavigationBar from '../../components/NavigationBar';
 import px2dp from '../../utils/px2dp';
 import theme from '../../constants/theme';
+import {changeDisplayOrder} from '../../actions/modifySettings';
+import {connect} from 'react-redux';
+import {store} from '../../store/index';
 
-export default class OrderContentPage extends BackPageComponent{
+class OrderContentPage extends BackPageComponent{
     constructor(props){
         super(props);
-        this.names = ['Android','iOS','前端','拓展资源','休息视频','App'];
         this.items = [];
         this.order = [];
     }
 
+    _okBtnPressCallback(){
+        store.dispatch(changeDisplayOrder(this.order));
+        this.order = [];
+        this._handleBack();
+    }
+
     render(){
         return(
             <View style={styles.container}>
                 <NavigationBar
                     title="首页内容展示顺序"
-                    leftBtnIcon="arrow-back"
+                    leftBtnText="取消"
                     leftBtnPress={this._handleBack.bind(this)}
+                    rightBtnText="确定"
+                    rightBtnPress={this._okBtnPressCallback.bind(this)}
                 />
-                {this.names.map((item, i)=>{
+                {this.props.displayOrder.map((item, i)=>{
                     this.order.push(item);
                     return (
                         <View
@@ -129,11 +139,7 @@ export default class OrderContentPage extends BackPageComponent{
 
     _getTopValueYById(id){
         const height = px2dp(49);
-        return (id + 1) * height + ((Platform.OS === 'android') ? px2dp(20) : px2dp(7));
-    }
-
-    _storeOrder(){
-
+        return (id + 1) * height + ((Platform.OS === 'android') ? px2dp(18) : px2dp(7));
     }
 }
 
@@ -159,4 +165,12 @@ const styles = StyleSheet.create({
         color: '#000',
         marginLeft: px2dp(20)
     }
-});
+});
+
+const mapStateToProps = (state) => {
+    return {
+        displayOrder: state.settingState.displayOrder
+    }
+}
+
+export default connect(mapStateToProps)(OrderContentPage);

js/dao/SettingsDataDAO.js

@@ -5,6 +5,7 @@
 
 const SHOW_THUMBNAIL = 'showThumbnail';
 const THEME_COLOR = 'themeColor';
+const DISPLAY_ORDER = 'displayOrder';
 
 import {AsyncStorage} from 'react-native';
 
@@ -45,4 +46,23 @@ export default class SettingsDataDAO{
         });
     }
 
+    saveDisplayOrder(order){
+        AsyncStorage.setItem(DISPLAY_ORDER, JSON.stringify({order: order}));
+    }
+
+    getDisplayOrderValue(){
+        return new Promise((resolve, reject) => {
+            AsyncStorage.getItem(DISPLAY_ORDER, (error, result) => {
+                if(!error){
+                    const data = JSON.parse(result);
+                    if(data)
+                        resolve(data.order);
+                    else
+                        reject(['Android','iOS','前端','拓展资源','休息视频','App']);
+                }else
+                    reject(['Android','iOS','前端','拓展资源','休息视频','App']);
+            });
+        });
+    }
+
 }

js/reducers/settingState.js

@@ -8,7 +8,8 @@ import * as TYPES from '../actions/actionTypes';
 
 const initialState = {
     mainThemeColor: colors.dodgerBlue,
-    isOpenThumbnail: false
+    isOpenThumbnail: false,
+    displayOrder: ['Android','iOS','前端','拓展资源','休息视频','App']
 }
 
 export default function settingState(state=initialState, action) {
@@ -31,6 +32,12 @@ export default function settingState(state=initialState, action) {
                 isOpenThumbnail: false
             });
 
+        case TYPES.CHANGE_DISPLAY_ORDER:
+            return Object.assign({}, state, {
+                ...state,
+                displayOrder: action.displayOrder
+            });
+
         default:
             return state;
     }