diff --git a/src/containers/Common/containers/CommonDetailContainer/CommonDetailContainer.tsx b/src/containers/Common/containers/CommonDetailContainer/CommonDetailContainer.tsx index b885c135c6..76d94e6181 100644 --- a/src/containers/Common/containers/CommonDetailContainer/CommonDetailContainer.tsx +++ b/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 ; + return isCommonFetched ? : ; } const sharingURL = `${BASE_URL}${ROUTE_PATHS.COMMON_LIST}/${common.id}`; diff --git a/src/containers/Common/store/actions.tsx b/src/containers/Common/store/actions.tsx index fc9a7b6c9f..d101cb0a5d 100644 --- a/src/containers/Common/store/actions.tsx +++ b/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 -)(); +)< + PayloadWithOptionalCallback, + Common | null, + Error +>(); export const updatePage = createStandardAction( CommonsActionTypes.UPDATE_PAGE diff --git a/src/containers/Common/store/saga.tsx b/src/containers/Common/store/saga.tsx index 9c0a97fc02..dc1b2d06c7 100644 --- a/src/containers/Common/store/saga.tsx +++ b/src/containers/Common/store/saga.tsx @@ -34,25 +34,32 @@ export function* getCommonsList(): Generator { } } -export function* getCommonDetail( - action: ReturnType -): Generator { +export function* getCommonDetail({ + payload, +}: ReturnType): 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()); } } diff --git a/src/shared/components/NotFound.tsx b/src/shared/components/NotFound.tsx deleted file mode 100755 index e7fcc5956d..0000000000 --- a/src/shared/components/NotFound.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; - -const NotFound = () =>

not found

; - -export default NotFound; diff --git a/src/shared/components/NotFound/NotFound.tsx b/src/shared/components/NotFound/NotFound.tsx new file mode 100644 index 0000000000..7650fcb36f --- /dev/null +++ b/src/shared/components/NotFound/NotFound.tsx @@ -0,0 +1,11 @@ +import React, { FC } from "react"; +import "./index.scss"; + +const NotFound: FC = () => ( +
+ 404 +

This page could not be found.

+
+); + +export default NotFound; diff --git a/src/shared/components/NotFound/index.scss b/src/shared/components/NotFound/index.scss new file mode 100644 index 0000000000..52cf800fda --- /dev/null +++ b/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; + } +} diff --git a/src/shared/components/NotFound/index.ts b/src/shared/components/NotFound/index.ts new file mode 100644 index 0000000000..cd9562ee55 --- /dev/null +++ b/src/shared/components/NotFound/index.ts @@ -0,0 +1 @@ +export { default as NotFound } from "./NotFound"; diff --git a/src/shared/components/index.tsx b/src/shared/components/index.tsx index 4a6f59c689..fe28ff27b9 100644 --- a/src/shared/components/index.tsx +++ b/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";