@logora/debate 0.1.0

package/src/components/list/list_provider/ListProvider.test.jsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ListProvider } from './ListProvider';
+import { useList } from './useList';
+
+describe('ListProvider', () => {
+    it('should render children', () => {
+        const component = render(
+            <ListProvider>
+                <div>OK</div>
+            </ListProvider>
+        );
+
+        expect(screen.getByText("OK")).toBeTruthy();
+    });
+
+    it('should set correct addElements', async () => {
+        const myElements = ["myElement", "mySecondElement"];
+
+        const AddElementComponent = () => {
+            const list = useList();
+
+            const handleClick = () => {
+                list.add("myList", myElements);
+            }
+
+            return (
+                <button onClick={handleClick}>Add elements</button>
+            );
+        }
+
+        const List = () => {
+            const { addElements } = useList();
+            
+            return (
+                <div>{ addElements["myList"] }</div>
+            );
+        }
+
+        const component = render(
+            <ListProvider>
+                <AddElementComponent />
+                <List />
+            </ListProvider>
+        );
+
+        expect(screen.queryByText("myElement")).toBeNull();
+        expect(screen.queryByText("mySecondElement")).toBeNull();
+        const button = screen.getByText("Add elements");
+        await fireEvent.click(button);
+        expect(screen.getByText(/myElement/i)).toBeTruthy();
+        expect(screen.getByText(/mySecondElement/i)).toBeTruthy();
+    });
+
+
+    it('should set correct removeElement', async () => {
+        const myElements = ["myElement", "mySecondElement"];
+
+        const RemoveElementComponent = () => {
+            const list = useList();
+
+            const handleRemove = () => {
+                list.remove("myRemoveList", myElements);
+            }
+
+            return (
+                <>
+                    <button onClick={handleRemove}>Remove elements</button>
+                </>
+            );
+        }
+
+        const List = () => {
+            const { removeElements } = useList();
+            
+            return (
+                <div>{ removeElements["myRemoveList"] }</div>
+            );
+        }
+
+        const component = render(
+            <ListProvider>
+                <RemoveElementComponent />
+                <List />
+            </ListProvider>
+        );
+
+        expect(screen.queryByText("myElement")).toBeNull();
+        expect(screen.queryByText("mySecondElement")).toBeNull();
+
+        const removeButton = screen.getByText("Remove elements");
+        await fireEvent.click(removeButton);
+        expect(screen.queryByText(/myElement/i)).toBeTruthy();
+        expect(screen.queryByText(/mySecondElement/i)).toBeTruthy();
+    });
+
+    it('should set correct updateElement', async () => {
+        const myElements = ["myElement", "mySecondElement"];
+
+        const UpdateElementComponent = () => {
+            const list = useList();
+
+            const handleUpdate = () => {
+                list.update("myUpdateList", myElements);
+            }
+
+            return (
+                <>
+                    <button onClick={handleUpdate}>Update elements</button>
+                </>
+            );
+        }
+
+        const List = () => {
+            const { updateElements } = useList();
+            
+            return (
+                <div>{ updateElements["myUpdateList"] }</div>
+            );
+        }
+
+        const component = render(
+            <ListProvider>
+                <UpdateElementComponent />
+                <List />
+            </ListProvider>
+        );
+
+        expect(screen.queryByText("myElement")).toBeNull();
+        expect(screen.queryByText("mySecondElement")).toBeNull();
+
+        const updateButton = screen.getByText("Update elements");
+        await fireEvent.click(updateButton);
+        expect(screen.queryByText(/myElement/i)).toBeTruthy();
+        expect(screen.queryByText(/mySecondElement/i)).toBeTruthy();
+    });
+});

package/src/components/list/list_provider/index.js

@@ -0,0 +1,2 @@
+export { ListProvider } from './ListProvider';
+export { useList } from './useList';

package/src/components/list/list_provider/useList.jsx

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ListContext } from "./ListProvider";
+
+export const useList = () => {
+    const { add, addPinned, update, remove, addElements, addPinnedElements, updateElements, removeElements, setAddElements, setAddPinnedElements, setUpdateElements, setRemoveElements } = useContext(ListContext);
+
+    return { add, addPinned, update, remove, addElements, addPinnedElements, updateElements, removeElements, setAddElements, setAddPinnedElements, setUpdateElements, setRemoveElements };
+}

package/src/components/list/paginated_list/PaginatedList.docs.mdx

