fix: makeRequest never dispatch error even if api res status is error

Author: paibamboo

src/app/containers/StarsPage.test.tsx

@@ -6,12 +6,12 @@ import {mapStateToProps, UnconnectedStars} from "./StarsPage";
 
 describe("<Stars />", () => {
   it("matches snapshot when rendering stars", () => {
-    const component = shallow(<UnconnectedStars isFetching={false} stargazers_count={61} dispatch={jest.fn()} />);
+    const component = shallow(<UnconnectedStars isFetching={false} stargazersCount={61} dispatch={jest.fn()} />);
     expect(component).toMatchSnapshot();
   });
 
   it("matches snapshot when rendering fetching text", () => {
-    const component = shallow(<UnconnectedStars isFetching={true} stargazers_count={-1} dispatch={jest.fn()} />);
+    const component = shallow(<UnconnectedStars isFetching={true} stargazersCount={-1} dispatch={jest.fn()} />);
     expect(component).toMatchSnapshot();
   });
 
@@ -23,22 +23,22 @@ describe("<Stars />", () => {
       }
     };
     const props = mapStateToProps({stars});
-    expect(props).toEqual({isFetching: false, stargazers_count: 100});
+    expect(props).toEqual({errorMessage: undefined, isFetching: false, stargazersCount: 100});
   });
 
