@logora/debate 0.1.0 → 0.2.0

package/src/components/vote/vote_button/VoteButton.module.scss

@@ -1,35 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-
-.voteButton {
-    background: none;
-    border: 0;
-    padding: 0;
-    margin: 0;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-    display: flex !important;
-    flex-direction: row !important;
-    align-items: center !important;
-    justify-content: flex-start !important;
-    gap: spacing.$spacer-sm;
-}
-
-.active {
-    font-weight: theme.$font-weight-bold;
-    color: theme.$call-primary;
-    & svg {
-        fill: theme.$call-primary !important;
-        fill-rule: evenodd;
-    }
-}
-
-.disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-    & svg {
-        fill: theme.$text-secondary;
-        fill-rule: evenodd;
-    }
-}

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

@@ -1,97 +0,0 @@
-export default {
-    title: 'Vote/Vote Button',
-    component: VoteButton,
-    args: {},
-    argTypes: {}
-};
-
-import React from 'react';
-import { IntlProvider } from 'react-intl';
-import { VoteButton } from './VoteButton';
-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 DefaultVoteButton = () => {
-    return (
-        <ConfigProvider config={{}}>
-            <IntlProvider locale='en'>
-                <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <IconProvider library={regularIcons}>
-                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
-                            <ModalProvider>
-                                <VoteProvider>
-                                    <VoteButton
-                                        voteableType={vote.voteable_type}
-                                        voteableId={vote.voteable_id}
-                                        totalUpvote={10}
-                                        totalDownvote={0}
-                                    />
-                                </VoteProvider>
-                            </ModalProvider>
-                        </AuthContext.Provider>
-                    </IconProvider>
-                </DataProviderContext.Provider>
-            </IntlProvider>
-        </ConfigProvider>
-    );
-};
-
-export const DisabledVoteButton = () => {
-    return (
-        <ConfigProvider config={{}}>
-            <IntlProvider locale='en'>
-                <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <IconProvider library={regularIcons}>
-                        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
-                            <ModalProvider>
-                                <VoteProvider>
-                                    <VoteButton
-                                        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/vote_button/VoteButton.test.jsx

@@ -1,167 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from 'react-intl';
-import { VoteButton } from './VoteButton';
-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('VoteButton', () => {
-    it('should render correct upvotes', () => {
-        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>
-                                        <VoteButton
-                                            voteableType={vote.voteable_type}
-                                            voteableId={vote.voteable_id}
-                                            totalUpvote={10}
-                                            totalDownvote={0}
-                                        />
-                                    </VoteProvider>
-                                </ModalProvider>
-                            </AuthContext.Provider>
-                        </IconProvider>
-                    </DataProviderContext.Provider>
-                </IntlProvider>
-            </ConfigProvider>
-        );
-
-        expect(queryByText(10)).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>
-                                        <VoteButton
-                                            voteableType={vote.voteable_type}
-                                            voteableId={vote.voteable_id}
-                                            totalUpvote={10}
-                                            totalDownvote={0}
-                                        />
-                                    </VoteProvider>
-                                </ModalProvider>
-                            </AuthContext.Provider>
-                        </IconProvider>
-                    </DataProviderContext.Provider>
-                </IntlProvider>
-            </ConfigProvider>
-        );
-
-        expect(container.queryByText(10)).toBeInTheDocument();
-        const voteButton = container.getByTestId("vote-button");
-        await userEvent.click(voteButton);
-
-        expect(container.queryByText(11)).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>
-                                        <VoteButton
-                                            voteableType={vote.voteable_type}
-                                            voteableId={vote.voteable_id}
-                                            totalUpvote={5}
-                                            totalDownvote={0}
-                                        />
-                                    </VoteProvider>
-                                </ModalProvider>
-                            </AuthContext.Provider>
-                        </IconProvider>
-                    </DataProviderContext.Provider>
-                </IntlProvider>
-            </ConfigProvider>
-        );
-
-        expect(container.getByText(5)).toBeInTheDocument();
-
-        const voteButton = container.getByTestId("vote-button");
-        await userEvent.click(voteButton);
-        expect(container.getByText(6)).toBeInTheDocument();
-
-        await userEvent.click(voteButton);
-        expect(container.getByText(5)).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>
-                                        <VoteButton
-                                            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 voteButton = container.getByTestId("vote-button");
-        await userEvent.click(voteButton);
-
-        expect(container.getByText(50)).toBeInTheDocument();
-    });
-});

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

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

