@drodil/backstage-plugin-qeta-react 3.52.6 → 3.53.0

package/dist/components/UsersContainer/UsersContainer.esm.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { QetaEntityContainer } from '../QetaEntityContainer/QetaEntityContainer.esm.js';
+import { UserListItem } from './UserListItem.esm.js';
+import { UsersGridItem } from './UsersGridItem.esm.js';
+import { qetaTranslationRef } from '../../translation.esm.js';
+
+const UsersContainer = (props) => {
+  const { filterPanelProps, defaultView } = props;
+  const { t } = useTranslationRef(qetaTranslationRef);
+  return /* @__PURE__ */ jsx(
+    QetaEntityContainer,
+    {
+      prefix: "users",
+      defaultPageSize: 24,
+      defaultView,
+      initialFilters: {
+        order: "desc",
+        orderBy: "totalPosts",
+        searchQuery: ""
+      },
+      fetch: (api, limit, offset, filters) => {
+        return api.getUsers({
+          limit,
+          offset,
+          searchQuery: filters.searchQuery
+        }).then((res) => ({ items: res.users, total: res.total }));
+      },
+      filterPanelProps: {
+        ...filterPanelProps,
+        mode: "users"
+      },
+      renderListItem: (user) => /* @__PURE__ */ jsx(UserListItem, { user }),
+      renderGridItem: (user) => /* @__PURE__ */ jsx(UsersGridItem, { user }),
+      title: (total) => t("usersPage.users", { count: total }),
+      searchPlaceholder: t("usersPage.search.label"),
+      emptyMessage: t("usersPage.users", { count: 0 }),
+      getKey: (user) => user.userRef
+    }
+  );
+};
+
+export { UsersContainer };
+//# sourceMappingURL=UsersContainer.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UsersContainer.esm.js","sources":["../../../src/components/UsersContainer/UsersContainer.tsx"],"sourcesContent":["import { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { QetaEntityContainer } from '../QetaEntityContainer/QetaEntityContainer';\nimport { UserListItem } from './UserListItem';\nimport { UsersGridItem } from './UsersGridItem';\nimport { UserResponse } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  CommonFilterPanelProps,\n  UserFilters,\n} from '../FilterPanel/FilterPanel';\nimport { qetaTranslationRef } from '../../translation';\nimport { ViewType } from '../ViewToggle/ViewToggle';\n\nexport const UsersContainer = (props: {\n  filterPanelProps?: CommonFilterPanelProps;\n  defaultView?: ViewType;\n}) => {\n  const { filterPanelProps, defaultView } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <QetaEntityContainer<UserResponse, UserFilters>\n      prefix=\"users\"\n      defaultPageSize={24}\n      defaultView={defaultView}\n      initialFilters={{\n        order: 'desc',\n        orderBy: 'totalPosts',\n        searchQuery: '',\n      }}\n      fetch={(api, limit, offset, filters) => {\n        return api\n          .getUsers({\n            limit,\n            offset,\n            searchQuery: filters.searchQuery,\n          })\n          .then(res => ({ items: res.users, total: res.total }));\n      }}\n      filterPanelProps={{\n        ...filterPanelProps,\n        mode: 'users',\n      }}\n      renderListItem={user => <UserListItem user={user} />}\n      renderGridItem={user => <UsersGridItem user={user} />}\n      title={total => t('usersPage.users', { count: total })}\n      searchPlaceholder={t('usersPage.search.label')}\n      emptyMessage={t('usersPage.users', { count: 0 })}\n      getKey={user => user.userRef}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAYa,MAAA,cAAA,GAAiB,CAAC,KAGzB,KAAA;AACJ,EAAM,MAAA,EAAE,gBAAkB,EAAA,WAAA,EAAgB,GAAA,KAAA;AAC1C,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EACE,uBAAA,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,OAAA;AAAA,MACP,eAAiB,EAAA,EAAA;AAAA,MACjB,WAAA;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,KAAO,EAAA,MAAA;AAAA,QACP,OAAS,EAAA,YAAA;AAAA,QACT,WAAa,EAAA;AAAA,OACf;AAAA,MACA,KAAO,EAAA,CAAC,GAAK,EAAA,KAAA,EAAO,QAAQ,OAAY,KAAA;AACtC,QAAA,OAAO,IACJ,QAAS,CAAA;AAAA,UACR,KAAA;AAAA,UACA,MAAA;AAAA,UACA,aAAa,OAAQ,CAAA;AAAA,SACtB,CACA,CAAA,IAAA,CAAK,CAAQ,GAAA,MAAA,EAAE,KAAO,EAAA,GAAA,CAAI,KAAO,EAAA,KAAA,EAAO,GAAI,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,OACzD;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,GAAG,gBAAA;AAAA,QACH,IAAM,EAAA;AAAA,OACR;AAAA,MACA,cAAgB,EAAA,CAAA,IAAA,qBAAS,GAAA,CAAA,YAAA,EAAA,EAAa,IAAY,EAAA,CAAA;AAAA,MAClD,cAAgB,EAAA,CAAA,IAAA,qBAAS,GAAA,CAAA,aAAA,EAAA,EAAc,IAAY,EAAA,CAAA;AAAA,MACnD,OAAO,CAAS,KAAA,KAAA,CAAA,CAAE,mBAAmB,EAAE,KAAA,EAAO,OAAO,CAAA;AAAA,MACrD,iBAAA,EAAmB,EAAE,wBAAwB,CAAA;AAAA,MAC7C,cAAc,CAAE,CAAA,iBAAA,EAAmB,EAAE,KAAA,EAAO,GAAG,CAAA;AAAA,MAC/C,MAAA,EAAQ,UAAQ,IAAK,CAAA;AAAA;AAAA,GACvB;AAEJ;;;;"}

