Merge pull request #284 from nulib/3937-shared-link-expiration

Update shared link expiration date to display in UI
nulib · May 30, 2023 · fcffd5f · fcffd5f
2 parents 0cc5023 + 3079ccb
commit fcffd5f
Show file tree

Hide file tree

Showing 6 changed files with 2,836 additions and 5,565 deletions.
diff --git a/components/SharedLink/SharedLink.tsx b/components/SharedLink/SharedLink.tsx
@@ -8,14 +8,26 @@ import RelatedItems from "@/components/Shared/RelatedItems";
 import { type Work } from "@nulib/dcapi-types";
 import WorkTopInfo from "@/components/Work/TopInfo";
 import WorkViewerWrapper from "@/components/Work/ViewerWrapper";
+import { formatDateLong } from "@/lib/utils/date-helpers";
 import { getWorkSliders } from "@/lib/work-helpers";
+import { styled } from "@/stitches.config";
+
+const BoldText = styled("strong", {
+  fontFamily: "$northwesternSansBold",
+  fontWeight: "400",
+});
 
 interface SharedLinkProps {
+  linkExpiration?: string;
   manifest: Manifest | null;
   work: Work | null;
 }
 
-const SharedLink: React.FC<SharedLinkProps> = ({ manifest, work }) => {
+const SharedLink: React.FC<SharedLinkProps> = ({
+  linkExpiration,
+  manifest,
+  work,
+}) => {
   const related = work ? getWorkSliders(work) : [];
 
   return (
@@ -43,7 +55,10 @@ const SharedLink: React.FC<SharedLinkProps> = ({ manifest, work }) => {
                   Read more
                 </a>
               </p>
-              <p>This work was shared with you via a temporary link.</p>
+              <p>
+                This work was shared with you via a temporary link. It will
+                expire <BoldText>{formatDateLong(linkExpiration)}</BoldText>
+              </p>
             </div>
           </Announcement>
           <ErrorBoundary FallbackComponent={ErrorFallback}>

diff --git a/lib/dc-api.ts b/lib/dc-api.ts
@@ -18,7 +18,8 @@ async function apiGetStatus(url: string) {
 }
 
 async function apiGetRequest<R>(
-  obj: ApiGetRequestParams
+  obj: ApiGetRequestParams,
+  rawResponse?: boolean
 ): Promise<R | undefined> {
   const { url } = obj;
 
@@ -27,8 +28,9 @@ async function apiGetRequest<R>(
       url,
       withCredentials: true,
     });
-    const data = response.data?.data as R;
-    return data;
+    const work = response.data?.data as R;
+    // @ts-ignore
+    return rawResponse ? (response as unknown) : work;
   } catch (err) {
     handleError(err);
   }

diff --git a/lib/utils/date-helpers.ts b/lib/utils/date-helpers.ts
@@ -2,3 +2,17 @@ export function formatDate(date: string): string {
   const dateObj = new Date(date);
   return `${dateObj.getFullYear()}-${dateObj.getMonth()}-${dateObj.getDay()}`;
 }
+
+export function formatDateLong(date: string | undefined): string {
+  if (!date) return "";
+
+  const dateObj = new Date(date);
+  const hour =
+    dateObj.getHours() > 12 ? dateObj.getHours() - 12 : dateObj.getHours();
+  // Write a JS Date object to a string in the format like "November 14, 2023, 1:14pm"
+  return `${dateObj.toLocaleString("en-US", {
+    month: "long",
+  })} ${dateObj.getDate()}, ${dateObj.getFullYear()}, ${hour}:${dateObj.getMinutes()}${
+    dateObj.getHours() > 12 ? "pm" : "am"
+  }`;
+}