package/src/components/vote/vote_provider/VoteProvider.docs.mdx

@@ -1,68 +0,0 @@
----
-description: Documentation for VoteProvider.jsx
-labels: ['vote', 'provider', 'vote-provider']
----
-
-The VoteProvider.jsx file is a React component that provides a voting context to its child components. It has the following properties:
-- voteableType (required): The type of voteable item.
-- children (required): The child components of VoteProvider.
-
-It relies on two dependencies: AuthProvider and DataProvider.
-
-The AuthProvider is responsible for handling user authentication. It provides information about the user's authentication status and current user data. VoteProvider uses the useAuth hook from AuthProvider to access this information.
-
-The DataProvider is used to fetch data from an API. It abstracts the API requests and provides a convenient interface to retrieve data. VoteProvider uses the useDataProvider hook from DataProvider to make API calls and retrieve votes.
-
-To use the VoteProvider component, you need to ensure that both AuthProvider and DataProvider are properly set up and available in the component hierarchy.
-Make sure to wrap your application with AuthProvider and DataProvider components before using the VoteProvider component. This ensures that the necessary context and functionality are available for VoteProvider to work correctly.
-
-The VoteProvider component uses the useDataProvider and useAuth hooks to fetch votes from an API and manage user authentication.
-
-### Component usage
-
-```js
-import { VoteProvider } from '@logora/debate.vote.vote_provider';
-import { VoteContext } from '@logora/debate.vote.vote_provider';
-
-```
-
-```js
-<VoteProvider voteableType="post">{/* Child components */}</VoteProvider>
-```
-
-The VoteProvider component exposes the VoteContext context that contains the votes and addVoteableIds values. Child components can access these values using the useContext(VoteContext) hook.
-
-To retrieve the data using the getList() function, VoteProvider passes the following parameters:
-
-- 'votes': The resource name or endpoint from which to retrieve the votes.
-- An object containing additional parameters:
-- page: The page number of the results.
-- per_page: The number of votes to fetch per page.
-- user_id: The ID of the current user.
-- voteable_id: The IDs of the voteable items.
-- voteable_type: The type of the voteable items.
--countless: A boolean indicating whether to include countless votes.
-
-The getList() function returns a promise that resolves to a response object. In the response object, you can access the retrieved data using response.data.data. VoteProvider then processes the retrieved votes and updates the state accordingly.
-
-Here is an example of how to use the getList() function within the getVotes() method of VoteProvider:
-
-```js
-const getVotes = () => {
-  api
-    .getList('votes', {
-      page: 1,
-      per_page: Math.max(1, voteableIds.length),
-      user_id: currentUser.id,
-      voteable_id: voteableIds.join(','),
-      voteable_type: props.voteableType,
-      countless: true
-    })
-    .then(response => {
-      if (response.data.success) {
-        const loadedVotes = response.data.data;
-        // Process the loadedVotes data and update the state
-      }
-    });
-};
-```

package/src/components/vote/vote_provider/VoteProvider.jsx

