@logora/debate 0.1.0

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

@@ -0,0 +1,97 @@
+export default {
+    title: 'Vote/Up Down Vote Box',
+    component: UpDownVoteBox,
+    args: {},
+    argTypes: {}
+};
+
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { UpDownVoteBox } from './UpDownVoteBox';
+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(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 data = dataProvider(httpClient, "https://mock.example.api");
+
+export const DefaultVoteBox = () => {
+    return (
+        <ConfigProvider config={{}}>
+            <IntlProvider locale='en'>
+                <DataProviderContext.Provider value={{ dataProvider: data }}>
+                    <IconProvider library={regularIcons}>
+                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                            <ModalProvider>
+                                <VoteProvider>
+                                    <UpDownVoteBox
+                                        voteableType={vote.voteable_type}
+                                        voteableId={vote.voteable_id}
+                                        totalUpvote={10}
+                                        totalDownvote={0}
+                                    />
+                                </VoteProvider>
+                            </ModalProvider>
+                        </AuthContext.Provider>
+                    </IconProvider>
+                </DataProviderContext.Provider>
+            </IntlProvider>
+        </ConfigProvider>
+    );
+};
+
+export const DisabledVoteBox = () => {
+    return (
+        <ConfigProvider config={{}}>
+            <IntlProvider locale='en'>
+                <DataProviderContext.Provider value={{ dataProvider: data }}>
+                    <IconProvider library={regularIcons}>
+                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                            <ModalProvider>
+                                <VoteProvider>
+                                    <UpDownVoteBox
+                                        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/up_down_vote_box/UpDownVoteBox.test.jsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
+import { UpDownVoteBox } from './UpDownVoteBox';
+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(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 data = dataProvider(httpClient, "https://mock.example.api");
+
+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>
+                                        <UpDownVoteBox
+                                            voteableType={vote.voteable_type}
+                                            voteableId={vote.voteable_id}
+                                            totalUpvote={10}
+                                            totalDownvote={12}
+                                        />
+                                    </VoteProvider>
+                                </ModalProvider>
+                            </AuthContext.Provider>
+                        </IconProvider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </ConfigProvider>
+        );
+
+        expect(queryByText("10")).toBeInTheDocument();
+        expect(queryByText("12")).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>
+                                        <UpDownVoteBox
+                                            voteableType={vote.voteable_type}
+                                            voteableId={vote.voteable_id}
+                                            totalUpvote={10}
+                                            totalDownvote={14}
+                                        />
+                                    </VoteProvider>
+                                </ModalProvider>
+                            </AuthContext.Provider>
+                        </IconProvider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </ConfigProvider>
+        );
+
+        expect(container.queryByText("10")).toBeInTheDocument();
+        expect(container.queryByText("14")).toBeInTheDocument();
+        const voteBox = container.getByTestId("upvote-button");
+        await userEvent.click(voteBox);
+
+        expect(container.queryByText("11")).toBeInTheDocument();
+        expect(container.queryByText("14")).toBeInTheDocument();
+    });
+
+    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>
+                                        <UpDownVoteBox
+                                            voteableType={vote.voteable_type}
+                                            voteableId={vote.voteable_id}
+                                            totalUpvote={5}
+                                            totalDownvote={32}
+                                        />
+                                    </VoteProvider>
+                                </ModalProvider>
+                            </AuthContext.Provider>
+                        </IconProvider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </ConfigProvider>
+        );
+
+        expect(container.getByText("5")).toBeInTheDocument();
+        expect(container.queryByText("32")).toBeInTheDocument();
+
+        const voteBox = container.getByTestId("upvote-button");
+        await userEvent.click(voteBox);
+        expect(container.getByText("6")).toBeInTheDocument();
+        expect(container.queryByText("32")).toBeInTheDocument();
+
+        await userEvent.click(voteBox);
+        expect(container.getByText("5")).toBeInTheDocument();
+        expect(container.queryByText("32")).toBeInTheDocument();
+    });
+
+    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>
+                                        <UpDownVoteBox
+                                            voteableType={vote.voteable_type}
+                                            voteableId={vote.voteable_id}
+                                            totalUpvote={50}
+                                            totalDownvote={0}
+                                            disabled
+                                        />
+                                    </VoteProvider>
+                                </ModalProvider>
+                            </AuthContext.Provider>
+                        </IconProvider>
+                    </DataProviderContext.Provider>
+                </IntlProvider>
+            </ConfigProvider>
+        );
+
+        expect(container.getByText("50")).toBeInTheDocument();
+        const voteBox = container.getByTestId("upvote-button");
+        await userEvent.click(voteBox);
+
+        expect(container.getByText("50")).toBeInTheDocument();
+    });
+});

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

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

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

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

