Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SUL23-438: Added location link to list of branches on the homepage #150

Merged
merged 5 commits into from
Jun 26, 2024
Merged

SUL23-438: Added location link to list of branches on the homepage #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
23dc9a1
SUL23-438: Added location link to list of branches on the homepage
imonroe Jun 21, 2024
d3d9f0a
Fixup from feedback
imonroe Jun 24, 2024
702251d
fixup from feedback
imonroe Jun 26, 2024
7f2f60c
Removed redundant location label
imonroe Jun 26, 2024
4a0fe83
fixup typo
imonroe Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions src/components/node/stanford-page/home-page/home-page-banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ const HomePageBanner = async () => {

// Trim all the fat.
const trimmedLibraries: TrimmedLibrary[] = libraries.map(library => (
{
id: library.id,
title: library.title,
suLibraryHours: library.suLibraryHours,
suLibraryContactImg: library.suLibraryContactImg as MediaImage,
suLibraryBanner: library.suLibraryBanner as MediaImage
}
))
{
id: library.id,
title: library.title,
suLibraryHours: library.suLibraryHours,
suLibraryContactImg: library.suLibraryContactImg as MediaImage,
suLibraryBanner: library.suLibraryBanner as MediaImage,
map: library.suLibraryMapLink?.url
}
))

return (
<header className="bg-black-true mb-50 relative">
Expand Down Expand Up @@ -56,4 +57,4 @@ const HomePageBanner = async () => {
)
}

export default HomePageBanner;
export default HomePageBanner;
125 changes: 79 additions & 46 deletions src/components/node/stanford-page/home-page/today-hours.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,40 @@
"use client";

import Card from "@/components/patterns/card";
import {ClockIcon} from "@heroicons/react/24/outline";
import Image from "next/image";
import {HTMLAttributes, useId, useState} from "react";
import {ErrorBoundary} from "react-error-boundary";
import CachedClientFetch from "@/components/utils/cached-client-fetch";
import useTodayLibraryHours from "@/lib/hooks/useTodayLibraryHours";
import SelectList from "@/components/patterns/elements/select-list";
import {buildUrl} from "@/lib/drupal/utils";
import {NodeSulLibrary} from "@/lib/gql/__generated__/drupal.d";
"use client"

import Card from "@/components/patterns/card"
import {ClockIcon} from "@heroicons/react/24/outline"
import {MapPinIcon} from "@heroicons/react/24/solid"
import Image from "next/image"
import {HTMLAttributes, useId, useState} from "react"
import {ErrorBoundary} from "react-error-boundary"
import CachedClientFetch from "@/components/utils/cached-client-fetch"
import useTodayLibraryHours from "@/lib/hooks/useTodayLibraryHours"
import SelectList from "@/components/patterns/elements/select-list"
import {buildUrl} from "@/lib/drupal/utils"
import {NodeSulLibrary, Maybe} from "@/lib/gql/__generated__/drupal.d"
import Link from "next/link"

export type TrimmedLibrary = {
id: string
title: string
suLibraryHours?: NodeSulLibrary["suLibraryHours"]
suLibraryContactImg?: NodeSulLibrary["suLibraryContactImg"]
suLibraryBanner: NodeSulLibrary["suLibraryBanner"]
map?: Maybe<string>
}

type HoursProps = HTMLAttributes<HTMLDivElement> & {
libraries: TrimmedLibrary[]
}

