feat: allow selecting number of questions in list

closes #19

Author: drodil

plugins/qeta/src/components/QuestionsContainer/QuestionList.tsx

@@ -1,6 +1,16 @@
 import { useStyles } from '../../utils/hooks';
 import { WarningPanel } from '@backstage/core-components';
-import { Box, Button, Divider, Grid, Typography } from '@material-ui/core';
+import {
+  Box,
+  Button,
+  Divider,
+  FormControl,
+  Grid,
+  MenuItem,
+  Select,
+  Tooltip,
+  Typography,
+} from '@material-ui/core';
 import React from 'react';
 import { QuestionListItem } from './QuestionListItem';
 import { Pagination, Skeleton } from '@material-ui/lab';
@@ -12,17 +22,35 @@ export const QuestionList = (props: {
   error: any;
   response?: QuestionsResponse;
   onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
   page: number;
+  pageSize: number;
   entity?: string;
 }) => {
-  const { loading, error, response, onPageChange, entity, page } = props;
-  const pageSize = 10;
+  const {
+    loading,
+    error,
+    response,
+    onPageChange,
+    entity,
+    page,
+    onPageSizeChange,
+  } = props;
   const styles = useStyles();
 
-  const handleChange = (_event: React.ChangeEvent<unknown>, value: number) => {
+  const handlePageChange = (
+    _event: React.ChangeEvent<unknown>,
+    value: number,
+  ) => {
     onPageChange(value);
   };
 
+  const handlePageSizeChange = (
+    event: React.ChangeEvent<{ value: unknown }>,
+  ) => {
+    onPageSizeChange(Number.parseInt(event.target.value as string, 10));
+  };
+
   if (loading) {
     return <Skeleton variant="rect" height={200} />;
   }
@@ -59,7 +87,9 @@ export const QuestionList = (props: {
   }
 
   const pageCount =
-    response.total < pageSize ? 1 : Math.ceil(response.total / pageSize);
+    response.total < props.pageSize
+      ? 1
+      : Math.ceil(response.total / props.pageSize);
 
   return (
     <Box sx={{ mt: 2 }}>
@@ -77,13 +107,28 @@ export const QuestionList = (props: {
         container
         spacing={0}
         className={styles.questionListPagination}
-        direction="column"
         alignItems="center"
-        justifyContent="center"
+        justifyContent="space-between"
       >
+        <Tooltip title="Questions per page" arrow>
+          <FormControl variant="filled">
+            <Select
+              value={props.pageSize}
+              onChange={handlePageSizeChange}
+              className={styles.questionsPerPage}
+              inputProps={{ className: styles.questionsPerPageInput }}
+            >
+              <MenuItem value={5}>5</MenuItem>
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+              <MenuItem value={100}>100</MenuItem>
+            </Select>
+          </FormControl>
+        </Tooltip>
         <Pagination
           page={page}
-          onChange={handleChange}
+          onChange={handlePageChange}
           count={pageCount}
           size="large"
           variant="outlined"

plugins/qeta/src/components/QuestionsContainer/QuestionsContainer.tsx

@@ -20,6 +20,7 @@ export const QuestionsContainer = (props: QuestionsContainerProps) => {
   const { tags, author, entity, showFilters, showTitle, title, favorite } =
     props;
   const [page, setPage] = React.useState(1);
+  const [questionsPerPage, setQuestionsPerPage] = React.useState(10);
   const [showFilterPanel, setShowFilterPanel] = React.useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
   const [filters, setFilters] = React.useState({
@@ -29,8 +30,6 @@ export const QuestionsContainer = (props: QuestionsContainerProps) => {
     noCorrectAnswer: 'false',
     noVotes: 'false',
   });
-  const pageSize = 10;
-  const offset = (page - 1) * pageSize;
 
   const onPageChange = (value: number) => {
     setPage(value);
@@ -54,11 +53,23 @@ export const QuestionsContainer = (props: QuestionsContainerProps) => {
   useEffect(() => {
     let filtersApplied = false;
     searchParams.forEach((value, key) => {
-      if (key === 'page') {
-        setPage(Number.parseInt(value, 10));
-      } else if (key in filterKeys) {
-        filtersApplied = true;
-        filters[key as FilterKey] = value;
+      try {
+        if (key === 'page') {
+          const pv = Number.parseInt(value, 10);
+          if (pv > 0) {
+            setPage(pv);
+          } else {
+            setPage(1);
+          }
+        } else if (key === 'questionsPerPage') {
+          const qpp = Number.parseInt(value, 10);
+          if (qpp > 0) setQuestionsPerPage(qpp);
+        } else if (key in filterKeys) {
+          filtersApplied = true;
+          filters[key as FilterKey] = value;
+        }
+      } catch (_e) {
+        // NOOP
       }
     });
     setFilters(filters);
@@ -74,17 +85,33 @@ export const QuestionsContainer = (props: QuestionsContainerProps) => {
   } = useQetaApi(
     api =>
       api.getQuestions({
-        limit: pageSize,
-        offset,
+        limit: questionsPerPage,
+        offset: (page - 1) * questionsPerPage,
         tags,
         entity,
         author,
         favorite,
         ...filters,
       }),
-    [page, offset, filters],
+    [page, filters, questionsPerPage],
   );
 
+  const onPageSizeChange = (value: number) => {
+    if (response) {
+      let newPage = page;
+      while (newPage * value > response.total) {
+        newPage -= 1;
+      }
+      onPageChange(Math.max(1, newPage));
+    }
+    setQuestionsPerPage(value);
+    setSearchParams(prev => {
+      const newValue = prev;
+      newValue.set('questionsPerPage', String(value));
+      return newValue;
+    });
+  };
+
   let shownTitle = title;
   if (author) {
     shownTitle = `Questions by ${formatEntityName(author)}`;
@@ -127,8 +154,10 @@ export const QuestionsContainer = (props: QuestionsContainerProps) => {
         error={error}
         response={response}
         onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
         entity={entity}
         page={page}
+        pageSize={questionsPerPage}
       />
     </Box>
   );

plugins/qeta/src/utils/hooks.ts

@@ -96,6 +96,12 @@ export const useStyles = makeStyles(theme => {
       marginTop: theme.spacing(1),
       marginBottom: theme.spacing(1),
     },
+    questionsPerPageInput: {
+      paddingTop: '10px',
+    },
+    questionsPerPage: {
+      marginRight: theme.spacing(3),
+    },
     questionHighlightList: {
       width: '100%',
       border: `1px solid ${theme.palette.action.selected}`,