Update types (#45)

Update types

Author: Can-Sahin

app/components/List/index.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 
 import Ul from './Ul';
 import Wrapper from './Wrapper';
+import { Repo } from '../../containers/RepoListItem/types';
 
 interface Props {
-  component: any;
-  items?: any[];
+  component: React.ComponentType<any>;
+  items?: Repo[];
 }
 
 function List(props: Props) {

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,11 @@ 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;
-}) {
+export type ReposListProps = Pick<ContainerState, 'loading' | 'error'> & Pick<UserData, 'repos'>;
+
+function ReposList({ loading, error, repos }: ReposListProps) {
   if (loading) {
     return <List component={LoadingIndicator} />;
   }
@@ -24,7 +19,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,12 +50,12 @@ 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}>
         <IntlProvider locale="en">
-          <ReposList repos={repos} error={false} />
+          <ReposList repos={repos} error={false} loading={false}/>
         </IntlProvider>
       </Provider>,
     );
@@ -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/actions.ts

@@ -1,10 +1,10 @@
 import { action } from 'typesafe-actions';
-// import {} from './types';
 
 import ActionTypes from './constants';
+import { Repo } from '../RepoListItem/types';
 
 export const loadRepos = () => action(ActionTypes.LOAD_REPOS);
-export const reposLoaded = (repos: any[], username: string) =>
+export const reposLoaded = (repos: Repo[], username: string) =>
   action(ActionTypes.LOAD_REPOS_SUCCESS, { repos: repos, username: username });
 export const repoLoadingError = (error: object) =>
   action(ActionTypes.LOAD_REPOS_ERROR, error);

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/actions.test.ts

@@ -2,6 +2,7 @@ import ActionTypes from '../constants';
 
 import { loadRepos, reposLoaded, repoLoadingError } from '../actions';
 import { action } from 'typesafe-actions';
+import { Repo } from '../../RepoListItem/types';
 
 describe('App Actions', () => {
   describe('loadRepos', () => {
@@ -16,7 +17,7 @@ describe('App Actions', () => {
 
   describe('reposLoaded', () => {
     it('should return the correct type and the passed repos', () => {
-      const fixture = ['Test'];
+      const fixture = [{}] as Repo[];
       const username = 'test';
       const expectedResult = action(
         ActionTypes.LOAD_REPOS_SUCCESS,

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

@@ -1,6 +1,7 @@
 import appReducer from '../reducer';
 import { loadRepos, reposLoaded, repoLoadingError } from '../actions';
 import { ContainerState } from '../types';
+import { Repo } from '../../RepoListItem/types';
 
 describe('appReducer', () => {
   let state: ContainerState;
@@ -10,7 +11,7 @@ describe('appReducer', () => {
       error: false,
       currentUser: '',
       userData: {
-        repositories: [],
+        repos: [],
       },
     };
   });
@@ -26,7 +27,7 @@ describe('appReducer', () => {
       loading: true,
       error: false,
       userData: {
-        repositories: [],
+        repos: [],
       },
     };
     expect(appReducer(state, loadRepos())).toEqual(expectedResult);
@@ -37,14 +38,14 @@ describe('appReducer', () => {
       {
         name: 'My Repo',
       },
-    ];
+    ] as Repo[];
     const username = 'test';
     const expectedResult = {
       currentUser: username,
       loading: false,
       error: false,
       userData: {
-        repositories: fixture,
+        repos: fixture,
       },
     };
     expect(appReducer(state, reposLoaded(fixture, username))).toEqual(
@@ -62,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';
+import { ApplicationRootState } from '../../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[];
 }
 
 
@@ -26,4 +27,4 @@ type RootState = ApplicationRootState;
 type ContainerState = AppState;
 type ContainerActions = AppActions;
 
-export { RootState, ContainerState, ContainerActions };
+export { RootState, ContainerState, ContainerActions, UserData };

app/containers/HomePage/index.tsx

@@ -4,20 +4,15 @@
  * This is the first thing users see of our App, at the '/' route
  */
 
-import React, { useEffect, memo } from 'react';
+import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { FormattedMessage } from 'react-intl';
-import { connect, useSelector, useDispatch } from 'react-redux';
-import { compose, Dispatch } from 'redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 
 import { useInjectReducer } from 'utils/injectReducer';
 import { useInjectSaga } from 'utils/injectSaga';
-import {
-  makeSelectRepos,
-  makeSelectLoading,
-  makeSelectError,
-} from 'containers/App/selectors';
+import { makeSelectError, makeSelectLoading, makeSelectRepos } from 'containers/App/selectors';
 import H2 from 'components/H2';
 import ReposList from 'components/ReposList';
 import AtPrefix from './AtPrefix';

app/containers/HomePage/tests/saga.test.ts

@@ -8,6 +8,7 @@ import ActionTypes from 'containers/App/constants';
 import { reposLoaded, repoLoadingError } from 'containers/App/actions';
 
 import githubData, { getRepos } from '../saga';
+import { Repo } from '../../RepoListItem/types';
 
 const username = 'mxstbr';
 
@@ -34,7 +35,7 @@ describe('getRepos Saga', () => {
       {
         name: 'Second repo',
       },
-    ];
+    ] as Repo[];
     const putDescriptor = getReposGenerator.next(response).value;
     expect(putDescriptor).toEqual(put(reposLoaded(response, username)));
   });

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

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

app/utils.d.ts

@@ -1,24 +1,5 @@
-// declare module '*.css' {
-//   const content: string|any;
-//   export default content;
-// }
+declare module '*.svg';
 
-declare module '*.svg' {
-  const content: string | any;
-  export default content;
-}
+declare module '*.jpg';
 
-declare module '*.jpg' {
-  const content: string | any;
-  export default content;
-}
-
-declare module '*.png' {
-  const content: any;
-  export default content;
-}
-
-// declare module '*!raw' {
-//   const content: string|any;
-//   export default content;
-// }
+declare module '*.png';