@logora/debate 0.1.0

package/src/components/vote/vote_box/VoteBox.stories.jsx

@@ -0,0 +1,319 @@
+export default {
+    title: 'Vote/Vote Box',
+    component: VoteBox,
+    args: {},
+    argTypes: {}
+};
+
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+import { VoteBox } from './VoteBox';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { Location } from '@logora/debate/util/location';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { VoteProvider } from '@logora/debate/vote/vote_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { ToastProvider } from '@logora/debate/dialog/toast_provider';
+import { faker } from '@faker-js/faker';
+
+const routes = {
+    debateShowLocation: new Location('espace-debat/debate/:debateSlug', { debateSlug: '' })
+};
+
+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(function(resolve, reject) {
+            resolve({ data: { success: true, data: { resource: vote } }});
+        });
+    },
+    patch: () => null,
+    delete: (url, data, config) => {
+        return new Promise(function(resolve, reject) {
+            resolve({ data: { success: true, data: {} }});
+        });
+    }
+};
+
+const currentUser = {
+    id: vote.user_id,
+}
+
+const votePositions = [
+    { id: 1, name: 'Yes' },
+    { id: 2, name: 'No' },
+];
+
+const threeVotePositions = [
+    { id: 1, name: 'Yes' },
+    { id: 2, name: 'No' },
+    { id: 3, name: 'No Opinion' },
+];
+
+const debate = {
+    id: faker.number.int(),
+    votes_count: {
+        total: 15,
+        1: 10,
+        2: 5,
+    },
+    messages_count: 23,
+};
+
+const debateThreeVotePositions = {
+    id: 1,
+    votes_count: {
+        1: "10",
+        2: "8",
+        3: "6",
+        total: "24"
+    }
+};
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+export const DefaultVoteBox = () => {
+    return (
+        <div style={{ width: "400px" }}>
+            <BrowserRouter>
+                <IntlProvider locale="en">
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                            <IconProvider library={regularIcons}>
+                                <ToastProvider>
+                                    <ConfigProvider config={{}} routes={{ ...routes }}>
+                                        <ModalProvider>
+                                            <VoteProvider>
+                                                <VoteBox 
+                                                    voteableId={debate.id}
+                                                    numberVotes={debate.votes_count}
+                                                    voteableType={"Group"}
+                                                    votePositions={votePositions}
+                                                    displayColumn
+                                                />
+                                            </VoteProvider>
+                                        </ModalProvider>
+                                    </ConfigProvider>
+                                </ToastProvider>
+                            </IconProvider>
+                        </AuthContext.Provider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </BrowserRouter>
+        </div>
+    );
+};
+
+export const VoteBoxRow = () => {
+    return (
+        <div style={{ width: "400px" }}>
+            <BrowserRouter>
+                <IntlProvider locale="en">
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                            <IconProvider library={regularIcons}>
+                                <ToastProvider>
+                                    <ConfigProvider config={{}} routes={{ ...routes }}>
+                                        <ModalProvider>
+                                            <VoteProvider>
+                                                <VoteBox 
+                                                    voteableId={debate.id}
+                                                    numberVotes={debate.votes_count}
+                                                    voteableType={"Group"}
+                                                    votePositions={votePositions}
+                                                />
+                                            </VoteProvider>
+                                        </ModalProvider>
+                                    </ConfigProvider>
+                                </ToastProvider>
+                            </IconProvider>
+                        </AuthContext.Provider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </BrowserRouter>
+        </div>
+    );
+};
+
+export const VoteBoxFullWidth = () => {
+    return (
+        <div style={{ width: "400px" }}>
+            <BrowserRouter>
+                <IntlProvider locale="en">
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                            <IconProvider library={regularIcons}>
+                                <ToastProvider>
+                                    <ConfigProvider config={{}} routes={{ ...routes }}>
+                                        <ModalProvider>
+                                            <VoteProvider>
+                                                <VoteBox 
+                                                    voteableId={debate.id}
+                                                    numberVotes={debate.votes_count}
+                                                    voteableType={"Group"}
+                                                    votePositions={votePositions}
+                                                    displayColumn
+                                                    textAlignLeft
+                                                />
+                                            </VoteProvider>
+                                        </ModalProvider>
+                                    </ConfigProvider>
+                                </ToastProvider>
+                            </IconProvider>
+                        </AuthContext.Provider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </BrowserRouter>
+        </div>
+    );
+};
+
+export const VoteBoxNeutralPosition = () => {
+    return (
+        <div style={{ width: "400px" }}>
+            <BrowserRouter>
+                <IntlProvider locale="en">
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                            <IconProvider library={regularIcons}>
+                                <ToastProvider>
+                                    <ConfigProvider config={{}} routes={{ ...routes }}>
+                                        <ModalProvider>
+                                            <VoteProvider>
+                                                <VoteBox 
+                                                    voteableId={debateThreeVotePositions.id}
+                                                    numberVotes={debateThreeVotePositions.votes_count}
+                                                    voteableType={"Group"}
+                                                    votePositions={threeVotePositions}
+                                                    displayColumn
+                                                />
+                                            </VoteProvider>
+                                        </ModalProvider>
+                                    </ConfigProvider>
+                                </ToastProvider>
+                            </IconProvider>
+                        </AuthContext.Provider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </BrowserRouter>
+        </div>
+    );
+};
+
+export const VoteBoxDisabled = () => {
+    return (
+        <div style={{ width: "400px" }}>
+            <BrowserRouter>
+                <IntlProvider locale="en">
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                            <IconProvider library={regularIcons}>
+                                <ToastProvider>
+                                    <ConfigProvider config={{}} routes={{ ...routes }}>
+                                        <ModalProvider>
+                                            <VoteProvider>
+                                                <VoteBox 
+                                                    voteableId={debateThreeVotePositions.id}
+                                                    numberVotes={debateThreeVotePositions.votes_count}
+                                                    voteableType={"Group"}
+                                                    votePositions={threeVotePositions}
+                                                    displayColumn
+                                                    disabled
+                                                />
+                                            </VoteProvider>
+                                        </ModalProvider>
+                                    </ConfigProvider>
+                                </ToastProvider>
+                            </IconProvider>
+                        </AuthContext.Provider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </BrowserRouter>
+        </div>
+    );
+};
+
+export const VoteBoxWithVotesAndComments = () => {
+    return (
+        <div style={{ width: "400px" }}>
+            <BrowserRouter>
+                <IntlProvider locale="en">
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                            <IconProvider library={regularIcons}>
+                                <ToastProvider>
+                                    <ConfigProvider config={{}} routes={{ ...routes }}>
+                                        <ModalProvider>
+                                            <VoteProvider>
+                                                <VoteBox
+                                                    voteableId={debate.id}
+                                                    numberVotes={debate.votes_count}
+                                                    voteableType={"Group"}
+                                                    votePositions={votePositions}
+                                                    showTotal={false}
+                                                    showVotesCommentsNumber={true}
+                                                    commentsCount={debate.messages_count}
+                                                />
+                                            </VoteProvider>
+                                        </ModalProvider>
+                                    </ConfigProvider>
+                                </ToastProvider>
+                            </IconProvider>
+                        </AuthContext.Provider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </BrowserRouter>
+        </div>
+    );
+};
+
+export const VoteBoxHideShowResultButton = () => {
+    return (
+      <div style={{ width: "400px" }}>
+        <BrowserRouter>
+          <IntlProvider locale="en">
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+              <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                <IconProvider library={regularIcons}>
+                  <ToastProvider>
+                    <ConfigProvider
+                      config={{
+                        actions: {
+                          hideSHowResultButton: true
+                        }
+                      }}
+                      routes={{ ...routes }}
+                    >
+                      <ModalProvider>
+                        <VoteProvider>
+                          <VoteBox
+                            voteableId={debate.id}
+                            numberVotes={debate.votes_count}
+                            voteableType={"Group"}
+                            votePositions={votePositions}
+                            displayColumn
+                          />
+                        </VoteProvider>
+                      </ModalProvider>
+                    </ConfigProvider>
+                  </ToastProvider>
+                </IconProvider>
+              </AuthContext.Provider>
+            </DataProviderContext.Provider>
+          </IntlProvider>
+        </BrowserRouter>
+      </div>
+    );
+  };
+  

