@logora/debate 0.1.0

package/src/components/data/data_provider/DataProvider.test.jsx

@@ -0,0 +1,419 @@
+import { dataProvider, getAuthHeader } from './DataProvider';
+
+describe('data provider function', () => {
+    const httpClient = {
+        get: vi.fn(() =>  Promise.resolve(null)),
+        post: vi.fn(() => Promise.resolve(null)),
+        patch: vi.fn(() => Promise.resolve(null)),
+        delete: vi.fn(() => Promise.resolve(null))
+    };
+
+    const setLocalStorage = (id, data) => {
+        window.localStorage.setItem(id, JSON.stringify(data));
+    };
+
+    beforeEach(() => {
+        window.localStorage.clear();
+        vi.clearAllMocks();
+    });
+
+    it('should call getOne function with correct arguments', () => {
+        const apiUrl = "http://example.com"
+        const apiKey = "api-key";
+        const storageKey = "storage-key";
+        const resource = "user";
+        const resourceId = "my-id";
+        const params = {
+            custom_param: 'custom-param'
+        };
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        api.getOne(resource, resourceId, params);
+
+        const expectedParams = {
+            custom_param: 'custom-param',
+            api_key: apiKey
+        }
+
+        const queryString = new URLSearchParams(expectedParams).toString();
+		const url = `${apiUrl}/${resource}/${resourceId}?${queryString}`;
+
+        expect(httpClient.get).toHaveBeenCalledWith(url);
+        expect(httpClient.get).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call getOneWithToken function with correct arguments', () => {
+        const accessToken = "access-token";
+        const storageKey = "storage-key";
+        const mockJson = { access_token: accessToken };
+        setLocalStorage(storageKey, mockJson);
+
+        const apiUrl = "http://example.com/getWithToken"
+        const apiKey = "api-key";
+        const resource = "user";
+        const resourceId = "my-id";
+        const params = {
+            custom_param: 'custom-param'
+        };
+
+        const config = {
+			headers: { "authorization": "Bearer " + accessToken }
+		};
+
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        api.getOneWithToken(resource, resourceId, params);
+
+        const queryString = new URLSearchParams(params).toString();
+		const url = `${apiUrl}/${resource}/${resourceId}?${queryString}`;
+
+        expect(httpClient.get).toHaveBeenCalledWith(url, config);
+        expect(httpClient.get).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call getList function with default params and api key', () => {
+        const apiUrl = "http://example.com/list"
+        const apiKey = "api-key";
+        const storageKey = "storage-key";
+        const resource = "user";
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        api.getList(resource, {page: 1,
+            per_page: 10,
+            sort: "-created_at",
+            api_key: apiKey
+        });
+
+        const expectedParams = {
+            page: 1,
+            per_page: 10,
+            sort: "-created_at",
+            api_key: apiKey
+        }
+
+        const queryString = new URLSearchParams(expectedParams).toString();
+		const url = `${apiUrl}/${resource}?${queryString}`;
+
+        expect(httpClient.get).toHaveBeenCalledWith(url);
+        expect(httpClient.get).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call getList function with custom params and api key', () => {
+        const apiUrl = "http://example.com/list"
+        const apiKey = "api-key";
+        const storageKey = "storage-key";
+        const resource = "user";
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        const page = 2;
+        const perPage = 20;
+        const sort = "-updated_at"
+        const query = "my-query";
+        const outset = 4;
+        const countless = true;
+
+        const params = {
+            page: page,
+            per_page: perPage,
+            sort: sort,
+            query: query,
+            countless: countless,
+            outset: outset,
+            myFilter: "ok"
+        }
+
+        api.getList(resource, params);
+
+        const expectedParams = {
+            page: page,
+            per_page: perPage,
+            sort: sort,
+            query: query,
+            countless: countless,
+            outset: outset,
+            myFilter: "ok",
+            api_key: apiKey
+        }
+
+        const queryString = new URLSearchParams(expectedParams).toString();
+		const url = `${apiUrl}/${resource}?${queryString}`;
+
+        expect(httpClient.get).toHaveBeenCalledWith(url);
+        expect(httpClient.get).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call getListWithToken function with default params', () => {
+        const accessToken = "access-token";
+        const storageKey = "storage-key";
+        const mockJson = { access_token: accessToken };
+        setLocalStorage(storageKey, mockJson);
+    
+        const apiUrl = "http://example.com/listWithToken"
+        const apiKey = "api-key";
+        const resource = "user";
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        const config = {
+			headers: { "authorization": "Bearer " + accessToken }
+		};
+
+        api.getListWithToken(resource, { page: 1, per_page: 10, sort: "-created_at" });
+
+        const expectedParams = {
+            page: 1,
+            per_page: 10,
+            sort: "-created_at"
+        }
+
+        const queryString = new URLSearchParams(expectedParams).toString();
+		const url = `${apiUrl}/${resource}?${queryString}`;
+
+        expect(httpClient.get).toHaveBeenCalledWith(url, config);
+        expect(httpClient.get).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call getListWithToken function with custom params', () => {
+        const accessToken = "access-token";
+        const storageKey = "storage-key";
+        const mockJson = { access_token: accessToken };
+        setLocalStorage(storageKey, mockJson);
+
+        const apiUrl = "http://example.com/list"
+        const apiKey = "api-key";
+        const resource = "user";
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        const page = 2;
+        const perPage = 20;
+        const sort = "-updated_at"
+        const query = "my-query";
+        const outset = 4;
+        const countless = true;
+
+        const params = {
+            page: page,
+            per_page: perPage,
+            sort: sort,
+            query: query,
+            countless: countless,
+            outset: outset,
+            myFilter: "ok"
+        }
+
+        const config = {
+			headers: { "authorization": "Bearer " + accessToken }
+		};
+
+        api.getListWithToken(resource, params);
+
+        const expectedParams = {
+            page: page,
+            per_page: perPage,
+            sort: sort,
+            query: query,
+            countless: countless,
+            outset: outset,
+            myFilter: "ok"
+        }
+
+        const queryString = new URLSearchParams(expectedParams).toString();
+		const url = `${apiUrl}/${resource}?${queryString}`;
+
+        expect(httpClient.get).toHaveBeenCalledWith(url, config);
+        expect(httpClient.get).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call getSettings function with correct arguments', () => {
+        const apiUrl = "http://example.com"
+        const apiKey = "api-key";
+        const storageKey = "storage-key";
+        const shortname = "shortname";
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        api.getSettings(shortname);
+
+        const expectedParams = {
+            shortname: shortname
+        }
+        const queryString = new URLSearchParams(expectedParams).toString();
+		const url = `${apiUrl}/settings?${queryString}`;
+
+        expect(httpClient.post).toHaveBeenCalledWith(url);
+        expect(httpClient.post).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call create function with correct arguments', () => {
+        const accessToken = "access-token";
+        const storageKey = "storage-key";
+        const mockJson = { access_token: accessToken };
+        setLocalStorage(storageKey, mockJson);
+
+        const apiUrl = "http://example.com/create"
+        const apiKey = "api-key";
+        const resource = "user";
+        const data = {
+            custom_data: 'custom-data'
+        };
+        const config = {
+			headers: { "authorization": "Bearer " + accessToken }
+		};
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        api.create(resource, data);
+
+		const url = `${apiUrl}/${resource}`;
+
+        expect(httpClient.post).toHaveBeenCalledWith(`${url}?`, data, config);
+        expect(httpClient.post).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call create function without token if withToken false', () => {
+        const storageKey = "storage-key";
+        const apiUrl = "http://example.com/create"
+        const apiKey = "api-key";
+        const resource = "user";
+        const data = {
+            custom_data: 'custom-data'
+        };
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        api.create(resource, data, {}, false);
+
+		const url = `${apiUrl}/${resource}`;
+
+        expect(httpClient.post).toHaveBeenCalledWith(`${url}?api_key=${apiKey}`, data, {});
+        expect(httpClient.post).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call update function with correct arguments', () => {
+        const accessToken = "access-token";
+        const storageKey = "storage-key";
+        const mockJson = { access_token: accessToken };
+        setLocalStorage(storageKey, mockJson);
+    
+        const apiUrl = "http://example.com/update"
+        const apiKey = "api-key";
+        const resource = "user";
+        const resourceId = "my-id";
+        const data = {
+            custom_data: 'custom-data'
+        };
+        const config = {
+			headers: { "authorization": "Bearer " + accessToken }
+		};
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        api.update(resource, resourceId, data);
+
+		const url = `${apiUrl}/${resource}/${resourceId}`;
+
+        expect(httpClient.patch).toHaveBeenCalledWith(`${url}?`, data, config);
+        expect(httpClient.patch).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call update function without token if withToken is false', () => {
+        const storageKey = "storage-key";
+        const apiUrl = "http://example.com/update"
+        const apiKey = "api-key";
+        const resource = "user";
+        const resourceId = "my-id";
+        const data = {
+            custom_data: 'custom-data'
+        };
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        api.update(resource, resourceId, data, {}, false);
+
+		const url = `${apiUrl}/${resource}/${resourceId}`;
+
+        expect(httpClient.patch).toHaveBeenCalledWith(`${url}?api_key=${apiKey}`, data, {});
+        expect(httpClient.patch).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call delete function with correct arguments', () => {
+        const accessToken = "access-token";
+        const storageKey = "storage-key";
+        const mockJson = { access_token: accessToken };
+        setLocalStorage(storageKey, mockJson);
+
+        const apiUrl = "http://example.com/delete"
+        const apiKey = "api-key";
+        const resource = "user";
+        const resourceId = "my-id";
+        const config = {
+			headers: { "authorization": "Bearer " + accessToken }
+		};
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        api.delete(resource, resourceId);
+
+		const url = `${apiUrl}/${resource}/${resourceId}`;
+
+        expect(httpClient.delete).toHaveBeenCalledWith(`${url}?`, config);
+        expect(httpClient.delete).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call delete function without token if withToken is false', () => {
+        const storageKey = "storage-key";
+        const apiUrl = "http://example.com/delete"
+        const apiKey = "api-key";
+        const resource = "user";
+        const resourceId = "my-id";
+        const api = dataProvider(httpClient, apiUrl, apiKey, storageKey);
+
+        api.delete(resource, resourceId, {}, false);
+
+		const url = `${apiUrl}/${resource}/${resourceId}`;
+
+        expect(httpClient.delete).toHaveBeenCalledWith(`${url}?api_key=${apiKey}`, {});
+        expect(httpClient.delete).toHaveBeenCalledTimes(1);
+    });
+});
+
+describe('getAuthHeader function', () => {
+    beforeEach(() => {
+        window.localStorage.clear();
+    });
+
+    const setLocalStorage = (id, data) => {
+        window.localStorage.setItem(id, JSON.stringify(data));
+    };
+
+    it('should return the token if stored', () => {
+        const accessToken = "access-token";
+        const storageKey = "storage-key";
+        const mockJson = { access_token: accessToken };
+        setLocalStorage(storageKey, mockJson);
+    
+        const authHeader = getAuthHeader(storageKey);
+        expect(authHeader["authorization"]).toEqual("Bearer " + accessToken);
+    });
+
+    it('should return nothing if no access token', () => {
+        const storageKey = "my-storage-key";
+        const mockJson = {};
+        setLocalStorage(storageKey, mockJson);
+        
+        const authHeader = getAuthHeader(storageKey);
+        expect(authHeader).toEqual({});
+    });
+
+    it('should return nothing if wrong storage key', () => {
+        const accessToken = "access-token";
+        const storageKey = "random-key";
+        const mockJson = { access_token: accessToken };
+        setLocalStorage(storageKey, mockJson);
+        
+        const authHeader = getAuthHeader("other storage key");
+        expect(authHeader).toEqual({});
+    });
+
+    it('should return nothing if JSON parse error', () => {
+        const storageKey = "random-key";
+        const mockJson = "test";
+        setLocalStorage(storageKey, mockJson);
+        
+        const authHeader = getAuthHeader(storageKey);
+        expect(authHeader).toEqual({});
+    });
+});

