@logora/debate 0.1.0

package/src/components/suggestion/suggestion_box/SuggestionBox.stories.jsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from 'react-router-dom';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { ListProvider } from '@logora/debate/list/list_provider';
+import { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
+import { ToastProvider } from '@logora/debate/dialog/toast_provider';
+import { VoteProvider } from '@logora/debate/vote/vote_provider';
+import { Location } from '@logora/debate/util/location';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+import { SuggestionBox } from './SuggestionBox';
+
+const debateShowLocation = new Location('espace-debat/group/:debateSlug', { debateSlug: '' });
+
+const routes = {
+  debateShowLocation
+};
+
+const vote = {
+  id: faker.number.int(),
+  voteable_type: faker.lorem.word(),
+  voteable_id: faker.number.int(),
+  user_id: faker.number.int()
+};
+
+const currentUser = {
+  id: faker.number.int(),
+  full_name: faker.person.fullName(),
+  image_url: faker.image.avatarGitHub(),
+  points: faker.number.int()
+};
+
+const generateSuggestion = (groupOverrides = {}, suggestionOverrides = {}) => ({
+  id: faker.number.int(),
+  name: faker.lorem.words(),
+  slug: faker.lorem.slug(),
+  created_at: faker.date.recent().toISOString(),
+  score: faker.number.int(),
+  language: faker.helpers.arrayElement(['en', 'fr', 'es']),
+  is_active: true,
+  messages_count: faker.number.int(),
+  is_published: false,
+  published_at: faker.date.recent().toISOString(),
+  debate_suggestion: {
+    id: faker.number.int(),
+    created_at: faker.date.recent().toISOString(),
+    expires_at: faker.date.future().toISOString(),
+    total_upvotes: 20,
+    total_downvotes: faker.number.int({ min: 0, max: 100 }),
+    is_accepted: false,
+    is_expired: false,
+    author: {
+      id: faker.number.int(),
+      full_name: faker.person.fullName(),
+      image_url: faker.image.avatarGitHub()
+    },
+    language: faker.helpers.arrayElement(['en', 'fr', 'es']),
+    translation_entries: [],
+    name: faker.lorem.words(),
+    ...suggestionOverrides
+  },
+  ...groupOverrides
+});
+
+const baseSuggestion = generateSuggestion(
+  { is_published: false },
+  { is_accepted: false, is_expired: false }
+);
+
+const publishedSuggestion = generateSuggestion(
+  { is_published: true },
+  { is_accepted: true, is_expired: false }
+);
+
+const config = {
+  modules: {
+    suggestions: {
+      vote_goal: 30
+    }
+  }
+};
+
+const httpClient = {
+  post: () => Promise.resolve({ data: { success: true, data: { resource: vote } } })
+};
+
+const data = dataProvider(httpClient, 'https://mock.example.api');
+
+export default {
+  title: 'Suggestion/Suggestion Box',
+  component: SuggestionBox,
+  argTypes: {
+    disabled: { control: 'boolean' },
+    suggestion: { control: 'object' }
+  },
+  render: (args) => (
+    <MemoryRouter>
+      <ConfigProvider routes={{ ...routes }} config={config}>
+        <DataProviderContext.Provider value={{ dataProvider: data }}>
+          <AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
+            <ResponsiveProvider>
+              <ModalProvider>
+                <ListProvider>
+                  <ToastProvider>
+                    <VoteProvider>
+                      <IntlProvider locale='en'>
+                        <IconProvider library={regularIcons}>
+                          <SuggestionBox {...args} />
+                        </IconProvider>
+                      </IntlProvider>
+                    </VoteProvider>
+                  </ToastProvider>
+                </ListProvider>
+              </ModalProvider>
+            </ResponsiveProvider>
+          </AuthContext.Provider>
+        </DataProviderContext.Provider>
+      </ConfigProvider>
+    </MemoryRouter>
+  )
+};
+
+export const DefaultSuggestionBox = {
+  args: {
+    suggestion: baseSuggestion,
+    disabled: false
+  }
+};
+
+export const DisabledSuggestionBox = {
+  args: {
+    suggestion: baseSuggestion,
+    disabled: true
+  }
+};
+
+export const PublishedSuggestionBox = {
+  args: {
+    suggestion: publishedSuggestion,
+    disabled: false
+  }
+};

package/src/components/suggestion/suggestion_box/SuggestionBox.test.jsx

@@ -0,0 +1,184 @@
+import React from "react";
+import { render, waitFor, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { IntlProvider } from "react-intl";
+import { MemoryRouter } from "react-router-dom";
+import { ConfigProvider } from "@logora/debate/data/config_provider";
+import {
+	dataProvider,
+	DataProviderContext,
+} from "@logora/debate/data/data_provider";
+import { AuthContext } from "@logora/debate/auth/use_auth";
+import { ModalProvider } from "@logora/debate/dialog/modal";
+import { ListProvider } from "@logora/debate/list/list_provider";
+import { ToastProvider } from "@logora/debate/dialog/toast_provider";
+import { VoteProvider } from "@logora/debate/vote/vote_provider";
+import { IconProvider } from "@logora/debate/icons/icon_provider";
+import { ResponsiveProvider } from "@logora/debate/hooks/use_responsive";
+import * as regularIcons from "@logora/debate/icons/regular_icons";
+import { SuggestionBox } from "./SuggestionBox";
+import { faker } from "@faker-js/faker";
+
+const vote = {
+	id: faker.number.int(),
+	voteable_type: faker.lorem.word(),
+	voteable_id: faker.number.int(),
+	user_id: faker.number.int(),
+};
+
+const currentUser = {
+	id: faker.number.int(),
+	full_name: faker.person.fullName(),
+	image_url: faker.image.avatarGitHub(),
+	points: faker.number.int(),
+};
+
+const generateSuggestion = (groupOverrides, suggestionOverrides) => ({
+	id: faker.number.int(),
+	name: faker.lorem.words(),
+	slug: faker.lorem.slug(),
+	created_at: faker.date.recent().toISOString(),
+	score: faker.number.int(),
+	language: faker.helpers.arrayElement(['en', 'fr', 'es']),
+	is_active: true,
+	messages_count: faker.number.int(),
+	is_published: true,
+	published_at: faker.date.recent().toISOString(),
+	debate_suggestion: {
+		id: faker.number.int(),
+		created_at: faker.date.recent().toISOString(),
+		expires_at: faker.date.future().toISOString(),
+		total_upvotes: 20,
+		total_downvotes: faker.number.int({ min: 0, max: 100 }),
+		is_accepted: false,
+		is_expired: false,
+		is_published: faker.datatype.boolean(),
+		author: {
+			id: faker.number.int(),
+			full_name: faker.person.fullName(),
+			image_url: faker.image.avatarGitHub(),
+		},
+		language: faker.helpers.arrayElement(['en', 'fr', 'es']),
+		translation_entries: [],
+		name: faker.lorem.words(),
+		...suggestionOverrides,
+	},
+	...groupOverrides,
+});
+const suggestion = generateSuggestion();
+
+const config = {
+	modules: {
+		suggestions: {
+			vote_goal: 30,
+		},
+	},
+};
+
+const httpClient = {
+	post: vi.fn(() =>
+		Promise.resolve({ data: { success: true, data: { resource: vote } } }),
+	),
+};
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+const routes = {
+	debateShowLocation: {
+		toUrl: ({ debateSlug }) => `/espace-debat/group/${debateSlug}`,
+	},
+};
+
+const Providers = ({ children }) => (
+	<MemoryRouter>
+		<ConfigProvider config={{ config }} routes={{ ...routes }}>
+			<DataProviderContext.Provider value={{ dataProvider: data }}>
+				<AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
+					<ResponsiveProvider>
+						<ModalProvider>
+							<ListProvider>
+								<ToastProvider>
+									<VoteProvider>
+										<IntlProvider locale="en">
+											<IconProvider library={regularIcons}>
+												{children}
+											</IconProvider>
+										</IntlProvider>
+									</VoteProvider>
+								</ToastProvider>
+							</ListProvider>
+						</ModalProvider>
+					</ResponsiveProvider>
+				</AuthContext.Provider>
+			</DataProviderContext.Provider>
+		</ConfigProvider>
+	</MemoryRouter>
+);
+
+const renderSuggestionBox = (props) =>
+	render(
+		<Providers>
+			<SuggestionBox {...props} />
+		</Providers>,
+	);
+
+describe("SuggestionBox", () => {
+	it("should render SuggestionBox correctly", () => {
+		const { getByText } = renderSuggestionBox({ suggestion, disabled: false });
+
+		expect(getByText(suggestion.name)).toBeInTheDocument();
+		expect(getByText(suggestion.debate_suggestion.author.full_name)).toBeInTheDocument();
+		expect(
+			getByText(`${suggestion.debate_suggestion.total_upvotes} supports`),
+		).toBeInTheDocument();
+	});
+
+	it("should disable SuggestionBox correctly", () => {
+		const { getByText } = renderSuggestionBox({ suggestion, disabled: true });
+
+		expect(getByText(suggestion.name)).toBeInTheDocument();
+		expect(getByText(suggestion.debate_suggestion.author.full_name)).toBeInTheDocument();
+		expect(
+			getByText(`${suggestion.debate_suggestion.total_upvotes} supports`),
+		).toBeInTheDocument();
+	});
+
+	// Cas d'une suggestion publiée
+	it("should render published SuggestionBox correctly", () => {
+		const publishedSuggestion = generateSuggestion(
+			{ is_published: true },
+			{
+				is_accepted: true,
+				is_expired: false,
+			},
+		);
+		const { getByText } = renderSuggestionBox({
+			suggestion: publishedSuggestion,
+			disabled: false,
+		});
+		expect(getByText(publishedSuggestion.name)).toBeInTheDocument();
+		expect(getByText(publishedSuggestion.debate_suggestion.author.full_name)).toBeInTheDocument();
+		expect(getByText(/Go to debate/)).toBeInTheDocument();
+	});
+
+	// Cas où on vote: le nombre de personnes intéressées est correct
+	it("should update totalUpvotes when voting", async () => {
+		const suggestionVote = generateSuggestion(
+			{ is_published: false },
+			{
+				is_accepted: false,
+				is_expired: false,
+				total_upvotes: 6,
+				total_downvotes: 5,
+			},
+		);
+		const { getByText, getByTestId } = renderSuggestionBox({
+			suggestion: suggestionVote,
+			disabled: false,
+		});
+		const upvoteButton = getByTestId("upvote-icon");
+
+		await userEvent.click(upvoteButton);
+		expect(getByText("7 supports")).toBeInTheDocument();
+	});
+});

package/src/components/suggestion/suggestion_box/index.js

@@ -0,0 +1 @@
+export { SuggestionBox } from "./SuggestionBox"

package/src/components/suggestion/suggestion_input/SuggestionInput.docs.mdx

@@ -0,0 +1,19 @@
+---
+description: An input to submit a suggestion in a debate.
+labels: ['suggestion', 'input']
+---
+
+An input to write and submit an suggestion.
+
+### Component usage
+
+```js
+import { SuggestionInput } from '@logora/debate.suggestion.suggestion_input';
+
+```
+
+```js
+
+ <SuggestionInput />
+
+```

package/src/components/suggestion/suggestion_input/SuggestionInput.jsx

@@ -0,0 +1,212 @@
+import React, { useState, useRef, useEffect } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { useDataProvider } from "@logora/debate/data/data_provider";
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useInput } from "@logora/debate/input/input_provider";
+import { useList } from "@logora/debate/list/list_provider";
+import { useAuthRequired } from "@logora/debate/hooks/use_auth_required";
+import { useFormValidation } from "@logora/debate/forms/use_form_validation";
+import { Button } from "@logora/debate/action/button";
+import { TextInput } from "@logora/debate/input/text_input";
+import { useToast } from "@logora/debate/dialog/toast_provider";
+import useSessionStorageState from '@rooks/use-sessionstorage-state';
+import cx from "classnames";
+import styles from "./SuggestionInput.module.scss";
+
+export const SuggestionInput = ({
+	onSubmit = null,
+	maxLength = 140,
+	maxPerUser = 5,
+	disabled = false,
+	userGuideUrl,
+	hideUserGuideLink = false
+}) => {
+	const intl = useIntl();
+	const api = useDataProvider();
+	const list = useList();
+	const { toast } = useToast() || {};
+	const { isLoggedIn } = useAuth();
+	const { focus, setFocus } = useInput();
+	const { errors, validate } = useFormValidation();
+	const [active, setActive] = useState(true);
+	const [flash, setFlash] = useState(false);
+	const [suggestion, setSuggestion] = useState("");
+	const [savedSuggestion, setSavedSuggestion, removeSavedSuggestion] =
+	    useSessionStorageState("userSuggestion", {});
+	const suggestionInputContainer = useRef(null);
+	const inputForm = useRef(null);
+	const requireAuthentication = useAuthRequired();
+
+	useEffect(() => {
+		if (savedSuggestion?.suggestion) {
+			setSuggestion(savedSuggestion.suggestion);
+		}
+	}, []);
+
+	useEffect(() => {
+		if (active) {
+			const saveContent = setInterval(() => {
+				if (suggestion?.length > 0) {
+					const suggestionToSave = {
+						suggestion: suggestion,
+					};
+					setSavedSuggestion(suggestionToSave);
+				}
+			}, 1000);
+			return () => clearInterval(saveContent);
+		}
+	}, [active, suggestion]);
+
+	useEffect(() => {
+		if (focus) {
+			scrollToEditor();
+			focusEditor();
+			flashing();
+			setFocus(false);
+		}
+	}, [focus]);
+
+	const scrollToEditor = () => {
+		inputForm.current.scrollIntoView({ behavior: "smooth" });
+	};
+
+	const focusEditor = () => {
+		inputForm.current.focus();
+	};
+
+	const flashing = () => {
+		if (!flash) {
+			setFlash(true);
+			const timer = setTimeout(() => {
+				setFlash(false);
+			}, 2000);
+			return () => clearTimeout(timer);
+		}
+	};
+
+	const resetEditor = () => {
+		setSuggestion("");
+		removeSavedSuggestion();
+	};
+
+	const handleSubmit = () => {
+		if (isLoggedIn) {
+			const data = {
+				name: suggestion,
+				position_list: JSON.stringify(intl.formatMessage({
+					id: "suggestion.position_list",
+					defaultMessage: "Yes,No",
+				}).split(",")),
+				is_suggestion: true,
+				is_published: false,
+			};
+			const suggestionValidationRules = [
+				{ name: ["length", 3] },
+				{ name: ["maxChar", maxLength] },
+				{ name: ["question", null] },
+			];
+			if (validate(data, suggestionValidationRules)) {
+				setSuggestion("");
+				resetEditor();
+				setActive(false);
+				api.create("groups", data).then((response) => {
+					if (response.data.success) {
+						const suggestion = response.data.data.resource;
+						list.add("suggestionsList", [suggestion]);
+						toast(
+							intl.formatMessage({
+								id: "alert.suggestion_create",
+								defaultMessage: "Your suggestion has been sent !",
+							}),
+							{ type: "success" },
+						);
+						if (onSubmit) {
+							onSubmit();
+						}
+					}
+				});
+			}
+		} else {
+			requireAuthentication({});
+		}
+	};
+
+	return (
+		<div
+			className={styles.suggestionInputContainer}
+			ref={suggestionInputContainer}
+		>
+			<>
+				<div className={cx(styles.suggestionInputItem)}>
+					<div className={styles.suggestionInputTitle}>
+						<FormattedMessage
+							id="suggestion.input_title"
+							defaultMessage="Your suggestion"
+						/>
+					</div>
+					<TextInput
+						ref={inputForm}
+						type="text"
+						aria-label={intl.formatMessage({ id: "suggestion.suggestion_input.aria_label", defaultMessage: "Suggest a debate question" })}
+						name="suggestionInput"
+						role="textbox"
+						placeholder={intl.formatMessage({
+							id: "suggestion.input_placeholder",
+							defaultMessage: "Suggest a debate question",
+						})}
+						onChange={(e) => {
+							setSuggestion(e.target.value);
+						}}
+						value={suggestion}
+						disabled={disabled}
+						error={Object.keys(errors).length > 0}
+						required
+						message={errors?.name}
+						maxLength={maxLength}
+						activeLabel={false}
+					/>
+					<div className={styles.charactersCount}>
+						{maxLength - suggestion.length}{" "}
+						{intl.formatMessage({
+							id: "input.remaining_chars",
+							defaultMessage: "remaining characters",
+						})}
+					</div>
+					{userGuideUrl && !hideUserGuideLink &&(
+						<div className={styles.guideMessage}>
+							<FormattedMessage
+								id="alert.guide_message"
+								defaultMessage={"Contributions must comply with our {userCharter}."}
+								values={{
+									userCharter: (
+										<a className={styles.guideMessage} href={userGuideUrl} target="_blank" >
+											<FormattedMessage id="alert.user_charter" defaultMessage="user charter" />
+										</a>
+									),
+								}}
+							/>
+						</div>
+					)}
+					<div className={styles.suggestionInputSubtitle}>
+						{intl.formatMessage(
+							{
+								id: "suggestion.input_info",
+								defaultMessage:
+									"The positions supported will be YES / NO. You can only post 5 suggestions at a time. Suggestions may not exceed 140 characters.",
+							},
+							{
+								max_per_user: maxPerUser,
+							},
+						)}
+					</div>
+				</div>
+				<Button
+					handleClick={() => handleSubmit()}
+					className={styles.suggestionInputSubmit}
+				>
+					<FormattedMessage id="action.submit" defaultMessage="Submit" />
+				</Button>
+			</>
+		</div>
+	);
+};

package/src/components/suggestion/suggestion_input/SuggestionInput.module.scss

@@ -0,0 +1,50 @@
+@use 'styles/spacing' as spacing;
+@use 'styles/theme' as theme;
+
+.suggestionInputContainer {
+    display: flex !important;
+    flex-direction: column !important;
+    color: theme.$text-primary;
+    gap: spacing.$spacer;
+}
+
+.suggestionInputItem {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: spacing.$spacer;
+}
+
+.suggestionInputTitle {
+    font-size: theme.$font-size-medium;
+    line-height: theme.$line-height-normal;
+    font-weight: theme.$font-weight-bold;
+    position: relative;
+    width: max-content;
+}
+
+.suggestionInputSubtitle {
+    font-size: theme.$font-size-normal;
+}
+
+.suggestionInputSubmit {
+    width: max-content;
+}
+
+.charactersCount {
+    font-size: theme.$font-size-small;
+    color: theme.$text-secondary;
+    white-space: nowrap;
+}
+
+.guideMessage {
+    font-size: theme.$font-size-small;
+    color: theme.$text-secondary;
+    white-space: nowrap;
+    white-space: normal; 
+    word-break: break-word; 
+    a {
+        font-size: theme.$font-size-small;
+        text-decoration: underline !important;
+        font-weight: bold !important;
+    }
+}

package/src/components/suggestion/suggestion_input/SuggestionInput.stories.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { ListProvider } from '@logora/debate/list/list_provider';
+import { ToastProvider } from '@logora/debate/dialog/toast_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+import { InputProvider } from '@logora/debate/input/input_provider';
+import { SuggestionInput } from './SuggestionInput';
+
+const currentUser = {
+  id: faker.number.int(),
+  full_name: faker.person.fullName(),
+  image_url: faker.image.avatarGitHub(),
+  points: faker.number.int()
+};
+
+const httpClient = {
+  post: () => Promise.resolve({ data: { success: true, data: {} } })
+};
+
+const data = dataProvider(httpClient, 'https://mock.example.api');
+
+export default {
+  title: 'Suggestion/Suggestion Input',
+  component: SuggestionInput,
+  argTypes: {
+    disabled: { control: 'boolean' },
+    maxLength: { control: 'number' },
+    userGuideUrl: { control: 'text' }
+  },
+  render: (args) => (
+    <BrowserRouter>
+      <ConfigProvider>
+        <IconProvider library={regularIcons}>
+          <IntlProvider locale='en'>
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+              <AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
+                <ToastProvider>
+                  <ModalProvider>
+                    <ListProvider>
+                      <InputProvider>
+                        <SuggestionInput {...args} />
+                      </InputProvider>
+                    </ListProvider>
+                  </ModalProvider>
+                </ToastProvider>
+              </AuthContext.Provider>
+            </DataProviderContext.Provider>
+          </IntlProvider>
+        </IconProvider>
+      </ConfigProvider>
+    </BrowserRouter>
+  )
+};
+
+export const DefaultSuggestionInput = {
+  args: {
+    disabled: false
+  }
+};
+
+export const DisabledSuggestionInput = {
+  args: {
+    disabled: true
+  }
+};
+
+export const SuggestionInputMaxLength = {
+  args: {
+    disabled: true,
+    maxLength: 30
+  }
+};
+
+export const SuggestionInputWithUserGuideUrl = {
+  args: {
+    disabled: true,
+    maxLength: 30,
+    userGuideUrl: 'https://example.com/user-guide'
+  }
+};