package/src/components/vote/vote_box/VoteBox.test.jsx

@@ -0,0 +1,256 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+import { render, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { VoteBox } from './VoteBox';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { Location } from '@logora/debate/util/location';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { VoteProvider } from '@logora/debate/vote/vote_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import { ToastProvider } from '@logora/debate/dialog/toast_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const routes = {
+    debateShowLocation: new Location('espace-debat/debate/:debateSlug', { debateSlug: '' })
+};
+
+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(function(resolve, reject) {
+            resolve({ data: { success: true, data: { resource: vote } }});
+        });
+    },
+    patch: () => null,
+    delete: (url, data, config) => {
+        return new Promise(function(resolve, reject) {
+            resolve({ data: { success: true, data: {} }});
+        });
+    }
+};
+
+const currentUser = {
+    id: vote.user_id,
+}
+
+const debate = {
+    id: faker.number.int(),
+    votes_count: {
+        total: 10,
+        1: 5,
+        2: 5,
+        3: 0
+    }
+};
+
+const votePositions = [
+    { id: 1, name: 'Position 1' },
+    { id: 2, name: 'Position 2' },
+    { id: 3, name: 'Position 3' },
+];
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+const VoteBoxWrapper = (props) => {
+    return(
+        <BrowserRouter>
+            <IntlProvider locale="en">
+                <DataProviderContext.Provider value={{ dataProvider: data }}>
+                    <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                        <IconProvider library={regularIcons}>
+                            <ToastProvider>
+                                <ConfigProvider config={{}} routes={{ ...routes }}>
+                                    <ModalProvider>
+                                        <VoteProvider>
+                                            {props.children}
+                                        </VoteProvider>
+                                    </ModalProvider>
+                                </ConfigProvider>
+                            </ToastProvider>
+                        </IconProvider>
+                    </AuthContext.Provider>
+                </DataProviderContext.Provider>
+            </IntlProvider>
+        </BrowserRouter>
+    )
+};
+
+describe('VoteBox Component', () => {
+
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: vi.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: vi.fn(),
+                removeListener: vi.fn(),
+                addEventListener: vi.fn(),
+                removeEventListener: vi.fn(),
+                dispatchEvent: vi.fn(),
+            })),
+        });
+    });
+
+    it('should render component correctly', () => {
+        const { getByText, getAllByTestId, queryByRole } = render(
+            <VoteBoxWrapper>
+                <VoteBox 
+                    voteableId={debate.id}
+                    voteableType={vote.voteable_type}
+                    votePositions={votePositions}
+                    numberVotes={debate.votes_count}
+                />
+            </VoteBoxWrapper>
+        );
+
+        const voteButtons = getAllByTestId('voteButton');
+        expect(voteButtons).toHaveLength(3);
+        expect(voteButtons[0].getAttribute('title')).toBe('Position 1');
+        expect(voteButtons[1].getAttribute('title')).toBe('Position 2');
+        expect(voteButtons[2].getAttribute('title')).toBe('Position 3');
+
+        expect(queryByRole('link')).toBeNull();
+    });
+
+    it('should call callback', async () => {
+        const onVote = vi.fn();
+        const { getByTitle } = render(
+            <VoteBoxWrapper>
+                <VoteBox 
+                    voteableId={debate.id}
+                    voteableType={vote.voteable_type}
+                    votePositions={votePositions}
+                    numberVotes={debate.votes_count}
+                    onVote={onVote}
+                />
+            </VoteBoxWrapper>
+        );
+
+        const button = getByTitle('Position 1');
+        await userEvent.click(button)
+        expect(onVote).toHaveBeenCalled();
+    });
+
+    it('should show result when disabled', () => {
+        const { getAllByText, queryByText } = render(
+            <VoteBoxWrapper>
+                <VoteBox 
+                    voteableId={debate.id}
+                    voteableType={vote.voteable_type}
+                    votePositions={votePositions}
+                    numberVotes={debate.votes_count}
+                    disabled={true}
+                />
+            </VoteBoxWrapper>
+        );
+        
+        const resultPercentages = getAllByText(/\d+%$/i);
+        expect(resultPercentages).toHaveLength(3);
+        expect(within(resultPercentages[0]).getByText("50%")).toBeInTheDocument();
+        expect(within(resultPercentages[1]).getByText("50%")).toBeInTheDocument();
+        expect(within(resultPercentages[2]).getByText("0%")).toBeInTheDocument();
+
+        const modify = queryByText('Modify');
+        const backToVote = queryByText('Back to vote');
+        expect(modify).toBeNull();
+        expect(backToVote).toBeNull();
+    });
+
+    it('should display results', async () => {
+        const { getByTestId, getByText, getAllByText } = render(
+            <VoteBoxWrapper>
+                <VoteBox 
+                    voteableId={debate.id}
+                    voteableType={vote.voteable_type}
+                    votePositions={votePositions}
+                    numberVotes={debate.votes_count}
+                />
+            </VoteBoxWrapper>
+        );
+
+        const showResultLink = getByTestId('show-result');
+        expect(showResultLink).toBeInTheDocument();
+        await userEvent.click(showResultLink)
+
+        const backToVote = getByText('Back to vote');
+        const resultHeadings = getAllByText(/position \d/i);
+        const resultPercentages = getAllByText(/\d+%$/i);
+        expect(backToVote).toBeInTheDocument();
+        expect(resultHeadings).toHaveLength(3);
+        expect(resultPercentages).toHaveLength(3);
+        expect(within(resultPercentages[0]).getByText("50%")).toBeInTheDocument();
+        expect(within(resultPercentages[1]).getByText("50%")).toBeInTheDocument();
+        expect(within(resultPercentages[2]).getByText("0%")).toBeInTheDocument();
+    });
+
+    it('should add vote', async () => {
+        const { getByTitle, queryByText, getAllByText } = render(
+            <VoteBoxWrapper>
+                <VoteBox 
+                    voteableId={debate.id}
+                    votePositions={votePositions}
+                    numberVotes={debate.votes_count}
+                />
+            </VoteBoxWrapper>
+        );
+
+        const position1 = getByTitle('Position 1');
+        expect(queryByText('Modify')).toBeNull();
+        expect(queryByText('Show result')).toBeInTheDocument();
+
+        await userEvent.click(position1)
+        expect(queryByText('11 votes')).toBeInTheDocument();
+        expect(queryByText('Modify')).toBeInTheDocument();
+        expect(queryByText('Show result')).toBeNull();
+        const resultPercentages = getAllByText(/\d+%$/i);
+        expect(within(resultPercentages[0]).getByText("55%")).toBeInTheDocument();
+        expect(within(resultPercentages[1]).getByText("45%")).toBeInTheDocument();
+        expect(within(resultPercentages[2]).getByText("0%")).toBeInTheDocument();
+
+        await userEvent.click(queryByText('Modify'))
+        expect(queryByText('Show result')).toBeInTheDocument();
+        expect(queryByText('Modify')).toBeNull();
+    });
+
+    it('should redirect after vote', async () => {
+        const { getByTestId, getByTitle, queryAllByRole } = render(
+            <VoteBoxWrapper>
+                <VoteBox 
+                    voteableId={debate.id}
+                    votePositions={votePositions}
+                    numberVotes={debate.votes_count}
+                    redirectUrl={"myUrl"}
+                />
+            </VoteBoxWrapper>
+        );
+
+        expect(queryAllByRole('button')).toHaveLength(2);
+        
+
+        const showResultLink = getByTestId("show-result");
+        expect(showResultLink).toHaveAttribute("href", "myUrl?initVote=true");
+
+        const firstPosition = getByTitle("Position 1");
+        expect(firstPosition).toHaveAttribute("href", "myUrl?initVote=true&positionId=1");
+
+        const secondPosition = getByTitle("Position 2");
+        expect(secondPosition).toHaveAttribute("href", "myUrl?initVote=true&positionId=2");
+
+        const thirdPosition = getByTitle("Position 3");
+        expect(thirdPosition).toHaveAttribute("href", "myUrl?initVote=true&positionId=3");
+    });
+});

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

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