-  it("dispatches LOAD_STARS action before rendering if stargazers_count === -1", () => {
+  it("dispatches LOAD_STARS action before rendering if stargazersCount === -1", () => {
     const dispatch = jest.fn();
     const expectedValue: IAction<IStars> = {
       type: LOAD_STARS
     };
     expect(dispatch).not.toHaveBeenCalled();
-    shallow(<UnconnectedStars dispatch={dispatch} isFetching={false} stargazers_count={-1}/>);
+    shallow(<UnconnectedStars dispatch={dispatch} isFetching={false} stargazersCount={-1}/>);
     expect(dispatch).toHaveBeenCalledWith(expectedValue);
   });
 
-  it("does not dispatch LOAD_STARS action before rendering if stargazers_count !== -1", () => {
+  it("does not dispatch LOAD_STARS action before rendering if stargazersCount !== -1", () => {
     const dispatch = jest.fn();
-    shallow(<UnconnectedStars dispatch={dispatch} isFetching={false} stargazers_count={10}/>);
+    shallow(<UnconnectedStars dispatch={dispatch} isFetching={false} stargazersCount={10}/>);
     expect(dispatch).not.toHaveBeenCalled();
   });
 });

src/app/containers/StarsPage.tsx

@@ -7,29 +7,39 @@ import {loadStars} from "../redux/modules/starsModule";
 
 class StarsPage extends React.Component<IStateToProps & IDispatchToProps> {
   public componentWillMount(): void {
-    if (this.props.stargazers_count === -1) {
+    if (this.props.stargazersCount === -1) {
       this.props.dispatch(loadStars());
     }
   }
 
   public render(): JSX.Element {
-    const {isFetching, stargazers_count} = this.props;
     return (
       <div>
-        {isFetching ? <FormattedMessage id="stars.fetching" defaultMessage="Fetching Stars.." /> : stargazers_count}
+        {this.renderStars()}
       </div>
     );
   }
+
+  private renderStars(): JSX.Element | string | number {
+    const {errorMessage, isFetching, stargazersCount} = this.props;
+    if (isFetching) {
+      return <FormattedMessage id="stars.fetching" defaultMessage="Fetching Stars.." />;
+    } else {
+      return errorMessage ? errorMessage : stargazersCount;
+    }
+  }
 }
 
 interface IStateToProps {
   isFetching: boolean;
-  stargazers_count: number;
+  stargazersCount: number;
+  errorMessage?: string;
 }
 
 const mapStateToProps = (state: Pick<IStore, "stars">) => ({
+  errorMessage: state.stars.message,
   isFetching: state.stars.isFetching,
-  stargazers_count: state.stars.payload.stargazers_count
+  stargazersCount: state.stars.payload.stargazers_count
 });
 const connectedStars = connect<IStateToProps, IDispatchToProps>(mapStateToProps)(StarsPage);
 export {StarsPage as UnconnectedStars, connectedStars as StarsPage, mapStateToProps};

src/app/sagas/dummyApi.ts

@@ -5,8 +5,13 @@ import {IStars} from "../redux/modules/starsModule";
 // tslint:disable:no-http-string
 
 export const dummyApi = {
-  getStars: (): Promise<IStars> => {
-    return fetch("https://api.github.com/repos/barbar/vortigern").then((res) => res.json());
+  getStars: (): Promise<IStars | {error: string}> => {
+    return fetch("https://api.github.com/repos/barbar/vortigern").then((res) => {
+      if (res.ok) {
+        return res.json();
+      }
+      return res.json().then((json) => ({error: json.message}));
+    });
   },
   getTranslations: (payload: string): Promise<ISettings> => {
     return fetch(`http://localhost:8889/translation/${payload}`).then((res) => res.json());

src/app/sagas/makeRequest.test.ts

@@ -3,34 +3,46 @@ import makeRequest from "./makeRequest";
 
 describe("makeRequest", () => {
   const promiseFunction = () => Promise.resolve("success!");
-  const gen = makeRequest(
-    {
-      FULFILLED: "FULFILLED_ACTION",
-      PENDING: "PENDING_ACTION",
-      REJECTED: "REJECTED_ACTION"
-    },
-    promiseFunction,
-    "arg1",
-    "arg2"
-  );
+  let gen;
+
+  beforeEach(() => {
+    gen = makeRequest(
+      {
+        FULFILLED: "FULFILLED_ACTION",
+        PENDING: "PENDING_ACTION",
+        REJECTED: "REJECTED_ACTION"
+      },
+      promiseFunction,
+      "arg1",
+      "arg2"
+    );
+  });
 
   it("must dispatch actionPending", () => {
     expect(gen.next().value).toEqual(put({type: "PENDING_ACTION"}));
   });
 
   it("must call apiMethod with correct arguments", () => {
+    gen.next();
     expect(gen.next().value).toEqual(call(promiseFunction, "arg1", "arg2", undefined, undefined, undefined, undefined));
   });
 
-  it("must dispatch actionSuccess if promise is resolved", () => {
+  it("must dispatch actionSuccess", () => {
+    gen.next();
+    gen.next();
     expect(gen.next("data").value).toEqual(put({type: "FULFILLED_ACTION", payload: "data"}));
   });
 
-  it("must dispatch actionFailure if promise is rejected", () => {
-    expect(gen.throw({message: "error!"}).value).toEqual(put({type: "REJECTED_ACTION", message: "error!"}));
+  it("must dispatch actionFailure ", () => {
+    gen.next();
+    gen.next();
+    expect(gen.next({error: "error!"}).value).toEqual(put({type: "REJECTED_ACTION", message: "error!"}));
   });
 
   it("must be done", () => {
+    gen.next();
+    gen.next();
+    gen.next("data");
     expect(gen.next()).toEqual({done: true, value: undefined});
   });
 });

src/app/sagas/makeRequest.ts

@@ -4,12 +4,12 @@ import {IPromiseActions} from "../helpers/promiseReducer";
 
 // tslint:disable:max-line-length
 export default function* makeRequest(requestType: IPromiseActions, apiMethod: (payload: any) => Promise<any>, ...args: any[]): IterableIterator<PutEffect<Action> | CallEffect> {
-  try {
-    yield put({type: requestType.PENDING});
-    const [arg0, arg1, arg2, arg3, arg4, arg5, ...rest] = args; // we do this because of redux saga typing limitation
-    const payload = yield call(apiMethod, arg0, arg1, arg2, arg3, arg4, arg5, ...rest);
+  yield put({type: requestType.PENDING});
+  const [arg0, arg1, arg2, arg3, arg4, arg5, ...rest] = args; // we do this because of redux saga typing limitation
+  const payload = yield call(apiMethod, arg0, arg1, arg2, arg3, arg4, arg5, ...rest);
+  if (payload.error) {
+    yield put({type: requestType.REJECTED, message: payload.error});
+  } else {
     yield put({type: requestType.FULFILLED, payload});
-  } catch (e) {
-    yield put({type: requestType.REJECTED, message: e.message});
   }
 }

src/server.tsx

@@ -66,7 +66,7 @@ app.get("*", (req, res) => {
       return;
     }
 
-    const languageHelper = new LanguageHelper(req.headers["accept-settings"]);
+    const languageHelper = new LanguageHelper(req.headers["accept-language"]);
     const store = configureStore(router, {
       router: {
         previousRoute: null,