@logora/debate 0.1.0

package/src/components/user_content/summary_content_box/SummaryContentBox.test.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { Location } from '@logora/debate/util/location';
+import { SummaryContentBox } from './SummaryContentBox';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const author = {
+    image_url: faker.image.avatarGitHub(),
+    full_name: faker.person.fullName(),
+    hash_id: faker.lorem.slug(),
+    slug: faker.lorem.slug(),
+    points: 52,
+    role:"contributor",
+    last_activity: new Date(),
+    description: faker.person.jobTitle()
+}
+  
+const argument = {
+    id: 43,
+    author: author,
+    title: faker.lorem.sentence(1),
+    created_at: faker.date.recent(),
+    content: faker.lorem.sentences(5),
+    position: {
+      name: faker.lorem.word()
+    }
+}
+  
+const debateUrl = faker.internet.url() + "/#argument_" + argument.id;
+  
+const routes = {
+    userShowLocation: new Location('espace-debat/user/:userSlug', { userSlug: '' })
+};
+  
+describe('SummaryContentBox', () => {
+    it('renders basic info correctly', () => {
+        const { getByText, queryByText } = render(
+            <BrowserRouter>
+                <ConfigProvider routes={{ ...routes }}>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <SummaryContentBox 
+                                author={author} 
+                                tag={argument.position?.name}
+                                date={argument.created_at}
+                                content={argument.content}
+                                link={debateUrl}
+                                tagClassName="argument-for"
+                            />
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(getByText(argument.author.full_name)).toBeInTheDocument();
+        expect(getByText(argument.position.name)).toBeInTheDocument();
+        expect(getByText("52 points")).toBeInTheDocument();
+        expect(getByText(argument.content.slice(0, 50), { exact: false })).toBeInTheDocument();
+        expect(queryByText(argument.title)).not.toBeInTheDocument();
+        // const readMoreLink = screen.getByText("Read more").parentElement;
+        // expect(readMoreLink.href).toBe(debateUrl);
+    });
+
+    it('renders title if passed', () => {
+        const { getByText, queryByText } = render(
+            <BrowserRouter>
+                <ConfigProvider routes={{ ...routes }}>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <SummaryContentBox 
+                                author={author} 
+                                tag={argument.position?.name}
+                                date={argument.created_at}
+                                title={argument.title}
+                                content={argument.content}
+                                link={debateUrl}
+                                tagClassName="argument-for"
+                            />
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(getByText(argument.content.slice(0,50), { exact: false })).toBeInTheDocument();
+        expect(queryByText(argument.title)).toBeInTheDocument();
+    });
+
+    it('renders header in one line if headerOneLine prop is true', () => {
+        const { getByText, queryByText } = render(
+            <BrowserRouter>
+                <ConfigProvider routes={{ ...routes }}>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <SummaryContentBox 
+                                author={author} 
+                                tag={argument.position?.name}
+                                date={argument.created_at}
+                                content={argument.content}
+                                link={debateUrl}
+                                headerOneLine
+                            />
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(getByText(argument.author.full_name)).toBeInTheDocument();
+        expect(getByText(argument.position.name)).toBeInTheDocument();
+        expect(queryByText(argument.author.points)).not.toBeInTheDocument();
+    });
+
+    it('does not render the footer if showFooter prop is false', () => {
+        const { queryByText } = render(
+            <BrowserRouter>
+                <ConfigProvider routes={{ ...routes }}>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <SummaryContentBox 
+                                author={author} 
+                                tag={argument.position?.name}
+                                date={argument.created_at}
+                                content={argument.content}
+                                link={debateUrl}
+                                contentCount={12}
+                                showFooter={false}
+                            />
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        const expectedLinkText = `Read 12 arguments "${argument.position.name}"`;
+        expect(queryByText(expectedLinkText)).not.toBeInTheDocument();
+    });
+
+    it('renders the footer if showFooter prop is true', () => {
+        const { getByText } = render(
+            <BrowserRouter>
+                <ConfigProvider routes={{ ...routes }}>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <SummaryContentBox 
+                                author={author} 
+                                tag={argument.position?.name}
+                                date={argument.created_at}
+                                content={argument.content}
+                                link={debateUrl}
+                                contentCount={12}
+                                showFooter
+                            />
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        const expectedLinkText = `Read 12 arguments "${argument.position.name}"`;
+        expect(getByText(expectedLinkText)).toBeInTheDocument();
+    });
+});

package/src/components/user_content/summary_content_box/index.js

@@ -0,0 +1 @@
+export { SummaryContentBox } from './SummaryContentBox';

package/src/components/user_content/use_delete_content/index.js

@@ -0,0 +1 @@
+export { useDeleteContent } from './useDeleteContent';

package/src/components/user_content/use_delete_content/useDeleteContent.docs.mdx

@@ -0,0 +1,34 @@
+---
+description: A hook to delete a content.
+labels: ['delete']
+---
+
+import { IntlProvider } from 'react-intl';
+
+A hook to delete a content. It receive a content, a contentType, a listId, a deleteTitle, a deleteQuestion and a deleteAlert params.
+
+It's using useAuthenticationRequired hook.
+
+It must be wrapped by [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider and by ToastProvider.
+
+### Component usage
+
+```js
+import { useDeleteContent } from '@logora/debate.user_content.use_delete_content';
+```
+
+```js
+const Component = () => {
+    const { deleteContent } = useDeleteContent(content, contentType, listId, softDelete, deleteTitle, deleteQuestion, deleteAlert);
+
+	return (
+        <IntlProvider locale="en">
+            <ToastProvider>
+                <button onClick={() => deleteContent()}>
+                    <span>Delete</span>
+                </button>
+            </ToastProvider>
+        </IntlProvider>
+    )
+}
+```

package/src/components/user_content/use_delete_content/useDeleteContent.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useModal } from '@logora/debate/dialog/modal';
+import { useIntl } from 'react-intl';
+import { useList } from '@logora/debate/list/list_provider';
+import { useDataProvider } from '@logora/debate/data/data_provider';
+import { useToast } from '@logora/debate/dialog/toast_provider';
+import { ConfirmModal } from '@logora/debate/dialog/confirm_modal';
+import { useAuthRequired } from '@logora/debate/hooks/use_auth_required';
+
+export const useDeleteContent = (content, contentType, listId, softDelete = false,  deleteTitle, deleteQuestion, deleteAlert) => {
+    const { showModal } = useModal();
+    const { isLoggedIn } = useAuth();
+	const intl = useIntl();
+    const list = useList();
+    const api = useDataProvider();
+	const { toast } = useToast() || {};
+	const requireAuthentication = useAuthRequired();
+
+    const deleteContent = () => {
+        if (isLoggedIn) {
+			showModal(
+                <ConfirmModal
+					title={deleteTitle || intl.formatMessage({ id: "info.delete_content_title", defaultMessage: "Delete content" })}
+					question={deleteQuestion || intl.formatMessage({ id: "info.delete_content_question", defaultMessage: "Delete contribution" })}
+					confirmLabel={intl.formatMessage({ id: "info.yes", defaultMessage: "Yes" })}
+					cancelLabel={intl.formatMessage({id: "info.no", defaultMessage: "No" })}
+					onConfirmCallback={() => confirmDelete()}
+				/>
+			);
+		} else {
+			requireAuthentication();
+		}
+    }
+
+	const confirmDelete = () => {
+        list.remove(listId, [content]);
+        toast(deleteAlert || intl.formatMessage({ id: "info.delete_content_alert", defaultMessage: "Your contribution has been deleted" }), { type: "success" });
+		if(softDelete) {
+			api.update(contentType, content.id, { is_deleted: true }).then((response) => {
+				if (response.data.success) {
+					// NOTHING
+				}
+			});
+		} else {
+			api.delete(contentType, content.id).then((response) => {
+				if (response.data.success) {
+					// NOTHING
+				}
+			});
+		}
+	};
+
+    return { deleteContent };
+}

package/src/components/user_content/use_delete_content/useDeleteContent.test.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useDeleteContent } from './useDeleteContent';
+import { IntlProvider } from 'react-intl';
+import { ToastProvider } from '@logora/debate/dialog/toast_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { ListProvider } from '@logora/debate/list/list_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const httpClient = {
+    get: vi.fn(() =>  Promise.resolve(null)),
+    post: vi.fn(() => Promise.resolve(null)),
+    patch: vi.fn(() => Promise.resolve(null)),
+    delete: vi.fn(() => Promise.resolve(null))
+};
+
+const currentUser = {
+    id: faker.number.int(),
+}
+
+const ComponentWithDelete = () => {
+    const { deleteContent } = useDeleteContent();
+
+    return (
+        <button data-testid={"delete-button"} onClick={deleteContent}>
+            <span>Delete</span>
+        </button>
+    );
+}
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+beforeAll(() => {
+    HTMLDialogElement.prototype.showModal = function () {
+      this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function () {
+      this.removeAttribute("open");
+    };
+  });
+
+describe('useDeleteContent', () => {
+    it('should show ConfirmModal when useDeleteContent is called', async () => {
+        render(
+            <IntlProvider locale="en">
+                <ConfigProvider config={{}}>
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                            <ToastProvider>
+                                <IconProvider library={regularIcons}>
+                                    <ListProvider>
+                                        <ModalProvider>
+                                            <ComponentWithDelete />
+                                        </ModalProvider>
+                                    </ListProvider>
+                                </IconProvider>
+                            </ToastProvider>
+                        </AuthContext.Provider>
+                    </DataProviderContext.Provider>
+                </ConfigProvider>
+            </IntlProvider>
+        )
+
+        const deleteButton = screen.getByTestId("delete-button");
+        await userEvent.click(deleteButton)
+
+        expect(screen.getByText("Delete content")).toBeTruthy();
+        expect(screen.getByText("Delete contribution")).toBeTruthy();
+        expect(screen.getByText("Yes")).toBeTruthy();
+        expect(screen.getByText("No")).toBeTruthy();
+    });
+});

package/src/components/user_content/use_report_content/ReportModal.docs.mdx

@@ -0,0 +1,54 @@
+---
+description: A modal and a hook to report some content.
+labels: ['modal', 'report']
+---
+A hook to report a content. It receive a reportableType, a reportableId and a modalTitle params.
+
+It's using useAuthenticationRequired hook.  
+
+A modal component that enables user to submit a report about some content.
+
+Two inputs are provided : one to define the object of the report, and one to give more details about the report.
+
+On submit, data is sent to the API defined through DataProvider.
+
+It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Hook usage
+```js
+    import { useReportContent } from '@logora/debate.user_content.use_report_content';
+```
+```js
+const Component = () => {
+    const { reportContent } = useReportContent(reportableType, reportableId, modalTitle);
+
+	return (
+        <button onClick={reportContent}>
+            Report
+        </button>
+    )
+}
+```
+
+### Modal usage
+```js
+    import ReportModal from '@logora/debate.user_content.use_report_content';
+```
+```js
+    <IntlProvider locale="en">
+        <ModalProvider>
+            <ReportModal
+                reportableId={34}
+                reportableType={"argument"}
+                title={"Report this argument"}
+            />
+        </ModalProvider>
+    </IntlProvider>
+```
+
+### Properties
+| **Name**      | **Type** | **Required** | **Default** | **Description** |
+| ----------- | ----------- | :-----------: | ----------- | ----------- |
+| <font color='#4646c6'>reportableId</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*reported content identifier*</font> |
+| <font color='#4646c6'>reportableType</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*reported content type*</font> |
+| <font color='#4646c6'>title</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*modal title*</font> |

package/src/components/user_content/use_report_content/ReportModal.jsx

@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import { Modal, useModal } from '@logora/debate/dialog/modal';
+import { useIntl } from 'react-intl';
+import { useDataProvider } from '@logora/debate/data/data_provider';
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { Select } from '@logora/debate/input/select';
+import { Loader } from '@logora/debate/progress/loader';
+import { Button } from '@logora/debate/action/button';
+import cx from 'classnames';
+import styles from './ReportModal.module.scss';
+
+export const ReportModal = (props) => {
+    const [step, setStep] = useState('SUBMIT');
+    const [reportDescription, setReportDescription] = useState("");
+    const [reportType, setReportType] = useState("");
+    const [firstName, setFirstName] = useState("");
+    const [lastName, setLastName] = useState("");
+    const [email, setEmail] = useState("");
+    const [isChecked, setIsChecked] = useState(false);
+    const { hideModal } = useModal();
+    const { isLoggedIn, currentUser } = useAuth();
+    const intl = useIntl();
+    const dataProvider = useDataProvider();
+
+    const handleReportSubmit = (event) => {
+        event.preventDefault();
+        const data = {
+            reportable_id: props.reportableId,
+            reportable_type: props.reportableType,
+            classification: reportType,
+            description: reportDescription,
+            first_name: firstName,
+            last_name: lastName,
+            email: email
+        };
+        setStep('LOADING');
+        dataProvider.create("reports", data, {}, isLoggedIn).then(response => {
+            setStep('SUCCESS');
+        }, error => {
+            setStep('SUCCESS');
+        });
+    }
+
+    return (
+        <div>
+            <Modal data-vid={"report_modal"} title={props.title || intl.formatMessage({ id: "report.report_modal.title", defaultMessage: "Report content" })} showCloseButton>
+                <div className={cx(styles.reportModalBody)}>
+                    {
+                        {
+                            'SUBMIT':
+                                <form onSubmit={handleReportSubmit} className={styles.reportForm}>
+                                    <div className={styles.formGroup}>
+                                        <label htmlFor="reportType">
+                                            {intl.formatMessage({ id: "report.report_modal.type_input_label", defaultMessage: "Report type" })}
+                                        </label>
+                                        <Select
+                                            onChange={e => setReportType(e.value)}
+                                            options={
+                                                [
+                                                    { name: "EMPTY", value: "",  text: intl.formatMessage({ id: "report.report_modal.select_placeholder", defaultMessage: "Select a reason"}) },
+                                                    { name: "TOXICITY", value: "TOXICITY", text: intl.formatMessage({ id: "report.report_modal.toxicity_option", defaultMessage: "Incivility" }) },
+                                                    { name: "OBSCENE", value: "OBSCENE", text: intl.formatMessage({ id: "report.report_modal.obscene_option", defaultMessage: "Profanity, Sexually explicit, Flirtation, Obscene" }) },
+                                                    { name: "HATE_SPEECH", value: "HATE_SPEECH", text: intl.formatMessage({ id: "report.report_modal.hate_speech_option", defaultMessage: "Hate speech or Identity attack" }) },
+                                                    { name: "INCOHERENT", value: "INCOHERENT", text: intl.formatMessage({ id: "report.report_modal.incoherent_option", defaultMessage: "Incomprehensibility" }) },
+                                                    { name: "SPAM", value: "SPAM", text: intl.formatMessage({ id: "report.report_modal.spam_option", defaultMessage: "Spam : Irrelevant or unsolicited commercial content / Off-topic" }) },
+                                                    { name: "UNSUBSTANTIAL", value: "UNSUBSTANTIAL", text: intl.formatMessage({ id: "report.report_modal.unsubstantial_option", defaultMessage: "Unsubstantial : Trivial or short / Repetition" }) },
+                                                ]
+                                            }
+                                            className={styles.select}
+                                        />
+                                    </div>
+                                    <div className={styles.formGroup}>
+                                        <label htmlFor="reportDescription">
+                                            {intl.formatMessage({ id: "report.report_modal.description_input_label", defaultMessage: "Tell us more about your report" })}
+                                        </label>
+                                        <textarea
+                                            className={styles.formControl}
+                                            id="reportDescription"
+                                            role='textbox'
+                                            rows={4}
+                                            value={reportDescription}
+                                            onChange={e => setReportDescription(e.target.value)}
+                                            placeholder={intl.formatMessage({ id: "report.report_modal.description_input_placeholder", defaultMessage: "Tell us more" })}
+                                        ></textarea>
+                                        { (currentUser && Object.keys(currentUser).length > 0) && (
+                                            <div className={styles.formGroup}>
+                                                <label className={styles.checkboxLabel}>
+                                                    <input
+                                                        type="checkbox"
+                                                        className={styles.checkboxInput}
+                                                        checked={isChecked}
+                                                        onChange={(e) => setIsChecked(e.target.checked)}
+                                                        required
+                                                    />
+                                                    {intl.formatMessage({
+                                                        id: "report.report_modal.declaration",
+                                                        defaultMessage: "By submitting this report, I declare that the information provided is, to my knowledge, accurate and complete."
+                                                    })}
+                                                </label>
+                                            </div>
+                                        )}
+                                    </div>
+                                    {props.allowAnonymousUser && !(currentUser && Object.keys(currentUser).length > 0) && (
+                                        <>
+                                            <div className={cx(styles.formGroup, styles.nameGroup)}>
+                                                <div className={styles.nameField}>
+                                                    <label htmlFor="firstName">
+                                                        {intl.formatMessage({ id: "report.report_modal.first_name_input_label", defaultMessage: "First Name" })}
+                                                    </label>
+                                                    <input
+                                                        type="text"
+                                                        className={styles.formControl}
+                                                        id="firstName"
+                                                        value={firstName}
+                                                        onChange={(e) => setFirstName(e.target.value)}
+                                                        required
+                                                    />
+                                                </div>
+                                                <div className={styles.nameField}>
+                                                    <label htmlFor="lastName">
+                                                        {intl.formatMessage({ id: "report.report_modal.last_name_input_label", defaultMessage: "Last Name" })}
+                                                    </label>
+                                                    <input
+                                                        type="text"
+                                                        className={styles.formControl}
+                                                        id="lastName"
+                                                        value={lastName}
+                                                        onChange={(e) => setLastName(e.target.value)}
+                                                        required
+                                                    />
+                                                </div>
+                                            </div>
+                                            <div className={styles.formGroup}>
+                                                <label htmlFor="email">
+                                                    {intl.formatMessage({ id: "report.report_modal.email_input_label", defaultMessage: "Email" })}
+                                                </label>
+                                                <input
+                                                    type="email"
+                                                    className={styles.formControl}
+                                                    id="email"
+                                                    value={email}
+                                                    onChange={(e) => setEmail(e.target.value)}
+                                                    required
+                                                />
+                                            </div>
+                                            <div className={styles.formGroup}>
+                                                <label className={styles.checkboxLabel}>
+                                                    <input
+                                                        type="checkbox"
+                                                        className={styles.checkboxInput}
+                                                        checked={isChecked}
+                                                        onChange={(e) => setIsChecked(e.target.checked)}
+                                                        required
+                                                    />
+                                                    {intl.formatMessage({
+                                                        id: "report.report_modal.declaration",
+                                                        defaultMessage: "By submitting this report, I declare that the information provided is, to my knowledge, accurate and complete."
+                                                    })}
+                                                </label>
+                                            </div>
+                                        </>
+                                    )}
+                                    <div className={cx(styles.formGroup, styles.reportFormSubmit)}>
+                                        <Button handleClick={() => null} data-tid={"action_submit_report"} type="submit"  disabled={!reportType} >
+                                            {intl.formatMessage({ id: "report.report_modal.submit_label", defaultMessage: "Send" })}
+                                        </Button>
+                                    </div>
+                                </form>,
+                            'LOADING': <Loader />,
+                            'SUCCESS':
+                                <div>
+                                    <div className={styles.successText}>
+                                        {intl.formatMessage({ id: "report.report_modal.success", defaultMessage: "Thank you for your submission !" })}
+                                    </div>
+                                    <div className={styles.successButtonBox}>
+                                        <Button handleClick={hideModal}>
+                                            {intl.formatMessage({ id: "report.report_modal.close", defaultMessage: "Close" })}
+                                        </Button>
+                                    </div>
+                                </div>
+                        }[step]
+                    }
+                </div>
+            </Modal>
+        </div>
+    );
+}