From a25942015ef5e61b44be741f292c4ac62562b170 Mon Sep 17 00:00:00 2001 From: Eduardo Peredo Rivero Date: Wed, 4 Dec 2024 22:04:45 -0500 Subject: [PATCH 1/2] remove react-router as peerDependency --- README.md | 25 +++++++++++-------- build-lib.js | 10 ++++---- package.json | 9 +++---- .../TrainingModuleDefaultRepository.ts | 19 ++++++++++---- .../repositories/TrainingModuleRepository.ts | 4 ++- src/domain/usecases/GetModuleUseCase.ts | 6 ++--- src/domain/usecases/InstallAppUseCase.ts | 2 +- src/tutorial-module/TutorialRoot.tsx | 8 +++--- src/webapp/pages/settings/SettingsPage.tsx | 21 ++++++++++------ 9 files changed, 61 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index 0b53852e..b283a082 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,7 @@ yarn add @eyeseetea/training-component ``` ```tsx -import { TraininigModule } from "@eyeseetea/training-component"; +import { TutorialModule } from "@eyeseetea/training-component"; function MyComponent() { const { api } = useAppContext(); @@ -121,7 +121,7 @@ function MyComponent() { Tutorials were build for being executed in the whole page so it's a good idea to use them inside a full screen component like Dialog. ```tsx -import { TraininigModule } from "training-component"; +import { TutorialModule } from "@eyeseetea/training-component"; function MyComponent() { const { api } = useAppContext(); @@ -132,15 +132,18 @@ function MyComponent() { }, []); return ( - - setShowTutorial(false)} - onHome={() => setShowTutorial(false)} - locale="en" - baseUrl={api.baseUrl} - /> - + <> + + + setShowTutorial(false)} + onHome={() => setShowTutorial(false)} + locale="en" + baseUrl={api.baseUrl} + /> + + ); } ``` diff --git a/build-lib.js b/build-lib.js index da3a9e70..ec18ddc2 100644 --- a/build-lib.js +++ b/build-lib.js @@ -38,11 +38,11 @@ function removeDependenciesFromPackage() { const packageJsonPath = path.join(__dirname, "package.json"); const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8")); const packageJson2 = { ...packageJson, name: packageJson.name.replace(/-app$/, "-component") }; - if (packageJson.dependencies && packageJson.dependencies["react-scripts"]) { - delete packageJson.dependencies["react-scripts"]; - delete packageJson.dependencies["react-router"]; - delete packageJson.dependencies["react-router-dom"]; - } + + delete packageJson.dependencies["react-router"]; + delete packageJson.dependencies["react-router-dom"]; + delete packageJson.dependencies["@types/react-dom"]; + delete packageJson.dependencies["@types/react-router-dom"]; const destinationPath = path.join(distPath, "package.json"); fs.writeFileSync(destinationPath, JSON.stringify(packageJson2, null, 2)); console.log("package.json copied"); diff --git a/package.json b/package.json index f623dda3..fbd62a2d 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,8 @@ "url": "git+https://github.com/eyeseetea/training-app.git" }, "peerDependencies": { - "react": "17", - "react-dom": "17", - "react-router": ">=5", - "react-router-dom": ">=5" + "react": ">=17", + "react-dom": ">=17" }, "dependencies": { "@dhis2/app-runtime": "3.2.4", @@ -33,13 +31,11 @@ "@material-ui/icons": "4.11.2", "@material-ui/lab": "4.0.0-alpha.60", "@material-ui/styles": "4.11.4", - "@types/file-saver": "2.0.3", "axios": "0.24.0", "btoa": "1.2.1", "classnames": "2.3.1", "d2": "31.10.0", "d2-manifest": "1.0.0", - "date-fns": "2.25.0", "file-saver": "2.0.5", "file-type": "16.5.3", "font-awesome": "4.7.0", @@ -93,6 +89,7 @@ "@babel/preset-typescript": "7.15.0", "@testing-library/jest-dom": "5.14.1", "@testing-library/react": "12.1.2", + "@types/file-saver": "2.0.3", "@types/axios-mock-adapter": "1.10.0", "@types/btoa": "1.2.3", "@types/classnames": "2.3.1", diff --git a/src/data/repositories/TrainingModuleDefaultRepository.ts b/src/data/repositories/TrainingModuleDefaultRepository.ts index 2377ab67..21458661 100644 --- a/src/data/repositories/TrainingModuleDefaultRepository.ts +++ b/src/data/repositories/TrainingModuleDefaultRepository.ts @@ -6,7 +6,7 @@ import { TranslatableText } from "../../domain/entities/TranslatableText"; import { UserProgress } from "../../domain/entities/UserProgress"; import { ConfigRepository } from "../../domain/repositories/ConfigRepository"; import { InstanceRepository } from "../../domain/repositories/InstanceRepository"; -import { TrainingModuleRepository } from "../../domain/repositories/TrainingModuleRepository"; +import { GetModuleOptions, TrainingModuleRepository } from "../../domain/repositories/TrainingModuleRepository"; import { swapById } from "../../utils/array"; import { cache } from "../../utils/cache"; import { promiseMap } from "../../utils/promises"; @@ -96,8 +96,8 @@ export class TrainingModuleDefaultRepository implements TrainingModuleRepository } } - public async get(key: string): Promise { - const defaultModules = await this.listDefaultModules(); + public async get(key: string, options: GetModuleOptions): Promise { + const defaultModules = await this.listDefaultModules(options); const dataStoreModel = await this.storageClient.getObjectInCollection( Namespaces.TRAINING_MODULES, key @@ -252,7 +252,9 @@ export class TrainingModuleDefaultRepository implements TrainingModuleRepository } @cache() - private async listDefaultModules(): Promise { + private async listDefaultModules(options: GetModuleOptions = defaultModuleOptions): Promise { + if (!options.autoInstallDefaultModules) return []; + try { const blob = await this.assetClient.request({ method: "get", url: `/modules/config.json` }).getData(); const text = await blob.text(); @@ -265,7 +267,12 @@ export class TrainingModuleDefaultRepository implements TrainingModuleRepository } } - private async importDefaultModule(id: string): Promise { + private async importDefaultModule( + id: string, + options: GetModuleOptions = defaultModuleOptions + ): Promise { + if (!options.autoInstallDefaultModules) return undefined; + const defaultModules = await this.listDefaultModules(); const defaultModule = defaultModules.find(item => item.id === id); if (!defaultModule) return undefined; @@ -376,3 +383,5 @@ interface DefaultModule { id: string; revision: number; } + +const defaultModuleOptions = { autoInstallDefaultModules: true }; diff --git a/src/domain/repositories/TrainingModuleRepository.ts b/src/domain/repositories/TrainingModuleRepository.ts index 1fbbd2fe..44ce8a6a 100644 --- a/src/domain/repositories/TrainingModuleRepository.ts +++ b/src/domain/repositories/TrainingModuleRepository.ts @@ -3,7 +3,7 @@ import { TrainingModule } from "../entities/TrainingModule"; export interface TrainingModuleRepository { list(): Promise; - get(moduleKey: string): Promise; + get(moduleKey: string, options: GetModuleOptions): Promise; update(module: Pick & Partial): Promise; delete(ids: string[]): Promise; swapOrder(id1: string, id2: string): Promise; @@ -14,3 +14,5 @@ export interface TrainingModuleRepository { export(ids: string[]): Promise; import(files: File[]): Promise; } + +export type GetModuleOptions = { autoInstallDefaultModules: boolean }; diff --git a/src/domain/usecases/GetModuleUseCase.ts b/src/domain/usecases/GetModuleUseCase.ts index 45824ee7..06225658 100644 --- a/src/domain/usecases/GetModuleUseCase.ts +++ b/src/domain/usecases/GetModuleUseCase.ts @@ -1,11 +1,11 @@ import { UseCase } from "../../webapp/CompositionRoot"; import { TrainingModule } from "../entities/TrainingModule"; -import { TrainingModuleRepository } from "../repositories/TrainingModuleRepository"; +import { GetModuleOptions, TrainingModuleRepository } from "../repositories/TrainingModuleRepository"; export class GetModuleUseCase implements UseCase { constructor(private trainingModuleRepository: TrainingModuleRepository) {} - public async execute(id: string): Promise { - return this.trainingModuleRepository.get(id); + public async execute(id: string, options: GetModuleOptions): Promise { + return this.trainingModuleRepository.get(id, options); } } diff --git a/src/domain/usecases/InstallAppUseCase.ts b/src/domain/usecases/InstallAppUseCase.ts index 8310afb2..94d1cc1e 100644 --- a/src/domain/usecases/InstallAppUseCase.ts +++ b/src/domain/usecases/InstallAppUseCase.ts @@ -9,7 +9,7 @@ export class InstallAppUseCase implements UseCase { ) {} public async execute(moduleId: string): Promise { - const module = await this.trainingModuleRepository.get(moduleId); + const module = await this.trainingModuleRepository.get(moduleId, { autoInstallDefaultModules: true }); if (!module?.name) return false; // TODO: We should store app hub id on model instead of using display name diff --git a/src/tutorial-module/TutorialRoot.tsx b/src/tutorial-module/TutorialRoot.tsx index c06aac26..dbede897 100644 --- a/src/tutorial-module/TutorialRoot.tsx +++ b/src/tutorial-module/TutorialRoot.tsx @@ -15,7 +15,7 @@ import { LoadingProvider, SnackbarProvider } from "@eyeseetea/d2-ui-components"; import { useUpdateModuleStep } from "./useTutorial"; export type HeaderButtonsProps = { onExit: () => void; onMinimize?: () => void; onHome: () => void }; -export type TutorialModuleProps = { baseUrl?: string; locale: string; moduleId: string } & HeaderButtonsProps; +export type TutorialModuleProps = { baseUrl?: string; locale?: string; moduleId: string } & HeaderButtonsProps; export type UseTutorialModuleProps = { baseUrl: string; moduleId: string }; function useTrainingModule(props: UseTutorialModuleProps) { @@ -25,7 +25,7 @@ function useTrainingModule(props: UseTutorialModuleProps) { React.useEffect(() => { compositionRoot.usecases.modules - .get(moduleId) + .get(moduleId, { autoInstallDefaultModules: false }) .then(setModule) .catch(() => { throw new Error(`Module not found: ${moduleId}`); @@ -36,7 +36,7 @@ function useTrainingModule(props: UseTutorialModuleProps) { } export const TutorialModule = (props: TutorialModuleProps) => { - const { baseUrl, locale, onExit, onHome, onMinimize } = props; + const { baseUrl, locale = "en", onExit, onHome, onMinimize } = props; const [moduleState, setModuleState] = React.useState<"default" | "minimized">("default"); const module = useTrainingModule({ baseUrl: props.baseUrl || "", moduleId: props.moduleId }); const { moduleStep, setModuleStep, setTutorialProgress, tutorialProgress, updateModuleStep } = useUpdateModuleStep({ @@ -59,7 +59,7 @@ export const TutorialModule = (props: TutorialModuleProps) => { return ( -