From dfe424bd7e1259d02e14f0e4426cc5f497cee9a9 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Fri, 22 Nov 2024 12:11:04 +0100 Subject: [PATCH] Remove / Move `Reader` component In the new architecture, `Reader` is now a standalone app. Additionally I also found that there is no reason to wrap the stories in `Store` --- src/apps/material/material.tsx | 2 +- src/apps/reader/Reader.entry.tsx | 9 ++-- src/apps/reader/Reader.stories.tsx | 12 +++-- src/apps/reader/Reader.tsx | 54 +++++++++++++++++-- .../reader-player => apps/reader}/helper.ts | 0 .../online/MaterialButtonOnlineExternal.tsx | 2 +- .../reader-player/Reader.stories.tsx | 45 ---------------- src/components/reader-player/Reader.tsx | 46 ---------------- 8 files changed, 64 insertions(+), 106 deletions(-) rename src/{components/reader-player => apps/reader}/helper.ts (100%) delete mode 100644 src/components/reader-player/Reader.stories.tsx delete mode 100644 src/components/reader-player/Reader.tsx diff --git a/src/apps/material/material.tsx b/src/apps/material/material.tsx index 2bc173941a..54d8c40fea 100644 --- a/src/apps/material/material.tsx +++ b/src/apps/material/material.tsx @@ -40,7 +40,7 @@ import { import MaterialDisclosure from "./MaterialDisclosure"; import ReservationFindOnShelfModals from "./ReservationFindOnShelfModals"; import ReaderModal from "../../components/material/Reader-modal/ReaderModal"; -import { hasReaderTeaser } from "../../components/reader-player/helper"; +import { hasReaderTeaser } from "../reader/helper"; export interface MaterialProps { wid: WorkId; diff --git a/src/apps/reader/Reader.entry.tsx b/src/apps/reader/Reader.entry.tsx index b45e5ad8ac..bf46d293b0 100644 --- a/src/apps/reader/Reader.entry.tsx +++ b/src/apps/reader/Reader.entry.tsx @@ -2,13 +2,10 @@ import React from "react"; import { withConfig } from "../../core/utils/config"; import { withUrls } from "../../core/utils/url"; import { withText } from "../../core/utils/text"; -import Reader from "./Reader"; +import Reader, { ReaderType } from "./Reader"; -// interface ReaderEntryTextProps {} -// interface ReaderEntryConfigProps {} - -const ReaderEntry: React.FC = () => { - return ; +const ReaderEntry: React.FC = ({ identifier, orderId }) => { + return ; }; export default withConfig(withUrls(withText(ReaderEntry))); diff --git a/src/apps/reader/Reader.stories.tsx b/src/apps/reader/Reader.stories.tsx index 87c486b8e0..763d697e46 100644 --- a/src/apps/reader/Reader.stories.tsx +++ b/src/apps/reader/Reader.stories.tsx @@ -1,3 +1,4 @@ +import React from "react"; import type { Meta, StoryObj } from "@storybook/react"; import Reader from "./Reader.entry"; @@ -18,8 +19,11 @@ export default meta; type Story = StoryObj; -export const Primary: Story = { - args: { - ...serviceUrlArgs - } +export const WithIdentifier: Story = { + render: () => +}; + +// Works only if the matrial is reserved +export const WithOrderId: Story = { + render: () => }; diff --git a/src/apps/reader/Reader.tsx b/src/apps/reader/Reader.tsx index 59f22c1dd9..71f2e127a2 100644 --- a/src/apps/reader/Reader.tsx +++ b/src/apps/reader/Reader.tsx @@ -1,7 +1,55 @@ -import React from "react"; +import React, { CSSProperties, useEffect } from "react"; +import { appendAsset, readerAssets, removeAppendedAssets } from "./helper"; -const Reader = () => { - return
Reader React
; +export type ReaderType = { + identifier?: string; + orderId?: string; +}; + +const Reader: React.FC = ({ identifier, orderId }: ReaderType) => { + useEffect(() => { + readerAssets.forEach(appendAsset); + + return () => { + removeAppendedAssets(); + }; + }, [identifier, orderId]); + + const readerStyles: CSSProperties = { + height: "100vh" + }; + + if (orderId) { + return ( +
+ ); + } + + if (identifier) { + return ( +
+ ); + } + + // eslint-disable-next-line no-console + console.warn("No identifier or orderId provided for the Reader app."); + return null; }; export default Reader; diff --git a/src/components/reader-player/helper.ts b/src/apps/reader/helper.ts similarity index 100% rename from src/components/reader-player/helper.ts rename to src/apps/reader/helper.ts diff --git a/src/components/material/material-buttons/online/MaterialButtonOnlineExternal.tsx b/src/components/material/material-buttons/online/MaterialButtonOnlineExternal.tsx index 23fdee1418..30d640cefc 100644 --- a/src/components/material/material-buttons/online/MaterialButtonOnlineExternal.tsx +++ b/src/components/material/material-buttons/online/MaterialButtonOnlineExternal.tsx @@ -12,7 +12,7 @@ import { ManifestationMaterialType } from "../../../../core/utils/types/material import LinkButton from "../../../Buttons/LinkButton"; import MaterialButtonReaderTeaser from "./MaterialButtonReaderTeaser"; import { getManifestationIsbn } from "../../../../apps/material/helper"; -import { hasReaderTeaser } from "../../../reader-player/helper"; +import { hasReaderTeaser } from "../../../../apps/reader/helper"; export interface MaterialButtonOnlineExternalProps { externalUrl: string; diff --git a/src/components/reader-player/Reader.stories.tsx b/src/components/reader-player/Reader.stories.tsx deleted file mode 100644 index f7c9ccf6b3..0000000000 --- a/src/components/reader-player/Reader.stories.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react"; -import type { Meta, StoryObj } from "@storybook/react"; -import Store from "../store"; -import Reader from "./Reader"; - -const meta: Meta = { - title: "Components/Reader", - component: Reader, - parameters: { - layout: "centered" - }, - argTypes: { - identifier: { - control: { type: "text" } - }, - orderId: { - control: { type: "text" } - } - } -}; - -export default meta; - -type Story = StoryObj; - -export const WithIdentifier: Story = { - render: () => ( - -
- -
- - ) -}; - -// Works only if the matrial is reserved -export const WithOrderId: Story = { - render: () => ( - -
- -
- - ) -}; diff --git a/src/components/reader-player/Reader.tsx b/src/components/reader-player/Reader.tsx deleted file mode 100644 index 4d94a37330..0000000000 --- a/src/components/reader-player/Reader.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { useEffect } from "react"; -import { appendAsset, readerAssets, removeAppendedAssets } from "./helper"; - -type ReaderType = - | { identifier: string; orderId?: never } - | { identifier?: never; orderId: string }; - -const Reader = ({ identifier, orderId }: ReaderType) => { - useEffect(() => { - readerAssets.forEach(appendAsset); - - return () => { - removeAppendedAssets(); - }; - }, [identifier, orderId]); - - if (orderId) { - return ( -
- ); - } - - if (identifier) { - return ( -
- ); - } - - return null; -}; - -export default Reader;