homework done. still not sure whether to keep hidden/done homeworks i…

…n the state.homework.hidden array or to add a _checked or _hidden prop to all homework items

src/handlers/reducers.ts

@@ -1,10 +1,15 @@
 import { initialState } from '../store/initial';
 
 export function STATE_SET( state, { loaded }){
-  return {
-    ...state,
-    ...loaded,
-  };
+  const newState = {};
+  Object.keys( loaded ).forEach( key => {
+    const isObject = Object.prototype.toString.call(state[key]) === '[object Object]';
+    newState[key] = isObject ? {
+      ...state[key],
+      ...loaded[key],
+    } : ( loaded[key] || state[key] );
+  });
+  return newState;
 }
 
 export function LOGIN( state, { loaded }){
@@ -73,15 +78,29 @@ export const events = {
 };
 
 export const homework = {
-  hidden: {
-    HOMEWORK_TOGGLE_HIDDEN( state, { id }){
-      // should add or remove the homework id
-      return [];
+  filter: {
+    HOMEWORK_SET_FILTER( state, { filter }){
+      return filter;
     },
   },
-  homework: {
-    HOMEWORK_SET( state, { response }){
-      return response.homework;
+  hidden: {
+    HOMEWORK_TOGGLE_HIDDEN( state: any[], { id }){
+      let copy = state.slice( 0 );
+      let i = copy.indexOf( id );
+      if( i > -1 ){
+        copy.splice(i, 1);
+      } else {
+        copy.push(id)
+      }
+      return copy;
     },
   },
+  HOMEWORK_SET( state, { response }){
+    return {
+      ...state,
+      // removes unnecessary id's, otherwise the app would accumulate id's for EVER!
+      hidden: state.hidden.filter( id => !!response.homework.find( item => item.lsn_id === id ) ),
+      homework: response.homework.slice(0).reverse(),
+    };
+  },
 };

src/pages/homework/homework.html

@@ -35,9 +35,9 @@
         <ion-list>
           <ion-item
             text-wrap
-            *ngFor="let item of filteredHw"
+            *ngFor="let item of homework"
             [class.dark-gray]="item.lsn_date === store.today"
-            [@expand]="!( item.checked && hideChecked )"
+            [@expand]="!( item._hidden && hideChecked )"
           >
             <ion-label>
               {{ item.calc_date }}
@@ -47,7 +47,7 @@
             </ion-label>
             <ion-checkbox
               color="primary"
-              [(ngModel)]="item.checked"
+              [(ngModel)]="item._hidden"
               (ngModelChange)="check(item)"
             ></ion-checkbox>
           </ion-item>

src/pages/homework/homework.ts

@@ -10,9 +10,13 @@ import {
 } from 'ionic-angular';
 import { TranslateService } from '@ngx-translate/core';
 
-import { OldStore } from '../../providers/old-store';
-import { Auth } from '../../providers/auth';
-import { Log } from '../../providers/log';
+import store, { connect } from '../../store';
+import { log } from '../../providers/log';
+import {
+  getHomework,
+  getHomeworkFilter,
+  getHomeworkClasses,
+} from '../../selectors';
 
 import { expand } from '../../components/animations';
 
@@ -24,92 +28,93 @@ import { expand } from '../../components/animations';
 })
 export class Homework {
   homework: Array<{calc_class: string, calc_date: string, lsn_date: string, lsn_hw: string, lsn_id: string}> = [];
-  classes: any[];
-  filteredHw: any[] = [];
-  selectedClass: string = 'all-classes';
+  classes: any[] = [];
+  filter: string = 'ALL_CLASSES';
   hideChecked: boolean = true;
   loading: Loading = this.loadingCtrl.create();
 
   constructor(
     private translate: TranslateService,
     private alert: AlertController,
     private loadingCtrl: LoadingController,
-
-    private store: OldStore,
-    private log: Log,
   ){}
 
   public async ionViewDidEnter(){
-    await this.loading.present();
-    await this.get();
-    this.loading.dismiss();
-  }
-  async get( refresh = false ){
     try {
-      let hw = await this.store.get(
-        'HOMEWORK',
-        ({ newData, oldData = { homework: [] } }) => ({
-          ...newData,
-          homework: newData.homework.map( item => {
-            if( oldData.homework.find( el => item.lsn_id === el.lsn_id && el.checked ) ){
-              item.checked = true;
-            }
-            return item;
-          } )
-        }),
-        refresh,
-      );
-      // this.homework serves as a backup
-      // this.filteredHw is presented in view
-      this.filteredHw = this.homework = hw.homework.slice(0).reverse();
+      await this.loading.present();
+
+      connect( ( state: any ) => ({
+        homework: getHomework(state),
+        filter: getHomeworkFilter(state),
+        classes: getHomeworkClasses(state),
+      }) )( this );
+
+      store.dispatch({ type: 'LOAD', key: 'homework' });
+
+      this.loading.dismiss();
     } catch(err){
-      this.log.warn(err);
+      log.warn(err);
     }
   }
+  // async get( refresh = false ){
+  //   try {
+  //     let hw = await this.store.get(
+  //       'HOMEWORK',
+  //       ({ newData, oldData = { homework: [] } }) => ({
+  //         ...newData,
+  //         homework: newData.homework.map( item => {
+  //           if( oldData.homework.find( el => item.lsn_id === el.lsn_id && el.checked ) ){
+  //             item.checked = true;
+  //           }
+  //           return item;
+  //         } )
+  //       }),
+  //       refresh,
+  //     );
+  //     // this.homework serves as a backup
+  //     // this.filteredHw is presented in view
+  //     this.filteredHw = this.homework = hw.homework.slice(0).reverse();
+  //   } catch(err){
+  //     this.log.warn(err);
+  //   }
+  // }
 
   popover(e){
-    this.classes = this.homework
-      .filter( (el, i, arr) => arr.findIndex( t => t.calc_class === el.calc_class ) === i )
-      .map( el => ({
+    const buttons = this.classes
+      .map( className => ({
         type: 'radio',
-        label: el.calc_class,
-        value: el.calc_class
+        label: className,
+        value: className
       }) );
-    this.classes.push({
+    buttons.push({
       type: 'radio',
       label: this.translate.instant('HOMEWORK.ALL_CLASSES'),
-      value: 'all-classes'
+      value: 'ALL_CLASSES',
     });
+    const inputs = buttons.map( button => ({
+      ...button,
+      checked: button.value === this.filter,
+    }) );
     this.alert.create({
       title: this.translate.instant('HOMEWORK.TITLE'),
       buttons: [
         this.translate.instant('GLOBAL.CANCEL'),
         {
           text: this.translate.instant('GLOBAL.OK'),
-          handler: className => {
-            this.selectedClass = className;
-            if( className === 'all-classes' ){
-              this.filteredHw = this.homework;
-            } else {
-              this.filteredHw = this.homework.filter( hw => className === hw.calc_class );
-            }
+          handler: filter => {
+            store.dispatch({ type: 'HOMEWORK_SET_FILTER', filter });
           }
         }
       ],
-      inputs: this.classes.map( button => ({
-        ...button,
-        checked: button.value === this.selectedClass
-      }) )
+      inputs,
     }).present();
   }
-  public check( item ){
-    let index = this.homework.findIndex( el => el.lsn_id === item.lsn_id );
-    this.homework[index] = item;
-    this.store.persist();
+  check( item ){
+    store.dispatch({ type: 'HOMEWORK_TOGGLE_HIDDEN', id: item.lsn_id });
   }
 
-  async refresh( refresher: Refresher ){
-    await this.get(true);
+  refresh( refresher: Refresher ){
+    store.dispatch({ type: 'LOAD', key: 'homework', refresh: true });
     refresher.complete();
   }
 }

src/selectors/index.ts

@@ -13,3 +13,31 @@ export const getFilteredStaff = createSelector(
       item.calc_status.toLowerCase().includes( query )
     )
 );
+
+export const getRawHomework = state => state.homework.homework;
+export const getHiddenHomework = state => state.homework.hidden;
+export const getHomeworkFilter = state => state.homework.filter;
+
+export const getFilteredHomework = createSelector(
+  getRawHomework,
+  getHomeworkFilter,
+  ( state = [], filter = 'ALL_CLASSES' ) => filter === 'ALL_CLASSES'
+    ? state
+    : state.filter( item => item.calc_class === filter ),
+);
+
+export const getHomework = createSelector(
+  getFilteredHomework,
+  getHiddenHomework,
+  ( homework = [], hidden = []) => homework.map( item => ({
+    ...item,
+    _hidden: hidden.includes( item.lsn_id ),
+  })),
+);
+
+export const getHomeworkClasses = createSelector(
+  getRawHomework,
+  ( homework = [] ) => homework
+    .filter( (el, i, arr) => arr.findIndex( t => t.calc_class === el.calc_class ) === i )
+    .map( item => item.calc_class ),
+);

src/store/initial.ts

@@ -74,6 +74,7 @@ export const initialState = {
   homework: {
     homework: [],
     hidden: [],
+    filter: 'ALL_CLASSES',
   },
   login: {