Initial boilerplate migration to Typescript

.gitignore

@@ -15,7 +15,9 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vscode/

images.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg'
+declare module '*.png'
+declare module '*.jpg'
+
+declare module '*.json'

package.json

@@ -3,14 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-scripts": "1.1.1"
+    "@types/react-redux": "^6.0.3",
+    "@types/redux-actions": "^2.3.0",
+    "axios": "^0.18.0",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-redux": "^5.0.7",
+    "react-router-dom": "^4.3.1",
+    "react-scripts-ts": "2.16.0",
+    "redux": "^4.0.0",
+    "redux-actions": "^2.4.0",
+    "redux-saga": "^0.16.0",
+    "styled-components": "^3.3.3"
   },
   "jest": {
     "collectCoverageFrom": [
-      "**/src/**/*.{js,jsx}",
-      "!**/src/registerServiceWorker.{js,jsx}"
+      "**/src/**/*.{ts,tsx}",
+      "!**/src/registerServiceWorker.{ts,tsx}",
+      "!**/src/setupTests.{js,ts}",
+      "!**/src/index.tsx",
+      "!**/src/**/*.d.{ts,tsx}"
     ],
     "coverageThreshold": {
       "global": {
@@ -22,15 +34,37 @@
     }
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "eject": "react-scripts eject",
-    "lint": "eslint ./",
+    "start": "react-scripts-ts start",
+    "build": "react-scripts-ts build",
     "test": "yarn lint && yarn jest",
-    "jest": "react-scripts test --env=jsdom --coverage"
+    "eject": "react-scripts-ts eject",
+    "lint": "tslint -p tsconfig.json -c tslint.json",
+    "jest": "react-scripts-ts test --env=jsdom --watchAll --coverage"
   },
   "devDependencies": {
+    "@types/babel-core": "^6.25.5",
+    "@types/enzyme": "^3.1.11",
+    "@types/enzyme-adapter-react-16": "^1.0.2",
+    "@types/jest": "^23.1.5",
+    "@types/node": "^10.5.2",
+    "@types/react": "^16.4.6",
+    "@types/react-dom": "^16.0.6",
+    "@types/react-router-dom": "^4.2.7",
+    "@types/react-test-renderer": "^16.0.1",
+    "@types/redux-mock-store": "^1.0.0",
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1"
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4",
+    "jest": "^23.4.0",
+    "jest-enzyme": "^6.0.2",
+    "jest-styled-components": "^5.0.1",
+    "react-test-renderer": "^16.4.1",
+    "redux-devtools-extension": "^2.13.5",
+    "redux-mock-store": "^1.5.3",
+    "ts-jest": "^22.4.6",
+    "typescript": "^2.9.2"
+  },
+  "resolutions": {
+    "jest": "^23.4.0"
   }
 }

src/App.style.ts

@@ -0,0 +1 @@
+import './styles/App.global'

src/App.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {BrowserRouter as Router} from 'react-router-dom';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import { Provider} from 'react-redux';
+
+import store from './store';
+import ROUTES from './routes';
+import Header from './components/presentational/Header';
+import { Container } from './components/presentational/Layout';
+
+import './App.style'
+
+class App extends React.Component {
+  public render() {
+    return (
+      <Provider store={store}>
+        <Router>
+          <Container>
+            <Header />
+            <section>
+            <Switch>
+              {ROUTES.map(({path, component, exact}) =>
+                <Route key={path} path={path} exact={exact} component={component} />)}
+              <Redirect to='/home' />
+            </Switch>
+            </section>
+          </Container>
+        </Router>
+      </Provider>
+    );
+  }
+}
+export default App;

src/actions/gifs.ts

@@ -0,0 +1,21 @@
+import { createAction } from 'redux-actions'
+
+export const FETCH_TRENDING   = 'FETCH_TRENDING';
+export const FETCHED_TRENDING = 'FETCHED_TRENDING';
+
+export const ADD_FAVORITE    = 'ADD_FAVORITE';
+export const REMOVE_FAVORITE = 'REMOVE_FAVORITE'
+export const TOGGLE_FAVORITE = 'TOGGLE_FAVORITE';
+
+export const SEARCH_TRENDING = 'SEARCH_TRENDING';
+
+export const FILTER_FAVS = 'FILTER_FAVS';
+
+export const fetch_gifs   = createAction(FETCH_TRENDING);
+export const fetched_gifs = createAction(FETCHED_TRENDING);
+
+export const toggle_favorite = createAction(TOGGLE_FAVORITE, (payload: any) => payload);
+
+export const search_trending = createAction(SEARCH_TRENDING, (payload: any) => payload);
+
+export const filter_favs = createAction(FILTER_FAVS, (payload: any) => payload);