package/src/components/data/data_provider/DataProviderContext.jsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const DataProviderContext = createContext({});

package/src/components/data/data_provider/index.js

@@ -0,0 +1,4 @@
+export { dataProvider } from './DataProvider';
+export { DataProviderContext } from './DataProviderContext';
+export { useDataProvider } from './useDataProvider';
+export { useData } from './useData';

package/src/components/data/data_provider/useData.jsx

@@ -0,0 +1,9 @@
+import { useContext, useState } from "react";
+import { DataProviderContext } from "./DataProviderContext";
+
+export const useData = (dataKey, dataDefault) => {
+    const { dataMap = {} } = useContext(DataProviderContext) || {}
+    const [data, setData] = useState(dataKey in dataMap ? dataMap[dataKey] : dataDefault)
+
+    return [data, setData]
+}

package/src/components/data/data_provider/useDataProvider.jsx

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { DataProviderContext } from "./DataProviderContext";
+
+export const useDataProvider = () => {
+    const { dataProvider } = useContext(DataProviderContext);
+    
+    return dataProvider;
+}

package/src/components/data/data_provider/useDataProvider.test.jsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import { dataProvider } from './DataProvider';
+import { DataProviderContext } from './DataProviderContext';
+import { useDataProvider } from './useDataProvider';
+
+describe('useDataProvider hook', () => {
+    const httpClient = {
+        get: vi.fn(() =>  Promise.resolve({ data: "my custom data" })),
+        post: vi.fn(() => Promise.resolve(null)),
+        patch: vi.fn(() => Promise.resolve(null)),
+        delete: vi.fn(() => Promise.resolve(null))
+    };
+
+    const DataComponent = (props) => {
+        const [data, setData] = useState(null);
+        const dataProvider = useDataProvider();
+
+        useEffect(() => {
+            dataProvider.getOne("resource", "id", {}).then(response => {
+                setData(response.data);
+            })
+        }, []);
+    
+        return <div>{ data }</div>;
+    }
+
+    it('should render with correct data', async () => {
+        const component = render(
+            <DataProviderContext.Provider value={{ dataProvider: dataProvider(httpClient, "http://example.com", "key", "storage") }}>
+                <DataComponent />
+            </DataProviderContext.Provider>
+        )
+
+        expect(await screen.findByText("my custom data")).toBeTruthy();
+        expect(httpClient.get).toHaveBeenCalledTimes(1);
+    });
+});

