@drodil/backstage-plugin-qeta-react 3.51.0 → 3.52.0

package/dist/components/Timeline/TimelineItem.esm.js

@@ -0,0 +1,162 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeStyles, ListItem, ListItemAvatar, Avatar, ListItemText } from '@material-ui/core';
+import { Link } from 'react-router-dom';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { questionRouteRef, articleRouteRef, linkRouteRef, collectionRouteRef } from '../../routes.esm.js';
+import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import { UserLink } from '../Links/Links.esm.js';
+import '../../api.esm.js';
+import 'react-use';
+import 'react';
+import { useUserInfo } from '../../hooks/useEntityAuthor.esm.js';
+import 'react-use/lib/useAsync';
+import '@backstage/plugin-permission-react';
+import '@drodil/backstage-plugin-qeta-common';
+import '@backstage/plugin-permission-common';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: "100%",
+    padding: theme.spacing(1, 1.5),
+    marginBottom: 0,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    transition: "background-color 0.15s ease-in-out",
+    position: "relative",
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    },
+    "&:last-child": {
+      borderBottom: "none"
+    }
+  },
+  overlayLink: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 0
+  },
+  contentWrapper: {
+    pointerEvents: "none"
+  },
+  contentClickable: {
+    position: "relative",
+    zIndex: 1,
+    pointerEvents: "auto"
+  },
+  inline: {
+    display: "inline"
+  },
+  avatar: {
+    minWidth: "36px"
+  },
+  text: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "flex",
+    alignItems: "center",
+    gap: "6px"
+  },
+  link: {
+    fontWeight: "bold",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: "450px",
+    display: "inline-block",
+    verticalAlign: "bottom"
+  },
+  action: {
+    opacity: 0.8
+  },
+  time: {
+    opacity: 0.6,
+    fontSize: "0.8em",
+    marginLeft: "auto"
+  }
+}));
+const TimelineItemCard = ({ item }) => {
+  const classes = useStyles();
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const questionRoute = useRouteRef(questionRouteRef);
+  const articleRoute = useRouteRef(articleRouteRef);
+  const linkRoute = useRouteRef(linkRouteRef);
+  const collectionRoute = useRouteRef(collectionRouteRef);
+  const { user } = useUserInfo(item.author);
+  let title = item.title;
+  let link = "";
+  let action = "";
+  if (item.type === "post") {
+    const postType = item.postType || "question";
+    const isUpdated = item.action === "updated";
+    if (postType === "article") {
+      link = articleRoute({ id: item.id.toString() });
+      action = isUpdated ? t("timeline.updatedArticle") : t("timeline.postedArticle");
+    } else if (postType === "link") {
+      link = linkRoute({ id: item.id.toString() });
+      action = isUpdated ? t("timeline.updatedLink") : t("timeline.postedLink");
+    } else {
+      link = questionRoute({ id: item.id.toString() });
+      action = isUpdated ? t("timeline.updatedQuestion") : t("timeline.postedQuestion");
+    }
+  } else if (item.type === "answer") {
+    link = `${questionRoute({ id: item.postId.toString() })}#answer_${item.id}`;
+    title = item.postTitle;
+    action = t("timeline.answered");
+  } else if (item.type === "comment") {
+    title = item.postTitle;
+    const postType = item.postType || "question";
+    if (postType === "article") {
+      link = articleRoute({ id: item.postId.toString() });
+      action = t("timeline.commentedOnArticle");
+    } else if (postType === "link") {
+      link = linkRoute({ id: item.postId.toString() });
+      action = t("timeline.commentedOnLink");
+    } else {
+      link = questionRoute({ id: item.postId.toString() });
+      action = t("timeline.commentedOnQuestion");
+    }
+  } else if (item.type === "collection") {
+    link = collectionRoute({ id: item.id.toString() });
+    action = t("timeline.createdCollection");
+  }
+  return /* @__PURE__ */ jsxs(ListItem, { alignItems: "center", className: classes.root, dense: true, children: [
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        to: link,
+        className: classes.overlayLink,
+        "aria-label": title
+      }
+    ),
+    /* @__PURE__ */ jsx(ListItemAvatar, { className: `${classes.avatar} ${classes.contentWrapper}`, children: /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        alt: item.author,
+        src: item.headerImage || user?.spec?.profile?.picture,
+        style: { width: "26px", height: "26px", fontSize: "14px" }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      ListItemText,
+      {
+        className: classes.contentWrapper,
+        primary: /* @__PURE__ */ jsxs("div", { className: classes.text, children: [
+          /* @__PURE__ */ jsx("span", { className: classes.contentClickable, children: /* @__PURE__ */ jsx(UserLink, { entityRef: item.author }) }),
+          /* @__PURE__ */ jsx("span", { className: classes.action, children: action }),
+          /* @__PURE__ */ jsx("span", { className: classes.link, children: title }),
+          /* @__PURE__ */ jsx("span", { className: classes.time, children: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: item.date }) })
+        ] })
+      }
+    )
+  ] });
+};
+
+export { TimelineItemCard };
+//# sourceMappingURL=TimelineItem.esm.js.map

