Skip to content

Commit

Permalink
SUP-197 SUP-182 Stubbed out search and file list components (#6)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pookmish
pookmish authored Apr 26, 2024
1 parent bcbf563 commit d89dddb
Show file tree
Hide file tree
Showing 29 changed files with 1,171 additions and 490 deletions.
27 changes: 27 additions & 0 deletions app/books/title/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import {BooksQuery} from "@lib/gql/__generated__/drupal";
import {graphqlClient} from "@lib/gql/gql-client";
import {notFound, redirect} from "next/navigation";

const LegacyBookPage = async ({searchParams}: { searchParams?: { [_key: string]: string } }) => {
// Fetch all the books, sort by authors, and then build pagination and side alpha selection.
let fetchMore = true;
let query: BooksQuery;
let afterCursor = null;
let destinationUrl: string | undefined;

if (!searchParams || !searchParams.id) notFound();
const workId = parseInt(searchParams.id);

while (fetchMore) {
query = await graphqlClient({next: {tags: ["views:sup_books"]}}).Books({after: afterCursor})

destinationUrl = query.nodeSupBooks.nodes.find(node => node.supBookWorkIdNumber && node.supBookWorkIdNumber === workId)?.path;

fetchMore = query.nodeSupBooks.pageInfo.hasNextPage && !destinationUrl
afterCursor = query.nodeSupBooks.pageInfo.endCursor;
}
if (destinationUrl) redirect(destinationUrl);
notFound();
}

export default LegacyBookPage;
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"autoprefixer": "^10.4.19",
"axios": "^1.6.8",
"clsx": "^2.1.0",
"decanter": "^7.2.0",
"decanter": "^7.3.0",
"drupal-jsonapi-params": "^2.3.1",
"eslint": "^8.57.0",
"eslint-config-next": "^14.2.2",
Expand All @@ -41,13 +41,13 @@
"qs": "^6.12.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-focus-lock": "^2.11.3",
"react-focus-lock": "^2.12.0",
"react-instantsearch": "^7.7.2",
"react-instantsearch-nextjs": "^0.2.1",
"react-slick": "^0.30.2",
"react-tiny-oembed": "^1.1.0",
"sharp": "^0.33.3",
"tailwind-merge": "^2.2.2",
"tailwind-merge": "^2.3.0",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5",
"usehooks-ts": "^3.1.0"
Expand Down
29 changes: 17 additions & 12 deletions src/components/elements/paged-list.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import {useLayoutEffect, useRef, HtmlHTMLAttributes, useEffect} from "react";
import {useLayoutEffect, useRef, HtmlHTMLAttributes, useEffect, useId} from "react";
import Button from "@components/elements/button";
import {useAutoAnimate} from "@formkit/auto-animate/react";
import {useBoolean, useCounter} from "usehooks-ts";
Expand All @@ -24,18 +24,21 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
/**
* URL parameter used to save the users page position.
*/
pageKey?: string
pageKey?: string | false
}

const PagedList = ({children, ulProps, liProps, itemsPerPage = 10, pageKey = "page", ...props}: Props) => {
const id = useId();
const items = Array.isArray(children) ? children : [children]

const router = useRouter();
const searchParams = useSearchParams()

// Use the GET param for page, but make sure that it is between 1 and the last page. If it"s a string or a number
// Use the GET param for page, but make sure that it is between 1 and the last page. If it's a string or a number
// outside the range, fix the value, so it works as expected.
const {count: page, setCount: setPage} = useCounter(Math.max(1, Math.min(Math.ceil(items.length / itemsPerPage), parseInt(searchParams.get(pageKey) || "") || 1)))
const {
count: currentPage,
setCount: setPage
} = useCounter(Math.max(1, Math.min(Math.ceil(items.length / itemsPerPage), parseInt(searchParams.get(pageKey || "") || "") || 1)))
const {value: focusOnElement, setTrue: enableFocusElement, setFalse: disableFocusElement} = useBoolean(false)

const focusItemRef = useRef<HTMLLIElement>(null);
Expand All @@ -53,24 +56,26 @@ const PagedList = ({children, ulProps, liProps, itemsPerPage = 10, pageKey = "pa
}, [focusOnElement, setFocusOnItem]);

useEffect(() => {
if(!pageKey) return;

// Use search params to retain any other parameters.
const params = new URLSearchParams(searchParams.toString());
if (page > 1) {
params.set(pageKey, `${page}`)
if (currentPage > 1) {
params.set(pageKey, `${currentPage}`)
} else {
params.delete(pageKey)
}

router.replace(`?${params.toString()}`, {scroll: false})
}, [router, page, pageKey, searchParams]);
const paginationButtons = usePagination(items.length, page, itemsPerPage, 2);
}, [router, currentPage, pageKey, searchParams]);
const paginationButtons = usePagination(items.length, currentPage, itemsPerPage, 2);

