update#37 add types

Author: GrayStrider

app/components/List/index.tsx

@@ -2,10 +2,12 @@ import * as React from 'react';
 
 import Ul from './Ul';
 import Wrapper from './Wrapper';
+import { Repo } from '../../containers/RepoListItem/types';
+import { UserData } from '../../containers/App/types';
 
 interface Props {
-  component: any;
-  items?: any[];
+  component: React.ComponentType<any>;
+  items?: UserData['repos'];
 }
 
 function List(props: Props) {
@@ -29,4 +31,5 @@ function List(props: Props) {
   );
 }
 
+const items: UserData['repos'] = [];
 export default List;

app/components/List/tests/index.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import List from '../index';
+import { Repo } from '../../../containers/RepoListItem/types';
 
 describe('<List />', () => {
   it('should render the passed component if no items are passed', () => {
@@ -11,7 +12,7 @@ describe('<List />', () => {
   });
 
   it('should pass all items props to rendered component', () => {
-    const items = [{ id: 1, name: 'Hello' }, { id: 2, name: 'World' }];
+    const items = [{ id: 1, name: 'Hello' }, { id: 2, name: 'World' }]  as Repo[];
 
     const component = ({ item }) => <li>{item.name}</li>;
 
@@ -20,7 +21,7 @@ describe('<List />', () => {
     );
     const elements = container.querySelectorAll('li');
     expect(elements).toHaveLength(2);
-    expect(queryByText(items[0].name)).toBeInTheDocument();
-    expect(queryByText(items[1].name)).toBeInTheDocument();
+    expect(queryByText(items[0].name!)).toBeInTheDocument();
+    expect(queryByText(items[1].name!)).toBeInTheDocument();
   });
 });

app/components/ReposList/index.tsx

@@ -4,16 +4,15 @@ import List from 'components/List';
 import ListItem from 'components/ListItem';
 import LoadingIndicator from 'components/LoadingIndicator';
 import RepoListItem from 'containers/RepoListItem';
+import { ContainerState, UserData } from '../../containers/App/types';
 
-function ReposList({
-  loading,
-  error,
-  repos,
-}: {
-  loading?: boolean;
-  error?: any;
-  repos?: any;
-}) {
+interface Props {
+  loading?: ContainerState['loading'];
+  error?: ContainerState['error'];
+  repos?: UserData['repos'];
+}
+
+function ReposList({ loading, error, repos }: Props) {
   if (loading) {
     return <List component={LoadingIndicator} />;
   }
@@ -24,7 +23,7 @@ function ReposList({
     );
     return <List component={ErrorComponent} />;
   }
-  if (repos !== false) {
+  if (repos !== undefined) {
     return <List items={repos} component={RepoListItem} />;
   }
 

app/components/ReposList/tests/index.test.tsx

@@ -6,6 +6,7 @@ import { render } from '@testing-library/react';
 import ReposList from '../index';
 import configureStore from '../../../configureStore';
 import history from '../../../utils/history';
+import { Repo } from '../../../containers/RepoListItem/types';
 
 describe('<ReposList />', () => {
   it('should render the loading indicator when its loading', () => {
@@ -31,7 +32,7 @@ describe('<ReposList />', () => {
         error: false,
         loading: false,
         userData: {
-          repositories: false,
+          repos: false,
         },
       },
     };
@@ -49,7 +50,7 @@ describe('<ReposList />', () => {
         open_issues_count: 20,
         full_name: 'react-boilerplate/react-boilerplate',
       },
-    ];
+    ] as Repo[];
     const { container } = render(
       // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
@@ -64,7 +65,7 @@ describe('<ReposList />', () => {
 
   it('should not render anything if nothing interesting is provided', () => {
     const { container } = render(
-      <ReposList repos={false} error={false} loading={false} />,
+      <ReposList repos={undefined} error={false} loading={false} />,
     );
 
     expect(container).toBeEmpty();

app/containers/App/reducer.ts

@@ -7,7 +7,7 @@ export const initialState: ContainerState = {
   error: false,
   currentUser: '',
   userData: {
-    repositories: [],
+    repos: [],
   },
 };
 
@@ -23,7 +23,7 @@ function appReducer(
         loading: true,
         error: false,
         userData: {
-          repositories: [],
+          repos: [],
         },
       };
     case ActionTypes.LOAD_REPOS_SUCCESS:
@@ -32,7 +32,7 @@ function appReducer(
         loading: false,
         error: state.error,
         userData: {
-          repositories: action.payload.repos,
+          repos: action.payload.repos,
         },
       };
     case ActionTypes.LOAD_REPOS_ERROR:

app/containers/App/selectors.ts

@@ -24,7 +24,7 @@ const makeSelectError = () =>
 
 const makeSelectRepos = () =>
   createSelector(selectGlobal, globalState =>
-    globalState.userData.repositories);
+    globalState.userData.repos);
 
 const makeSelectLocation = () =>
   createSelector(selectRoute, routeState => routeState.location);

app/containers/App/tests/reducer.test.ts

@@ -11,7 +11,7 @@ describe('appReducer', () => {
       error: false,
       currentUser: '',
       userData: {
-        repositories: [],
+        repos: [],
       },
     };
   });
@@ -27,7 +27,7 @@ describe('appReducer', () => {
       loading: true,
       error: false,
       userData: {
-        repositories: [],
+        repos: [],
       },
     };
     expect(appReducer(state, loadRepos())).toEqual(expectedResult);
@@ -45,7 +45,7 @@ describe('appReducer', () => {
       loading: false,
       error: false,
       userData: {
-        repositories: fixture,
+        repos: fixture,
       },
     };
     expect(appReducer(state, reposLoaded(fixture, username))).toEqual(
@@ -63,7 +63,7 @@ describe('appReducer', () => {
       error: fixture,
       loading: false,
       userData: {
-        repositories: [],
+        repos: [],
       },
     };
 

app/containers/App/tests/selectors.test.ts

@@ -6,13 +6,16 @@ import {
   makeSelectRepos,
   makeSelectLocation,
 } from '../selectors';
+import { ApplicationRootState } from '../../../types';
+import { Repo } from '../../RepoListItem/types';
 
 describe('selectGlobal', () => {
   it('should select the global state', () => {
-    const globalState = {} as any;
-    const mockedState: any = {
+    const globalState = {};
+    // tslint:disable-next-line:no-object-literal-type-assertion
+    const mockedState = {
       global: globalState,
-    };
+    } as ApplicationRootState;
     expect(selectGlobal(mockedState)).toEqual(globalState);
   });
 });
@@ -21,11 +24,12 @@ describe('makeSelectCurrentUser', () => {
   it('should select the current user', () => {
     const currentUserSelector = makeSelectCurrentUser();
     const username = 'mxstbr';
-    const mockedState: any = {
+    // tslint:disable-next-line:no-object-literal-type-assertion
+    const mockedState = {
       global: {
         currentUser: username,
       },
-    };
+    } as ApplicationRootState;
     expect(currentUserSelector(mockedState)).toEqual(username);
   });
 });
@@ -59,15 +63,16 @@ describe('makeSelectError', () => {
 describe('makeSelectRepos', () => {
   it('should select the repos', () => {
     const reposSelector = makeSelectRepos();
-    const repositories: any[] = [];
-    const mockedState: any = {
+    const repos: Repo[] = [];
+    // tslint:disable-next-line:no-object-literal-type-assertion
+    const mockedState = {
       global: {
         userData: {
-          repositories,
+          repos: repos,
         },
       },
-    };
-    expect(reposSelector(mockedState)).toEqual(repositories);
+    } as ApplicationRootState;
+    expect(reposSelector(mockedState)).toEqual(repos);
   });
 });
 

app/containers/App/types.d.ts

@@ -1,18 +1,19 @@
 import { ActionType } from 'typesafe-actions';
 import * as actions from './actions';
 import { ApplicationRootState } from 'types';
+import { Repo } from '../RepoListItem/types';
 
 /* --- STATE --- */
 
 interface AppState {
   readonly loading: boolean;
-  readonly error: object | boolean;
+  readonly error?: object | boolean;
   readonly currentUser: string;
   readonly userData: UserData;
 }
 
 interface UserData {
-  readonly repositories: object[] | boolean; // too many fields. Won't declare them all
+  readonly repos?: Repo[]; // too many fields. Won't declare them all
 }
 
 
@@ -26,4 +27,4 @@ type RootState = ApplicationRootState;
 type ContainerState = AppState;
 type ContainerActions = AppActions;
 
-export { RootState, ContainerState, ContainerActions };
+export { RootState, ContainerState, ContainerActions, UserData };

app/containers/RepoListItem/tests/index.test.tsx

@@ -18,7 +18,7 @@ const renderComponent = (item, currentUser) => {
       error: false,
       loading: false,
       userData: {
-        repositories: false,
+        repos: false,
       },
     },
   };