package/dist/components/Timeline/TimelineItem.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineItem.esm.js","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"sourcesContent":["import { TimelineItem } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  ListItem,\n  ListItemAvatar,\n  ListItemText,\n  Avatar,\n  makeStyles,\n} from '@material-ui/core';\nimport { Link as RouterLink } from 'react-router-dom';\n\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  questionRouteRef,\n  articleRouteRef,\n  linkRouteRef,\n  collectionRouteRef,\n} from '../../routes';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\nimport { UserLink } from '../Links';\n\nimport { useUserInfo } from '../../hooks';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    width: '100%',\n    padding: theme.spacing(1, 1.5),\n    marginBottom: 0,\n    borderBottom: `1px solid ${theme.palette.divider}`,\n    borderRadius: theme.shape.borderRadius,\n    transition: 'background-color 0.15s ease-in-out',\n    position: 'relative',\n    cursor: 'pointer',\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n    },\n    '&:last-child': {\n      borderBottom: 'none',\n    },\n  },\n  overlayLink: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    zIndex: 0,\n  },\n  contentWrapper: {\n    pointerEvents: 'none',\n  },\n  contentClickable: {\n    position: 'relative',\n    zIndex: 1,\n    pointerEvents: 'auto',\n  },\n  inline: {\n    display: 'inline',\n  },\n  avatar: {\n    minWidth: '36px',\n  },\n  text: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '6px',\n  },\n  link: {\n    fontWeight: 'bold',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '450px',\n    display: 'inline-block',\n    verticalAlign: 'bottom',\n  },\n  action: {\n    opacity: 0.8,\n  },\n  time: {\n    opacity: 0.6,\n    fontSize: '0.8em',\n    marginLeft: 'auto',\n  },\n}));\n\nexport const TimelineItemCard = ({ item }: { item: TimelineItem }) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const linkRoute = useRouteRef(linkRouteRef);\n  const collectionRoute = useRouteRef(collectionRouteRef);\n  const { user } = useUserInfo(item.author);\n\n  let title = item.title;\n  let link: string = '';\n  let action: string = '';\n\n  if (item.type === 'post') {\n    const postType = item.postType || 'question';\n    const isUpdated = item.action === 'updated';\n    if (postType === 'article') {\n      link = articleRoute({ id: item.id.toString() });\n      action = isUpdated\n        ? t('timeline.updatedArticle')\n        : t('timeline.postedArticle');\n    } else if (postType === 'link') {\n      link = linkRoute({ id: item.id.toString() });\n      action = isUpdated ? t('timeline.updatedLink') : t('timeline.postedLink');\n    } else {\n      link = questionRoute({ id: item.id.toString() });\n      action = isUpdated\n        ? t('timeline.updatedQuestion')\n        : t('timeline.postedQuestion');\n    }\n  } else if (item.type === 'answer') {\n    link = `${questionRoute({ id: item.postId.toString() })}#answer_${item.id}`;\n    title = item.postTitle;\n    action = t('timeline.answered');\n  } else if (item.type === 'comment') {\n    title = item.postTitle;\n    const postType = item.postType || 'question';\n    if (postType === 'article') {\n      link = articleRoute({ id: item.postId.toString() });\n      action = t('timeline.commentedOnArticle');\n    } else if (postType === 'link') {\n      link = linkRoute({ id: item.postId.toString() });\n      action = t('timeline.commentedOnLink');\n    } else {\n      link = questionRoute({ id: item.postId.toString() });\n      action = t('timeline.commentedOnQuestion');\n    }\n  } else if (item.type === 'collection') {\n    link = collectionRoute({ id: item.id.toString() });\n    action = t('timeline.createdCollection');\n  }\n\n  return (\n    <ListItem alignItems=\"center\" className={classes.root} dense>\n      <RouterLink\n        to={link}\n        className={classes.overlayLink}\n        aria-label={title}\n      />\n      <ListItemAvatar className={`${classes.avatar} ${classes.contentWrapper}`}>\n        <Avatar\n          alt={item.author}\n          src={item.headerImage || user?.spec?.profile?.picture}\n          style={{ width: '26px', height: '26px', fontSize: '14px' }}\n        />\n      </ListItemAvatar>\n      <ListItemText\n        className={classes.contentWrapper}\n        primary={\n          <div className={classes.text}>\n            <span className={classes.contentClickable}>\n              <UserLink entityRef={item.author} />\n            </span>\n            <span className={classes.action}>{action}</span>\n            <span className={classes.link}>{title}</span>\n            <span className={classes.time}>\n              <RelativeTimeWithTooltip value={item.date} />\n            </span>\n          </div>\n        }\n      />\n    </ListItem>\n  );\n};\n"],"names":["RouterLink"],"mappings":"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"}

package/dist/components/UsersGrid/UsersGrid.esm.js

@@ -12,7 +12,7 @@ import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
+import { useGridPageSize } from '../../hooks/useGridPageSize.esm.js';
 import { UsersGridContent } from './UsersGridContent.esm.js';
 import useDebounce from 'react-use/lib/useDebounce';
 import { QetaGridHeader } from '../Utility/QetaGridHeader.esm.js';
