feat(aws): lambda / api gateway endpoint integration

README.md

@@ -16,3 +16,7 @@ This will also generate a instanbul coverage report in the terminal as well as a
 - `yarn test:ci`
 - This package script could be ran as a git hook on the CI/CD build pipeline
 - This will output a mocha-junit-reporter xml file
+
+### AWS LAMBDA and API GATEWAY URL
+
+- https://b6al1lpjff.execute-api.us-east-2.amazonaws.com/users

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback } from 'react';
 
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -19,15 +19,18 @@ import EditableCell from './components/EditableCell';
 function App() {
   const tableData = useSelector((state) => state.table.data);
   const loading = useSelector((state) => state.table.loading);
+  const region = useSelector((state) => state.table.region);
+  const runtime = useSelector((state) => state.table.runtime);
 
   const dispatch = useDispatch();
 
-  useEffect(() => {
-    dispatch(getTableDataFromAPI() as any);
-  }, []);
+  const getUsers = useCallback(() => dispatch(getTableDataFromAPI() as any), []);
 
   return (
     <Container fixed>
+      <button onClick={getUsers}>Get Users</button>
+      {region && <div className='aws'>Region: {region}</div>}
+      {runtime && <div className='aws'>Runtime: {runtime}</div>}
       <TableContainer component={Paper}>
         <Fade in={loading}>
           <LinearProgress />

src/redux/actions/table.ts

@@ -8,11 +8,12 @@ export const getTableDataFromAPI = (): TThunkActions => {
     dispatch({ type: 'SET_LOADING', value: true });
 
     try {
-      const response = await axios.get('https://jsonplaceholder.typicode.com/users');
+      const response = await axios.get('https://b6al1lpjff.execute-api.us-east-2.amazonaws.com/users');
 
-      const data = mapTableData(response.data);
+      const data = mapTableData(response.data.data);
 
       dispatch({ type: 'SET_DATA', value: data });
+      dispatch({ type: 'SET_META', value: { region: response.data.region, runtime: response.data.runtime } });
     } catch (error) {
       dispatch({ type: 'SET_ERROR', value: error.message });
     } finally {

src/redux/reducers/table.ts

@@ -2,6 +2,8 @@ const initialState: ITableState = {
   data: [],
   loading: false,
   error: '',
+  region: '',
+  runtime: '',
 };
 
 export default function tableReducer(state: ITableState = initialState, action: TTableActions): ITableState {
@@ -21,6 +23,12 @@ export default function tableReducer(state: ITableState = initialState, action:
         ...state,
         data: action.value,
       };
+    case 'SET_META':
+      return {
+        ...state,
+        region: action.value.region,
+        runtime: action.value.runtime,
+      };
     case 'SET_LOADING':
       return {
         ...state,

src/type.d.ts

@@ -5,13 +5,23 @@ interface ITableState {
   data: ITableRow[];
   loading: boolean;
   error: string;
+  region: string;
+  runtime: string;
 }
 
 interface ITableSetData {
   type: 'SET_DATA';
   value: ITableState['data'];
 }
 
+interface ITableSetMeta {
+  type: 'SET_META';
+  value: {
+    region: string;
+    runtime: string;
+  };
+}
+
 interface ITableEditCell {
   type: 'EDIT_DATA';
   value: {
@@ -47,7 +57,13 @@ interface ITableRow {
 /**
  * Table Types
  */
-type TTableActions = ITableSetData | ITableEditCell | ITableSetError | ITableSetLoading | ITableUndefined;
+type TTableActions =
+  | ITableSetData
+  | ITableEditCell
+  | ITableSetError
+  | ITableSetLoading
+  | ITableSetMeta
+  | ITableUndefined;
 
 /**
  * Root Interfaces

test/components/App.test.tsx

@@ -13,6 +13,8 @@ import App from '../../src/App';
 
 const mockState = {
   table: {
+    region: 'region',
+    runtime: 'runtime',
     loading: false,
     error: '',
     data: [
@@ -50,4 +52,26 @@ describe('<App />', () => {
 
     expect(wrapper.find('input').length).to.equal(4);
   });
+
+  it('Component renders get users button', () => {
+    const store = mockStore(mockState);
+    const wrapper = mount(
+      <Provider store={store}>
+        <App />
+      </Provider>
+    );
+
+    expect(wrapper.find('button').length).to.equal(1);
+  });
+
+  it('Component renders get users button', () => {
+    const store = mockStore(mockState);
+    const wrapper = mount(
+      <Provider store={store}>
+        <App />
+      </Provider>
+    );
+
+    expect(wrapper.find('.aws').length).to.equal(2);
+  });
 });

test/redux/actions.test.tsx

@@ -16,7 +16,7 @@ const initialState = [
   },
 ];
 
-const apiURL = 'https://jsonplaceholder.typicode.com/users';
+const apiURL = 'https://b6al1lpjff.execute-api.us-east-2.amazonaws.com/users';
 const mock = new MockAdapter(axios);
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
@@ -30,11 +30,12 @@ describe('redux actions', () => {
     });
 
     it('fires appropriate events during api call', () => {
-      mock.onGet(apiURL).reply(200, initialState);
+      mock.onGet(apiURL).reply(200, { data: initialState, region: 'region', runtime: 'runtime' });
 
       const expectedActions = [
         { type: 'SET_LOADING', value: true },
         { type: 'SET_DATA', value: initialState },
+        { type: 'SET_META', value: { region: 'region', runtime: 'runtime' } },
         { type: 'SET_LOADING', value: false },
       ];
 

test/redux/reducer.test.tsx

@@ -7,6 +7,8 @@ const initialState: ITableState = {
   data: [],
   loading: false,
   error: '',
+  region: '',
+  runtime: '',
 };
 
 // fake data
@@ -65,6 +67,13 @@ describe('redux reducers', () => {
     expect(newState.data[2].name == 'sarah');
   });
 
+  it('handles the SET_META action', () => {
+    const newState = reducer(initialState, { type: 'SET_META', value: { region: 'region', runtime: 'runtime' } });
+
+    expect(newState.region).to.equal('region');
+    expect(newState.runtime).to.equal('runtime');
+  });
+
   it('handles the EDIT_DATA action correctly', () => {
     const newState = reducer(initialState, { type: 'SET_DATA', value: data });
     const editName = reducer(newState, { type: 'EDIT_DATA', value: { row: 0, field: 'name', value: 'edited' } });