Merge pull request #228 from NurElHuda/107-handle-article-not-found

* article not found handeling.

Author: ZibanPirate

frontend/src/apps/main/entry/index.tsx

@@ -1,13 +1,7 @@
 import "./style";
 import "react-toastify/dist/ReactToastify.css";
-import {
-  BrowserRouter,
-  Redirect,
-  Route,
-  Switch,
-  useLocation,
-} from "react-router-dom";
 import React, { Suspense, lazy } from "react";
+import { Route, Router, Switch, useLocation } from "react-router-dom";
 import Container from "@material-ui/core/Container";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import { Footer } from "t9/apps/main/components/footer";
@@ -17,6 +11,7 @@ import { Provider } from "react-redux";
 import { Theme } from "t9/apps/main/components/theme";
 import { ToastContainer } from "react-toastify";
 import { getEnv } from "src/common/utils";
+import { history } from "src/common/utils/history";
 import { mainStore } from "t9/apps/main/redux";
 import { makeStyles } from "@material-ui/core/styles";
 import { render } from "react-dom";
@@ -86,9 +81,9 @@ export const App = () => {
 
 render(
   <Provider store={mainStore}>
-    <BrowserRouter>
+    <Router history={history}>
       <App />
-    </BrowserRouter>
+    </Router>
   </Provider>,
   document.getElementById("app-container"),
 );

frontend/src/apps/main/redux/actions/articles-page/index.ts

@@ -5,6 +5,7 @@ import { Dispatch } from "react";
 import { actionType } from "../../constants";
 import { fullstackConfig } from "src/config";
 import { hasInCollection } from "src/common/utils";
+import { history } from "src/common/utils/history";
 import { listToTree } from "l2t";
 
 const dataURL = fullstackConfig.data.url;
@@ -49,6 +50,7 @@ export const fetchCurrentArticle = () => async (
   const articleSlug = location.pathname
     .substring(location.pathname.indexOf("/", 1) + 1)
     .replace(/\/$/, "");
+
   const cashedArticle = hasInCollection<Article>(
     getState().articles,
     "slug",
@@ -63,14 +65,21 @@ export const fetchCurrentArticle = () => async (
     });
   } else {
     // BUG: cashing not working in local (slug related issue)
+
     dispatch({
       type: actionType.UPDATE_ARTICLES_PAGE,
       payload: { currentArticle: null },
     });
+
     try {
       const response = await Axios.get(
         dataURL + `/articles/${articleSlug}.json`,
       );
+
+      if (response.data.hasOwnProperty("error")) {
+        throw Error("article_not_found");
+      }
+
       const currentArticle = response.data;
       // update our page state
       dispatch({
@@ -83,7 +92,9 @@ export const fetchCurrentArticle = () => async (
         payload: [currentArticle],
       });
     } catch (error) {
-      console.error(error);
+      if (error.message == "article_not_found") {
+        history.push("/Articles");
+      }
     }
   }
 };

frontend/src/common/utils/history.ts

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from "history";
+
+export const history = createBrowserHistory();