src/api.ts

@@ -0,0 +1,22 @@
+import axios from 'axios';
+
+const API_URL = "https://api.giphy.com/v1/gifs";
+const API_KEY = process.env.REACT_APP_GIPHY_KEY;
+
+const API = axios.create({ baseURL: API_URL, params: { api_key: API_KEY } });
+
+export function getTrending() {
+    return API.get('/trending');
+}
+
+export function search(query: string) {
+    return API.get('/search', {
+        params: {
+            q: query,
+            limit: 25,
+            offset: 0,
+            rating: 'G',
+            lang: 'en'
+        }
+    });
+}

src/components/AppNav.style.ts

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { NavLink as RouterNavLink } from 'react-router-dom';
+
+export const StyledNav = styled.nav`
+    border-bottom: 1px solid #FC4349;
+    margin-bottom: 1em;
+    color: #6DBCDB;
+    font-weight: bold;
+
+    ul {
+        display: flex;
+        justify-content: space-around;
+        text-align: center;
+        align-items: center;
+        height: 3.5em;
+    }
+
+    li { flex: 1; }
+
+    a {
+        text-decoration: none;
+        color: inherit;
+        padding: 1em;
+    }
+`;
+
+export const NavLink = styled(RouterNavLink)`
+    &.active { color: #FC4349; }
+`

src/components/AppNav.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import ROUTES from '../routes';
+import Search from './Search';
+
+import { StyledNav, NavLink } from './AppNav.style'
+
+const LINKS = ROUTES.map(({path, content}) =>
+    <li key={path}><NavLink to={path}>{content}</NavLink></li>);
+
+class AppNav extends React.Component {
+    public render() {
+        return (<StyledNav>
+            <ul>
+                {LINKS}
+                <li><Search /></li>
+            </ul>
+        </StyledNav>);
+    }
+}
+
+export default AppNav;

src/components/FavsSearch.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch, bindActionCreators } from 'redux';
+
+import { filter_favs as filter_favs_action } from '../actions/gifs';
+import { SearchInput } from './Search.style';
+
+class FavsSearch extends React.Component<any> {
+    public onSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const term = event.target.value;
+        return this.props.filter_favs(term);
+    }
+
+    public render() {
+        return <SearchInput type='text'
+                onChange={this.onSearch}
+                placeholder='Search in your favorites...' />;
+    }
+}
+
+function mapDispatchToProps(dispatch: Dispatch) {
+    return bindActionCreators({
+        filter_favs: filter_favs_action,
+    }, dispatch);
+}
+export default connect(null, mapDispatchToProps)(FavsSearch);

src/components/FavsView.style.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const _div_search = styled.div`
+    width: 100%;
+    max-width: 320px;
+    margin: 0 auto;
+`;

src/components/FavsView.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { IGIF } from '../types';
+import GIFList from './presentational/GIFList';
+import {connect} from 'react-redux';
+import { Dispatch, bindActionCreators } from 'redux';
+import FavsSearch from './FavsSearch';
+
+import { _div_search } from './FavsView.style'
+
+interface IFavsViewProps {
+    gifs: IGIF[]
+}
+
+export const FavsView = (props: IFavsViewProps) => {
+    return (<div>
+        <h1 className="center">Your favorite GIFS</h1>
+        <_div_search>
+            <FavsSearch />
+        </_div_search>
+        <GIFList gifs={props.gifs} />
+    </div>);
+}
+
+function filterFavs(favs: object, query: string) {
+    const gifs = Object.keys(favs).map(key => favs[key]);
+
+    // Don't filter if there is no query term
+    if (!query || query.length === 0) return gifs;
+
+    return gifs.filter((gif: IGIF) => gif.title.includes(query));
+}
+
+function mapStateToProps(state: any) {
+    return { gifs: filterFavs(state.favs, state.filter_favs) }
+}
+export default connect(mapStateToProps)(FavsView);