@@ -23,8 +23,7 @@ import FilterList from '@material-ui/icons/FilterList';
 const EXPANDED_LOCAL_STORAGE_KEY = "qeta-users-filters-expanded";
 const UsersGrid = () => {
   const [page, setPage] = useState(1);
-  const [pageCount, setPageCount] = useState(1);
-  const [entitiesPerPage, setEntitiesPerPage] = useState(25);
+  const entitiesPerPage = useGridPageSize("users", 24);
   const [searchQuery, setSearchQuery] = useState("");
   const [showFilterPanel, setShowFilterPanel] = useState(
     localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === "true"
@@ -34,6 +33,9 @@ const UsersGrid = () => {
     orderBy: "totalPosts",
     searchQuery: ""
   });
+  const [users, setUsers] = useState([]);
+  const [hasMore, setHasMore] = useState(true);
+  const [total, setTotal] = useState(0);
   useEffect(() => {
     localStorage.setItem(
       EXPANDED_LOCAL_STORAGE_KEY,
@@ -43,6 +45,7 @@ const UsersGrid = () => {
   const onFilterChange = (changes) => {
     const changesArray = Array.isArray(changes) ? changes : [changes];
     setPage(1);
+    setUsers([]);
     setFilters((prev) => {
       const newValue = { ...prev };
       for (const { key, value } of changesArray) {
@@ -67,6 +70,8 @@ const UsersGrid = () => {
   useDebounce(
     () => {
       if (filters.searchQuery !== searchQuery) {
+        setPage(1);
+        setUsers([]);
         setFilters({ ...filters, searchQuery });
       }
     },
@@ -75,9 +80,16 @@ const UsersGrid = () => {
   );
   useEffect(() => {
     if (response) {
-      setPageCount(Math.ceil(response.total / entitiesPerPage));
+      if (page === 1) {
+        setUsers(response.users);
+      } else {
+        setUsers((prev) => [...prev, ...response.users]);
+      }
+      setHasMore(response.users.length >= entitiesPerPage);
+      setTotal(response.total);
     }
-  }, [response, entitiesPerPage]);
+  }, [response, entitiesPerPage, page]);
+  const combinedResponse = response ? { ...response, users, total } : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       QetaGridHeader,
@@ -104,15 +116,14 @@ const UsersGrid = () => {
         mode: "users"
       }
     ) }),
-    /* @__PURE__ */ jsx(UsersGridContent, { response, loading, error }),
-    response && response?.total > 0 && /* @__PURE__ */ jsx(
-      QetaPagination,
+    /* @__PURE__ */ jsx(
+      UsersGridContent,
       {
-        pageSize: entitiesPerPage,
-        handlePageChange: (_e, p) => setPage(p),
-        handlePageSizeChange: (e) => setEntitiesPerPage(Number(e.target.value)),
-        page,
-        pageCount
+        response: combinedResponse,
+        loading,
+        error,
+        hasMore,
+        loadNextPage: () => setPage((prev) => prev + 1)
       }
     )
   ] });

package/dist/components/UsersGrid/UsersGrid.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UsersGrid.esm.js","sources":["../../../src/components/UsersGrid/UsersGrid.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useQetaApi } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { UsersGridContent } from './UsersGridContent';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaGridHeader } from '../Utility/QetaGridHeader';\n\nimport { Change, FilterPanel, UserFilters } from '../FilterPanel/FilterPanel';\nimport { Button, Collapse } from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-users-filters-expanded';\n\nexport const UsersGrid = () => {\n  const [page, setPage] = useState(1);\n  const [pageCount, setPageCount] = useState(1);\n  const [entitiesPerPage, setEntitiesPerPage] = useState(25);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [showFilterPanel, setShowFilterPanel] = useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [filters, setFilters] = useState<UserFilters>({\n    order: 'desc',\n    orderBy: 'totalPosts',\n    searchQuery: '',\n  });\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const onFilterChange = (\n    changes: Change<UserFilters> | Change<UserFilters>[],\n  ) => {\n    const changesArray = Array.isArray(changes) ? changes : [changes];\n    setPage(1);\n    setFilters(prev => {\n      const newValue = { ...prev };\n      for (const { key, value } of changesArray) {\n        (newValue as any)[key] = value;\n      }\n      return newValue;\n    });\n  };\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api =>\n      api.getUsers({\n        limit: entitiesPerPage,\n        offset: (page - 1) * entitiesPerPage,\n        ...filters,\n      }),\n    [entitiesPerPage, page, filters],\n  );\n\n  useDebounce(\n    () => {\n      if (filters.searchQuery !== searchQuery) {\n        setFilters({ ...filters, searchQuery: searchQuery });\n      }\n    },\n    400,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    if (response) {\n      setPageCount(Math.ceil(response.total / entitiesPerPage));\n    }\n  }, [response, entitiesPerPage]);\n\n  return (\n    <>\n      <QetaGridHeader\n        title={response ? t('usersPage.users', { count: response.total }) : ''}\n        searchBarLabel={t('usersPage.search.label')}\n        loading={loading}\n        onSearch={setSearchQuery}\n        buttons={\n          <Button\n            onClick={() => setShowFilterPanel(!showFilterPanel)}\n            startIcon={<FilterList />}\n          >\n            {t('filterPanel.filterButton')}\n          </Button>\n        }\n      />\n      <Collapse in={showFilterPanel}>\n        <FilterPanel<UserFilters>\n          onChange={onFilterChange}\n          filters={filters}\n          mode=\"users\"\n        />\n      </Collapse>\n      <UsersGridContent response={response} loading={loading} error={error} />\n      {response && response?.total > 0 && (\n        <QetaPagination\n          pageSize={entitiesPerPage}\n          handlePageChange={(_e, p) => setPage(p)}\n          handlePageSizeChange={e => setEntitiesPerPage(Number(e.target.value))}\n          page={page}\n          pageCount={pageCount}\n        />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UsersGrid.esm.js","sources":["../../../src/components/UsersGrid/UsersGrid.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useGridPageSize, useQetaApi } from '../../hooks';\n\nimport { UsersGridContent } from './UsersGridContent';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaGridHeader } from '../Utility/QetaGridHeader';\n\nimport { Change, FilterPanel, UserFilters } from '../FilterPanel/FilterPanel';\nimport { Button, Collapse } from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-users-filters-expanded';\n\nexport const UsersGrid = () => {\n  const [page, setPage] = useState(1);\n  const entitiesPerPage = useGridPageSize('users', 24);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [showFilterPanel, setShowFilterPanel] = useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [filters, setFilters] = useState<UserFilters>({\n    order: 'desc',\n    orderBy: 'totalPosts',\n    searchQuery: '',\n  });\n  const [users, setUsers] = useState<any[]>([]);\n  const [hasMore, setHasMore] = useState(true);\n  const [total, setTotal] = useState(0);\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const onFilterChange = (\n    changes: Change<UserFilters> | Change<UserFilters>[],\n  ) => {\n    const changesArray = Array.isArray(changes) ? changes : [changes];\n    setPage(1);\n    setUsers([]);\n    setFilters(prev => {\n      const newValue = { ...prev };\n      for (const { key, value } of changesArray) {\n        (newValue as any)[key] = value;\n      }\n      return newValue;\n    });\n  };\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api =>\n      api.getUsers({\n        limit: entitiesPerPage,\n        offset: (page - 1) * entitiesPerPage,\n        ...filters,\n      }),\n    [entitiesPerPage, page, filters],\n  );\n\n  useDebounce(\n    () => {\n      if (filters.searchQuery !== searchQuery) {\n        setPage(1);\n        setUsers([]);\n        setFilters({ ...filters, searchQuery: searchQuery });\n      }\n    },\n    400,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    if (response) {\n      if (page === 1) {\n        setUsers(response.users);\n      } else {\n        setUsers(prev => [...prev, ...response.users]);\n      }\n      setHasMore(response.users.length >= entitiesPerPage);\n      setTotal(response.total);\n    }\n  }, [response, entitiesPerPage, page]);\n\n  const combinedResponse = response ? { ...response, users, total } : undefined;\n\n  return (\n    <>\n      <QetaGridHeader\n        title={response ? t('usersPage.users', { count: response.total }) : ''}\n        searchBarLabel={t('usersPage.search.label')}\n        loading={loading}\n        onSearch={setSearchQuery}\n        buttons={\n          <Button\n            onClick={() => setShowFilterPanel(!showFilterPanel)}\n            startIcon={<FilterList />}\n          >\n            {t('filterPanel.filterButton')}\n          </Button>\n        }\n      />\n      <Collapse in={showFilterPanel}>\n        <FilterPanel<UserFilters>\n          onChange={onFilterChange}\n          filters={filters}\n          mode=\"users\"\n        />\n      </Collapse>\n      <UsersGridContent\n        response={combinedResponse}\n        loading={loading}\n        error={error}\n        hasMore={hasMore}\n        loadNextPage={() => setPage(prev => prev + 1)}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UsersGrid/UsersGridContent.esm.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { WarningPanel } from '@backstage/core-components';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
@@ -6,11 +6,21 @@ import { UsersGridItem } from './UsersGridItem.esm.js';
 import { NoUsersCard } from './NoUsersCard.esm.js';
 import { LoadingGrid } from '../LoadingGrid/LoadingGrid.esm.js';
 import { Grid } from '@material-ui/core';
+import { useInfiniteScroll } from 'infinite-scroll-hook';
 
 const UsersGridContent = (props) => {
-  const { response, error, loading } = props;
+  const { response, error, loading, hasMore, loadNextPage } = props;
   const { t } = useTranslationRef(qetaTranslationRef);
-  if (loading) {
+  const { containerRef: sentryRef } = useInfiniteScroll({
+    shouldStop: !hasMore || !!error || loading,
+    onLoadMore: async () => {
+      if (loadNextPage) {
+        await loadNextPage();
+      }
+    },
+    offset: "800px"
+  });
+  if (loading && (!response || response.users.length === 0)) {
     return /* @__PURE__ */ jsx(LoadingGrid, {});
   }
   if (error || response === void 0) {
@@ -19,7 +29,17 @@ const UsersGridContent = (props) => {
   if (!response?.users || response.users.length === 0) {
     return /* @__PURE__ */ jsx(Grid, { xs: 12, children: /* @__PURE__ */ jsx(NoUsersCard, {}) });
   }
-  return /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, alignItems: "stretch", children: response.users.map((entity) => /* @__PURE__ */ jsx(UsersGridItem, { user: entity }, entity.userRef)) });
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, alignItems: "stretch", children: [
+    response.users.map((entity) => /* @__PURE__ */ jsx(UsersGridItem, { user: entity }, entity.userRef)),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: sentryRef,
+        style: { width: "100%", marginTop: "10px", textAlign: "center" },
+        children: loading && /* @__PURE__ */ jsx(LoadingGrid, {})
+      }
+    )
+  ] });
 };
 
 export { UsersGridContent };