@@ -1,63 +0,0 @@
-import React, { createContext, useState, useEffect } from 'react'
-import { useDataProvider } from '@logora/debate/data/data_provider'
-import { useAuth } from '@logora/debate/auth/use_auth'
-import PropTypes from 'prop-types'
-
-export const VoteContext = createContext()
-
-export const VoteProvider = ({ voteableType, children }) => {
-  const api = useDataProvider()
-  const { isLoggedIn, currentUser } = useAuth()
-  const [votes, setVotes] = useState({})
-  const [voteableIds, setVoteableIds] = useState([])
-
-  const getVotes = () => {
-    api
-      .getList('votes', {
-        page: 1,
-        per_page: Math.max(1, voteableIds.length),
-        user_id: currentUser.id,
-        voteable_id: voteableIds.join(','),
-        voteable_type: voteableType,
-        countless: true
-      })
-      .then(response => {
-        if (response.data.success) {
-          const loadedVotes = response.data.data
-          let votes = {}
-          voteableIds.map(voteId => {
-            const voteFound = loadedVotes.find(
-              e =>
-                e.voteable_id === voteId &&
-                e.voteable_type === voteableType
-            )
-            votes[voteId] = voteFound || null
-          })
-          setVotes(prevState => ({ ...prevState, ...votes }))
-        }
-      })
-  }
-
-  useEffect(() => {
-    if (isLoggedIn && voteableType && voteableIds && voteableIds.length > 0) {
-      getVotes()
-    }
-  }, [isLoggedIn, voteableIds])
-
-  const addVoteableIds = voteableIds => {
-    setVoteableIds(prevIds => [...prevIds, ...voteableIds])
-  }
-
-  return (
-    <VoteContext.Provider value={{ votes, addVoteableIds }}>
-      { children }
-    </VoteContext.Provider>
-  )
-}
-
-VoteProvider.propTypes = {
-  /** The type of voteable item */
-  voteableType: PropTypes.string,
-  /** The child components of VoteProvider */
-  children: PropTypes.node.isRequired
-}

package/src/components/vote/vote_provider/VoteProvider.stories.jsx

@@ -1,99 +0,0 @@
-export default {
-  title: 'Vote/Vote Provider',
-  component: VoteProvider,
-  args: {},
-  argTypes: {}
-};
-
-import React, { useEffect, useState } from "react";
-import { AuthProvider } from "@logora/debate/auth/use_auth";
-import { VoteProvider } from "./VoteProvider";
-import {
-  dataProvider,
-  DataProviderContext,
-} from "@logora/debate/data/data_provider";
-
-const httpClient = {
-  get: () =>
-    Promise.resolve({
-      data: {
-        success: true,
-        data: [
-          {
-            user_id: 1,
-            voteable_id: 1,
-            voteable_type: "post",
-          },
-          {
-            user_id: 2,
-            voteable_id: 2,
-            voteable_type: "comment",
-          },
-        ],
-      },
-    }),
-  post: () => null,
-  patch: () => null,
-};
-
-const data = dataProvider(httpClient, "https://mock.example.api");
-
-export const DefaultComponent = () => {
-  return (
-    <DataProviderContext.Provider value={{ dataProvider: data }}>
-      <AuthProvider>
-        <VoteProvider voteableType="post">
-          <TestComponent />
-        </VoteProvider>
-      </AuthProvider>
-    </DataProviderContext.Provider>
-  );
-};
-
-const TestComponent = () => {
-  const [votes, setVotes] = useState([]);
-  const apiUrl = "http://example.com/list";
-  const apiKey = "api-key";
-  const storageKey = "storage-key";
-  const resource = "user";
-  const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const data = await api.getList(resource, {
-          page: 1,
-          per_page: 10,
-          sort: "-created_at",
-          api_key: apiKey,
-        });
-        setVotes(data.data.data);
-      } catch (error) {
-        console.error(
-          "Une erreur s'est produite lors de la récupération des données :",
-          error
-        );
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  if (!!votes) {
-    return (
-      <>
-        {votes.map((vote) => (
-          <div
-            key={vote.voteable_id}
-            data-testid={"vote-context_" + vote.voteable_id}
-          >
-            {JSON.stringify(vote)}
-          </div>
-        ))}
-      </>
-    );
-  } else {
-    return <div>loading ...</div>;
-  }
-};
-

