@logora/debate 0.1.0

package/src/components/util/location/Location.test.jsx

@@ -0,0 +1,24 @@
+import { Location } from './Location';
+
+describe('Location', () => {
+    it('should instantiate object and return path', () => {
+        const path = "mypath";
+        const location = new Location(path, {}, {});
+        expect(location.path).toEqual(path);
+        expect(location.toUrl()).toEqual(path);
+    });
+
+    it('should compile path params and return correct URL', () => {
+        const path = "mypath/:p1";
+        const location = new Location(path, { p1: "" }, { });
+        expect(location.path).toEqual(path);
+        expect(location.toUrl({ p1: "test" })).toEqual('mypath/test');
+    });
+
+    it('should compile path and query params and return correct URL', () => {
+        const path = "mypath/:p1";
+        const location = new Location(path, { p1: "" }, { q1: "" });
+        expect(location.path).toEqual(path);
+        expect(location.toUrl({ p1: "test", q1: "query" })).toEqual('mypath/test?q1=query');
+    });
+});

package/src/components/util/location/index.js

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

package/src/components/util/unique_by/index.js

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

package/src/components/util/unique_by/uniqueBy.docs.mdx

@@ -0,0 +1,24 @@
+---
+description: A function to sort unique values from an array of objects
+---
+
+This function receives two argumentw, _objArray_, which is an array of objects (a list) and _objKey_ which is the key that will be used to compare the objects.
+
+It returns a new array with only unique objects.
+
+
+### Component usage
+```js
+import { uniqueBy } from '@logora/debate.util.unique_by';
+```
+```js
+const ComponentWithUniqObjArr = () => {
+    const objArray = [{ age: 18, name: "non"}, { age: 21, name: "non" }, { age: 18, name: "non"}]
+    const uniqObjArray = uniqueBy(objArray, "age");
+	return (
+        <div>
+            {uniqObjArray}
+            {/* [{ age: 18, name: "non"}, { age: 21, name: "non" }] */}
+        </div>
+    )
+}

package/src/components/util/unique_by/uniqueBy.js

@@ -0,0 +1,9 @@
+export const uniqueBy = (objArray, objKey) => {
+    let newElements = [];
+    objArray.filter((object) => {
+        let objectIndex = newElements.findIndex(element => (element[objKey] == object[objKey]));
+        if (objectIndex <= -1) { newElements.push(object); }
+        return null;
+    });
+    return newElements;
+};

package/src/components/util/unique_by/uniqueBy.test.jsx

@@ -0,0 +1,29 @@
+import { uniqueBy } from './uniqueBy';
+
+it('should render an unique array of objects', () => {
+    const notUniqObjArray = [{ id: 18, name: "non"}, { id: 21, name: "non" }, { id: 18, name: "non"}];
+    const uniqObjArray = uniqueBy(notUniqObjArray, "id");
+
+    expect(uniqObjArray.length).toEqual(2);
+    expect(uniqObjArray[0].id).toEqual(18);
+    expect(uniqObjArray[1].id).toEqual(21);
+    expect(uniqObjArray[2]).toBeFalsy();
+}); 
+
+it('should render an unique array of objects filtered by another key than ID', () => {
+    const notUniqObjArray = [{ age: 18, name: "non"}, { age: 21, name: "non" }, { age: 18, name: "non"}];
+    const uniqObjArray = uniqueBy(notUniqObjArray, "age");
+
+    expect(uniqObjArray.length).toEqual(2);
+    expect(uniqObjArray[0].age).toEqual(18);
+    expect(uniqObjArray[1].age).toEqual(21);
+    expect(uniqObjArray[2]).toBeFalsy();
+}); 
+
+it('shouldn\'t break if array is empty', () => {
+    const notUniqObjArray = [];
+    const uniqObjArray = uniqueBy(notUniqObjArray, "uniqueKey");
+
+    expect(uniqObjArray.length).toEqual(0);
+    expect(uniqObjArray).toEqual([]);
+}); 

package/src/components/vote/suggestion_vote_box/SuggestionVoteBox.docs.mdx

@@ -0,0 +1,24 @@
+---
+description: A vote box allowing user to up and down vote.
+labels: ['vote', 'vote-button']
+---
+
+A button allowing users to upvote or downvote on items.
+
+Button can be disabled if needed.
+
+### Component usage
+
+```js
+import { SuggestionVoteBox } from '@logora/debate.vote.suggestion_vote_box';
+```
+
+```js
+<SuggestionVoteBox
+    voteableType={"Message"}
+    voteableId={45}
+    totalUpvote={10}
+    totalDownvote={0}
+    disabled={false}
+/>
+```

package/src/components/vote/suggestion_vote_box/SuggestionVoteBox.jsx

@@ -0,0 +1,87 @@
+import React, { Suspense } from "react";
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useModal } from "@logora/debate/dialog/modal";
+import { useVote } from "@logora/debate/vote/use_vote";
+import { useIntl } from "react-intl";
+import { Icon } from "@logora/debate/icons/icon";
+import { ConfirmModal } from "@logora/debate/dialog/confirm_modal";
+import { Button } from '@logora/debate/action/button';
+import styles from "./SuggestionVoteBox.module.scss";
+import PropTypes from "prop-types";
+
+export const SuggestionVoteBox = ({ voteableType, voteableId, totalUpvote = 0, totalDownvote = 0, onVote, disabled = false }) => {
+  const intl = useIntl();
+  const { isLoggedIn } = useAuth();
+  const { activeVote, voteSide, handleVote } = useVote(
+    voteableType,
+    voteableId,
+    totalUpvote,
+    totalDownvote,
+    onVote
+  );
+  const { showModal } = useModal();
+
+  const handleDownvote = () => {
+    if (isLoggedIn) {
+      if(!(activeVote && !voteSide)) {
+        showModal(
+          <Suspense fallback={null}>
+            <ConfirmModal
+              title={intl.formatMessage({ id: "vote.suggestion_vote_box.downvote", defaultMessage: "Not interested" })}
+              question={intl.formatMessage({
+                id: "vote.suggestion_vote_box.confirm_suggestion_downvote",
+                defaultMessage: "Your vote should judge the quality of the question. Are you sure you want to continue ?"
+              })}
+              confirmLabel={intl.formatMessage({ id: "info.yes", defaultMessage: "Yes" })}
+              cancelLabel={intl.formatMessage({ id: "info.no", defaultMessage: "No" })}
+              onConfirmCallback={ () => handleVote(false) }
+            />
+          </Suspense>
+        )
+      } else {
+        handleVote(false)
+      }
+    }
+  };
+
+  return (
+    <div className={styles.voteButtonsContainer}>
+      <Button
+        type="button"
+        onClick={disabled ? null : () => handleVote(true)}
+        data-testid="upvote-button"
+        disabled={disabled}
+        rightIcon={<Icon name="check" width={20} height={20} data-testid="upvote-icon" aria-hidden="true"/>}
+        active={!(activeVote && voteSide)}
+      >
+        <span className={styles.text}>
+          {intl.formatMessage({ id: "vote.suggestion_vote_box.upvote", defaultMessage: "I'm interested" })}
+        </span>
+      </Button>
+      <Button
+        type="button"
+        onClick={disabled ? null : () => handleDownvote()}
+        disabled={disabled}
+        rightIcon={<Icon name="close" width={10} height={10} aria-hidden="true" />}
+        active={!(activeVote && !voteSide)}
+      >
+        <span className={styles.text}>
+          {intl.formatMessage({ id: "vote.suggestion_vote_box.downvote", defaultMessage: "Not interested" })}
+        </span>
+      </Button>
+    </div>
+  );
+};
+
+SuggestionVoteBox.propTypes = {
+  /** The type of the vote */
+  voteableType: PropTypes.string.isRequired,
+  /** The id of the element */
+  voteableId: PropTypes.number.isRequired,
+  /** Total upvotes  */
+  totalUpvote: PropTypes.number,
+  /** Total downvotes */
+  totalDownvote: PropTypes.number,
+  /** Disable vote button */
+  disabled: PropTypes.bool
+};

package/src/components/vote/suggestion_vote_box/SuggestionVoteBox.module.scss

@@ -0,0 +1,17 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.voteButtonsContainer {
+    display: flex !important;
+    align-items: center !important;
+    flex-wrap: wrap;
+    gap: spacing.$spacer;
+}
+
+.text {
+    font-size: theme.$font-size-extra-small;
+    font-weight: theme.$font-weight-bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/src/components/vote/suggestion_vote_box/SuggestionVoteBox.stories.jsx

@@ -0,0 +1,97 @@
+export default {
+    title: 'Vote/Suggestion Vote Box',
+    component: SuggestionVoteBox,
+    args: {},
+    argTypes: {}
+};
+
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { SuggestionVoteBox } from './SuggestionVoteBox';
+import { VoteProvider } from '@logora/debate/vote/vote_provider';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+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 httpClient = {
+    get: () => null,
+    post: (url, data, config) => {
+        return new Promise((resolve, reject) => {
+            resolve({ data: { success: true, data: { resource: vote } } });
+        });
+    },
+    patch: () => null,
+    delete: (url, data, config) => {
+        return new Promise((resolve, reject) => {
+            resolve({ data: { success: true, data: {} } });
+        });
+    }
+};
+
+const currentUser = {
+    id: vote.user_id,
+}
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+export const DefaultSuggestionVoteBox = () => {
+    return (
+        <ConfigProvider config={{}}>
+            <IntlProvider locale='en'>
+                <DataProviderContext.Provider value={{ dataProvider: data }}>
+                    <IconProvider library={regularIcons}>
+                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                            <ModalProvider>
+                                <VoteProvider>
+                                    <SuggestionVoteBox
+                                        voteableType={vote.voteable_type}
+                                        voteableId={vote.voteable_id}
+                                        totalUpvote={10}
+                                        totalDownvote={0}
+                                    />
+                                </VoteProvider>
+                            </ModalProvider>
+                        </AuthContext.Provider>
+                    </IconProvider>
+                </DataProviderContext.Provider>
+            </IntlProvider>
+        </ConfigProvider>
+    );
+};
+
+export const DisabledSuggestinVoteBox = () => {
+    return (
+        <ConfigProvider config={{}}>
+            <IntlProvider locale='en'>
+                <DataProviderContext.Provider value={{ dataProvider: data }}>
+                    <IconProvider library={regularIcons}>
+                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                            <ModalProvider>
+                                <VoteProvider>
+                                    <SuggestionVoteBox
+                                        voteableType={vote.voteable_type}
+                                        voteableId={vote.voteable_id}
+                                        totalUpvote={10}
+                                        totalDownvote={0}
+                                        disabled={true}
+                                    />
+                                </VoteProvider>
+                            </ModalProvider>
+                        </AuthContext.Provider>
+                    </IconProvider>
+                </DataProviderContext.Provider>
+            </IntlProvider>
+        </ConfigProvider>
+    );
+};

package/src/components/vote/suggestion_vote_box/SuggestionVoteBox.test.jsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
+import { SuggestionVoteBox } from './SuggestionVoteBox';
+import { VoteProvider } from '@logora/debate/vote/vote_provider';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+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 httpClient = {
+    get: () => null,
+    post: (url, data, config) => {
+        return new Promise((resolve, reject) => {
+            resolve({ data: { success: true, data: { resource: vote } } });
+        });
+    },
+    patch: () => null,
+    delete: (url, data, config) => {
+        return new Promise((resolve, reject) => {
+            resolve({ data: { success: true, data: {} } });
+        });
+    }
+};
+
+const currentUser = {
+    id: vote.user_id,
+}
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+const callback = vi.fn();
+
+afterEach(() => {
+    vi.clearAllMocks();
+});
+
+describe('UpDownVoteBox', () => {
+    it('should render correct upvotes and downvotes', () => {
+        const { queryByText } = render(
+            <ConfigProvider config={{}}>
+                <IntlProvider locale='en'>
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <IconProvider library={regularIcons}>
+                            <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                <ModalProvider>
+                                    <VoteProvider>
+                                        <SuggestionVoteBox
+                                            voteableType={vote.voteable_type}
+                                            voteableId={vote.voteable_id}
+                                            totalUpvote={10}
+                                            totalDownvote={12}
+                                        />
+                                    </VoteProvider>
+                                </ModalProvider>
+                            </AuthContext.Provider>
+                        </IconProvider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </ConfigProvider>
+        );
+
+        expect(queryByText("Not interested")).toBeInTheDocument();
+        expect(queryByText("I'm interested")).toBeInTheDocument();
+    });
+
+    it('should add user upvote', async () => {
+        const container = render(
+            <ConfigProvider config={{}}>
+                <IntlProvider locale='en'>
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <IconProvider library={regularIcons}>
+                            <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                <ModalProvider>
+                                    <VoteProvider>
+                                        <SuggestionVoteBox
+                                            voteableType={vote.voteable_type}
+                                            voteableId={vote.voteable_id}
+                                            totalUpvote={10}
+                                            totalDownvote={14}
+                                            onVote={callback}
+                                        />
+                                    </VoteProvider>
+                                </ModalProvider>
+                            </AuthContext.Provider>
+                        </IconProvider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </ConfigProvider>
+        );
+
+        const voteBox = container.getByTestId("upvote-button");
+        const upvoteIcon = container.getByTestId("upvote-icon");
+        await userEvent.click(voteBox);
+
+        expect(voteBox).not.toHaveClass('active');
+        expect(upvoteIcon).toBeInTheDocument();        
+        expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it('should add user upvote and delete it when clicking again', async () => {
+        const container = render(
+            <ConfigProvider config={{}}>
+                <IntlProvider locale='en'>
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <IconProvider library={regularIcons}>
+                            <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                <ModalProvider>
+                                    <VoteProvider>
+                                        <SuggestionVoteBox
+                                            voteableType={vote.voteable_type}
+                                            voteableId={vote.voteable_id}
+                                            totalUpvote={5}
+                                            totalDownvote={32}
+                                            onVote={callback}
+                                        />
+                                    </VoteProvider>
+                                </ModalProvider>
+                            </AuthContext.Provider>
+                        </IconProvider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </ConfigProvider>
+        );
+
+        const voteBox = container.getByTestId("upvote-button");
+        await userEvent.click(voteBox);
+
+        expect(voteBox).not.toHaveClass('active');
+        expect(callback).toHaveBeenCalledTimes(1);
+
+        await userEvent.click(voteBox);
+
+        expect(voteBox).toHaveClass('active');
+        expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it('should do nothing if disabled', async () => {
+        const container = render(
+            <ConfigProvider config={{}}>
+                <IntlProvider locale='en'>
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <IconProvider library={regularIcons}>
+                            <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                <ModalProvider>
+                                    <VoteProvider>
+                                        <SuggestionVoteBox
+                                            voteableType={vote.voteable_type}
+                                            voteableId={vote.voteable_id}
+                                            totalUpvote={50}
+                                            totalDownvote={0}
+                                            disabled
+                                        />
+                                    </VoteProvider>
+                                </ModalProvider>
+                            </AuthContext.Provider>
+                        </IconProvider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </ConfigProvider>
+        );
+
+        const voteBox = container.getByTestId("upvote-button");
+        const upvoteIcon = container.getByTestId("upvote-icon");
+        await userEvent.click(voteBox);
+
+        expect(callback).toHaveBeenCalledTimes(0);
+        expect(upvoteIcon).toBeInTheDocument();
+        expect(voteBox).toHaveClass('active');
+    });
+});

package/src/components/vote/suggestion_vote_box/index.js

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

package/src/components/vote/up_down_vote_box/UpDownVoteBox.docs.mdx

@@ -0,0 +1,24 @@
+---
+description: A vote box allowing user to up and down vote.
+labels: ['vote', 'vote-button']
+---
+
+A button allowing users to upvote or downvote on items and and displays the number of support and opponent votes.
+
+Button can be disabled if needed.
+
+### Component usage
+
+```js
+import { UpDownVoteBox } from '@logora/debate.vote.up_down_vote_box';
+```
+
+```js
+<UpDownVoteBox
+    voteableType={"Message"}
+    voteableId={45}
+    totalUpvote={10}
+    totalDownvote={0}
+    disabled={false}
+/>
+```

package/src/components/vote/up_down_vote_box/UpDownVoteBox.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { useVote } from "@logora/debate/vote/use_vote";
+import { useIntl } from "react-intl";
+import { Icon } from "@logora/debate/icons/icon";
+import cx from "classnames";
+import styles from "./UpDownVoteBox.module.scss";
+import PropTypes from "prop-types";
+
+export const UpDownVoteBox = ({ voteableType, voteableId, totalUpvote = 0, totalDownvote = 0, disabled = false }) => {
+    const { totalUpvotes, totalDownvotes, activeVote, voteSide, handleVote } =
+        useVote(
+            voteableType,
+            voteableId,
+            totalUpvote,
+            totalDownvote
+        );
+    const intl = useIntl();
+
+    return (
+        <div className={styles.container}>
+            <div
+                className={cx(styles.upvoteContainer, {
+                    [styles.disabled]: disabled,
+                    [styles.active]: activeVote && voteSide,
+                })}
+                onClick={disabled ? null : () => handleVote(true)}
+                data-testid="upvote-button"
+            >
+                <Icon name="upvote" width={27} height={25} aria-label={intl.formatMessage({id: "vote.up_down_vote_box.supporters", defaultMessage: "supporters"})} />
+                <div className={styles.voteText}>
+                    {totalUpvotes}
+                </div>
+            </div>
+            <div
+                className={cx(styles.downvoteContainer, {
+                    [styles.disabled]: disabled,
+                    [styles.active]: activeVote && !voteSide,
+                })}
+                onClick={disabled ? null : () => handleVote(false)}
+                data-testid="downvote-button"
+            >
+                <Icon name="downvote" width={27} height={25} aria-label={intl.formatMessage({id: "vote.up_down_vote_box.opponents", defaultMessage: "opponents"})}/>
+                <div className={styles.voteText}>
+                    {totalDownvotes}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+UpDownVoteBox.propTypes = {
+    /** The type of the vote */
+    voteableType: PropTypes.string.isRequired,
+    /** The id of the element */
+    voteableId: PropTypes.number.isRequired,
+    /** Total upvotes  */
+    totalUpvote: PropTypes.number,
+    /** Total downvotes */
+    totalDownvote: PropTypes.number,
+    /** Button custom class name when active */
+    activeClassName: PropTypes.string,
+    /** Disable vote button */
+    disabled: PropTypes.bool
+};

package/src/components/vote/up_down_vote_box/UpDownVoteBox.module.scss

@@ -0,0 +1,35 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.container {
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+.upvoteContainer {
+    @include spacing.mr(4, xs);
+}
+
+.upvoteContainer, .downvoteContainer {
+    cursor: pointer;
+    display: flex !important;
+    align-items: center !important;
+    font-size: theme.$font-size-extra-small;
+}
+
+.voteText {
+    @include spacing.ml(2, xs);
+}
+
+.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.active span {
+    color: theme.$call-primary;
+}
+
+.active svg {
+    fill: theme.$call-primary;
+}