const TodayHours = ({libraries, ...props}: HoursProps) => {
if (!libraries || libraries.length === 0) return;
if (!libraries || libraries.length === 0) return
return (
<ErrorBoundary fallback={<></>}>
<CachedClientFetch>
<LibrariesTodayHours libraries={libraries} {...props}/>
<LibrariesTodayHours
libraries={libraries}
{...props}
/>
</CachedClientFetch>
</ErrorBoundary>
)
Expand All @@ -39,12 +45,12 @@ interface option {
label: string
}

const LibrariesTodayHours = ({libraries, ...props}: { libraries: HoursProps["libraries"] }) => {
const formId = useId();
const [selectedLibrary, setSelectedLibrary] = useState(libraries.find(library => library.suLibraryHours === 'green')?.id ?? libraries[0].id);
const library = libraries.find((item, index) => selectedLibrary ? item.id === selectedLibrary : index === 0);
const LibrariesTodayHours = ({libraries, ...props}: {libraries: HoursProps["libraries"]}) => {
const formId = useId()
const [selectedLibrary, setSelectedLibrary] = useState(libraries.find(library => library.suLibraryHours === "green")?.id ?? libraries[0].id)
const library = libraries.find((item, index) => (selectedLibrary ? item.id === selectedLibrary : index === 0))

const libraryOptions: option[] = [];
const libraryOptions: option[] = []
libraries.map(library => {
libraryOptions.push({value: library.id, label: library.title})
})
Expand All @@ -53,20 +59,26 @@ const LibrariesTodayHours = ({libraries, ...props}: { libraries: HoursProps["lib

return (
<div {...props}>

<Card
className="border-0 rounded"
image={imageUrl && <Image
className="object-cover object-center"
src={buildUrl(imageUrl).toString()}
alt=""
fill
sizes="500px"
/>}
className="rounded border-0"
image={
imageUrl && (
<Image
className="object-cover object-center"
src={buildUrl(imageUrl).toString()}
alt=""
fill
sizes="500px"
/>
)
}
footer={
<div className="relative pb-100 md:rs-pb-6">
<div className="absolute w-full">
<h3 id={formId} className="text-black leading-tight font-bold type-2 mb-03em">
<h3
id={formId}
className="type-2 mb-03em font-bold leading-tight text-black"
>
Today&apos;s Hours
</h3>
<div className="mb-10">
Expand All @@ -77,9 +89,20 @@ const LibrariesTodayHours = ({libraries, ...props}: { libraries: HoursProps["lib
onChange={(e, value) => setSelectedLibrary(value as string)}
/>
</div>
{library?.suLibraryHours &&
<TodayLibraryHours branchId={library.suLibraryHours}/>
}
{library?.suLibraryHours && <TodayLibraryHours branchId={library.suLibraryHours} />}
{library?.map && (
<span className="float-right inline w-auto">
<Link href={library?.map}>
<span className="sr-only">{library.title}&nbsp;</span>
<MapPinIcon
title="Map"
width={25}
className="mr-5 inline"
/>
Location
</Link>
</span>
)}
</div>
</div>
}
Expand All @@ -88,33 +111,43 @@ const LibrariesTodayHours = ({libraries, ...props}: { libraries: HoursProps["lib
)
}

const TodayLibraryHours = ({branchId}: { branchId?: string }) => {

const libraryHours = useTodayLibraryHours(branchId || '');
const TodayLibraryHours = ({branchId}: {branchId?: string}) => {
const libraryHours = useTodayLibraryHours(branchId || "")

if (!libraryHours) {
return (
<div className="text-black flex">
<ClockIcon title="Hours" width={15} className="mr-5"/>
<div className="flex text-black">
<ClockIcon
title="Hours"
width={15}
className="mr-5"
/>
<a href="https://library-hours.stanford.edu/libraries">See all hours</a>
</div>
);
)
}
const {closedAllDay, isOpen, openingTime, closingTime, afterClose} = libraryHours;
const hoursDisplay = !closedAllDay && (isOpen ? 'Closes at ' + closingTime : (afterClose ? 'Closed at ' + closingTime : 'Opens at ' + openingTime));
const {closedAllDay, isOpen, openingTime, closingTime, afterClose} = libraryHours
const hoursDisplay = !closedAllDay && (isOpen ? "Closes at " + closingTime : afterClose ? "Closed at " + closingTime : "Opens at " + openingTime)

return (
<>
<div className="text-black flex justify-between mb-4" aria-live="polite">
<div className="flex"><ClockIcon title="Hours" width={15} className="mr-5"/> {isOpen ? 'Open' : 'Closed'}</div>
<div>
{hoursDisplay}
<div
className="mb-4 flex justify-between text-black"
aria-live="polite"
>
<div className="flex">
<ClockIcon
title="Hours"
width={15}
className="mr-5"
/>{" "}
{isOpen ? "Open" : "Closed"}
</div>

<div>{hoursDisplay}</div>
</div>
<a href="https://library-hours.stanford.edu/libraries">See all hours</a>
</>
)
}

export default TodayHours
export default TodayHours
Loading