package/src/components/vote/vote_button/VoteButton.docs.mdx

@@ -0,0 +1,24 @@
+---
+description: A button allowing users to vote on items and and displays the number of support votes.
+labels: ['vote', 'vote-button']
+---
+
+A button allowing users to vote on items and and displays the number of support votes.
+
+Button can be disabled with a prop.
+
+### Component usage
+
+```js
+import { VoteButton } from '@logora/debate.vote.vote_button';
+```
+
+```js
+<VoteButton
+    voteableType={"Message"}
+    voteableId={45}
+    totalUpvote={10}
+    totalDownvote={0}
+    disabled={false}
+/>
+```

package/src/components/vote/vote_button/VoteButton.jsx

@@ -0,0 +1,59 @@
+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 "./VoteButton.module.scss";
+import PropTypes from "prop-types";
+
+export const VoteButton = ({ voteableType, voteableId, totalUpvote = 0, totalDownvote = 0, activeClassName, disabled = false }) => {
+    const { totalUpvotes, activeVote, handleVote } = useVote(
+        voteableType,
+        voteableId,
+        totalUpvote,
+        totalDownvote
+    );
+    const intl = useIntl();
+    
+    return (
+
+        <button
+            type="button"
+            className={cx(
+                styles.voteButton,
+                { [styles.active]: activeVote, [activeClassName]: activeVote, [styles.disabled]: disabled },
+            )}
+            onClick={disabled ? null : () => handleVote(true)}
+            data-testid="vote-button"
+            data-tid="action_vote_argument"
+            aria-pressed={activeVote}
+            aria-label={intl.formatMessage({
+                id: "vote.vote_button.aria_label",
+                defaultMessage: "Like argument"
+            })}
+        >
+            <Icon name="clap"
+                aria-hidden="true"
+                data-tid={"action_vote_argument"}
+                height={18}
+                width={18}
+            />
+            <span className={styles.voteNumber}>{totalUpvotes}</span>
+        </button>
+    );
+};
+
+VoteButton.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
+};