package/src/components/vote/use_vote/useVote.docs.mdx

@@ -0,0 +1,42 @@
+---
+description: Documentation for useVote
+labels: ["vote", "hook", "use-vote"]
+---
+
+`useVote` is a custom hook designed to handle the voting system in our application. It provides a set of values and functions to manage votes.
+
+## Returns
+
+`useVote` returns an object with the following properties:
+
+1. `totalUpvotes`: The total number of upvotes for the voteable item.
+2. `totalDownvotes`: The total number of downvotes for the voteable item.
+3. `activeVote`: A boolean indicating whether a vote is active or not.
+4. `voteSide`: A boolean indicating whether the active vote is an upvote (true) or a downvote (false).
+5. `handleVote`: A function that can be called to trigger a vote.
+
+### Component usage
+
+```js
+import { useVote } from "@logora/debate.hooks.use_vote";
+```
+
+```js
+function VotingComponent({ voteableType, voteableId, upvotes, downvotes }) {
+  const { totalUpvotes, totalDownvotes, handleVote } = useVote(
+    voteableType,
+    voteableId,
+    upvotes,
+    downvotes
+  );
+
+  return (
+    <div>
+      <button onClick={() => handleVote(true)}>Upvote</button>
+      <button onClick={() => handleVote(false)}>Downvote</button>
+      <p>Upvotes: {totalUpvotes}</p>
+      <p>Downvotes: {totalDownvotes}</p>
+    </div>
+  );
+}
+```

package/src/components/vote/use_vote/useVote.jsx