package/src/components/debate/debate_box/DebateBox.docs.mdx

@@ -0,0 +1,23 @@
+---
+description: A debate box.
+labels: ['debate_box']
+---
+
+import { DebateBox } from './DebateBox';
+import { IntlProvider } from 'react-intl';
+
+A debate box to display minimum informations about a debate.
+
+### Component usage
+```js
+    import { DebateBox } from '@logora/debate.debate.debate_box';
+```
+```js
+    <BrowserRouter>
+        <IntlProvider locale="en">
+            <ConfigProvider routes={{...routes}}>
+                <DebateBox debate={props.debate} />
+            </ConfigProvider>
+        </IntlProvider>
+    </BrowserRouter>
+```

package/src/components/debate/debate_box/DebateBox.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { useConfig, useRoutes } from '@logora/debate/data/config_provider';
+import { Avatar } from '@logora/debate/user/avatar';
+import { Link } from '@logora/debate/action/link';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Icon } from '@logora/debate/icons/icon';
+import { Tooltip } from '@logora/debate/dialog/tooltip';
+import { useResponsive } from '@logora/debate/hooks/use_responsive';
+import { useTranslatedContent } from '@logora/debate/translation/translated_content';
+import cx from 'classnames';
+import styles from './DebateBox.module.scss';
+import PropTypes from "prop-types";
+
+export const DebateBox = ({ debate }) => {    
+    const config = useConfig();
+    const routes = useRoutes();
+    const intl = useIntl();
+    const { isMobile } = useResponsive();
+    const totalVotes = debate.votes_count?.total || Object.values(debate.votes_count).reduce((sum, value) => sum + parseFloat(value), 0) || 0;
+    const winningPosition = debate.group_context?.positions.reduce((a, b) => (parseInt(debate.votes_count[b.id]) > parseInt(debate.votes_count[a.id]) ? b : a));
+    const name = useTranslatedContent(debate.name, debate.language, "name", debate.translation_entries);
+    const winningPositionName = useTranslatedContent(winningPosition.name, winningPosition.language, "name", winningPosition.translation_entries);
+
+    const getPercentageValue = (voteCount, totalVotes) => {
+        if (totalVotes == 0 || voteCount == 0) { return 0; }
+        return Math.round(100 * (voteCount / (totalVotes)));
+    }
+
+    const displayParticipant = (participant, index) => {
+        return (
+            <div className={styles.debateParticipantItem} key={index}>
+                <Link to={routes.userShowLocation.toUrl({ userSlug: participant.hash_id })}>
+                    <Avatar avatarUrl={participant.image_url} userName={participant.full_name} isOnline={(new Date(participant.last_activity) > Date.now())} showTooltip />
+                </Link>
+            </div>
+        );
+    }
+
+    return (
+        <div className={styles.debateBox}>
+            <div className={styles.debateBoxHeader}>
+                <div className={styles.debateBoxImageBox}>
+                    <Link to={routes.debateShowLocation.toUrl({ debateSlug: debate.slug })} className={styles.imageLink}>
+                        <img 
+                            data-tid={"view_debate_image"} 
+                            loading={"lazy"} 
+                            className={styles.debateBoxImage} 
+                            src={debate.banner_image_url} 
+                            height={200} 
+                            alt={debate?.image_alt ? debate.image_alt : intl.formatMessage({ id:"debate.debate_box.alt_debate_image", defaultMessage: "Debate image" }) }
+                            title={debate?.image_alt ? debate.image_alt : intl.formatMessage({ id:"debate.debate_box.alt_debate_image", defaultMessage: "Debate image" }) }
+                        />
+                    </Link>
+                    {debate.is_active === false &&
+                        <div className={styles.inactiveDebate}>
+                            <FormattedMessage id="debate.debate_box.debate_is_inactive" defaultMessage={"Debate is ended"} />
+                        </div>
+                    }
+                </div>
+                {debate.group_context.author && debate.group_context.author.is_admin === false &&
+                    <div className={styles.debateSuggestion}>
+                        <Icon name="suggestion" width={15} height={15} />
+                        <span className={styles.authorSuggestion}>
+                            <FormattedMessage id="debate.debate_box.suggestion_author_short" defaultMessage={"Suggested by"} />
+                            <span className={styles.authorName}>{debate.group_context.author.full_name}</span>
+                        </span>
+                    </div>
+                }
+            </div>
+            <div className={styles.debateBoxBody}>
+                <div className={styles.debateBoxTitle} title={name.translatedContent}>
+                    { config?.actions?.allowDebateBranding === true && debate.sub_application?.logo &&
+                        <span className={styles.subApplication}>
+                            <img data-tid={"view_debate_image"} loading={"lazy"} src={debate.sub_application.logo} alt={`Logo ${config.display_name}`}/>
+                            {debate.sub_application.name}
+                        </span>
+                    }
+                    <Link to={routes.debateShowLocation.toUrl({ debateSlug: debate.slug })}>
+                        <>
+                            {isMobile ?
+                                <div data-tid={"view_debate_title"} className={cx(styles.debateTitle, styles.debateTitleMobile)}>
+                                    {name.translatedContent}
+                                </div>
+                                :
+                                <div data-tid={"view_debate_title"} className={styles.debateTitle}>
+                                    {name.translatedContent}
+                                </div>
+                            }
+                        </>
+                    </Link>
+                </div>
+                <div className={styles.debateBoxFooter}>
+                    <div className={styles.debateParticipantsBox}>
+                        {debate.participants.length === 0 ? (
+                            <span className={styles.debateParticipantsEmpty}>{intl.formatMessage({ id: "debate.debate_box.fallback_no_participants", defaultMessage: "No participants" })}</span>
+                        ) : (
+                            <>
+                                {debate.participants.map(displayParticipant)}
+                                {debate.participants_count > 3 &&
+                                    <div className={styles.debateParticipantItem}>
+                                        <Tooltip text={intl.formatMessage({ id:"debate.debate_box.participants_count", defaultMessage: "Number of debaters" })}>
+                                            <Link to={routes.debateShowLocation.toUrl({ debateSlug: debate.slug })}>
+                                                    <div className={styles.participantsCountBox}>
+                                                            +{intl.formatNumber(debate.participants_count - 3, { notation: 'compact', maximumFractionDigits: 1, roundingMode: "floor" })}
+                                                    </div>
+                                            </Link>
+                                        </Tooltip>
+                                    </div>
+                                }
+                            </>
+                        )}
+                    </div>
+                    {config.modules.votes === false ?
+                        null
+                        :
+                        <div className={styles.debateBoxNumbers}>
+                            <div className={styles.debateBoxNumbersText} title={winningPosition ? `${getPercentageValue(debate.votes_count[winningPosition.id] || 0, totalVotes)} % ${winningPositionName.translatedContent}` : undefined}>
+                                {winningPosition && (
+                                    <>
+                                        <span className={styles.debateBoxPercentage}>{getPercentageValue(debate.votes_count[winningPosition.id] || 0, totalVotes)}{"\u00A0"}%</span>
+                                        <span className={styles.debateBoxPositionName}>{winningPositionName.translatedContent}</span>
+                                    </>
+                                )}
+                            </div>
+                        </div>
+                    }
+                </div>
+            </div>
+        </div>
+    );
+}
+
+DebateBox.propTypes = {
+    /** Debate object containing all the debate information */
+    debate: PropTypes.object.isRequired,
+};