Pull relevant bugfixes from upstream project (#340)

* reset offset when page size is changed
* expose access token even when refresh token is not present

Signed-off-by: James Phillips <[email protected]>

src/app/apollo/resolvers/auth.js

@@ -97,7 +97,7 @@ export default {
           );
         }
 
-        if (result.auth.invalid || !result.auth.refreshToken) {
+        if (result.auth.invalid) {
           return {
             __typename: "RefreshTokensMutation",
             auth: {
@@ -107,6 +107,16 @@ export default {
           };
         }
 
+        // When no refresh token is present, there is nothing to be done.
+        if (!result.auth.refreshToken) {
+          return {
+            __typename: "RefreshTokensMutation",
+            auth: {
+              ...result.auth,
+            },
+          };
+        }
+
         const expired =
           !notBefore ||
           !result.auth.expiresAt ||

src/lib/component/partial/Pagination.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import withTheme from "/lib/storybook/withTheme";
+
+import Pagination from "./Pagination";
+
+export default {
+  title: "partial / Pagination",
+  component: Pagination,
+  decorators: [withTheme],
+};
+
+export const withControls = (args) => (
+  <Pagination {...args} onChangeQuery={() => null} />
+);
+withControls.args = {
+  pageInfo: {
+    totalCount: 200,
+  },
+  offset: 0,
+  limit: 25,
+};

src/lib/component/partial/Pagination.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import gql from "graphql-tag";
+import TablePagination from "@material-ui/core/TablePagination";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    position: "sticky",
+    bottom: 0,
+    backgroundColor: theme.palette.background.paper,
+    borderTopColor: theme.palette.divider,
+    borderTopWidth: 1,
+    borderTopStyle: "solid",
+    marginTop: -1,
+  },
+}));
+
+interface Props {
+  pageInfo?: {
+    totalCount: number;
+  };
+  limit?: number | string;
+  offset?: number | string;
+  onChangeQuery: (_: any) => void;
+}
+
+const parseNum = (n?: number | string) => {
+  const out = parseInt((n || 0) as string, 10);
+  if (Number.isNaN(out)) {
+    throw new TypeError(`expected numeric; received ${n}`);
+  }
+  return out;
+};
+
+const Pagination = ({ onChangeQuery, ...props }: Props) => {
+  const classes = useStyles();
+
+  const limit = parseNum(props.limit);
+  const offset = parseNum(props.offset);
+
+  // Fall back to a placeholder total count value (equal to page size) while
+  // pageInfo is undefined during load.
+  const count = props.pageInfo ? props.pageInfo.totalCount : limit;
+
+  // Given that offset isn't strictly a multiple of limit, the current page
+  // index must be rounded down. In the case that we have a small offset that
+  // would otherwise round to zero, return 1 to enable the previous page
+  // button to reset offset to 0.
+  const page = offset > 0 && offset < limit ? 1 : Math.floor(offset / limit);
+
+  const handleChangePage = React.useCallback(
+    (_: any, page: number) => onChangeQuery({ offset: page * limit }),
+    [onChangeQuery, limit],
+  );
+
+  const handleChangeLimit = React.useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
+      onChangeQuery({ limit: event.target.value, offset: 0 }),
+    [onChangeQuery],
+  );
+
+  return (
+    <TablePagination
+      component="div"
+      className={classes.root}
+      count={count}
+      rowsPerPage={limit}
+      page={page}
+      onChangePage={handleChangePage}
+      onChangeRowsPerPage={handleChangeLimit}
+      rowsPerPageOptions={[5, 10, 25, 50, 100, 200]}
+    />
+  );
+};
+
+Pagination.fragments = {
+  pageInfo: gql`
+    fragment Pagination_pageInfo on OffsetPageInfo {
+      totalCount
+    }
+  `,
+};
+
+export default Pagination;