SUL23-491: Make global message a client-side component #167
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import {NextRequest, NextResponse} from "next/server" | ||
| import {buildHeaders} from "@/lib/drupal/utils" | ||
| import {GraphQLClient} from "graphql-request" | ||
| import {getSdk} from "@/lib/gql/__generated__/queries" | ||
| import type {RequestConfig} from "graphql-request/src/types" | ||
|
|
||
| export const GET = async (request: NextRequest) => { | ||
| const graphqlClient = (requestConfig: RequestConfig = {}, isPreviewMode?: boolean) => { | ||
| requestConfig.headers = buildHeaders(requestConfig.headers as HeadersInit, isPreviewMode) | ||
| const client = new GraphQLClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL + "/graphql", { | ||
| ...requestConfig, | ||
| next: { | ||
| revalidate: 5, // revalidate every 5 seconds to catch updates as soon as possible. | ||
| ...requestConfig.next, | ||
| }, | ||
| fetch: async (input: URL | RequestInfo, init?: RequestInit) => fetch(input, init), | ||
| }) | ||
| return getSdk(client) | ||
| } | ||
|
|
||
| try { | ||
| const headers = await buildHeaders() | ||
| const query = await graphqlClient({headers, next: {tags: ["config-pages"]}}).ConfigPages() | ||
| return NextResponse.json(query.stanfordGlobalMessages.nodes[0]) | ||
| } catch (e) { | ||
| console.error("Failed to fetch global message", e) | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,91 +1,92 @@ | ||
| "use client" | ||
|
|
||
|
There was a problem hiding this comment. Do this on client, not the server. There was a problem hiding this comment. There should be no reason for a client component or fetching from the client. |
||
| import {useEffect, useState} from "react" | ||
| import formatHtml from "@/lib/format-html" | ||
| import {DrupalActionLink} from "@/components/patterns/link" | ||
| import {BellIcon, CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, InformationCircleIcon} from "@heroicons/react/20/solid" | ||
| import {StanfordGlobalMessage} from "@/lib/gql/__generated__/drupal.d" | ||
| import {JSX} from "react" | ||
|
|
||
| const GlobalMessage = () => { | ||
| const [configPage, setConfigPage] = useState<StanfordGlobalMessage | undefined>(undefined) | ||
|
|
||
| useEffect(() => { | ||
| const fetchConfigPage = async () => { | ||
| try { | ||
| const response = await fetch("/api/global-message") | ||
| const data = await response.json() | ||
| setConfigPage(data) | ||
| } catch (e) { | ||
| console.error("Failed to fetch global message", e) | ||
| } | ||
| } | ||
|
|
||
| fetchConfigPage() | ||
| }, []) | ||
|
|
||
| if (!configPage || !configPage.suGlobalMsgEnabled) { | ||
| return null | ||
| } | ||
|
|
||
| const options: Record<StanfordGlobalMessage["suGlobalMsgType"], {bgColor: string; textColor: string; linkClasses: string; icon: JSX.Element}> = { | ||
| plain: { | ||
| bgColor: "bg-foggy-light", | ||
| textColor: "text-black-true", | ||
| linkClasses: "transition text-black-true hocus:text-black hocus:bg-sky", | ||
| icon: <BellIcon width={30} />, | ||
| }, | ||
| success: { | ||
| bgColor: "bg-digital-green", | ||
| textColor: "text-white", | ||
| linkClasses: "transition text-white hocus:text-black hocus:bg-white", | ||
| icon: <CheckCircleIcon width={30} />, | ||
| }, | ||
| info: { | ||
| bgColor: "bg-digital-blue-dark", | ||
| textColor: "text-white", | ||
| linkClasses: "transition text-white hocus:text-black hocus:bg-white", | ||
| icon: <InformationCircleIcon width={30} />, | ||
| }, | ||
| warning: { | ||
| bgColor: "bg-illuminating-dark", | ||
| textColor: "text-black-true", | ||
| linkClasses: "transition text-black-true hocus:text-black hocus:bg-sky", | ||
| icon: <ExclamationCircleIcon width={30} />, | ||
| }, | ||
| error: { | ||
| bgColor: "bg-digital-red", | ||
| textColor: "text-white", | ||
| linkClasses: "transition text-white hocus:text-black hocus:bg-white", | ||
| icon: <ExclamationTriangleIcon width={30} />, | ||
| }, | ||
| } | ||
| const chosenOption = options[configPage.suGlobalMsgType || "success"] | ||
|
|
||
| return ( | ||
| <div className={"relative z-30 lg:z-0 " + chosenOption.bgColor + " " + chosenOption.textColor}> | ||
| <div className="centered flex gap-2xl py-20"> | ||
| <div className="flex flex-shrink-0 items-center justify-center"> | ||
| {chosenOption.icon} | ||
| {configPage.suGlobalMsgLabel} | ||
| </div> | ||
|
|
||
| <div> | ||
| {configPage.suGlobalMsgHeader && <h2 className="text-m3">{configPage.suGlobalMsgHeader}</h2>} | ||
|
|
||
| {configPage.suGlobalMsgMessage?.processed && <div className={chosenOption.textColor}>{formatHtml(configPage.suGlobalMsgMessage.processed.replace(/<a /, `<a class="${chosenOption.linkClasses}" `))}</div>} | ||
|
|
||
| {configPage.suGlobalMsgLink?.url && ( | ||
| <DrupalActionLink | ||
| href={configPage.suGlobalMsgLink.url} | ||
| className={chosenOption.linkClasses} | ||
| > | ||
| {configPage.suGlobalMsgLink.title} | ||
| </DrupalActionLink> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default GlobalMessage | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure that this is the right number here; there may be a better balance between BE requests and performance. I just set it to 5 sec for testing purposes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This definitely is not good. This will cause every single page load to fetch every bit of data from Drupal. Resulting in millions of requests and slow page loads.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can I narrow this down so it only gets the config page for the global message instead of everything?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That will still increase requests for nearly every single page every user visits because it will fetch new config page data every 5 seconds.