package/dist/components/{UsersGrid → UsersContainer}/UsersGridItem.esm.js

@@ -5,12 +5,19 @@ import { userRouteRef } from '../../routes.esm.js';
 import '../../api.esm.js';
 import 'react-use';
 import 'react';
+import '@backstage/plugin-signals-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import '../../hooks/useListItemStyles.esm.js';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
 import { useIdentityApi } from '../../hooks/useIdentityApi.esm.js';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { makeStyles, Grid, Card, Box, Avatar, Tooltip, Typography, CardContent } from '@material-ui/core';
+import { makeStyles, Card, Box, Avatar, Tooltip, Typography, CardContent, Grid } from '@material-ui/core';
+import 'react-router-dom';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
 import { UserFollowButton } from '../Buttons/UserFollowButton.esm.js';
 import Visibility from '@material-ui/icons/Visibility';
 import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
@@ -19,8 +26,6 @@ import CheckCircle from '@material-ui/icons/CheckCircle';
 import DescriptionIcon from '@material-ui/icons/Description';
 import LinkIcon from '@material-ui/icons/Link';
 import EmojiEvents from '@material-ui/icons/EmojiEvents';
-import { qetaTranslationRef } from '../../translation.esm.js';
-import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import useGridItemStyles from '../GridItemStyles/useGridItemStyles.esm.js';
 import { ClickableLink } from '../Utility/ClickableLink.esm.js';
 import { stringifyEntityRef, parseEntityRef } from '@backstage/catalog-model';
@@ -63,40 +68,32 @@ const UsersGridItem = (props) => {
     error: userError
   } = useIdentityApi((api) => api.getBackstageIdentity(), []);
   const href = `${userRoute()}/${user.userRef}`;
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, xl: 4, children: /* @__PURE__ */ jsx(Card, { className: classes.card, children: /* @__PURE__ */ jsxs(ClickableLink, { href, ariaLabel: primaryTitle, children: [
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        className: classes.cardHeader,
-        display: "flex",
-        alignItems: "center",
-        children: [
-          Icon && /* @__PURE__ */ jsx(
-            Avatar,
-            {
-              src: userEntity?.spec?.profile?.picture,
-              className: "avatar",
-              alt: name,
-              variant: "rounded",
-              style: { marginRight: 16 },
-              children: initials
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", noWrap: true, children: primaryTitle }) }) }),
-          !loadingUser && !userError && currentUser?.userEntityRef !== user.userRef ? /* @__PURE__ */ jsx(
-            Box,
-            {
-              flexShrink: 0,
-              onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              },
-              children: /* @__PURE__ */ jsx(UserFollowButton, { userRef: user.userRef })
-            }
-          ) : null
-        ]
-      }
-    ),
+  return /* @__PURE__ */ jsx(Card, { className: classes.card, children: /* @__PURE__ */ jsxs(ClickableLink, { href, ariaLabel: primaryTitle, children: [
+    /* @__PURE__ */ jsxs(Box, { className: classes.cardHeader, display: "flex", alignItems: "center", children: [
+      Icon && /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          src: userEntity?.spec?.profile?.picture,
+          className: "avatar",
+          alt: name,
+          variant: "rounded",
+          style: { marginRight: 16 },
+          children: initials
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", noWrap: true, children: primaryTitle }) }) }),
+      !loadingUser && !userError && currentUser?.userEntityRef !== user.userRef ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          flexShrink: 0,
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsx(UserFollowButton, { userRef: user.userRef })
+        }
+      ) : null
+    ] }),
     /* @__PURE__ */ jsx(
       CardContent,
       {
@@ -203,7 +200,7 @@ const UsersGridItem = (props) => {
         ] })
       }
     )
-  ] }) }) });
+  ] }) });
 };
 
 export { UsersGridItem };