@@ -0,0 +1,68 @@
+---
+description: A list component.
+---
+
+A list component. For lists containing votes, VotePaginatedList is available.  
+
+It must be inside [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider.  
+
+It must be inside DataProvider.  
+
+It must be inside ListProvider.  
+
+It must be inside a router.  
+
+It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+```js
+import { PaginatedList } from '@logora/debate.list.paginated_list';
+```
+```js
+<BrowserRouter>
+    <IntlProvider locale="en">
+        <ListProvider>
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <PaginatedList 
+                    currentListId={"listId"}
+                    resource={"apiPath"}
+                    loadingComponent={null}
+                    resourcePropName="res"
+                    filters={ {"filter": true} }
+                    display={"column"}
+                    perPage={4}
+                    withPagination={false}
+                    sort={"-created_at"}
+                    countless={true}
+                />
+            </DataProviderContext.Provider>
+        <ListProvider>
+    </IntlProvider>
+</BrowserRouter>
+```   
+
+```js
+import { VotePaginatedList } from '@logora/debate.list.paginated_list';
+```  
+```js
+<BrowserRouter>
+    <IntlProvider locale="en">
+        <ListProvider>
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <VotePaginatedList 
+                    voteableType={"Message"}
+                    currentListId={"listId"}
+                    loadingComponent={<Skeleton />}
+                    resource={"/resource"}
+                    sort={"+created_at"}
+                    perPage={5}
+                    display={"column"}
+                    resourcePropName={"message"}
+                >
+                    <YourComponent />
+                </VotePaginatedList>
+            </DataProviderContext.Provider>
+        <ListProvider>
+    </IntlProvider>
+</BrowserRouter>
+```

package/src/components/list/paginated_list/PaginatedList.jsx

@@ -0,0 +1,397 @@
+import React, { useState, useEffect } from "react";
+import { useDataProvider, useData } from '@logora/debate/data/data_provider';
+import { useResponsive } from "@logora/debate/hooks/use_responsive";
+import { useIntl } from "react-intl";
+import { useLocation } from 'react-router';
+import { useList } from "@logora/debate/list/list_provider";
+import { ActionBar } from './action_bar/ActionBar';
+import { Pagination } from '@logora/debate/list/pagination';
+import { uniqueBy } from '@logora/debate/util/unique_by';
+import StandardErrorBoundary from '@logora/debate/error/standard_error_boundary';
+import usePrevious from "@rooks/use-previous";
+import cx from "classnames";
+import styles from "./PaginatedList.module.scss";
+import PropTypes from "prop-types";
+
+export const PaginatedList = ({
+    query,
+    sortOptions,
+    sort,
+    filters,
+    tagList,
+    currentPage,
+    resource,
+    currentListId,
+    withToken,
+    perPage,
+    perPageParam = "per_page",
+    pageParam = "page",
+    sortParam = "sort",
+    queryParam = "query",
+    tagParam = "tag_id",
+    totalHeaderParam = "total",
+    onUpdateTotal,
+    onElementsLoad,
+    transformData,
+    uniqueIdKey = "id",
+    children,
+    resourcePropName,
+    loadingComponent,
+    searchBar = false,
+    title,
+    emptyListComponent,
+    emptyText,
+    display,
+    elementsPerLine,
+    indexLayout = false,
+    gap = "1em",
+    withPagination = true,
+    numberElements,
+    countless,
+    onElementClick,
+    withUrlParams = false,
+    onLoadNewPage
+}) => {
+    const intl = useIntl();
+    const list = useList();
+    const api = useDataProvider();
+    const location = useLocation();
+    const { isMobile, isTablet, isDesktop } = useResponsive();
+    const [isLoading, setIsLoading] = useState(false);
+    const [loadError, setLoadError] = useState(false);
+    const [currentResources, setCurrentResources] = useData(currentListId, []);
+    const [totalElements, setTotalElements] = useState(currentResources?.length || 0);
+    const [page, setPage] = useState(currentPage || 1);
+    const [currentQuery, setCurrentQuery] = useState(query || null);
+    const [activeTagId, setActiveTagId] = useState(null);
+    const [defaultSelectOption, setDefaultSelectOption] = useState(null);
+    const urlParams = new URLSearchParams(typeof window !== "undefined" ? window.location.search : location.search);
+
+    const getInitSort = () => {
+        return (sortOptions && sortOptions[0].type === "sort" && sortOptions[0].value) || sort || "";
+    };
+
+    const getInitFilters = () => {
+        let initFilters = {};
+        if (sortOptions && sortOptions[0].type === "filter") {
+            initFilters[sortOptions[0].name] = sortOptions[0].value;
+        }
+        if (filters) {
+            initFilters = Object.assign({}, initFilters, filters);
+        }
+        return initFilters;
+    }
+
+    const [currentSort, setCurrentSort] = useState(getInitSort());
+    const [currentFilters, setCurrentFilters] = useState(getInitFilters());
+    const previousFilters = usePrevious(filters);
+
+    if (currentPage && (currentPage !== page)) {
+        setPage(currentPage);
+    }
+    if (query !== undefined && (query !== currentQuery)) {
+        setCurrentQuery(query);
+    }
+    if (sort !== undefined && (sort !== currentSort)) {
+        setCurrentSort(sort);
+    }
+    if (previousFilters && (JSON.stringify(filters) !== JSON.stringify(previousFilters)) && (JSON.stringify(filters) !== JSON.stringify(currentFilters))) {
+        setCurrentFilters(filters);
+    }
+
+    useEffect(() => {
+        if (urlParams.get('tagId')) {
+            setActiveTagId(Number.parseInt(urlParams.get('tagId')));
+        }
+        if (urlParams.get('search')) {
+            setCurrentQuery(urlParams.get('search'));
+        }
+        if (urlParams.get('sort')) {
+            setCurrentSort(urlParams.get('sort'));
+            for (const value of urlParams.values()) {
+                sortOptions?.map((o) => {
+                    if (o.value === value) {
+                        setDefaultSelectOption(o.name);
+                    }
+                });
+                break;
+            }
+        }
+        for (const key of urlParams.keys()) {
+            sortOptions?.map((o) => {
+                if (o.name === key) {
+                    setCurrentFilters({
+                        ...filters,
+                        [o.name]: o.value,
+                    });
+                    setDefaultSelectOption(o.name);
+                }
+            });
+            break;
+        }
+    }, [location.search]);
+
+    useEffect(() => {
+        if (resource) {
+            setPage(1);
+            setCurrentResources([]);
+            setIsLoading(true);
+            loadResources(1);
+        } else {
+            setIsLoading(false);
+        }
+    }, [currentSort, currentFilters, currentQuery, resource, activeTagId, perPage]);
+
+    useEffect(() => {
+        if (page > 1) {
+            setIsLoading(true);
+            loadResources(page);
+        }
+    }, [page]);
+
+    useEffect(() => {
+        if (list.addElements && (currentListId in list.addElements)) {
+            if (list.addElements[currentListId].length > 0) {
+                handleAddElements(list.addElements[currentListId]);
+                const addElements = list.addElements;
+                delete addElements[currentListId];
+                list.setAddElements(addElements);
+            }
+        }
+    }, [list.addElements]);
+
+    useEffect(() => {
+        if (list.updateElements && (currentListId in list.updateElements)) {
+            if (list.updateElements[currentListId].length > 0) {
+                handleEditElements(list.updateElements[currentListId]);
+                const updateElements = list.updateElements;
+                delete updateElements[currentListId];
+                list.setUpdateElements(updateElements);
+            }
+        }
+    }, [list.updateElements]);
+
+    useEffect(() => {
+        if (list.removeElements && (currentListId in list.removeElements)) {
+            if (list.removeElements[currentListId].length > 0) {
+                handleRemoveElements(list.removeElements[currentListId]);
+                const removeElements = list.removeElements;
+                delete removeElements[currentListId];
+                list.setRemoveElements(removeElements);
+            }
+        }
+    }, [list.removeElements]);
+
+    const handleSortChange = (selectOption) => {
+        if (selectOption.type === "filter") {
+            setCurrentSort("");
+            setCurrentFilters({
+                ...filters,
+                [selectOption.name]: selectOption.value,
+            });
+        } else {
+            // If filters is present, we want it to be persistent with the sort option
+            setCurrentSort(selectOption.value);
+            setCurrentFilters(filters ? { ...filters } : {});
+        }
+    }
+
+    const handleLoadNewPage = () => {
+        if (typeof onLoadNewPage === 'function' && onLoadNewPage() !== null) {
+        } else {
+            setPage(page + 1);
+        }
+    }
+
+    const loadResources = (pageNumber) => {
+        const loadFunction = withToken ? api.getListWithToken : api.getList;
+        if (((pageNumber - 1) * perPage <= (numberElements || totalElements)) || pageNumber === 1) {
+            const params = {
+                [pageParam]: pageNumber,
+                [perPageParam]: perPage,
+                ...(currentSort && !currentQuery && { [sortParam]: currentSort }),
+                ...(currentQuery && { [queryParam]: currentQuery }),
+                ...(countless === true && { countless: true }),
+                ...currentFilters,
+                ...(activeTagId && { [tagParam]: activeTagId })
+            }
+            loadFunction(resource, params).then((response) => {
+                const headers = response.headers;
+                if (headers) {
+                    if (totalHeaderParam in headers) {
+                        setTotalElements(Number.parseInt(headers[totalHeaderParam || "total"], 10));
+                        if (onUpdateTotal) {
+                            onUpdateTotal(headers[totalHeaderParam || "total"]);
+                        }
+                    }
+                }
+
+                let newElements = response?.data?.data;
+                if (onElementsLoad) {
+                    onElementsLoad(newElements);
+                }
+                if (transformData) {
+                    newElements = newElements.filter(transformData);
+                }
+                if (list.addElements && (currentListId in list.addElements) && list.addElements[currentListId].length > 0) {
+                    newElements = [...list.addElements[currentListId], newElements];
+                }
+                addElements(newElements);
+                setIsLoading(false);
+            }).catch((error) => {
+                console.error(error);
+                if (!(error?.response?.status === 404)) {
+                    setLoadError(true);
+                }
+                setIsLoading(false);
+            });
+        } else {
+            setIsLoading(false);
+        }
+    }
+
+    const handleAddElements = (elements) => {
+        setCurrentResources(prevElements => uniqueBy([...elements, ...prevElements], uniqueIdKey || "id"));
+        if (onElementsLoad) {
+            onElementsLoad(elements);
+        }
+    }
+
+    const handleEditElements = (elements) => {
+        let newElements = currentResources;
+        elements.forEach(element =>
+            newElements = newElements.map((a) => (a.id === element.id ? element : a))
+        );
+        setCurrentResources(uniqueBy(newElements, uniqueIdKey || "id"));
+    }
+
+    const handleRemoveElements = (elements) => {
+        const removedElementsIds = elements.map(elm => elm.id);
+        const newElements = currentResources.filter(elm => removedElementsIds.indexOf(elm.id) === -1);
+        setCurrentResources(uniqueBy(newElements, uniqueIdKey || "id"));
+    }
+
+    const addElements = (newElements) => {
+        setCurrentResources(prevElements => uniqueBy([...prevElements, ...newElements], uniqueIdKey || "id"));
+    }
+
+    const displayResource = (resource, index) => {
+        if (resource !== undefined) {
+            return (
+                <li className={styles.paginatedListItem} data-testid={"list-item"} key={resource[uniqueIdKey || "id"]} onClick={onElementClick}>
+                    <StandardErrorBoundary hideMessage={true}>
+                        {React.cloneElement(children, { ...{ index: index, [resourcePropName]: resource } })}
+                    </StandardErrorBoundary>
+                </li>
+            );
+        }
+        return null;
+    }
+
+    const displayLoadingComponent = (index) => {
+        if (loadingComponent) {
+            return (
+                <li className={styles.paginatedListItem} key={index}>
+                    {loadingComponent}
+                </li>
+            );
+        }
+        return null;
+    }
+
+    if (loadError) {
+        throw new Error(intl.formatMessage({ id: "error.list", defaultMessage: "Error when loading content." }));
+    }
+
+    return (
+        <div className={styles.listContainer}>
+            <ActionBar
+                title={title}
+                sortOptions={sortOptions}
+                defaultSelectOption={defaultSelectOption}
+                searchBar={searchBar}
+                tagList={tagList}
+                activeTagId={activeTagId}
+                onSearch={(query) => setCurrentQuery(query)}
+                onSortChange={handleSortChange}
+                onTagChange={(tagId) => setActiveTagId(tagId)}
+                withUrlParams={withUrlParams}
+            />
+            {!isLoading && currentResources.length === 0 ? (
+                emptyListComponent ?
+                    <div className={styles.emptyListElement}>
+                        {emptyListComponent}
+                    </div>
+                    :
+                    <div className={styles.emptyList}>
+                        {emptyText ? emptyText : intl.formatMessage({ id: "info.emptyList", defaultMessage: "No items for now." })}
+                    </div>
+            ) :
+                <>
+                    <ul className={cx(styles.paginatedList, { [styles.paginatedListIsTablet]: !isMobile && !isDesktop, [styles.centeredList]: display === "column", [styles.column]: display === "column", [styles.twoElementsPerLine]: elementsPerLine === 2, [styles.oneElementPerLine]: elementsPerLine === 1, [styles.indexLayoutList]: indexLayout, [styles.listIsDesktop]: isDesktop, [styles.listIsTablet]: isTablet && !isDesktop, [styles.listIsMobile]: isMobile })} style={{ gap: gap }}>
+                        {currentResources.map(displayResource)}
+                        {/* Show loading components directly in list when loading more elements */}
+                        {isLoading ?
+                            Array(perPage).fill().map((v, i) => i).map(displayLoadingComponent)
+                            :
+                            null
+                        }
+                    </ul>
+                    {/* Show pagination button when content is loaded */}
+                    {(!isLoading && withPagination !== false) && (
+                        <Pagination
+                            buttonText={intl.formatMessage({ id: "action.see_more", defaultMessage: "See more" })}
+                            currentPage={page}
+                            perPage={perPage}
+                            totalElements={numberElements || totalElements}
+                            onLoad={handleLoadNewPage}
+                            isLoading={isLoading}
+                            hideLoader={true}
+                            data-tid={"list_read_more"}
+                        />
+                    )}
+                </>
+            }
+        </div>
+    )
+};
+
+PaginatedList.propTypes = {
+    resource: PropTypes.string,
+    query: PropTypes.string,
+    sortOptions: PropTypes.any,
+    sort: PropTypes.string,
+    filters: PropTypes.object,
+    currentPage: PropTypes.number,
+    currentListId: PropTypes.string,
+    withToken: PropTypes.bool,
+    perPage: PropTypes.number,
+    perPageParam: PropTypes.string,
+    pageParam: PropTypes.string,
+    sortParam: PropTypes.string,
+    queryParam: PropTypes.string,
+    tagParam: PropTypes.string,
+    totalHeaderParam: PropTypes.string,
+    onUpdateTotal: PropTypes.func,
+    onElementsLoad: PropTypes.func,
+    onElementClick: PropTypes.func,
+    transformData: PropTypes.func,
+    uniqueIdKey: PropTypes.string,
+    resourcePropName: PropTypes.string,
+    loadingComponent: PropTypes.node,
+    searchBar: PropTypes.bool,
+    title: PropTypes.node,
+    tagList: PropTypes.array,
+    emptyListComponent: PropTypes.node,
+    emptyText: PropTypes.string,
+    display: PropTypes.string,
+    elementsPerLine: PropTypes.number,
+    indexLayout: PropTypes.bool,
+    gap: PropTypes.string,
+    withPagination: PropTypes.bool,
+    numberElements: PropTypes.number,
+    countless: PropTypes.bool,
+    withUrlParams: PropTypes.bool,
+    onLoad: PropTypes.func,
+    onLoadNewPage: PropTypes.func
+};

package/src/components/list/paginated_list/PaginatedList.module.scss

@@ -0,0 +1,88 @@
+@use 'styles/spacing' as spacing;
+@use 'styles/theme' as theme;
+@use 'styles/display' as display;
+
+.paginatedList {
+	list-style: none !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	margin-left: 0 !important;
+	display: inline-grid;
+	width: 100%;
+
+	&.centeredList {
+		justify-content: center !important;
+	}
+
+	&.listIsDesktop {
+		grid-template-columns: repeat(3, 1fr);
+
+		&.indexLayoutList {
+			grid-template-columns: repeat(6, 1fr);
+		}
+
+		&.indexLayoutList>li {
+			grid-column: span 3;
+		}
+
+		&.indexLayoutList>li:nth-child(n + 3) {
+			grid-column: span 2;
+		}
+	}
+
+	&.listIsTablet {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	&.listIsMobile {
+		grid-template-columns: repeat(1, 1fr) !important;
+	}
+
+	&.column,
+	&.oneElementPerLine {
+		grid-template-columns: repeat(1, 1fr) !important;
+	}
+
+	&.twoElementsPerLine {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	&.paginatedListIsTablet {
+		@include display.media-breakpoint-up(md) {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+}
+
+.listContainer {
+	display: flex;
+	flex-direction: column;
+	gap: spacing.$spacer-lg;
+
+	@include display.media-breakpoint-down(xs) {
+		gap: spacing.$spacer;
+	}
+}
+
+.emptyList {
+	text-align: center;
+	@include spacing.my(3, xs);
+	@include spacing.p(0, xs);
+	width: 100%;
+}
+
+.emptyListElement {
+	text-align: center;
+	@include spacing.my(0, xs);
+	@include spacing.p(0, xs);
+	width: 100%;
+}
+
+.paginatedListItem {
+	min-width: 0;
+}
+
+.paginatedListItem::before {
+	content: none !important;
+	display: none !important;
+  }