package/src/components/vote/vote_provider/VoteProvider.test.jsx

@@ -1,137 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { render, screen } from "@testing-library/react";
-import { AuthProvider } from "@logora/debate/auth/use_auth";
-import { VoteProvider } from "./VoteProvider";
-import {
-  dataProvider,
-  DataProviderContext,
-} from "@logora/debate/data/data_provider";
-
-const DefaultComponent = ({ data, httpClient }) => {
-  return (
-    <DataProviderContext.Provider value={{ dataProvider: data }}>
-      <AuthProvider>
-        <VoteProvider voteableType="post">
-          <TestComponent httpClient={httpClient} />
-        </VoteProvider>
-      </AuthProvider>
-    </DataProviderContext.Provider>
-  );
-};
-
-const TestComponent = ({ httpClient }) => {
-  const [votes, setVotes] = useState([]);
-  const apiUrl = "http://example.com/list";
-  const apiKey = "api-key";
-  const storageKey = "storage-key";
-  const resource = "user";
-  const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const data = await api.getList(resource, {
-          page: 1,
-          per_page: 10,
-          sort: "-created_at",
-          api_key: apiKey,
-        });
-        setVotes(data.data.data);
-      } catch (error) {
-        console.error(
-          "Une erreur s'est produite lors de la récupération des données :",
-          error
-        );
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  if (!!votes) {
-    return (
-      <>
-        {votes.map((vote) => (
-          <div
-            key={vote.voteable_id}
-            data-testid={"vote-context_" + vote.voteable_id}
-          >
-            {JSON.stringify(vote)}
-          </div>
-        ))}
-      </>
-    );
-  } else {
-    return <div>loading ...</div>;
-  }
-};
-
-describe("VoteProvider", () => {
-  it("affiche les votes", async () => {
-    const httpClient = {
-      get: () =>
-        Promise.resolve({
-          data: {
-            success: true,
-            data: [
-              {
-                user_id: 1,
-                voteable_id: 1,
-                voteable_type: "post",
-              },
-              {
-                user_id: 2,
-                voteable_id: 2,
-                voteable_type: "comment",
-              },
-            ],
-          },
-        }),
-      post: () => null,
-      patch: () => null,
-    };
-
-    const data = dataProvider(httpClient, "https://mock.example.api");
-
-    render(<DefaultComponent data={data} httpClient={httpClient} />);
-
-    // Vérifie que le message de chargement s'affiche initialement
-
-    // Attends que les données se chargent
-    const voteContext = await screen.findAllByTestId(/vote-context_/);
-
-    // Vérifie que les données sont affichées correctement
-    expect(voteContext).toHaveLength(2);
-    expect(voteContext[0]).toHaveTextContent(
-      JSON.stringify({
-        user_id: 1,
-        voteable_id: 1,
-        voteable_type: "post",
-      })
-    );
-    expect(voteContext[1]).toHaveTextContent(
-      JSON.stringify({
-        user_id: 2,
-        voteable_id: 2,
-        voteable_type: "comment",
-      })
-    );
-  });
-
-  it("affiche un message 'loading' pendant le chargement des données", async () => {
-    const httpClient = {
-      get: () => new Promise(() => {}),
-      post: () => null,
-      patch: () => null,
-    };
-
-    const data = dataProvider(httpClient, "https://mock.example.api");
-
-    render(<DefaultComponent data={data} httpClient={httpClient} />);
-
-    const voteContext = await screen.queryAllByTestId(/vote-context_/);
-
-    // Vérifie que les données sont affichées correctement
-    expect(voteContext).toHaveLength(0);
-  });
-});

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

@@ -1,2 +0,0 @@
-export { VoteProvider } from "./VoteProvider";
-export { VoteContext } from "./VoteProvider";