@logora/debate 0.1.0 → 0.1.1

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

@@ -1,169 +0,0 @@
-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

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

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

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

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

@@ -1,34 +0,0 @@
----
-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

@@ -1,55 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,54 +0,0 @@
----
-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

@@ -1,187 +0,0 @@
-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>
-    );
-}