|
| 1 | +import React, { useEffect, useMemo } from "react"; |
| 2 | +import { useAppDispatch, useAppSelector } from "src/redux/store"; |
| 3 | +import { useParams } from "react-router-dom"; |
| 4 | +import { Redirect } from "src/components/redirect"; |
| 5 | +import { fetchContributionAction } from "src/redux/actions/contribution"; |
| 6 | +import { Helmet } from "react-helmet-async"; |
| 7 | +import { Locale, useLocale } from "src/components/locale"; |
| 8 | +import { getContributionURL } from "src/utils/contribution"; |
| 9 | +import { Link } from "src/components/link"; |
| 10 | +import { TryAgain } from "src/components/try-again"; |
| 11 | +import { Loading } from "src/components/loading"; |
| 12 | +import { Markdown } from "src/components/markdown"; |
| 13 | +import { getElapsedTime } from "src/utils/elapsed-time"; |
| 14 | + |
| 15 | +// ts-prune-ignore-next |
| 16 | +export default function Page(): JSX.Element { |
| 17 | + const { localize } = useLocale(); |
| 18 | + const { contribution } = useAppSelector((state) => state.contributionPage); |
| 19 | + const dispatch = useAppDispatch(); |
| 20 | + const { "*": contributionSlug } = useParams<{ "*": string }>(); |
| 21 | + const contributionId = useMemo(() => { |
| 22 | + // slug: [title slug]-[id: [provider]-[number]] |
| 23 | + const id = contributionSlug?.split("-").slice(-2).join("-"); |
| 24 | + return id; |
| 25 | + }, [contributionSlug]); |
| 26 | + |
| 27 | + useEffect(() => { |
| 28 | + dispatch(fetchContributionAction(contributionId)); |
| 29 | + }, [dispatch, contributionId]); |
| 30 | + |
| 31 | + if (contribution === "404") { |
| 32 | + return <Redirect href="/contribute" />; |
| 33 | + } |
| 34 | + |
| 35 | + return ( |
| 36 | + <main className="flex flex-col self-center w-full max-w-7xl"> |
| 37 | + {contribution !== "ERROR" && contribution !== null ? ( |
| 38 | + <Helmet> |
| 39 | + <title> |
| 40 | + {localize("contribution-title-pre")} {contribution.title}{" "} |
| 41 | + {localize("contribution-title-post")} |
| 42 | + </title> |
| 43 | + <meta name="description" content={localize("contribute-description")} /> |
| 44 | + {/* @TODO-ZM: add canonical url on all pages */} |
| 45 | + <link rel="canonical" href={getContributionURL(contribution)} /> |
| 46 | + </Helmet> |
| 47 | + ) : null} |
| 48 | + <div className="breadcrumbs p-4"> |
| 49 | + <ul> |
| 50 | + <li> |
| 51 | + <Link className="link" href="/contribute"> |
| 52 | + <Locale contribution-breadcrumbs-1 /> |
| 53 | + </Link> |
| 54 | + </li> |
| 55 | + {contribution !== "ERROR" && contribution !== null ? <li>{contribution.title}</li> : null} |
| 56 | + </ul> |
| 57 | + </div> |
| 58 | + <div className="flex flex-col self-center w-full max-w-4xl"> |
| 59 | + {contribution === "ERROR" ? ( |
| 60 | + <TryAgain |
| 61 | + error={localize("global-generic-error")} |
| 62 | + action={localize("global-try-again")} |
| 63 | + onClick={() => { |
| 64 | + dispatch(fetchContributionAction(contributionId)); |
| 65 | + }} |
| 66 | + /> |
| 67 | + ) : contribution === null ? ( |
| 68 | + <Loading /> |
| 69 | + ) : ( |
| 70 | + <div className="flex flex-col gap-4 items-center p-4"> |
| 71 | + {/* TODO-ZM: more tailored design for /contribute/:slug page instead of copy-pasting components from /contribute */} |
| 72 | + <div |
| 73 | + dir="ltr" |
| 74 | + className="card card-compact bg-base-300 flex-auto w-full max-w-xs sm:max-w-sm" |
| 75 | + > |
| 76 | + <div className="card-body markdown"> |
| 77 | + <div className="card-body"> |
| 78 | + <h2 className="card-title"> |
| 79 | + <Markdown content={contribution.title} /> |
| 80 | + </h2> |
| 81 | + <span className="flex-1" /> |
| 82 | + <span className="card-normal">{contribution.repository.project.name}</span> |
| 83 | + <span className="card-normal"> |
| 84 | + {contribution.repository.owner}/{contribution.repository.name} |
| 85 | + </span> |
| 86 | + <div className="card-actions justify-end mt-4 gap-4"> |
| 87 | + <img |
| 88 | + className="w-6 h-6 rounded-full" |
| 89 | + src={contribution.contributor.avatarUrl} |
| 90 | + /> |
| 91 | + <div className="flex-1" /> |
| 92 | + {contribution.activityCount > 0 && ( |
| 93 | + <div className="flex flex-row"> |
| 94 | + <svg |
| 95 | + xmlns="http://www.w3.org/2000/svg" |
| 96 | + fill="none" |
| 97 | + viewBox="0 0 24 24" |
| 98 | + strokeWidth={1.5} |
| 99 | + stroke="currentColor" |
| 100 | + className="size-6" |
| 101 | + > |
| 102 | + <path |
| 103 | + strokeLinecap="round" |
| 104 | + strokeLinejoin="round" |
| 105 | + d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" |
| 106 | + /> |
| 107 | + </svg> |
| 108 | + <span className="">{contribution.activityCount}</span> |
| 109 | + </div> |
| 110 | + )} |
| 111 | + <div className="flex flex-row"> |
| 112 | + {getElapsedTime(contribution.updatedAt, localize("elapsed-time-suffixes"))} |
| 113 | + </div> |
| 114 | + <Link href={contribution.url} className="link"> |
| 115 | + {contribution.type === "ISSUE" |
| 116 | + ? localize("contribute-read-issue") |
| 117 | + : localize("contribute-review-changes")} |
| 118 | + </Link> |
| 119 | + </div> |
| 120 | + </div> |
| 121 | + </div> |
| 122 | + </div> |
| 123 | + </div> |
| 124 | + )} |
| 125 | + </div> |
| 126 | + </main> |
| 127 | + ); |
| 128 | +} |
0 commit comments