3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-05-24 06:16:25 +02:00
Code Issues Projects Releases Packages Wiki Activity

Linkify comments

Browse source
This commit is contained in:
Luke Vella 2022-04-14 18:38:48 +01:00
parent 9069811286
commit 210d2555f3
3 changed files with 20 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

5
components/discussion/discussion.tsx
View file

@ -18,6 +18,7 @@ import Dropdown, { DropdownItem } from "../dropdown";
import DotsHorizontal from "../icons/dots-horizontal.svg"; import DotsHorizontal from "../icons/dots-horizontal.svg";
import Trash from "../icons/trash.svg"; import Trash from "../icons/trash.svg";
import NameInput from "../name-input"; import NameInput from "../name-input";
import TruncatedLinkify from "../poll/truncated-linkify";
import UserAvater from "../poll/user-avatar"; import UserAvater from "../poll/user-avatar";
import { useUserName } from "../user-name-context"; import { useUserName } from "../user-name-context";
@ -82,7 +83,9 @@ const Comments: React.VoidFunctionComponent<{
</Dropdown> </Dropdown>
) : null} ) : null}
</div> </div>
<div className="w-fit whitespace-pre-wrap">{comment.content}</div> <div className="w-fit whitespace-pre-wrap">
<TruncatedLinkify>{comment.content}</TruncatedLinkify>
</div>
</Transition> </Transition>
</div> </div>
); );

13
components/poll/truncated-link.tsx → components/poll/truncated-linkify.tsx
View file

@ -1,7 +1,8 @@
import * as React from "react"; import * as React from "react";
import ReactLinkify from "react-linkify";
import Tooltip from "../tooltip"; import Tooltip from "../tooltip";
export const truncatedLink = (href: string, text: string, key: number) => { export const truncateLink = (href: string, text: string, key: number) => {
const textWithoutProtocol = text.replace(/^https?:\/\//i, ""); const textWithoutProtocol = text.replace(/^https?:\/\//i, "");
const beginningOfPath = textWithoutProtocol.indexOf("/"); const beginningOfPath = textWithoutProtocol.indexOf("/");
let finalText = textWithoutProtocol; let finalText = textWithoutProtocol;
@ -28,3 +29,13 @@ export const truncatedLink = (href: string, text: string, key: number) => {
); );
} }
}; };
const TruncatedLinkify: React.VoidFunctionComponent<{
children?: React.ReactNode;
}> = ({ children }) => {
return (
<ReactLinkify componentDecorator={truncateLink}>{children}</ReactLinkify>
);
};
export default TruncatedLinkify;

10
pages/poll.tsx
View file

@ -31,7 +31,7 @@ import { GetPollResponse } from "../api-client/get-poll";
import { getBrowserTimeZone } from "../utils/date-time-utils"; import { getBrowserTimeZone } from "../utils/date-time-utils";
import Custom404 from "./404"; import Custom404 from "./404";
import Linkify from "react-linkify"; import Linkify from "react-linkify";
import { truncatedLink } from "@/components/poll/truncated-link"; import TruncatedLinkify from "@/components/poll/truncated-linkify";
const Discussion = React.lazy(() => import("@/components/discussion")); const Discussion = React.lazy(() => import("@/components/discussion"));
@ -262,9 +262,9 @@ const PollPage: NextPage = () => {
</div> </div>
{poll.description ? ( {poll.description ? (
<div className="text-lg leading-relaxed max-w-2xl mb-4 whitespace-pre-line w-fit shadow-sm bg-white text-slate-600 rounded-xl px-4 py-3"> <div className="text-lg leading-relaxed max-w-2xl mb-4 whitespace-pre-line w-fit shadow-sm bg-white text-slate-600 rounded-xl px-4 py-3">
<Linkify componentDecorator={truncatedLink}> <TruncatedLinkify>
{preventWidows(poll.description)} {preventWidows(poll.description)}
</Linkify> </TruncatedLinkify>
</div> </div>
) : null} ) : null}
{poll.location ? ( {poll.location ? (
@ -275,9 +275,7 @@ const PollPage: NextPage = () => {
className="text-slate-400 mr-2" className="text-slate-400 mr-2"
/> />
</div> </div>
<Linkify componentDecorator={truncatedLink}> <TruncatedLinkify>{poll.location}</TruncatedLinkify>
{poll.location}
</Linkify>
</div> </div>
) : null} ) : null}
</div> </div>