return (
<div {...props}>
<ul {...ulProps} ref={animationParent}>
{items.slice((page - 1) * itemsPerPage, page * itemsPerPage).map((item, i) =>
{items.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage).map((item, i) =>
<li
key={`pager--${i}`}
key={`pager-${id}-${i}`}
ref={i === 0 ? focusItemRef : null}
tabIndex={i === 0 && focusOnElement ? 0 : undefined}
onBlur={disableFocusElement}
Expand All @@ -88,7 +93,7 @@ const PagedList = ({children, ulProps, liProps, itemsPerPage = 10, pageKey = "pa
<PaginationButton
key={`page-button-${pageNum}--${i}`}
page={pageNum}
currentPage={page}
currentPage={currentPage}
total={Math.ceil(items.length / itemsPerPage)}
onClick={() => goToPage(pageNum)}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/elements/select-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {ChevronDownIcon} from "@heroicons/react/20/solid";
import {useIsClient} from "usehooks-ts";
import {Maybe} from "@lib/gql/__generated__/drupal.d";

interface OptionProps {
type OptionProps = {
rootRef: RefObject<HTMLUListElement>
children?: ReactNode;
value: string;
Expand Down Expand Up @@ -81,7 +81,7 @@ function CustomOption(props: OptionProps) {
);
}

interface Props {
type Props = {
options: SelectOptionDefinition<string>[];
label?: Maybe<string>
ariaLabelledby?: Maybe<string>
Expand Down
10 changes: 0 additions & 10 deletions src/components/global/page-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,6 @@ const PageHeader = async () => {

return (
<header className="shadow-lg">
<div className="bg-cardinal-red">
<div className="centered py-3">
<a
className="font-stanford no-underline font-regular text-20 hocus:underline text-white hocus:text-white leading-none"
href="https://www.stanford.edu"
>
Stanford University
</a>
</div>
</div>
{globalMessageConfig && <GlobalMessage {...globalMessageConfig}/>}
<div className="relative shadow">
<div className="centered min-h-50 pr-24 lg:pr-0">
Expand Down
2 changes: 1 addition & 1 deletion src/components/images/logo-lg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const PressFooterLogoLg = ({height = 89, width = 579, ...props}: Props) => {

return (
<svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<g clip-path="url(#clip0_2247_29338)">
<g clipPath="url(#clip0_2247_29338)">
<path d="M20.0357 87.6485C20.0357 87.6792 19.9563 87.6903 19.9264 87.73C19.7487 88.0068 19.2548 88.4053 18.7153 87.747C18.7055 87.7347 18.6501 87.6777 18.645 87.6485L18.5351 85.8342L18.4252 37.2152L18.8278 6.02042C18.8278 6.01216 18.7283 5.99659 18.7263 6.01312L18.6744 6.01962L18.5313 6.27318C18.369 6.60513 18.1757 6.93212 17.9646 7.24592C17.8609 7.40381 17.7399 7.55642 17.6217 7.70681C17.5605 7.78104 17.4974 7.85583 17.4324 7.92752L17.3738 7.99187L17.3702 7.99425C17.3667 7.99582 17.3726 7.99445 17.3744 7.99521L17.8081 8.04424C17.9882 8.06787 18.168 8.09504 18.3481 8.12673C18.7079 8.19032 19.0667 8.27104 19.4231 8.37284C20.134 8.57855 20.8421 8.86893 21.4885 9.31191C21.8098 9.53375 22.1153 9.79264 22.3822 10.0954C22.4196 10.137 22.4408 10.161 22.4884 10.2205C22.5431 10.289 22.5989 10.3573 22.6465 10.4274C22.7503 10.5656 22.8348 10.7079 22.9198 10.85L23.1675 11.2796L23.2292 11.3871C23.252 11.4227 23.1714 11.4357 23.1474 11.4613L22.9237 11.597L22.1039 12.1014L21.6671 12.3768L20.7981 12.9363C19.6437 13.6899 18.504 14.4683 17.3992 15.2852C16.3004 16.1038 15.2124 16.9564 14.2833 17.9012C14.0743 18.1169 13.8767 18.3386 13.7043 18.5629L13.6672 18.6121L13.6664 18.6139C13.6652 18.6156 13.6682 18.6142 13.6689 18.6148L14.369 18.6389C15.666 18.7011 16.9617 18.8416 18.2482 19.1072C19.0077 19.2655 19.7644 19.4683 20.5063 19.7462C21.6733 20.1917 22.8667 20.82 23.7246 21.9169C24.1481 22.4601 24.4481 23.1247 24.5668 23.8108C24.5975 23.9819 24.618 24.1542 24.6286 24.3257C24.6376 24.5003 24.6443 24.6568 24.6298 24.8617C24.6011 25.2514 24.4799 25.6333 24.3026 25.9603C24.0297 26.4654 23.655 26.8537 23.2693 27.1809C22.8808 27.5083 22.4715 27.7776 22.0575 28.0219C21.2282 28.5074 20.3774 28.8944 19.5289 29.2618C17.8321 29.9912 16.1256 30.6225 14.5192 31.3923C13.8653 31.7069 13.2289 32.0448 12.6425 32.4296C12.0588 32.8145 11.5197 33.2506 11.1307 33.7546C10.9378 34.0064 10.7837 34.2729 10.6858 34.5509C10.6368 34.6899 10.6009 34.8317 10.5782 34.9756C10.5546 35.1238 10.5505 35.2526 10.5492 35.4388C10.5436 36.131 10.6184 36.8 10.8891 37.2975C11.1492 37.7956 11.6434 38.1538 12.2568 38.4267C12.8672 38.6986 13.5553 38.8917 14.2512 39.0614C15.6506 39.3951 17.0984 39.6439 18.5382 39.904C22.3056 40.5645 26.0602 41.2693 29.7522 42.0972L31.1347 42.41L33.7601 43.0319L38.9856 44.3377L39.6088 44.4945L39.7629 44.533C39.8062 44.5457 39.923 44.5661 39.8034 44.5626L39.4039 44.5736L37.7832 44.6185L34.6263 44.7106C33.6382 44.7484 32.7087 44.7977 31.7796 44.8532L30.0224 44.9689C26.3409 45.2355 22.7031 45.6166 19.1412 46.1663C15.5845 46.7242 12.0834 47.4274 8.78822 48.5299C7.14903 49.0883 5.55148 49.7482 4.15094 50.64C3.45556 51.0869 2.81111 51.5964 2.30585 52.189C2.05168 52.4835 1.83836 52.8004 1.67264 53.132C1.63254 53.215 1.5928 53.2985 1.55978 53.384C1.54211 53.4241 1.52343 53.4726 1.51203 53.508L1.5134 53.5036L1.51239 53.5072C1.51103 53.5115 1.51477 53.5088 1.51694 53.508L2.44347 53.1611C3.25171 52.8682 4.06285 52.598 4.87595 52.3476C6.50241 51.8476 8.13652 51.4263 9.7728 51.0869C13.044 50.41 16.3303 50.0553 19.5552 50.1498C22.7747 50.2427 25.9426 50.8046 28.8259 51.9641C29.9457 52.4142 31.0207 52.9508 32.0304 53.5722L32.2415 53.7033L32.5958 53.936C32.8372 54.0907 33.061 54.2494 33.2819 54.4089C33.7251 54.7266 34.1132 55.0385 34.5056 55.346L35.6957 56.2831L35.7665 56.339L35.8039 56.3689C35.8121 56.3772 35.7736 56.3678 35.7606 56.3681L35.5314 56.3441L35.0702 56.2961L34.1505 56.2004C33.5359 56.1339 32.9635 56.0819 32.404 56.0429L31.1033 55.9638C30.5532 55.9358 30.0059 55.9149 29.4621 55.9007C28.3737 55.8724 27.2983 55.8708 26.2383 55.8976C24.1186 55.9527 22.0559 56.1181 20.0911 56.4559C18.1332 56.7969 16.2501 57.3049 14.6464 58.1545C14.4472 58.2616 14.253 58.3738 14.0645 58.4916L13.7818 58.6774L13.7472 58.7011L13.6809 58.7475L13.5563 58.8373L13.343 59.0015C13.0895 59.2042 12.9578 59.3338 12.9567 59.3326C12.9604 59.3358 12.5871 59.6082 12.1801 60.0638C11.7893 60.4898 11.4071 61.108 11.1798 61.6868C10.9926 62.1931 10.9124 62.5507 10.8372 62.7558C10.7672 62.9625 10.7033 63.0208 10.6429 62.9605C10.5265 62.844 10.404 62.2341 10.5185 61.4781C10.5029 61.5214 10.5332 61.2379 10.6604 60.8257C10.7813 60.4118 11.021 59.8787 11.3141 59.4299C11.738 58.768 12.2434 58.2982 12.2399 58.2975C12.2401 58.2982 12.3887 58.1604 12.6645 57.9458L12.8961 57.7734L13.0292 57.6785L13.5168 57.3619C14.2924 56.8894 15.1253 56.517 15.986 56.2102C17.7103 55.5988 19.5426 55.2346 21.4291 54.9932C23.3173 54.7554 25.2656 54.6471 27.2614 54.6302C28.2593 54.6227 29.2694 54.6376 30.2909 54.6762L31.5342 54.7349L31.1563 54.5042C30.2728 53.9785 29.3382 53.5155 28.3611 53.1245C25.6784 52.0449 22.6964 51.5019 19.6236 51.4031C16.5469 51.303 13.375 51.6299 10.1988 52.2756C8.61013 52.5996 7.01866 53.0036 5.43351 53.4848C4.64102 53.7257 3.85014 53.9856 3.06356 54.2667L2.47476 54.4817L1.80474 54.7381C1.409 54.8924 1.01422 55.0586 0.604708 55.2408C0.404199 55.3263 0.189115 55.429 0 55.5003L0.0345858 54.9393C0.060958 54.5664 0.0674403 54.2112 0.139189 53.8108C0.187746 53.6096 0.223902 53.4095 0.298831 53.2013C0.33853 53.0796 0.354474 53.03 0.377464 52.9745L0.448045 52.8036C0.645212 52.3531 0.90374 51.937 1.2014 51.5649C1.79649 50.8164 2.52195 50.2234 3.28022 49.7159C4.80678 48.7071 6.47608 48.0102 8.17308 47.4184C11.5793 46.2564 15.1367 45.5367 18.7486 44.9614C22.3642 44.3968 26.046 44.0058 29.7758 43.7326L30.9511 43.6515L29.5671 43.3377C25.8703 42.5073 22.1196 41.8023 18.3192 41.1362C16.8758 40.875 15.4259 40.6273 13.9605 40.2785C13.2282 40.0985 12.4888 39.8975 11.749 39.5703C11.3805 39.4042 11.0096 39.2028 10.6639 38.9278C10.3189 38.6557 10.0063 38.2989 9.79108 37.8954C9.35641 37.0752 9.2996 36.2131 9.29939 35.4341C9.29976 35.2498 9.30664 35.0077 9.34243 34.7889C9.37686 34.5663 9.43246 34.3468 9.50679 34.1357C9.65544 33.7126 9.88051 33.3301 10.1386 32.9933C10.6612 32.3198 11.3021 31.8176 11.9546 31.3847C12.6113 30.9539 13.2921 30.5944 13.9784 30.2639C15.6579 29.4602 17.3767 28.8257 19.0338 28.1123C19.8599 27.7553 20.675 27.3819 21.4237 26.9432C22.1609 26.5085 22.8694 25.9831 23.2005 25.3694C23.307 25.1716 23.3676 24.9712 23.3833 24.7647C23.3963 24.5558 23.3802 24.2656 23.3362 24.0309C23.2492 23.5388 23.0452 23.0818 22.735 22.6814C22.1129 21.8744 21.1178 21.3133 20.0675 20.9184C19.4026 20.6694 18.7047 20.4808 17.9944 20.3329C16.7913 20.0845 15.5521 19.9488 14.3114 19.8896L13.8459 19.8717L13.1043 19.8606C12.786 19.8594 12.4528 19.8742 12.1201 19.8833L11.9955 19.887C11.9577 19.8858 11.8935 19.9025 11.9202 19.8563L11.9517 19.6917L12.0264 19.3015C12.0682 19.0609 12.1184 18.8103 12.2503 18.542C12.3667 18.2803 12.5759 17.9854 12.7109 17.8025C12.926 17.5226 13.1533 17.2698 13.3862 17.0288C14.4081 15.9919 15.5171 15.129 16.6409 14.2892C17.7678 13.4558 18.9194 12.6685 20.0856 11.9067L21.5082 10.9975L21.474 10.9569C21.2845 10.7388 21.0635 10.5427 20.8178 10.3699C20.3259 10.0248 19.7439 9.77236 19.1313 9.59225C18.8249 9.5017 18.5099 9.42884 18.1902 9.37078C18.0306 9.34183 17.8696 9.31643 17.708 9.29438L17.4648 9.26406L17.1821 9.23551C16.4989 9.17076 15.8103 9.16798 14.8921 9.23926L13.5506 9.31957L13.006 9.35227C12.9887 9.33453 12.2941 9.45976 12.8761 9.23059L14.8011 8.26394C15.3787 7.97711 15.8217 7.75128 16.0609 7.51683C16.2115 7.3995 16.3155 7.27685 16.4464 7.15024L16.5949 6.978C16.6924 6.86124 16.7838 6.73722 16.8719 6.60985C17.0474 6.35451 17.2051 6.08143 17.3467 5.79617C17.4278 5.65602 17.7752 4.86516 17.9771 4.15941C18.0312 3.95524 18.0874 3.78376 18.1397 3.55164L18.2194 3.22014L18.2984 2.83191L18.3379 2.63741L18.3784 2.38973L18.4594 1.89162L18.5483 1.07504L18.5929 0.640723C18.6098 0.329459 18.6267 -0.111309 18.6442 0.025695L19.1467 0.0292431L19.4534 0.0314203L19.6676 0.0331943L19.7746 0.0343636H19.8281H19.8548H19.8682C19.8713 0.0343636 20.0357 0.00484998 20.0357 0.0682316V4.15586V37.0378V85.8287V87.6485Z" fill="white"/>
</g>
<path d="M573.402 61.767C572.09 61.767 570.888 61.5561 569.794 61.1345C568.717 60.6972 567.686 60.0335 566.702 59.1434L567.85 57.7847C568.709 58.5656 569.576 59.1512 570.45 59.5416C571.325 59.9164 572.332 60.1038 573.472 60.1038C574.581 60.1038 575.463 59.8461 576.119 59.3308C576.79 58.7998 577.126 58.1283 577.126 57.3163V57.2694C577.126 56.8946 577.064 56.5589 576.939 56.2621C576.814 55.9498 576.595 55.6687 576.283 55.4188C575.97 55.169 575.533 54.9425 574.971 54.7395C574.425 54.5365 573.722 54.3413 572.863 54.1539C571.926 53.9509 571.106 53.7166 570.403 53.4512C569.716 53.1857 569.146 52.8655 568.693 52.4908C568.241 52.116 567.905 51.6787 567.686 51.179C567.468 50.6792 567.358 50.0936 567.358 49.4221V49.3753C567.358 48.735 567.491 48.1416 567.757 47.595C568.022 47.0484 568.397 46.5799 568.881 46.1895C569.365 45.7835 569.935 45.4711 570.591 45.2525C571.247 45.0182 571.965 44.9011 572.746 44.9011C573.948 44.9011 574.994 45.0729 575.885 45.4165C576.79 45.7444 577.665 46.2441 578.508 46.9157L577.431 48.3446C576.665 47.7199 575.892 47.267 575.112 46.9859C574.346 46.7048 573.542 46.5643 572.699 46.5643C571.621 46.5643 570.77 46.822 570.146 47.3373C569.521 47.837 569.209 48.4617 569.209 49.2113V49.2581C569.209 49.6485 569.271 49.9999 569.396 50.3122C569.521 50.609 569.748 50.8901 570.075 51.1555C570.403 51.4054 570.856 51.6396 571.434 51.8583C572.012 52.0613 572.754 52.2565 573.659 52.4439C575.486 52.8499 576.829 53.4121 577.688 54.1305C578.563 54.8488 579 55.8327 579 57.082V57.1289C579 57.8316 578.859 58.4719 578.578 59.0497C578.297 59.6119 577.907 60.096 577.407 60.502C576.923 60.9081 576.337 61.2204 575.65 61.439C574.963 61.6576 574.214 61.767 573.402 61.767Z" fill="white"/>
Expand Down
Loading

0 comments on commit d89dddb

Please sign in to comment.