package/dist/components/UsersGrid/UsersGridContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UsersGridContent.esm.js","sources":["../../../src/components/UsersGrid/UsersGridContent.tsx"],"sourcesContent":["import { UsersResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { UsersGridItem } from './UsersGridItem';\nimport { NoUsersCard } from './NoUsersCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\n\nexport const UsersGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: UsersResponse;\n}) => {\n  const { response, error, loading } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (loading) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('usersPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.users || response.users.length === 0) {\n    return (\n      <Grid xs={12}>\n        <NoUsersCard />\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container spacing={3} alignItems=\"stretch\">\n      {response.users.map(entity => (\n        <UsersGridItem user={entity} key={entity.userRef} />\n      ))}\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,gBAAA,GAAmB,CAAC,KAI3B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,KAAO,EAAA,OAAA,EAAY,GAAA,KAAA;AACrC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,wBAAwB,CAC7D,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,KAAA,IAAS,QAAS,CAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACnD,IAAA,2BACG,IAAK,EAAA,EAAA,EAAA,EAAI,EACR,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAY,CACf,EAAA,CAAA;AAAA;AAIJ,EAAA,2BACG,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,OAAS,EAAA,CAAA,EAAG,YAAW,SACpC,EAAA,QAAA,EAAA,QAAA,CAAS,MAAM,GAAI,CAAA,CAAA,MAAA,yBACjB,aAAc,EAAA,EAAA,IAAA,EAAM,UAAa,MAAO,CAAA,OAAS,CACnD,CACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UsersGridContent.esm.js","sources":["../../../src/components/UsersGrid/UsersGridContent.tsx"],"sourcesContent":["import { UsersResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { UsersGridItem } from './UsersGridItem';\nimport { NoUsersCard } from './NoUsersCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\nimport { useInfiniteScroll } from 'infinite-scroll-hook';\n\nexport const UsersGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: UsersResponse;\n  hasMore?: boolean;\n  loadNextPage?: () => void;\n}) => {\n  const { response, error, loading, hasMore, loadNextPage } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const { containerRef: sentryRef } = useInfiniteScroll({\n    shouldStop: !hasMore || !!error || loading,\n    onLoadMore: async () => {\n      if (loadNextPage) {\n        await loadNextPage();\n      }\n    },\n    offset: '800px',\n  }) as any;\n\n  if (loading && (!response || response.users.length === 0)) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('usersPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.users || response.users.length === 0) {\n    return (\n      <Grid xs={12}>\n        <NoUsersCard />\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container spacing={3} alignItems=\"stretch\">\n      {response.users.map(entity => (\n        <UsersGridItem user={entity} key={entity.userRef} />\n      ))}\n      <div\n        ref={sentryRef}\n        style={{ width: '100%', marginTop: '10px', textAlign: 'center' }}\n      >\n        {loading && <LoadingGrid />}\n      </div>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAUa,MAAA,gBAAA,GAAmB,CAAC,KAM3B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAU,EAAA,KAAA,EAAO,OAAS,EAAA,OAAA,EAAS,cAAiB,GAAA,KAAA;AAC5D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAI,iBAAkB,CAAA;AAAA,IACpD,UAAY,EAAA,CAAC,OAAW,IAAA,CAAC,CAAC,KAAS,IAAA,OAAA;AAAA,IACnC,YAAY,YAAY;AACtB,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,MAAM,YAAa,EAAA;AAAA;AACrB,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,IAAI,YAAY,CAAC,QAAA,IAAY,QAAS,CAAA,KAAA,CAAM,WAAW,CAAI,CAAA,EAAA;AACzD,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,wBAAwB,CAC7D,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,KAAA,IAAS,QAAS,CAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACnD,IAAA,2BACG,IAAK,EAAA,EAAA,EAAA,EAAI,EACR,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAY,CACf,EAAA,CAAA;AAAA;AAIJ,EAAA,4BACG,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,OAAS,EAAA,CAAA,EAAG,YAAW,SACpC,EAAA,QAAA,EAAA;AAAA,IAAS,QAAA,CAAA,KAAA,CAAM,IAAI,CAClB,MAAA,qBAAA,GAAA,CAAC,iBAAc,IAAM,EAAA,MAAA,EAAA,EAAa,MAAO,CAAA,OAAS,CACnD,CAAA;AAAA,oBACD,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,SAAA;AAAA,QACL,OAAO,EAAE,KAAA,EAAO,QAAQ,SAAW,EAAA,MAAA,EAAQ,WAAW,QAAS,EAAA;AAAA,QAE9D,QAAA,EAAA,OAAA,wBAAY,WAAY,EAAA,EAAA;AAAA;AAAA;AAC3B,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/hooks/useCanReview.esm.js

@@ -1,7 +1,7 @@
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { useState, useMemo, useEffect } from 'react';
 import { permissionApiRef } from '@backstage/plugin-permission-react';
-import { qetaReadPostReviewPermission } from '@drodil/backstage-plugin-qeta-common';
+import { qetaCreatePostReviewPermission, qetaReadPostReviewPermission } from '@drodil/backstage-plugin-qeta-common';
 import { AuthorizeResult } from '@backstage/plugin-permission-common';
 import { useIsModerator } from './useIsModerator.esm.js';
 
@@ -10,6 +10,7 @@ const useCanReview = () => {
   const permissionApi = useApi(permissionApiRef);
   const { isModerator } = useIsModerator();
   const [canReview, setCanReview] = useState(false);
+  const [canRead, setCanRead] = useState(false);
   const [loading, setLoading] = useState(true);
   const usePermissions = useMemo(
     () => configApi.getOptionalBoolean("qeta.permissions") ?? false,
@@ -17,19 +18,24 @@ const useCanReview = () => {
   );
   useEffect(() => {
     if (usePermissions) {
-      permissionApi.authorize({ permission: qetaReadPostReviewPermission }).then((resp) => {
+      permissionApi.authorize({ permission: qetaCreatePostReviewPermission }).then((resp) => {
         setCanReview(resp.result === AuthorizeResult.ALLOW);
-        setLoading(false);
       }).catch(() => {
         setCanReview(false);
-        setLoading(false);
       });
+      permissionApi.authorize({ permission: qetaReadPostReviewPermission }).then((resp) => {
+        setCanRead(resp.result === AuthorizeResult.ALLOW);
+      }).catch(() => {
+        setCanRead(false);
+      });
+      setLoading(false);
       return;
     }
     setCanReview(isModerator);
+    setCanRead(isModerator);
     setLoading(false);
   }, [isModerator, permissionApi, usePermissions]);
-  return { canReview, loading };
+  return { canReview, canRead, loading };
 };
 
 export { useCanReview };

package/dist/hooks/useCanReview.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCanReview.esm.js","sources":["../../src/hooks/useCanReview.ts"],"sourcesContent":["import { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { useEffect, useMemo, useState } from 'react';\nimport { permissionApiRef } from '@backstage/plugin-permission-react';\nimport { qetaReadPostReviewPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { AuthorizeResult } from '@backstage/plugin-permission-common';\nimport { useIsModerator } from './useIsModerator';\n\nexport const useCanReview = () => {\n  const configApi = useApi(configApiRef);\n  const permissionApi = useApi(permissionApiRef);\n  const { isModerator } = useIsModerator();\n  const [canReview, setCanReview] = useState(false);\n  const [loading, setLoading] = useState(true);\n\n  const usePermissions = useMemo(\n    () => configApi.getOptionalBoolean('qeta.permissions') ?? false,\n    [configApi],\n  );\n\n  useEffect(() => {\n    if (usePermissions) {\n      permissionApi\n        .authorize({ permission: qetaReadPostReviewPermission })\n        .then(resp => {\n          setCanReview(resp.result === AuthorizeResult.ALLOW);\n          setLoading(false);\n        })\n        .catch(() => {\n          setCanReview(false);\n          setLoading(false);\n        });\n      return;\n    }\n\n    setCanReview(isModerator);\n    setLoading(false);\n  }, [isModerator, permissionApi, usePermissions]);\n\n  return { canReview, loading };\n};\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,eAAe,MAAM;AAChC,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAM,MAAA,aAAA,GAAgB,OAAO,gBAAgB,CAAA;AAC7C,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,cAAe,EAAA;AACvC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,IAAI,CAAA;AAE3C,EAAA,MAAM,cAAiB,GAAA,OAAA;AAAA,IACrB,MAAM,SAAA,CAAU,kBAAmB,CAAA,kBAAkB,CAAK,IAAA,KAAA;AAAA,IAC1D,CAAC,SAAS;AAAA,GACZ;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAA,aAAA,CACG,UAAU,EAAE,UAAA,EAAY,8BAA8B,CAAA,CACtD,KAAK,CAAQ,IAAA,KAAA;AACZ,QAAa,YAAA,CAAA,IAAA,CAAK,MAAW,KAAA,eAAA,CAAgB,KAAK,CAAA;AAClD,QAAA,UAAA,CAAW,KAAK,CAAA;AAAA,OACjB,CACA,CAAA,KAAA,CAAM,MAAM;AACX,QAAA,YAAA,CAAa,KAAK,CAAA;AAClB,QAAA,UAAA,CAAW,KAAK,CAAA;AAAA,OACjB,CAAA;AACH,MAAA;AAAA;AAGF,IAAA,YAAA,CAAa,WAAW,CAAA;AACxB,IAAA,UAAA,CAAW,KAAK,CAAA;AAAA,GACf,EAAA,CAAC,WAAa,EAAA,aAAA,EAAe,cAAc,CAAC,CAAA;AAE/C,EAAO,OAAA,EAAE,WAAW,OAAQ,EAAA;AAC9B;;;;"}
+{"version":3,"file":"useCanReview.esm.js","sources":["../../src/hooks/useCanReview.ts"],"sourcesContent":["import { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { useEffect, useMemo, useState } from 'react';\nimport { permissionApiRef } from '@backstage/plugin-permission-react';\nimport {\n  qetaCreatePostReviewPermission,\n  qetaReadPostReviewPermission,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { AuthorizeResult } from '@backstage/plugin-permission-common';\nimport { useIsModerator } from './useIsModerator';\n\nexport const useCanReview = () => {\n  const configApi = useApi(configApiRef);\n  const permissionApi = useApi(permissionApiRef);\n  const { isModerator } = useIsModerator();\n  const [canReview, setCanReview] = useState(false);\n  const [canRead, setCanRead] = useState(false);\n  const [loading, setLoading] = useState(true);\n\n  const usePermissions = useMemo(\n    () => configApi.getOptionalBoolean('qeta.permissions') ?? false,\n    [configApi],\n  );\n\n  useEffect(() => {\n    if (usePermissions) {\n      permissionApi\n        .authorize({ permission: qetaCreatePostReviewPermission })\n        .then(resp => {\n          setCanReview(resp.result === AuthorizeResult.ALLOW);\n        })\n        .catch(() => {\n          setCanReview(false);\n        });\n      permissionApi\n        .authorize({ permission: qetaReadPostReviewPermission })\n        .then(resp => {\n          setCanRead(resp.result === AuthorizeResult.ALLOW);\n        })\n        .catch(() => {\n          setCanRead(false);\n        });\n      setLoading(false);\n      return;\n    }\n\n    setCanReview(isModerator);\n    setCanRead(isModerator);\n    setLoading(false);\n  }, [isModerator, permissionApi, usePermissions]);\n\n  return { canReview, canRead, loading };\n};\n"],"names":[],"mappings":";;;;;;;AAUO,MAAM,eAAe,MAAM;AAChC,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAM,MAAA,aAAA,GAAgB,OAAO,gBAAgB,CAAA;AAC7C,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,cAAe,EAAA;AACvC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,IAAI,CAAA;AAE3C,EAAA,MAAM,cAAiB,GAAA,OAAA;AAAA,IACrB,MAAM,SAAA,CAAU,kBAAmB,CAAA,kBAAkB,CAAK,IAAA,KAAA;AAAA,IAC1D,CAAC,SAAS;AAAA,GACZ;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAA,aAAA,CACG,UAAU,EAAE,UAAA,EAAY,gCAAgC,CAAA,CACxD,KAAK,CAAQ,IAAA,KAAA;AACZ,QAAa,YAAA,CAAA,IAAA,CAAK,MAAW,KAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,OACnD,CACA,CAAA,KAAA,CAAM,MAAM;AACX,QAAA,YAAA,CAAa,KAAK,CAAA;AAAA,OACnB,CAAA;AACH,MAAA,aAAA,CACG,UAAU,EAAE,UAAA,EAAY,8BAA8B,CAAA,CACtD,KAAK,CAAQ,IAAA,KAAA;AACZ,QAAW,UAAA,CAAA,IAAA,CAAK,MAAW,KAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,OACjD,CACA,CAAA,KAAA,CAAM,MAAM;AACX,QAAA,UAAA,CAAW,KAAK,CAAA;AAAA,OACjB,CAAA;AACH,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA;AAAA;AAGF,IAAA,YAAA,CAAa,WAAW,CAAA;AACxB,IAAA,UAAA,CAAW,WAAW,CAAA;AACtB,IAAA,UAAA,CAAW,KAAK,CAAA;AAAA,GACf,EAAA,CAAC,WAAa,EAAA,aAAA,EAAe,cAAc,CAAC,CAAA;AAE/C,EAAO,OAAA,EAAE,SAAW,EAAA,OAAA,EAAS,OAAQ,EAAA;AACvC;;;;"}

package/dist/hooks/useGridPageSize.esm.js

@@ -0,0 +1,55 @@
+import { useTheme, useMediaQuery } from '@material-ui/core';
+
+function useGridPageSize(gridType, basePageSize = 24) {
+  const theme = useTheme();
+  const isXl = useMediaQuery(theme.breakpoints.up("xl"));
+  const isLg = useMediaQuery(theme.breakpoints.up("lg"));
+  const isMd = useMediaQuery(theme.breakpoints.up("md"));
+  const isSm = useMediaQuery(theme.breakpoints.up("sm"));
+  let itemsPerRow;
+  switch (gridType) {
+    case "tags":
+    case "entities":
+      if (isXl) {
+        itemsPerRow = 3;
+      } else if (isSm) {
+        itemsPerRow = 2;
+      } else {
+        itemsPerRow = 1;
+      }
+      break;
+    case "users":
+      if (isXl) {
+        itemsPerRow = 3;
+      } else if (isMd) {
+        itemsPerRow = 2;
+      } else {
+        itemsPerRow = 1;
+      }
+      break;
+    case "posts":
+      if (isXl) {
+        itemsPerRow = 2;
+      } else {
+        itemsPerRow = 1;
+      }
+      break;
+    case "collections":
+      if (isLg) {
+        itemsPerRow = 2;
+      } else {
+        itemsPerRow = 1;
+      }
+      break;
+    default:
+      itemsPerRow = 1;
+  }
+  const remainder = basePageSize % itemsPerRow;
+  if (remainder === 0) {
+    return basePageSize;
+  }
+  return basePageSize + (itemsPerRow - remainder);
+}
+
+export { useGridPageSize };
+//# sourceMappingURL=useGridPageSize.esm.js.map

package/dist/hooks/useGridPageSize.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGridPageSize.esm.js","sources":["../../src/hooks/useGridPageSize.ts"],"sourcesContent":["import { useTheme, useMediaQuery } from '@material-ui/core';\n\nexport type GridType = 'posts' | 'tags' | 'entities' | 'users' | 'collections';\n\nexport function useGridPageSize(\n  gridType: GridType,\n  basePageSize: number = 24,\n): number {\n  const theme = useTheme();\n\n  const isXl = useMediaQuery(theme.breakpoints.up('xl'));\n  const isLg = useMediaQuery(theme.breakpoints.up('lg'));\n  const isMd = useMediaQuery(theme.breakpoints.up('md'));\n  const isSm = useMediaQuery(theme.breakpoints.up('sm'));\n\n  let itemsPerRow: number;\n\n  switch (gridType) {\n    case 'tags':\n    case 'entities':\n      if (isXl) {\n        itemsPerRow = 3;\n      } else if (isSm) {\n        itemsPerRow = 2;\n      } else {\n        itemsPerRow = 1;\n      }\n      break;\n\n    case 'users':\n      if (isXl) {\n        itemsPerRow = 3;\n      } else if (isMd) {\n        itemsPerRow = 2;\n      } else {\n        itemsPerRow = 1;\n      }\n      break;\n\n    case 'posts':\n      if (isXl) {\n        itemsPerRow = 2;\n      } else {\n        itemsPerRow = 1;\n      }\n      break;\n\n    case 'collections':\n      if (isLg) {\n        itemsPerRow = 2;\n      } else {\n        itemsPerRow = 1;\n      }\n      break;\n\n    default:\n      itemsPerRow = 1;\n  }\n\n  const remainder = basePageSize % itemsPerRow;\n  if (remainder === 0) {\n    return basePageSize;\n  }\n  return basePageSize + (itemsPerRow - remainder);\n}\n"],"names":[],"mappings":";;AAIgB,SAAA,eAAA,CACd,QACA,EAAA,YAAA,GAAuB,EACf,EAAA;AACR,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EAAA,MAAM,OAAO,aAAc,CAAA,KAAA,CAAM,WAAY,CAAA,EAAA,CAAG,IAAI,CAAC,CAAA;AACrD,EAAA,MAAM,OAAO,aAAc,CAAA,KAAA,CAAM,WAAY,CAAA,EAAA,CAAG,IAAI,CAAC,CAAA;AACrD,EAAA,MAAM,OAAO,aAAc,CAAA,KAAA,CAAM,WAAY,CAAA,EAAA,CAAG,IAAI,CAAC,CAAA;AACrD,EAAA,MAAM,OAAO,aAAc,CAAA,KAAA,CAAM,WAAY,CAAA,EAAA,CAAG,IAAI,CAAC,CAAA;AAErD,EAAI,IAAA,WAAA;AAEJ,EAAA,QAAQ,QAAU;AAAA,IAChB,KAAK,MAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,IAAI,IAAM,EAAA;AACR,QAAc,WAAA,GAAA,CAAA;AAAA,iBACL,IAAM,EAAA;AACf,QAAc,WAAA,GAAA,CAAA;AAAA,OACT,MAAA;AACL,QAAc,WAAA,GAAA,CAAA;AAAA;AAEhB,MAAA;AAAA,IAEF,KAAK,OAAA;AACH,MAAA,IAAI,IAAM,EAAA;AACR,QAAc,WAAA,GAAA,CAAA;AAAA,iBACL,IAAM,EAAA;AACf,QAAc,WAAA,GAAA,CAAA;AAAA,OACT,MAAA;AACL,QAAc,WAAA,GAAA,CAAA;AAAA;AAEhB,MAAA;AAAA,IAEF,KAAK,OAAA;AACH,MAAA,IAAI,IAAM,EAAA;AACR,QAAc,WAAA,GAAA,CAAA;AAAA,OACT,MAAA;AACL,QAAc,WAAA,GAAA,CAAA;AAAA;AAEhB,MAAA;AAAA,IAEF,KAAK,aAAA;AACH,MAAA,IAAI,IAAM,EAAA;AACR,QAAc,WAAA,GAAA,CAAA;AAAA,OACT,MAAA;AACL,QAAc,WAAA,GAAA,CAAA;AAAA;AAEhB,MAAA;AAAA,IAEF;AACE,MAAc,WAAA,GAAA,CAAA;AAAA;AAGlB,EAAA,MAAM,YAAY,YAAe,GAAA,WAAA;AACjC,EAAA,IAAI,cAAc,CAAG,EAAA;AACnB,IAAO,OAAA,YAAA;AAAA;AAET,EAAA,OAAO,gBAAgB,WAAc,GAAA,SAAA,CAAA;AACvC;;;;"}

package/dist/hooks/usePaginatedPosts.esm.js

@@ -21,8 +21,8 @@ function usePaginatedPosts(props) {
   } = props;
   const analytics = useAnalytics();
   const [page, setPage] = useState(1);
-  const [pageCount, setPageCount] = useState(1);
-  const [postsPerPage, setPostsPerPage] = useState(initialPageSize ?? 10);
+  const pageCount = 1;
+  const [postsPerPage, setPostsPerPage] = useState(initialPageSize ?? 25);
   const [showFilterPanel, setShowFilterPanel] = useState(
     localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === "true"
   );
@@ -42,6 +42,9 @@ function usePaginatedPosts(props) {
     status,
     type
   });
+  const [posts, setPosts] = useState([]);
+  const [hasMore, setHasMore] = useState(true);
+  const [total, setTotal] = useState(0);
   useEffect(() => {
     localStorage.setItem(
       EXPANDED_LOCAL_STORAGE_KEY,
@@ -58,6 +61,7 @@ function usePaginatedPosts(props) {
       collectionId: props.collectionId
     }));
     setPage(1);
+    setPosts([]);
   }, [tags, entities, entity, type, status, props.collectionId]);
   const onPageChange = (value) => {
     setPage(value);
@@ -73,6 +77,7 @@ function usePaginatedPosts(props) {
   const onFilterChange = (changes) => {
     const changesArray = Array.isArray(changes) ? changes : [changes];
     setPage(1);
+    setPosts([]);
     setFilters((prev) => {
       const newValue = { ...prev };
       for (const { key, value } of changesArray) {
@@ -107,6 +112,7 @@ function usePaginatedPosts(props) {
   };
   const onSearchQueryChange = (query) => {
     onPageChange(1);
+    setPosts([]);
     if (query) {
       analytics.captureEvent("qeta_search", query);
     }
@@ -131,6 +137,7 @@ function usePaginatedPosts(props) {
             setPage(pv);
           } else {
             setPage(1);
+            setPosts([]);
           }
         } else if (key === "postsPerPage") {
           const qpp = Number.parseInt(value, 10);
@@ -179,9 +186,15 @@ function usePaginatedPosts(props) {
   );
   useEffect(() => {
     if (response) {
-      setPageCount(Math.ceil(response.total / postsPerPage));
+      if (page === 1) {
+        setPosts(response.posts);
+      } else {
+        setPosts((prev) => [...prev, ...response.posts]);
+      }
+      setHasMore(response.posts.length >= postsPerPage);
+      setTotal(response.total);
     }
-  }, [response, postsPerPage]);
+  }, [response, page, postsPerPage]);
   const onPageSizeChange = (value) => {
     if (response) {
       let newPage = page;
@@ -215,11 +228,15 @@ function usePaginatedPosts(props) {
     onFilterChange,
     onSearchQueryChange,
     response,
+    posts,
+    hasMore,
+    total,
     loading,
     error,
     loadNextPage,
     pageCount,
-    retry
+    retry,
+    fetchNextPage: loadNextPage
   };
 }