package/dist/components/UsersContainer/UsersGridItem.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsersGridItem.esm.js","sources":["../../../src/components/UsersContainer/UsersGridItem.tsx"],"sourcesContent":["import { UserResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { userRouteRef } from '../../routes';\nimport { useIdentityApi } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport {\n  Avatar,\n  Box,\n  Card,\n  CardContent,\n  Grid,\n  makeStyles,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport { UserFollowButton } from '../Buttons/UserFollowButton';\nimport Visibility from '@material-ui/icons/Visibility';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport ThumbUpIcon from '@material-ui/icons/ThumbUp';\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport LinkIcon from '@material-ui/icons/Link';\nimport EmojiEvents from '@material-ui/icons/EmojiEvents';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\nimport { ClickableLink } from '../Utility/ClickableLink';\nimport { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';\n\nconst useStyles = makeStyles(theme => ({\n  statsGrid: {\n    marginTop: 'auto',\n  },\n  statItem: {\n    padding: theme.spacing(1),\n    borderRadius: theme.shape.borderRadius,\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n  },\n  flexColumn: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n}));\n\nexport const UsersGridItem = (props: { user: UserResponse }) => {\n  const { user } = props;\n  const classes = useGridItemStyles();\n  const localClasses = useStyles();\n  const userRoute = useRouteRef(userRouteRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const entityRef = stringifyEntityRef(\n    parseEntityRef(user.userRef, { defaultKind: 'user' }),\n  );\n  const { primaryTitle, Icon } = useEntityPresentation(entityRef);\n  const {\n    name,\n    initials,\n    user: userEntity,\n    secondaryTitle,\n  } = useEntityAuthor(user);\n  const {\n    value: currentUser,\n    loading: loadingUser,\n    error: userError,\n  } = useIdentityApi(api => api.getBackstageIdentity(), []);\n\n  const href = `${userRoute()}/${user.userRef}`;\n\n  return (\n    <Card className={classes.card}>\n      <ClickableLink href={href} ariaLabel={primaryTitle}>\n        <Box className={classes.cardHeader} display=\"flex\" alignItems=\"center\">\n          {Icon && (\n            <Avatar\n              src={userEntity?.spec?.profile?.picture}\n              className=\"avatar\"\n              alt={name}\n              variant=\"rounded\"\n              style={{ marginRight: 16 }}\n            >\n              {initials}\n            </Avatar>\n          )}\n          <Box flex={1} minWidth={0}>\n            <Tooltip title={secondaryTitle ?? ''} arrow>\n              <Typography variant=\"h6\" noWrap>\n                {primaryTitle}\n              </Typography>\n            </Tooltip>\n          </Box>\n          {!loadingUser &&\n          !userError &&\n          currentUser?.userEntityRef !== user.userRef ? (\n            <Box\n              flexShrink={0}\n              onClick={e => {\n                e.preventDefault();\n                e.stopPropagation();\n              }}\n            >\n              <UserFollowButton userRef={user.userRef} />\n            </Box>\n          ) : null}\n        </Box>\n        <CardContent\n          className={`${classes.cardContent} ${localClasses.flexColumn}`}\n        >\n          <Grid container spacing={1} className={localClasses.statsGrid}>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <EmojiEvents fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.reputation}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('impactCard.reputation')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <QuestionAnswerIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalQuestions}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.questions')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <DescriptionIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalArticles}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.articles')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <LinkIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalLinks}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.links')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <CheckCircleIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalAnswers}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.answers')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <ThumbUpIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalVotes}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.votes')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <Visibility fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalViews}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.views')}\n                </Typography>\n              </Box>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </ClickableLink>\n    </Card>\n  );\n};\n"],"names":["CheckCircleIcon","ThumbUpIcon"],"mappings":"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"}

