@logora/debate 0.1.0 → 0.1.1

package/src/components/argument/argument/Argument.jsx

@@ -1,358 +0,0 @@
-import React, { Suspense, lazy, useEffect, useState, useCallback } from "react";
-import { useAuth } from "@logora/debate/auth/use_auth";
-import { useConfig } from '@logora/debate/data/config_provider';
-import { useIntl } from "react-intl";
-import { useTranslatedContent } from '@logora/debate/translation/translated_content';
-import { ContentHeader } from '@logora/debate/user_content/content_header';
-import { ReadMore } from '@logora/debate/text/read_more';
-import { Icon } from '@logora/debate/icons/icon';
-import { TranslationButton } from '@logora/debate/translation/translation_button';
-import { UserContentSkeleton } from '@logora/debate/skeleton/user_content_skeleton';
-import { AnnouncementDialog } from "@logora/debate/dialog/announcement_dialog";
-import { SourceListItem } from "@logora/debate/source/source_list_item";
-import { ContentFooter } from '@logora/debate/user_content/content_footer';
-import { VoteButton } from '@logora/debate/vote/vote_button';
-import { Button } from '@logora/debate/action/button';
-import { VotePaginatedList } from '@logora/debate/list/paginated_list';
-import { HashScroll } from '@logora/debate/tools/hash_scroll';
-import { ReplyFooter } from "./ReplyFooter";
-import { useRichContent } from "./useRichContent";
-import cx from "classnames";
-import styles from "./Argument.module.scss";
-const ArgumentInput = lazy(() => import('@logora/debate/input/argument_input'));
-import PropTypes from "prop-types";
-
-export const Argument = ({ argument, argumentReplies, nestingLevel = 0, groupType, groupName, positions = [], disableLinks = false, parentArgument, flashParent, expandable, disabled = false, hideFooter = false, hideReplies, vote, fixedContentHeight = false, enableEdition = true, enableDeletion = true, deleteListId, showModerationFeedback, lineCount = 5, replyRedirectUrl, hideContent = false }) => {
-	const intl = useIntl();
-	const { isLoggedIn, currentUser } = useAuth();
-	const userIsBanned = currentUser?.moderation_status === "banned";
-	const config = useConfig();
-
-
-
-	const [expandReplies, setExpandReplies] = useState(false);
-	const [flash, setFlash] = useState(false);
-	const [showReplyInput, setShowReplyInput] = useState(false);
-	const richContent = useRichContent(argument);
-	const [extraReplies, setExtraReplies] = useState();
-	const content = useTranslatedContent(argument.content, argument.language, "content", argument.translation_entries);
-	const position = useTranslatedContent(argument.position?.name, argument.position?.language, "name", argument.position?.translation_entries);
-	const componentId = `argument_${argument.id}`;
-	const positionIndex = argument.position && positions?.map((e) => e.id).indexOf(argument.position.id) + 1;
-
-	useEffect(() => {
-		if (argumentReplies !== undefined) { displayRepliesThread() }
-	}, [argumentReplies])
-
-	const scrollToArgument = (argumentId) => {
-		const currentArgumentId = componentId;
-		if (currentArgumentId === argumentId) {
-			const argumentElement = document.getElementById(argumentId);
-			if (argumentElement) {
-				argumentElement.scrollIntoView({ behavior: "smooth" });
-			}
-			setFlash(true);
-		}
-	};
-
-	const toggleReplyInput = () => {
-		setShowReplyInput(showReplyInput => !showReplyInput);
-	};
-
-	const toggleReplies = () => {
-		setExpandReplies(expandReplies => !expandReplies);
-		setExtraReplies([]);
-	}
-
-	const transformReplies = (reply) => {
-		if (extraReplies?.find(r => r.id === reply.id)) { return; }
-		return reply;
-	}
-
-	const displaySource = useCallback((source, index) => {
-		return <SourceListItem key={index} publisher={source.publisher} url={source.source_url} title={source.title} index={index} />;
-	}, [])
-
-	const displayRepliesThread = () => {
-		if (argumentReplies && Array.isArray(argumentReplies)) {
-			const filteredReplies = argumentReplies.filter((reply) => reply.reply_to_id === argument.id);
-			if (filteredReplies.length > 0) {
-				setExtraReplies(filteredReplies);
-				setExpandReplies(true);
-			}
-		}
-	};
-
-	const displayReply = (reply = null) => {
-		return (
-			<ArgumentContainer
-				{...(reply ? { argument: reply } : {})}
-				nestingLevel={nestingLevel + 1}
-				disabled={disabled}
-				groupName={groupName}
-				groupType={groupType}
-				positions={positions}
-				argumentReplies={argumentReplies}
-				parentArgument={argument}
-				flashParent={(argumentId) => scrollToArgument(`argument_${argumentId}`)}
-			/>
-		)
-	}
-
-	return (
-		<HashScroll elementId={componentId} onScroll={() => setFlash(true)}>
-			<div
-				className={cx(
-					styles.argument,
-					{
-						[styles.flash]: flash,
-						[styles.argumentReply]: argument.is_reply === true,
-					},
-					styles[`level-${nestingLevel}`],
-					styles[`position-${!(argument.author.role === "editor" || argument.author.role === "moderator") && positionIndex}`]
-				)}
-				id={componentId}
-			>
-				<ContentHeader
-					selectedContent={argument.score === 99}
-					author={argument.author}
-					tag={(argument.author.role === "editor" || argument.author.role === "moderator") && argument.is_reply ? null : position.translatedContent}
-					date={argument.created_at}
-					tagClassName={styles[`headerPosition-${positionIndex}`]}
-					disableLinks={disableLinks}
-					isDeleted={argument.is_deleted}
-					showModerationFeedback={showModerationFeedback ?? (argument.status === "rejected" && config.moderation?.showFeedback === true)}
-					moderationReason={argument.moderation_entry?.moderation_reason}
-					moderationNotes={argument.moderation_entry?.moderator_notes}
-					moderationPolicyUrl={config.provider?.userGuideUrl}
-				/>
-				{argument.is_deleted ? (
-					<div className={styles.argumentDeletedBody}>
-						{intl.formatMessage({
-							id: "info.deleted_by_user",
-							defaultMessage: "Content deleted by the user",
-						})}
-					</div>
-				) : hideContent ? (
-					<div className={styles.argumentDeletedBody}>
-						{intl.formatMessage({
-							id: "argument.argument.content_deleted",
-							defaultMessage: "This content has been removed.",
-						})}
-					</div>
-				) : (
-					<>
-						<div className={cx(styles.argumentBody, {
-							[styles.fixedHeight]: config?.layout?.showAllArgumentInEmbed !== true ? fixedContentHeight : false
-						})}>
-							{argument.is_reply && parentArgument && (
-								<div className={styles.replyTo} onClick={() => flashParent(parentArgument.id)}>
-									{intl.formatMessage({ id: "info.replying_to", defaultMessage: "Replying to" })}
-									<span className={styles.replyingTo}>
-										{parentArgument.is_deleted
-											? intl.formatMessage({ id: "info.deleted", defaultMessage: "Deleted" })
-											: parentArgument.author.full_name}
-										<Icon name="chat" height={16} />
-									</span>
-								</div>
-							)}
-
-							<ReadMore
-								content={
-									<>
-										{argument.is_edited && (
-											<div className={styles.edited}>
-												{intl.formatMessage({ id: "argument.argument.updated", defaultMessage: "Updated argument" })}
-											</div>
-										)}
-
-										{richContent && !content.isTranslated ? (
-											<div
-												className={styles.argumentContent}
-												dangerouslySetInnerHTML={{ __html: richContent }}
-											/>
-										) : (
-											<div className={styles.argumentContent}>
-												{content.translatedContent}
-											</div>
-										)}
-
-										{content.isTranslated && (
-											<TranslationButton
-												language={argument.language}
-												callback={() => content.toggleContent()}
-											/>
-										)}
-									</>
-								}
-								lineCount={config?.layout?.showAllArgumentInEmbed !== true ? lineCount : undefined}
-								readMoreText={intl.formatMessage({ id: "action.read_more", defaultMessage: "Read more" })}
-								readLessText={intl.formatMessage({ id: "action.read_less", defaultMessage: "Read less" })}
-								expandable={config?.layout?.showAllArgumentInEmbed !== true ? expandable : false}
-								readMoreClassName={argument.is_reply ? styles.replyStyle : styles.argumentStyle}
-							/>
-						</div>
-
-						{argument.sources?.length > 0 && (
-							<div className={styles.argumentSourcesList}>
-								{argument.sources.map(displaySource)}
-							</div>
-						)}
-					</>
-				)}
-
-				{!hideFooter && !argument.is_deleted &&
-					<ContentFooter
-						resource={argument}
-						disabled={disabled || argument.status === "rejected" || (!isLoggedIn && config?.actions?.disableInputForVisitor === true) || userIsBanned}
-						reportType={"Message"}
-						softDelete={config.actions?.softDelete}
-						deleteType={"messages"}
-						deleteListId={deleteListId}
-						enableReply={nestingLevel <= 2 || (currentUser.role === "editor" || currentUser.role === "moderator")}
-						handleReplyTo={toggleReplyInput}
-						replyRedirectUrl={replyRedirectUrl}
-						shareUrl={`https://app.logora.fr/share/a/${argument.id}`}
-						shareTitle={intl.formatMessage({ id: "share.argument.title", defaultMessage: "Share a debate" })}
-						shareText={intl.formatMessage({ id: "share.argument.text", defaultMessage: "This argument may interest you" })}
-						shareCode={`<iframe src="https://cdn.logora.com/embed.html?shortname=${config.shortname}&id=${argument.id}&resource=argument" frameborder="0" width="100%" height="275px" scrolling="no"></iframe>`}
-						showShareCode={config?.actions?.hideCodeShare !== true}
-						showShareText
-						showShareButton={config?.actions?.hideShareButton !== true}
-						enableReport={!(argument.score === 100 && argument.manual_score)}
-						enableEdition={enableEdition}
-						enableDeletion={enableDeletion}
-					>
-						<VoteButton
-							voteableType={"Message"}
-							voteableId={argument.id}
-							totalUpvote={argument.upvotes}
-							totalDownvote={0}
-							activeClassName={styles[`voteButtonPosition-${positionIndex}`]}
-							disabled={argument.status === "rejected" || (currentUser?.id === argument?.author?.id) || userIsBanned}
-						/>
-					</ContentFooter>
-				}
-				{!hideFooter && !hideReplies &&
-					<ReplyFooter
-						numberReplies={argument.number_replies}
-						repliesAuthors={argument.replies_authors}
-						expandReplies={expandReplies}
-						onToggleReplies={toggleReplies}
-					/>
-				}
-			</div>
-			{!hideReplies &&
-				<>
-					{showReplyInput && (
-						<Suspense fallback={null}>
-							<ArgumentInput
-								key={`Reply${argument.id}`}
-								groupId={argument.group_id}
-								groupType={groupType}
-								groupName={groupName}
-								positions={positions}
-								parentId={argument.id}
-								positionId={vote?.position_id}
-								disabled={disabled}
-								hideSourceAction={config?.actions?.disableUserSources || false}
-								onSubmit={(reply) => {
-									toggleReplyInput();
-									setExtraReplies([reply]);
-									setExpandReplies(true);
-								}}
-								isReply
-								avatarSize={40}
-								placeholder={intl.formatMessage({ id: "input.reply_input.your_answer", defaultMessage: "Your answer" })}
-								userGuideUrl={config?.provider?.userGuideUrl}
-								hideUserGuideLink={config?.provider?.hideUserGuideLink}
-							/>
-						</Suspense>
-					)}
-					{extraReplies?.length > 0 && expandReplies &&
-						<div className={styles.repliesList}>
-							{extraReplies.map(r => displayReply(r))}
-						</div>
-					}
-					{expandReplies &&
-						<div className={styles.repliesList}>
-							<VotePaginatedList
-								voteableType={"Message"}
-								currentListId={`argument_${argument.id}_reply_list`}
-								loadingComponent={<UserContentSkeleton />}
-								resource={"messages"}
-								sort={"+created_at"}
-								filters={{ message_id: argument.id, is_reply: true, status: "accepted" }}
-								perPage={5}
-								display={"column"}
-								resourcePropName={'argument'}
-								emptyListComponent={<></>}
-								transformData={(reply) => transformReplies(reply)}
-							>
-								{displayReply(argument)}
-							</VotePaginatedList>
-						</div>
-					}
-					{extraReplies?.length > 0 && !expandReplies &&
-						<div className={styles.repliesList}>
-							{argument.number_replies > 1 &&
-								<div className={styles.readMoreLink}>
-									<Button
-										role="link"
-										rightIcon={<Icon name="lightArrow" height={10} width={10} />}
-										handleClick={toggleReplies}
-									>
-										{intl.formatMessage({ id: "argument.argument.see_more", defaultMessage: "See more" })}
-									</Button>
-								</div>
-							}
-						</div>
-					}
-				</>
-			}
-		</HashScroll>
-	);
-};
-
-export const ArgumentContainer = Argument;
-
-Argument.propTypes = {
-	/** Argument data */
-	argument: PropTypes.object.isRequired,
-	/** If reply, array with argument and all parents */
-	argumentReplies: PropTypes.array,
-	/** Nesting level of the argument */
-	nestingLevel: PropTypes.number,
-	/** Positions of the debate */
-	positions: PropTypes.array.isRequired,
-	/** If true, disables links */
-	disableLinks: PropTypes.bool,
-	/** Flash border of parent argument */
-	flashParent: PropTypes.func,
-	/** Parent argument */
-	parentArgument: PropTypes.object,
-	/** If true, content is expandable */
-	expandable: PropTypes.bool,
-	/** If true, disabled mode in argument */
-	disabled: PropTypes.bool,
-	/** If true, hides footer, including replies */
-	hideFooter: PropTypes.bool,
-	/** If true, hide replies */
-	hideReplies: PropTypes.bool,
-	/** Type of the group */
-	groupType: PropTypes.string,
-	/** Name of the group the argument is in */
-	groupName: PropTypes.string,
-	/** Vote data */
-	vote: PropTypes.object,
-	/** If true, fix argument height */
-	fixedContentHeight: PropTypes.bool,
-	/** If true, enable edition */
-	enableEdition: PropTypes.bool,
-	/** Id of the list to delete the item from */
-	deleteListId: PropTypes.string,
-	/** Clicking reply redirects to this URL instead of inline reply */
-	replyRedirectUrl: PropTypes.string,
-	/** If true, hide content  */
-	hideContent: PropTypes.bool,
-};

