Replace interfaces with Types

src/components/album-list.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Album from "./album";
 import * as interfaces from "../interfaces";
 
-export default (props: AlbumList) => {
+export default (props: Props) => {
     const { albums, handleOnClick, blurred } = props;
     const classNames = blurred ? "blur" : "";
     return (
@@ -18,8 +18,8 @@ export default (props: AlbumList) => {
     );
 };
 
-interface AlbumList {
+type Props = {
     albums: Array<interfaces.Album>;
     handleOnClick: Function;
     blurred: boolean;
-}
+};

src/components/album.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import * as interfaces from "../interfaces";
+import { Album } from "../interfaces";
 
-export default (props: Album) => {
+export default (props: Props) => {
     const handleKeyPress = (e: KeyboardEvent, callback: Function) => {
         const SPACE_KEY = 32;
         const ENTER_KEY = 13;
@@ -37,7 +37,8 @@ export default (props: Album) => {
     );
 };
 
-interface Album {
+type Props = {
-    album: interfaces.Album;
+    key: number;
+    album: Album;
     handleOnClick: Function;
-}
+};

src/components/filter-input.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default (props: FilterInput) => {
+export default (props: Props) => {
     const { value, handleOnChange } = props;
     return (
         <div>
@@ -14,7 +14,7 @@ export default (props: FilterInput) => {
     );
 };
 
-interface FilterInput {
+type Props = {
     value: string;
     handleOnChange: Function;
-}
+};

src/components/modal.tsx

@@ -1,12 +1,7 @@
 import React from "react";
 import { Album } from "../interfaces";
 
-interface Modal {
+export default (props: Props) => {
-    album: Album;
-    handleOnClick: Function;
-}
-
-export default (props: Modal) => {
     const handleKeyPress = (e: KeyboardEvent, callback: Function) => {
         console.log(e.charCode);
         callback();
@@ -40,3 +35,8 @@ export default (props: Modal) => {
         </div>
     );
 };
+
+type Props = {
+    album: Album;
+    handleOnClick(): void;
+};

src/components/sort-select.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default (props: SortSelect) => {
+export default (props: Props) => {
     const { value, handleOnChange } = props;
     return (
         <div hidden>
@@ -18,7 +18,7 @@ export default (props: SortSelect) => {
     );
 };
 
-interface SortSelect {
+type Props = {
     value: string;
     handleOnChange: Function;
-}
+};

src/containers/modal.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { connect } from "react-redux";
 import Modal from "../components/modal";
 import { unselectAlbum } from "../actions";

src/containers/sort-select.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { connect } from "react-redux";
 import SortSelect from "../components/sort-select";
 import { setSortKey } from "../actions";

src/reducers/albums.ts

@@ -1,14 +1,14 @@
 import { LOAD_ALBUMS_OK } from "../actions";
 import { Album } from "../interfaces";
 
-interface AlbumsAction {
+type Action = {
     type: string;
     payload: {
         albums: Array<Album>;
     };
-}
+};
 
-export default (state: Array<Album> = [], action: AlbumsAction) => {
+export default (state: Array<Album> = [], action: Action) => {
     switch (action.type) {
         case LOAD_ALBUMS_OK:
             const { albums } = action.payload;

src/reducers/index.ts

@@ -0,0 +1,12 @@
+import { combineReducers } from "redux";
+import albums from "./albums";
+import visibilityFilter from "./visibility-filter";
+import sortKey from "./sort-key";
+import selectedAlbum from "./selected-album";
+
+export default combineReducers({
+    albums,
+    visibilityFilter,
+    sortKey,
+    selectedAlbum
+});

src/reducers/selected-album.ts

@@ -1,14 +1,14 @@
 import { SELECT_ALBUM, UNSELECT_ALBUM } from "../actions";
 import { Album } from "../interfaces";
 
-interface AlbumAction {
+type Action = {
     type: string;
     payload: {
         album: Album;
     };
-}
+};
 
-export default (state: Object = {}, action: AlbumAction) => {
+export default (state: Object = {}, action: Action) => {
     switch (action.type) {
         case SELECT_ALBUM:
             return action.payload.album;

src/reducers/sort-key.ts

@@ -1,13 +1,13 @@
 import { SET_SORT_KEY } from "../actions";
 
-interface SortKeyAction {
+type Action = {
     type: string;
     payload: {
         key: string;
     };
-}
+};
 
-export default (state: string = "id", action: SortKeyAction) => {
+export default (state: string = "id", action: Action) => {
     switch (action.type) {
         case SET_SORT_KEY:
             return action.payload.key;

src/reducers/visibility-filter.ts

@@ -1,13 +1,13 @@
 import { SET_VISIBILITY_FILTER } from "../actions";
 
-interface VisibilityFilterAction {
+type Action = {
     type: string;
     payload: {
         filter: string;
     };
-}
+};
 
-export default (state: string = "", action: VisibilityFilterAction) => {
+export default (state: string = "", action: Action) => {
     switch (action.type) {
         case SET_VISIBILITY_FILTER:
             return action.payload.filter;