@@ -0,0 +1,165 @@
+import { useState, useEffect, useContext } from "react";
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useDataProvider } from "@logora/debate/data/data_provider";
+import { useAuthRequired } from "@logora/debate/hooks/use_auth_required";
+import { VoteContext } from "@logora/debate/vote/vote_provider";
+import PropTypes from "prop-types";
+
+export const useVote = (
+	voteableType,
+	voteableId,
+	upvotes,
+	downvotes,
+	onVote = null,
+) => {
+	const { votes } = useContext(VoteContext);
+	const { isLoggedIn } = useAuth();
+	const api = useDataProvider();
+
+	const [activeVote, setActiveVote] = useState(false);
+	const [voteSide, setVoteSide] = useState(true);
+	const [voteId, setVoteId] = useState();
+	const [totalUpvotes, setTotalUpvotes] = useState(upvotes);
+	const [totalDownvotes, setTotalDownvotes] = useState(downvotes);
+	const [voteDisabled, setVoteDisabled] = useState(false);
+	const [hasVoted, setHasVoted] = useState(false);
+	const requireAuthentication = useAuthRequired();
+
+	useEffect(() => {
+		if (!hasVoted && isLoggedIn) {
+			if (Object.keys(votes).length > 0 && voteableId in votes) {
+				const initVote = votes[voteableId];
+				setHasVoted(true);
+				setActiveVote(Boolean(initVote));
+				setVoteSide(initVote?.is_upvote);
+				setVoteId(initVote?.id);
+			}
+		}
+	}, [votes, isLoggedIn]);
+
+	const activateVote = (isUpvote) => {
+		setActiveVote(true);
+		setVoteSide(isUpvote);
+
+		const newTotalUpvotes = isUpvote ? totalUpvotes + 1 : totalUpvotes;
+		const newTotalDownvotes = isUpvote ? totalDownvotes : totalDownvotes + 1;
+		onVote?.(isUpvote, true, newTotalUpvotes, newTotalDownvotes);
+
+		if (isUpvote) {
+			setTotalUpvotes(prevState => prevState + 1);
+		} else {
+			setTotalDownvotes(prevState => prevState + 1);
+		}
+	};
+
+	const deactivateVote = (isUpvote) => {
+		setActiveVote(false);
+
+		const newTotalUpvotes = isUpvote ? totalUpvotes - 1 : totalUpvotes;
+		const newTotalDownvotes = isUpvote ? totalDownvotes : totalDownvotes - 1;
+		onVote?.(isUpvote, false, newTotalUpvotes, newTotalDownvotes);
+
+		if (isUpvote) {
+			setTotalUpvotes(prevState => prevState - 1);
+		} else {
+			setTotalDownvotes(prevState => prevState - 1);
+		}
+	};
+
+	const voteAction = (isUpvote) => {
+		if (activeVote) {
+			if (voteSide === isUpvote) {
+				deactivateVote(isUpvote);
+				setVoteDisabled(true);
+				api.delete("votes", voteId).then(
+					(response) => {
+						if (response.data?.success) {
+							setVoteId(null);
+						} else {
+							activateVote(isUpvote);
+						}
+						setVoteDisabled(false);
+					},
+					(error) => {
+						activateVote(isUpvote);
+						setVoteDisabled(false);
+					},
+				);
+			} else {
+				deactivateVote(!isUpvote);
+				activateVote(isUpvote);
+				const data = {
+					is_upvote: isUpvote,
+				};
+				setVoteDisabled(true);
+				api.update("votes", voteId, data).then(
+					(response) => {
+						if (!response.data?.success) {
+							deactivateVote(isUpvote);
+							activateVote(!isUpvote);
+						}
+						setVoteDisabled(false);
+					},
+					(error) => {
+						deactivateVote(isUpvote);
+						activateVote(!isUpvote);
+						setVoteDisabled(false);
+					},
+				);
+			}
+		} else {
+			const data = {
+				voteable_id: voteableId,
+				voteable_type: voteableType,
+				is_upvote: isUpvote,
+			};
+			activateVote(isUpvote);
+			setVoteDisabled(true);
+			api.create("votes", data).then(
+				(response) => {
+					if (response.data?.success) {
+						setVoteId(response.data.data.resource.id);
+					} else {
+						deactivateVote(isUpvote);
+					}
+					setVoteDisabled(false);
+				},
+				(error) => {
+					deactivateVote(isUpvote);
+					setVoteDisabled(false);
+				},
+			);
+		}
+	};
+
+	const handleVote = (isUpvote) => {
+		if (!voteDisabled) {
+			if (isLoggedIn) {
+				voteAction(isUpvote);
+			} else {
+				requireAuthentication({ loginAction: "vote" });
+			}
+		}
+	};
+
+	return {
+		totalUpvotes,
+		totalDownvotes,
+		activeVote,
+		voteSide,
+		handleVote,
+	};
+};
+
+useVote.propTypes = {
+	/** Type of the voteable element (e.g., "article", "comment", etc.) */
+	voteableType: PropTypes.string.isRequired,
+	/** ID of the voteable element */
+	voteableId: PropTypes.string.isRequired,
+	/**  Initial number of upvotes */
+	upvotes: PropTypes.number.isRequired,
+	/**  Initial number of downvotes */
+	downvotes: PropTypes.number.isRequired,
+	/**  Callback called when a vote is made (optional) */
+	onVote: PropTypes.func,
+};