CW-280 - Not found page

src/containers/Common/containers/CommonDetailContainer/CommonDetailContainer.tsx

@@ -3,7 +3,12 @@ import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import classNames from "classnames";
 
-import { Loader, Share, UserAvatar } from "../../../../shared/components";
+import {
+  Loader,
+  NotFound,
+  Share,
+  UserAvatar,
+} from "../../../../shared/components";
 import { Modal } from "../../../../shared/components/Modal";
 import {
   useAuthorizedModal,
@@ -31,7 +36,6 @@ import {
 } from "../../components/CommonDetailContainer";
 import { MembershipRequestModal } from "../../components/CommonDetailContainer/MembershipRequestModal";
 import { ProposalDetailModal } from "../../components/CommonDetailContainer/ProposalDetailModal";
-import "./index.scss";
 import {
   BASE_URL,
   Colors,
@@ -60,6 +64,7 @@ import {
 } from "../../store/actions";
 import CheckIcon from "../../../../shared/icons/check.icon";
 import { selectUser } from "../../../Auth/store/selectors";
+import "./index.scss";
 
 interface CommonDetailRouterParams {
   id: string;
@@ -99,6 +104,7 @@ export default function CommonDetail() {
   const [tab, setTab] = useState("about");
   const [imageError, setImageError] = useState(false);
   const [isCreationStageReached, setIsCreationStageReached] = useState(false);
+  const [isCommonFetched, setIsCommonFetched] = useState(false);
 
   const common = useSelector(selectCommonDetail());
   const currentDisscussion = useSelector(selectCurrentDisscussion());
@@ -159,7 +165,14 @@ export default function CommonDetail() {
   const isMobileView = screenSize === ScreenSize.Mobile;
 
   useEffect(() => {
-    dispatch(getCommonDetail.request(id));
+    dispatch(
+      getCommonDetail.request({
+        payload: id,
+        callback: () => {
+          setIsCommonFetched(true);
+        },
+      })
+    );
     return () => {
       dispatch(closeCurrentCommon());
     };
@@ -349,7 +362,7 @@ export default function CommonDetail() {
   }, [showJoinModal, shouldAllowJoiningToCommon, closeJoinModal]);
 
   if (!common) {
-    return <Loader />;
+    return isCommonFetched ? <NotFound /> : <Loader />;
   }
 
   const sharingURL = `${BASE_URL}${ROUTE_PATHS.COMMON_LIST}/${common.id}`;

src/containers/Common/store/actions.tsx

@@ -1,5 +1,6 @@
 import { createAsyncAction, createStandardAction } from "typesafe-actions";
 
+import { PayloadWithOptionalCallback } from "../../../shared/interfaces";
 import { ProposalJoinRequestData } from "../../../shared/interfaces/api/proposal";
 import { Common, Proposal, Discussion } from "../../../shared/models";
 import { CommonsActionTypes } from "./constants";
@@ -14,7 +15,11 @@ export const getCommonDetail = createAsyncAction(
   CommonsActionTypes.GET_COMMON_DETAIL,
   CommonsActionTypes.GET_COMMON_DETAIL_SUCCESS,
   CommonsActionTypes.GET_COMMON_DETAIL_FAILURE
-)<string, Common | null, Error>();
+)<
+  PayloadWithOptionalCallback<string, Common | null, Error>,
+  Common | null,
+  Error
+>();
 
 export const updatePage = createStandardAction(
   CommonsActionTypes.UPDATE_PAGE

src/containers/Common/store/saga.tsx

@@ -34,25 +34,32 @@ export function* getCommonsList(): Generator {
   }
 }
 
-export function* getCommonDetail(
-  action: ReturnType<typeof actions.getCommonDetail.request>
-): Generator {
+export function* getCommonDetail({
+  payload,
+}: ReturnType<typeof actions.getCommonDetail.request>): Generator {
   try {
     yield put(startLoading());
-    const common = yield call(fetchCommonDetail, action.payload);
+    const common = (yield call(fetchCommonDetail, payload.payload)) as Common;
 
     const [discussions, proposals] = (yield Promise.all([
-      fetchCommonDiscussions((common as Common).id),
-      fetchCommonProposals((common as Common).id),
+      fetchCommonDiscussions(common.id),
+      fetchCommonProposals(common.id),
     ])) as any[];
 
-    yield put(actions.getCommonDetail.success(common as Common));
+    yield put(actions.getCommonDetail.success(common));
     yield put(actions.setDiscussion(discussions));
     yield put(actions.setProposals(proposals));
 
-    yield put(stopLoading());
+    if (payload.callback) {
+      payload.callback(null, common);
+    }
   } catch (e) {
     yield put(actions.getCommonDetail.failure(e));
+
+    if (payload.callback) {
+      payload.callback(e);
+    }
+  } finally {
     yield put(stopLoading());
   }
 }

src/shared/components/NotFound/NotFound.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from "react";
+import "./index.scss";
+
+const NotFound: FC = () => (
+  <div className="page-not-found">
+    <span className="page-not-found__code">404</span>
+    <h3 className="page-not-found__message">This page could not be found.</h3>
+  </div>
+);
+
+export default NotFound;

src/shared/components/NotFound/index.scss

@@ -0,0 +1,27 @@
+@import "../../../constants";
+@import "../../../styles/sizes";
+
+.page-not-found {
+  margin-top: 4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $secondary-blue;
+
+  .page-not-found__code {
+    padding: 0.5rem 1.5rem 0.5rem 0;
+    font-size: $moderate-med;
+    font-weight: bold;
+    border-right: 2px solid $light-gray-3;
+  }
+
+  .page-not-found__message {
+    margin: 0 0 0 1.5rem;
+    font-size: $small;
+    font-weight: normal;
+  }
+
+  @include big-phone {
+    margin-top: 2.5rem;
+  }
+}

src/shared/components/NotFound/index.ts

@@ -0,0 +1 @@
+export { default as NotFound } from "./NotFound";

src/shared/components/index.tsx

@@ -4,7 +4,7 @@ export * from "./ButtonLink";
 export * from "./Common";
 export { default as Content } from "./Content";
 export * from "./FilesCarousel";
-export { default as NotFound } from "./NotFound";
+export * from "./NotFound";
 export * from "./SocialLogin";
 export * from "./Footer";
 export * from "./Header";