package/src/components/argument/argument/Argument.module.scss

@@ -1,233 +0,0 @@
-@use 'styles/spacing' as spacing;
-@use 'styles/theme' as theme;
-@use 'styles/display' as display;
-
-
-.argument {
-	border-radius: theme.$box-border-radius;
-	box-shadow: theme.$box-shadow;
-	transition: margin-top 2s;
-	border: theme.$box-border;
-	scroll-margin-top: 150px;
-	background-color: theme.$background-color-primary;
-	@include spacing.p(3, xs);
-	display: flex;
-	flex-direction: column;
-	gap: spacing.$spacer;
-}
-
-.edited {
-	font-size: theme.$font-size-extra-small;
-	color: theme.$text-secondary;
-	line-height: theme.$line-height-loose;
-	@include spacing.mb(1.5, xs);
-}
-
-.argumentReply {
-	position: relative;
-	background-color: theme.$text-tertiary;
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-	box-shadow: theme.$box-shadow;
-	border-top-right-radius: theme.$box-border-radius;
-	border-bottom-right-radius: theme.$box-border-radius;
-	border-left: 6px solid;
-	border-left-color: theme.$call-primary !important;
-
-	&.position-1 {
-		border-left-color: theme.$for-primary !important;
-	}
-
-	&.position-2 {
-		border-left-color: theme.$against-primary !important;
-	}
-
-	&.position-3 {
-		border-left-color: theme.$third-position-color-primary !important;
-	}
-
-	@for $i from 1 through 5 {
-		&.level-#{$i} {
-			margin-left: #{$i}em !important;
-		}
-	}
-
-	&::before {
-		content: "";
-		border-left: 4px solid theme.$text-secondary;
-		position: absolute;
-		width: 4px;
-		height: 10px;
-		top: -10px;
-		left: 2em;
-	}
-
-	@include display.media-breakpoint-down(xs) {
-		border-left: 4px solid;
-	}
-}
-
-.flash {
-	-webkit-transition: box-shadow 0.8s ease-in-out;
-	-moz-transition: box-shadow 0.8s ease-in-out;
-	-o-transition: box-shadow 0.8s ease-in-out;
-	transition: box-shadow 0.8s ease-in-out;
-	box-shadow: -4px 4px 15px 3px rgba(0, 0, 0, 0.15);
-}
-
-.position-1.flash {
-	border-color: theme.$for-primary;
-}
-
-.position-2.flash {
-	border-color: theme.$against-primary;
-}
-
-.position-3.flash {
-	border-color: theme.$third-position-color-primary;
-	@include spacing.mt(2, xs);
-}
-
-.argumentBody {
-	font-size: theme.$font-size-normal;
-	line-height: theme.$line-height-loose;
-}
-
-.argumentDeletedBody {
-	font-size: theme.$font-size-small;
-	color: theme.$text-secondary;
-}
-
-.fixedHeight {
-	height: 100px;
-	overflow: hidden;
-	position: relative;
-
-	&:after {
-		content: "";
-		position: absolute;
-		z-index: 1;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		pointer-events: none;
-		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
-		width: 100%;
-		height: 5em;
-	}
-}
-
-.argumentContent {
-	line-height: theme.$line-height-loose;
-	overflow-wrap: break-word;
-	word-wrap: break-word;
-
-	& * {
-		font-size: theme.$font-size-normal;
-	}
-}
-
-.argumentSourcesList {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: flex-start;
-	font-size: theme.$font-size-extra-small;
-	font-weight: theme.$font-weight-normal;
-}
-
-.argumentSourcesList a {
-	text-decoration: none;
-}
-
-.repliesList {
-	@include spacing.mt(2, xs);
-}
-
-.readMoreLink {
-	@include spacing.mt(2.5, xs);
-	display: flex;
-	justify-content: center;
-}
-
-.replyStyle {
-    background: theme.$text-tertiary;
-}
-
-.replyTo {
-	display: flex !important;
-	flex-direction: row !important;
-	align-items: flex-start !important;
-	@include spacing.pb(2, xs);
-	font-size: theme.$font-size-extra-small;
-	color: theme.$text-secondary;
-	cursor: pointer;
-	overflow: hidden;
-	white-space: nowrap;
-
-	span {
-		@include spacing.pl(1, xs);
-		cursor: pointer;
-		text-decoration: underline;
-	}
-
-	svg {
-		padding: 2px 0 0 2px;
-		fill: theme.$text-secondary;
-	}
-}
-
-.replyingTo {
-	display: flex !important;
-}
-
-.headerPosition-0 {
-	background-color: theme.$call-primary !important;
-}
-
-.headerPosition-1 {
-	background-color: theme.$for-primary !important;
-}
-
-.headerPosition-2 {
-	background-color: theme.$against-primary !important;
-}
-
-.headerPosition-3 {
-	background-color: theme.$third-position-color-primary !important;
-}
-
-.voteButtonPosition-1 {
-	color: theme.$for-primary !important;
-
-	& svg {
-		fill: theme.$for-primary !important;
-	}
-}
-
-.voteButtonPosition-2 {
-	color: theme.$against-primary !important;
-
-	& svg {
-		fill: theme.$against-primary !important;
-	}
-}
-
-.voteButtonPosition-3 {
-	color: theme.$third-position-color-primary !important;
-
-	& svg {
-		fill: theme.$third-position-color-primary !important;
-	}
-}
-
-
-@media (prefers-color-scheme: dark) {
-	.replyStyle {
-		background-color: theme.$text-tertiary;
-	}
-
-	.argumentStyle {
-		background-color: theme.$background-color-primary;
-	}
-}