feat(order): change order of results

src/app/media/components/page/page.component.html

@@ -1,3 +1,4 @@
 <mrs-media-search-container></mrs-media-search-container>
 <mrs-media-filter-container></mrs-media-filter-container>
+<mrs-media-order-container></mrs-media-order-container>
 <mrs-media-list-container></mrs-media-list-container>

src/app/media/features/index.ts

@@ -1,2 +1,3 @@
 export * from './filter';
+export * from './order';
 export * from './search';

src/app/media/features/order/components/index.ts

@@ -0,0 +1 @@
+export * from './order';

src/app/media/features/order/components/order/index.ts

@@ -0,0 +1 @@
+export * from './order.component';

src/app/media/features/order/components/order/order.component.html

@@ -0,0 +1,10 @@
+<mat-form-field>
+  <mat-label>Order direction:</mat-label>
+  <mat-select [formControl]="input"
+              (selectionChange)="set?.emit($event?.value)">
+    <mat-option *ngFor="let value of values"
+                [value]="value?.value">
+      {{ value?.label }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>

src/app/media/features/order/components/order/order.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { Order } from '../../models';
+
+@Component({
+  selector: 'mrs-media-order',
+  templateUrl: './order.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class OrderComponent {
+  @Input() order: Order = null;
+  @Output() set = new EventEmitter<string>();
+
+  values = [
+    { value: Order.asc, label: 'Ascending' },
+    { value: Order.desc, label: 'Descending' }
+  ];
+
+  input: FormControl = new FormControl();
+}

src/app/media/features/order/containers/index.ts

@@ -0,0 +1 @@
+export * from './order.container';

src/app/media/features/order/containers/order.container.html

@@ -0,0 +1,3 @@
+<mrs-media-order [order]="order$ | async"
+                 (set)="set($event)">
+</mrs-media-order>

src/app/media/features/order/containers/order.container.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+
+import { Order } from '../models';
+import { getOrder, OrderActions } from '../store';
+
+@Component({
+  selector: 'mrs-media-order-container',
+  templateUrl: './order.container.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class OrderContainerComponent {
+  order$: Observable<Order> = this.store.pipe(select(getOrder));
+
+  constructor(private store: Store<{}>) {}
+
+  set(order: Order) {
+    this.store.dispatch(OrderActions.set({ order }));
+  }
+}

src/app/media/features/order/index.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './containers';
+export * from './models';
+export * from './order.module';
+export * from './store';

src/app/media/features/order/models/index.ts

@@ -0,0 +1 @@
+export * from './order.enum';

src/app/media/features/order/models/order.enum.ts

@@ -0,0 +1,4 @@
+export enum Order {
+  asc,
+  desc
+}

src/app/media/features/order/order.module.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+
+import { OrderComponent } from './components';
+import { OrderContainerComponent } from './containers';
+import { OrderStoreModule } from './store';
+
+const components = [OrderComponent];
+const containers = [OrderContainerComponent];
+
+@NgModule({
+  declarations: [...components, ...containers],
+  entryComponents: [...containers],
+  exports: [...containers],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    OrderStoreModule,
+    MatInputModule,
+    MatSelectModule
+  ]
+})
+export class OrderModule {}

src/app/media/features/order/store/index.ts

@@ -0,0 +1,6 @@
+import * as OrderActions from './order.actions';
+
+export { OrderActions };
+export * from './order.module';
+export * from './order.reducer';
+export * from './order.selectors';

src/app/media/features/order/store/order.actions.ts

@@ -0,0 +1,10 @@
+import { createAction, props, union } from '@ngrx/store';
+
+import { Order } from '../models';
+
+export const clear = createAction('[Media Order] Clear');
+
+export const set = createAction('[Media Order] Set', props<{ order: Order }>());
+
+const all = union({ clear, set });
+export type OrderActionsUnion = typeof all;

src/app/media/features/order/store/order.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+
+import { orderReducer } from './order.reducer';
+import { orderSelectorName } from './order.selectors';
+
+@NgModule({
+  imports: [StoreModule.forFeature(orderSelectorName, orderReducer)]
+})
+export class OrderStoreModule {}

src/app/media/features/order/store/order.reducer.ts

@@ -0,0 +1,32 @@
+import { createReducer, on } from '@ngrx/store';
+
+import { Order } from '../models';
+import * as OrderActions from './order.actions';
+
+export interface OrderState {
+  order: Order;
+}
+
+const initialState: OrderState = {
+  order: null
+};
+
+const reducer = createReducer(
+  initialState,
+
+  on(OrderActions.set, (state, { order }) => ({
+    ...state,
+    order
+  })),
+
+  on(OrderActions.clear, () => ({
+    ...initialState
+  }))
+);
+
+export function orderReducer(
+  state: OrderState,
+  action: OrderActions.OrderActionsUnion
+) {
+  return reducer(state, action);
+}

src/app/media/features/order/store/order.selectors.ts

@@ -0,0 +1,12 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+
+import { OrderState } from './order.reducer';
+
+export const orderSelectorName = 'order';
+
+const getOrderState = createFeatureSelector<OrderState>(orderSelectorName);
+
+export const getOrder = createSelector(
+  getOrderState,
+  (state: OrderState) => !!state && state.order
+);

src/app/media/media.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 
 import { ListComponent, ListItemComponent, PageComponent } from './components';
 import { ListContainerComponent } from './containers';
-import { FilterModule, SearchModule } from './features';
+import { FilterModule, OrderModule, SearchModule } from './features';
 import { MediaRoutingModule } from './media.routing';
 import { MediaStoreModule } from './store';
 
@@ -17,8 +17,10 @@ const containers = [ListContainerComponent];
     CommonModule,
     MediaRoutingModule,
     MediaStoreModule,
-    SearchModule,
-    FilterModule
+
+    FilterModule,
+    OrderModule,
+    SearchModule
   ]
 })
 export class MediaModule {}

src/app/media/store/media.selectors.ts

@@ -1,6 +1,6 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
 
-import { getFilter, getSearchQuery } from '../features';
+import { getFilter, getOrder, getSearchQuery, Order } from '../features';
 import { Media, MediaType } from '../models';
 import { mediaAdapter, MediaState } from './media.reducer';
 
@@ -41,10 +41,17 @@ export const getMediaFiltered = createSelector(
     items
 );
 
-export const getMediaResults = createSelector(
+export const getMediaSearched = createSelector(
   getMediaFiltered,
   getSearchQuery,
   (items: Media[], query: string) =>
     !!items &&
     items.filter(({ title }: Media) => new RegExp(query, 'i').test(title))
 );
+
+export const getMediaResults = createSelector(
+  getMediaSearched,
+  getOrder,
+  (items: Media[], order: Order) =>
+    (!!items && (order === Order.desc && [...items].reverse())) || items
+);