package/dist/components/Utility/QetaGridHeader.esm.js

@@ -7,24 +7,28 @@ const QetaGridHeader = ({
   searchBarLabel,
   loading,
   onSearch,
-  buttons
+  buttons,
+  rightElement
 }) => {
   return /* @__PURE__ */ jsxs(Box, { mb: 3, children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, alignItems: "flex-end", justifyContent: "space-between", children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsx(
-      SearchBar,
-      {
-        onSearch,
-        label: searchBarLabel,
-        loading
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx(Box, { mt: 2, mb: 2, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(Box, { width: "100%", maxWidth: 400, children: /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          onSearch,
+          label: searchBarLabel,
+          loading
+        }
+      ) }),
+      rightElement && /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "flex-end", children: rightElement })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { mt: 3, mb: 2, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", justifyContent: "space-between", children: [
       /* @__PURE__ */ jsx(Grid, { item: true, children: !loading && /* @__PURE__ */ jsx(
         Typography,
         {
           variant: "h6",
           component: "h2",
-          style: { fontWeight: 500, paddingBottom: 2 },
+          style: { fontWeight: 500 },
           children: title
         }
       ) }),

package/dist/components/Utility/QetaGridHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"QetaGridHeader.esm.js","sources":["../../../src/components/Utility/QetaGridHeader.tsx"],"sourcesContent":["import { Box, Grid, Typography } from '@material-ui/core';\nimport { SearchBar } from '../SearchBar/SearchBar';\n\nexport type QetaGridHeaderProps = {\n  title: React.ReactNode;\n  searchBarLabel: string;\n  loading: boolean;\n  onSearch: (val: string) => void;\n  buttons?: React.ReactNode;\n};\n\nexport const QetaGridHeader = ({\n  title,\n  searchBarLabel,\n  loading,\n  onSearch,\n  buttons,\n}: QetaGridHeaderProps) => {\n  return (\n    <Box mb={3}>\n      <Grid container alignItems=\"flex-end\" justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <SearchBar\n            onSearch={onSearch}\n            label={searchBarLabel}\n            loading={loading}\n          />\n        </Grid>\n      </Grid>\n      <Box mt={2} mb={2}>\n        <Grid container alignItems=\"center\" justifyContent=\"space-between\">\n          <Grid item>\n            {!loading && (\n              <Typography\n                variant=\"h6\"\n                component=\"h2\"\n                style={{ fontWeight: 500, paddingBottom: 2 }}\n              >\n                {title}\n              </Typography>\n            )}\n          </Grid>\n          {buttons && <Grid item>{buttons}</Grid>}\n        </Grid>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;AAWO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EACE,uBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,UAAA,EAAW,YAAW,cAAe,EAAA,eAAA,EACnD,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAI,IAAI,CACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,KAAO,EAAA,cAAA;AAAA,QACP;AAAA;AAAA,OAEJ,CACF,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EACd,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,UAAW,EAAA,QAAA,EAAS,gBAAe,eACjD,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACP,EAAA,QAAA,EAAA,CAAC,OACA,oBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAU,EAAA,IAAA;AAAA,UACV,KAAO,EAAA,EAAE,UAAY,EAAA,GAAA,EAAK,eAAe,CAAE,EAAA;AAAA,UAE1C,QAAA,EAAA;AAAA;AAAA,OAGP,EAAA,CAAA;AAAA,MACC,OAAW,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAE,QAAQ,EAAA,OAAA,EAAA;AAAA,KAAA,EAClC,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"QetaGridHeader.esm.js","sources":["../../../src/components/Utility/QetaGridHeader.tsx"],"sourcesContent":["import { Box, Grid, Typography } from '@material-ui/core';\nimport { SearchBar } from '../SearchBar/SearchBar';\n\nexport type QetaGridHeaderProps = {\n  title: React.ReactNode;\n  searchBarLabel: string;\n  loading: boolean;\n  onSearch: (val: string) => void;\n  buttons?: React.ReactNode;\n  rightElement?: React.ReactNode;\n};\n\nexport const QetaGridHeader = ({\n  title,\n  searchBarLabel,\n  loading,\n  onSearch,\n  buttons,\n  rightElement,\n}: QetaGridHeaderProps) => {\n  return (\n    <Box mb={3}>\n      <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n        <Box width=\"100%\" maxWidth={400}>\n          <SearchBar\n            onSearch={onSearch}\n            label={searchBarLabel}\n            loading={loading}\n          />\n        </Box>\n        {rightElement && (\n          <Box display=\"flex\" justifyContent=\"flex-end\">\n            {rightElement}\n          </Box>\n        )}\n      </Box>\n      <Box mt={3} mb={2}>\n        <Grid container alignItems=\"center\" justifyContent=\"space-between\">\n          <Grid item>\n            {!loading && (\n              <Typography\n                variant=\"h6\"\n                component=\"h2\"\n                style={{ fontWeight: 500 }}\n              >\n                {title}\n              </Typography>\n            )}\n          </Grid>\n          {buttons && <Grid item>{buttons}</Grid>}\n        </Grid>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EACE,uBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,UAAW,EAAA,QAAA,EAAS,gBAAe,eACrD,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,KAAA,EAAM,MAAO,EAAA,QAAA,EAAU,GAC1B,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,QAAA;AAAA,UACA,KAAO,EAAA,cAAA;AAAA,UACP;AAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,MACC,gCACE,GAAA,CAAA,GAAA,EAAA,EAAI,SAAQ,MAAO,EAAA,cAAA,EAAe,YAChC,QACH,EAAA,YAAA,EAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EACd,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,UAAW,EAAA,QAAA,EAAS,gBAAe,eACjD,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACP,EAAA,QAAA,EAAA,CAAC,OACA,oBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAU,EAAA,IAAA;AAAA,UACV,KAAA,EAAO,EAAE,UAAA,EAAY,GAAI,EAAA;AAAA,UAExB,QAAA,EAAA;AAAA;AAAA,OAGP,EAAA,CAAA;AAAA,MACC,OAAW,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAE,QAAQ,EAAA,OAAA,EAAA;AAAA,KAAA,EAClC,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Utility/QetaPagination.esm.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import { makeStyles, Grid, Tooltip, FormControl, Select, MenuItem } from '@material-ui/core';
+import { Pagination } from '@material-ui/lab';
+
+const useStyles = makeStyles(
+  () => ({
+    root: {
+      marginTop: "2em",
+      marginBottom: "2em"
+    },
+    pageSizeSelect: {
+      marginRight: "1em",
+      maxHeight: "42px"
+    },
+    pagination: {}
+  }),
+  { name: "QetaPagination" }
+);
+const QetaPagination = (props) => {
+  const { handlePageChange, handlePageSizeChange, page, pageCount, tooltip } = props;
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      className: styles.root,
+      spacing: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, { title: tooltip ?? t("pagination.defaultTooltip", {}), arrow: true, children: /* @__PURE__ */ jsx(FormControl, { variant: "outlined", children: /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: props.pageSize,
+            onChange: handlePageSizeChange,
+            variant: "outlined",
+            className: styles.pageSizeSelect,
+            children: [
+              /* @__PURE__ */ jsx(MenuItem, { value: 5, children: "5" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 10, children: "10" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 25, children: "25" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 50, children: "50" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 100, children: "100" })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            page,
+            onChange: handlePageChange,
+            count: pageCount,
+            size: "large",
+            variant: "outlined",
+            className: styles.pagination,
+            showFirstButton: true,
+            showLastButton: true
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { QetaPagination };
+//# sourceMappingURL=QetaPagination.esm.js.map

package/dist/components/Utility/QetaPagination.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QetaPagination.esm.js","sources":["../../../src/components/Utility/QetaPagination.tsx"],"sourcesContent":["import { ChangeEvent } from 'react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n  FormControl,\n  Grid,\n  makeStyles,\n  MenuItem,\n  Select,\n  Tooltip,\n} from '@material-ui/core';\nimport { Pagination } from '@material-ui/lab';\n\nexport type QetaPaginationClassKeys = 'root' | 'pageSizeSelect' | 'pagination';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {\n      marginTop: '2em',\n      marginBottom: '2em',\n    },\n    pageSizeSelect: {\n      marginRight: '1em',\n      maxHeight: '42px',\n    },\n    pagination: {},\n  }),\n  { name: 'QetaPagination' },\n);\n\nexport const QetaPagination = (props: {\n  pageSize: number;\n  handlePageChange: (_event: ChangeEvent<unknown>, value: number) => void;\n  handlePageSizeChange: (event: ChangeEvent<{ value: unknown }>) => void;\n  page: number;\n  tooltip?: string;\n  pageCount: number;\n}) => {\n  const { handlePageChange, handlePageSizeChange, page, pageCount, tooltip } =\n    props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const styles = useStyles();\n  return (\n    <Grid\n      container\n      className={styles.root}\n      spacing={0}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n    >\n      <Tooltip title={tooltip ?? t('pagination.defaultTooltip', {})} arrow>\n        <FormControl variant=\"outlined\">\n          <Select\n            value={props.pageSize}\n            onChange={handlePageSizeChange}\n            variant=\"outlined\"\n            className={styles.pageSizeSelect}\n          >\n            <MenuItem value={5}>5</MenuItem>\n            <MenuItem value={10}>10</MenuItem>\n            <MenuItem value={25}>25</MenuItem>\n            <MenuItem value={50}>50</MenuItem>\n            <MenuItem value={100}>100</MenuItem>\n          </Select>\n        </FormControl>\n      </Tooltip>\n      <Pagination\n        page={page}\n        onChange={handlePageChange}\n        count={pageCount}\n        size=\"large\"\n        variant=\"outlined\"\n        className={styles.pagination}\n        showFirstButton\n        showLastButton\n      />\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,OAAO;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA,KAAA;AAAA,MACX,YAAc,EAAA;AAAA,KAChB;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,WAAa,EAAA,KAAA;AAAA,MACb,SAAW,EAAA;AAAA,KACb;AAAA,IACA,YAAY;AAAC,GACf,CAAA;AAAA,EACA,EAAE,MAAM,gBAAiB;AAC3B,CAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,KAOzB,KAAA;AACJ,EAAA,MAAM,EAAE,gBAAkB,EAAA,oBAAA,EAAsB,IAAM,EAAA,SAAA,EAAW,SAC/D,GAAA,KAAA;AACF,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,OAAS,EAAA,CAAA;AAAA,MACT,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,QAAA;AAAA,MAEf,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAO,OAAW,IAAA,CAAA,CAAE,2BAA6B,EAAA,EAAE,CAAA,EAAG,KAAK,EAAA,IAAA,EAClE,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAY,SAAQ,UACnB,EAAA,QAAA,kBAAA,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAO,KAAM,CAAA,QAAA;AAAA,YACb,QAAU,EAAA,oBAAA;AAAA,YACV,OAAQ,EAAA,UAAA;AAAA,YACR,WAAW,MAAO,CAAA,cAAA;AAAA,YAElB,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAG,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,8BACpB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,GAAA,EAAK,QAAG,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,WAE7B,CACF,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,QAAU,EAAA,gBAAA;AAAA,YACV,KAAO,EAAA,SAAA;AAAA,YACP,IAAK,EAAA,OAAA;AAAA,YACL,OAAQ,EAAA,UAAA;AAAA,YACR,WAAW,MAAO,CAAA,UAAA;AAAA,YAClB,eAAe,EAAA,IAAA;AAAA,YACf,cAAc,EAAA;AAAA;AAAA;AAChB;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/hooks/useListItemStyles.esm.js

@@ -0,0 +1,22 @@
+import { makeStyles } from '@material-ui/core';
+
+const useListItemStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    padding: theme.spacing(1, 2),
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    },
+    textDecoration: "none",
+    color: "inherit",
+    width: "100%",
+    "&:first-child": {
+      paddingTop: theme.spacing(2)
+    }
+  }
+}));
+
+export { useListItemStyles };
+//# sourceMappingURL=useListItemStyles.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemStyles.esm.js","sources":["../../src/hooks/useListItemStyles.ts"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\n\nexport const useListItemStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    padding: theme.spacing(1, 2),\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n    },\n    textDecoration: 'none',\n    color: 'inherit',\n    width: '100%',\n    '&:first-child': {\n      paddingTop: theme.spacing(2),\n    },\n  },\n}));\n"],"names":[],"mappings":";;AAEa,MAAA,iBAAA,GAAoB,WAAW,CAAU,KAAA,MAAA;AAAA,EACpD,IAAM,EAAA;AAAA,IACJ,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,KAAA;AAAA,IACf,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,IAC3B,SAAW,EAAA;AAAA,MACT,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA,KACxC;AAAA,IACA,cAAgB,EAAA,MAAA;AAAA,IAChB,KAAO,EAAA,SAAA;AAAA,IACP,KAAO,EAAA,MAAA;AAAA,IACP,eAAiB,EAAA;AAAA,MACf,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAC7B;AAEJ,CAAE,CAAA;;;;"}

package/dist/hooks/{usePaginatedPosts.esm.js → useQetaEntities.esm.js}

@@ -1,68 +1,48 @@
 import { useAnalytics } from '@backstage/core-plugin-api';
 import { useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { filterKeys } from '../components/FilterPanel/FilterPanel.esm.js';
 import useDebounce from 'react-use/lib/useDebounce';
-import { getFiltersWithDateRange } from '../utils/utils.esm.js';
-import { filterTags } from '@drodil/backstage-plugin-qeta-common';
 import { useQetaApi } from './useQetaApi.esm.js';
+import { filterKeys } from '../components/FilterPanel/FilterPanel.esm.js';
+import { filterTags } from '@drodil/backstage-plugin-qeta-common';
+import { useUserSettings } from './useUserSettings.esm.js';
 
-const EXPANDED_LOCAL_STORAGE_KEY = "qeta-post-filters-expanded";
-function usePaginatedPosts(props) {
+function useQetaEntities(props) {
   const {
-    type,
-    tags,
-    author,
-    entities,
-    entity,
-    favorite,
-    initialPageSize,
-    status
+    fetch,
+    initialFilters,
+    prefix,
+    defaultPageSize,
+    filterKeys: filterKeys$1,
+    fetchDeps,
+    getKey,
+    usePagination
   } = props;
   const analytics = useAnalytics();
   const [page, setPage] = useState(1);
-  const pageCount = 1;
-  const [postsPerPage, setPostsPerPage] = useState(initialPageSize ?? 25);
+  const [pageSize, setPageSize] = useState(defaultPageSize ?? 24);
+  const { getSetting, setSetting } = useUserSettings();
   const [showFilterPanel, setShowFilterPanel] = useState(
-    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === "true"
+    getSetting("filterPanelExpanded")[prefix] ?? false
   );
   const [searchParams, setSearchParams] = useSearchParams();
   const [searchQuery, setSearchQuery] = useState("");
-  const [filters, setFilters] = useState({
-    order: props.order ?? "desc",
-    orderBy: props.orderBy ?? "created",
-    noAnswers: props.noAnswers ?? "false",
-    noCorrectAnswer: props.noCorrectAnswer ?? "false",
-    noVotes: props.noVotes ?? "false",
-    searchQuery: props.searchQuery ?? "",
-    entities: entities ?? (entity ? [entity] : void 0),
-    tags,
-    dateRange: "",
-    collectionId: props.collectionId,
-    status,
-    type
-  });
-  const [posts, setPosts] = useState([]);
+  const [filters, setFilters] = useState(initialFilters);
+  const [items, setItems] = useState([]);
   const [hasMore, setHasMore] = useState(true);
   const [total, setTotal] = useState(0);
   useEffect(() => {
-    localStorage.setItem(
-      EXPANDED_LOCAL_STORAGE_KEY,
-      showFilterPanel ? "true" : "false"
-    );
-  }, [showFilterPanel]);
+    if (defaultPageSize) {
+      setPageSize(defaultPageSize);
+    }
+  }, [defaultPageSize]);
   useEffect(() => {
-    setFilters((prev) => ({
-      ...prev,
-      tags,
-      entities: entities ?? (entity ? [entity] : void 0),
-      type,
-      status,
-      collectionId: props.collectionId
-    }));
-    setPage(1);
-    setPosts([]);
-  }, [tags, entities, entity, type, status, props.collectionId]);
+    const currentExpanded = getSetting("filterPanelExpanded");
+    setSetting("filterPanelExpanded", {
+      ...currentExpanded,
+      [prefix]: showFilterPanel
+    });
+  }, [showFilterPanel, prefix, getSetting, setSetting]);
   const onPageChange = (value) => {
     setPage(value);
     setSearchParams((prev) => {
@@ -77,7 +57,6 @@ 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) {
@@ -88,7 +67,8 @@ function usePaginatedPosts(props) {
     setSearchParams((prev) => {
       const newValue = prev;
       for (const { key, value } of changesArray) {
-        if (!filterKeys.includes(key)) {
+        const allowedKeys = filterKeys$1 ?? filterKeys;
+        if (!allowedKeys.includes(key)) {
           continue;
         }
         if (!value || value === "false") {
@@ -112,17 +92,14 @@ function usePaginatedPosts(props) {
   };
   const onSearchQueryChange = (query) => {
     onPageChange(1);
-    setPosts([]);
     if (query) {
-      analytics.captureEvent("qeta_search", query);
+      analytics.captureEvent(`qeta_search_${prefix}`, query);
     }
     setSearchQuery(query);
   };
   useDebounce(
     () => {
       if (filters.searchQuery !== searchQuery) {
-        setPage(1);
-        setPosts([]);
         setFilters({ ...filters, searchQuery });
       }
     },
@@ -139,12 +116,12 @@ function usePaginatedPosts(props) {
             setPage(pv);
           } else {
             setPage(1);
-            setPosts([]);
+            setItems([]);
           }
-        } else if (key === "postsPerPage") {
+        } else if (key === `${prefix}PerPage`) {
           const qpp = Number.parseInt(value, 10);
-          if (qpp > 0) setPostsPerPage(qpp);
-        } else if (filterKeys.includes(key)) {
+          if (qpp > 0) setPageSize(qpp);
+        } else if ((filterKeys$1 ?? filterKeys).includes(key)) {
           filtersApplied = true;
           if (key === "tags") {
             filters.tags = filterTags(value.split(",")) ?? [];
@@ -161,7 +138,7 @@ function usePaginatedPosts(props) {
     if (filtersApplied) {
       setShowFilterPanel(true);
     }
-  }, [searchParams, filters]);
+  }, [searchParams, filterKeys$1, prefix]);
   const {
     value: response,
     loading,
@@ -169,34 +146,31 @@ function usePaginatedPosts(props) {
     retry
   } = useQetaApi(
     (api) => {
-      return api.getPosts({
-        type,
-        limit: postsPerPage,
-        offset: (page - 1) * postsPerPage,
-        includeEntities: true,
-        includeAnswers: false,
-        includeComments: false,
-        includeAttachments: false,
-        includeExperts: false,
-        author,
-        favorite,
-        status,
-        ...getFiltersWithDateRange(filters)
-      });
+      return fetch(api, pageSize, (page - 1) * pageSize, filters);
     },
-    [type, page, filters, postsPerPage]
+    [page, filters, pageSize, ...fetchDeps ?? []]
   );
   useEffect(() => {
     if (response) {
-      if (page === 1) {
-        setPosts(response.posts);
+      if (page === 1 || usePagination) {
+        setItems(response.items);
       } else {
-        setPosts((prev) => [...prev, ...response.posts]);
+        setItems((prev) => {
+          const newItems = response.items.filter(
+            (newItem) => !prev.some((prevItem) => {
+              if (getKey) {
+                return getKey(prevItem) === getKey(newItem);
+              }
+              return prevItem.id === newItem.id;
+            })
+          );
+          return [...prev, ...newItems];
+        });
       }
-      setHasMore((response.posts ?? []).length >= postsPerPage);
+      setHasMore((response.items ?? []).length >= pageSize);
       setTotal(response.total);
     }
-  }, [response, page, postsPerPage]);
+  }, [response, page, pageSize, getKey, usePagination]);
   const onPageSizeChange = (value) => {
     if (response) {
       let newPage = page;
@@ -205,18 +179,18 @@ function usePaginatedPosts(props) {
       }
       onPageChange(Math.max(1, newPage));
     }
-    setPostsPerPage(value);
+    setPageSize(value);
     setSearchParams((prev) => {
       const newValue = prev;
-      newValue.set("postsPerPage", String(value));
+      newValue.set(`${prefix}PerPage`, String(value));
       return newValue;
     });
   };
   return {
     page,
     setPage,
-    postsPerPage,
-    setPostsPerPage,
+    pageSize,
+    setPageSize,
     showFilterPanel,
     setShowFilterPanel,
     searchParams,
@@ -230,17 +204,16 @@ function usePaginatedPosts(props) {
     onFilterChange,
     onSearchQueryChange,
     response,
-    posts: page === 1 && !loading && response ? response.posts : posts,
+    items: (page === 1 || usePagination) && !loading && response ? response.items : items,
     hasMore,
     total,
     loading,
     error,
     loadNextPage,
-    pageCount,
     retry,
     fetchNextPage: loadNextPage
   };
 }
 
-export { usePaginatedPosts };
-//# sourceMappingURL=usePaginatedPosts.esm.js.map
+export { useQetaEntities };
+//# sourceMappingURL=useQetaEntities.esm.js.map