feat(router v6): feat

- Implemented the new router v6 in the main scorecard app
hisptz · Jul 23, 2024 · 01636e3 · 01636e3
1 parent f2fcaa6
commit 01636e3
Show file tree

Hide file tree

Showing 30 changed files with 14,577 additions and 63,084 deletions.
diff --git a/.nx/cache/lockfile.hash b/.nx/cache/lockfile.hash
@@ -1 +1 @@
-db5b6fc84620bd01cc8d1face987906f1ba036e8c229c2153fd9d88d99f61889
+5102555885130ff88ee96b7e21356e4ec9819c332fc2f9ab2d80313095c34e33
diff --git a/.nx/cache/nxdeps.json b/.nx/cache/nxdeps.json
diff --git a/package.json b/package.json
@@ -1,30 +1,29 @@
 {
-  "name": "root",
-  "version": "2.6.2",
-  "description": "Interactive Scorecard Application",
-  "license": "BSD-3-Clause",
-  "private": true,
-  "workspaces": {
-    "packages": [
-      "packages/*"
-    ],
-    "nohoist": [
-    ]
-  },
-  "scripts": {
-    "app": "yarn workspace app",
-    "widget": "yarn workspace widget",
-    "shared": "yarn workspace @scorecard/shared",
-    "build:shared": "npx lerna run build --scope=@scorecard/shared",
-    "start:app": "npx lerna run start --scope=app",
-    "test:app": "npx lerna run test --scope=app",
-    "start:widget": "npx lerna run start --scope=widget",
-    "build": "npx lerna run build",
-    "test": "npx lerna run test",
-    "deploy:app": "yarn app deploy"
-  },
-  "devDependencies": {
-    "concurrently": "^7.0.0",
-    "lerna": "^6.6.0"
-  }
+	"name": "root",
+	"version": "2.6.2",
+	"description": "Interactive Scorecard Application",
+	"license": "BSD-3-Clause",
+	"private": true,
+	"workspaces": {
+		"packages": [
+			"packages/*"
+		],
+		"nohoist": []
+	},
+	"scripts": {
+		"app": "yarn workspace app",
+		"widget": "yarn workspace widget",
+		"shared": "yarn workspace @scorecard/shared",
+		"build:shared": "npx lerna run build --scope=@scorecard/shared",
+		"start:app": "npx lerna run start --scope=app",
+		"test:app": "npx lerna run test --scope=app",
+		"start:widget": "npx lerna run start --scope=widget",
+		"build": "npx lerna run build",
+		"test": "npx lerna run test",
+		"deploy:app": "yarn app deploy"
+	},
+	"devDependencies": {
+		"concurrently": "^7.0.0",
+		"lerna": "^6.6.0"
+	}
 }
diff --git a/packages/app/d2.config.js b/packages/app/d2.config.js
@@ -1,11 +1,11 @@
 const config = {
-  type: "app",
-  name: "hisptz-scorecard",
-  title: "Interactive Scorecard",
-  entryPoints: {
-    app: "./src/App",
-  },
-  dataStoreNamespace: "hisptz-scorecard",
+	type: "app",
+	name: "hisptz-scorecard",
+	title: "Interactive Scorecard",
+	entryPoints: {
+		app: "./src/App.tsx",
+	},
+	dataStoreNamespace: "hisptz-scorecard",
 };
 
 module.exports = config;
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -1,96 +1,96 @@
 {
-  "name": "app",
-  "version": "2.6.2",
-  "description": "Interactive Scorecard Application",
-  "license": "BSD-3-Clause",
-  "private": true,
-  "scripts": {
-    "build": "d2-app-scripts build",
-    "deploy": "d2-app-scripts deploy",
-    "start": "dotenv -- cross-var d2-app-scripts start --proxy %DHIS2_PROXY%",
-    "test": "concurrently 'BROWSER=none yarn start' 'wait-on 'http-get://localhost:3000' && cypress open --browser firefox' --kill-others --success first"
-  },
-  "devDependencies": {
-    "@cypress/react": "^5.10.3",
-    "@cypress/webpack-dev-server": "^1.7.0",
-    "@dhis2/cli-app-scripts": "^10.3.10",
-    "@dhis2/cli-style": "^10.5.1",
-    "@dhis2/cli-utils-cypress": "^9.0.2",
-    "@dhis2/cypress-commands": "^9.0.2",
-    "@dhis2/cypress-plugins": "^9.0.2",
-    "@dhis2/d2-i18n": "^1.1.0",
-    "@hookform/devtools": "^4.0.2",
-    "@types/cypress": "^1.1.3",
-    "@types/node": "^20.14.11",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
-    "@typescript-eslint/parser": "^7.16.1",
-    "concurrently": "^7.0.0",
-    "cross-var": "^1.1.0",
-    "cucumber": "^7.0.0-rc.0",
-    "cypress": "9.5.0",
-    "cypress-cucumber-preprocessor": "^4.3.0",
-    "cypress-multi-reporters": "^1.6.0",
-    "cz-conventional-changelog": "3.3.0",
-    "dotenv": "^16.0.3",
-    "dotenv-cli": "^7.1.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-cypress": "^2.11.3",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "prop-types": "^15.7.2",
-    "react": "16.14.0",
-    "react-error-overlay": "6.0.9",
-    "typescript": "^5.5.3",
-    "wait-on": "^6.0.0"
-  },
-  "dependencies": {
-    "@dhis2/app-runtime": "^3.9.4",
-    "@dhis2/app-service-datastore": "^1.0.0-alpha.2",
-    "@dhis2/ui": "^8.15.1",
-    "@hisptz/dhis2-ui": "^1.0.49",
-    "@hisptz/dhis2-utils": "^1.0.42",
-    "@iapps/function-analytics": "^1.0.0-beta.23",
-    "@iapps/period-utilities": "^1.0.0-beta.5",
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@scorecard/shared": "*",
-    "async": "^3.2.0",
-    "async-es": "^3.2.4",
-    "cypress-multi-reporters": "^1.6.0",
-    "file-saver": "^2.0.5",
-    "highcharts": "^9.3.1",
-    "immer": "^9.0.5",
-    "intro.js": "^5.0.0",
-    "intro.js-react": "^0.5.0",
-    "jodit-react": "^1.1.25",
-    "lodash": "^4.17.21",
-    "luxon": "^2.0.2",
-    "react-beautiful-dnd": "^13.1.0",
-    "react-color": "^2.19.3",
-    "react-dnd": "^15.1.1",
-    "react-dnd-html5-backend": "^15.1.2",
-    "react-error-boundary": "^3.1.3",
-    "react-error-overlay": "6.0.9",
-    "react-hook-form": "^7.43.8",
-    "react-js-loading-shimmer": "^1.0.10",
-    "react-jsx-parser": "^1.28.4",
-    "react-router-dom": "5",
-    "react-to-print": "^2.14.0",
-    "react-web-vitals": "^1.0.1",
-    "recoil": "^0.6.1",
-    "usehooks-ts": "^2.9.1",
-    "xlsx": "^0.18.2"
-  },
-  "cypress-cucumber-preprocessor": {
-    "nonGlobalStepDefinitions": true
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "resolutions": {
-    "react-error-overlay": "6.0.9"
-  }
+	"name": "app",
+	"version": "2.6.2",
+	"description": "Interactive Scorecard Application",
+	"license": "BSD-3-Clause",
+	"private": true,
+	"scripts": {
+		"build": "d2-app-scripts build",
+		"deploy": "d2-app-scripts deploy",
+		"start": "dotenv -- cross-var d2-app-scripts start --proxy %DHIS2_PROXY%",
+		"test": "concurrently 'BROWSER=none yarn start' 'wait-on 'http-get://localhost:3000' && cypress open --browser firefox' --kill-others --success first"
+	},
+	"devDependencies": {
+		"@cypress/react": "^5.10.3",
+		"@cypress/webpack-dev-server": "^1.7.0",
+		"@dhis2/cli-app-scripts": "^10.3.10",
+		"@dhis2/cli-style": "^10.5.1",
+		"@dhis2/cli-utils-cypress": "^9.0.2",
+		"@dhis2/cypress-commands": "^9.0.2",
+		"@dhis2/cypress-plugins": "^9.0.2",
+		"@dhis2/d2-i18n": "^1.1.0",
+		"@hookform/devtools": "^4.0.2",
+		"@types/cypress": "^1.1.3",
+		"@types/node": "^20.14.11",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@typescript-eslint/eslint-plugin": "^7.16.1",
+		"@typescript-eslint/parser": "^7.16.1",
+		"concurrently": "^7.0.0",
+		"cross-var": "^1.1.0",
+		"cucumber": "^7.0.0-rc.0",
+		"cypress": "9.5.0",
+		"cypress-cucumber-preprocessor": "^4.3.0",
+		"cypress-multi-reporters": "^1.6.0",
+		"cz-conventional-changelog": "3.3.0",
+		"dotenv": "^16.0.3",
+		"dotenv-cli": "^7.1.0",
+		"eslint-config-react-app": "^7.0.1",
+		"eslint-plugin-cypress": "^2.11.3",
+		"eslint-plugin-react-hooks": "^4.3.0",
+		"prop-types": "^15.7.2",
+		"react": "16.14.0",
+		"react-error-overlay": "6.0.9",
+		"typescript": "^5.5.3",
+		"wait-on": "^6.0.0"
+	},
+	"dependencies": {
+		"@dhis2/app-runtime": "^3.9.4",
+		"@dhis2/app-service-datastore": "^1.0.0-alpha.2",
+		"@dhis2/ui": "^9.10.2",
+		"@hisptz/dhis2-ui": "^1.0.49",
+		"@hisptz/dhis2-utils": "^1.0.42",
+		"@iapps/function-analytics": "^1.0.0-beta.23",
+		"@iapps/period-utilities": "^1.0.0-beta.5",
+		"@material-ui/core": "^4.11.4",
+		"@material-ui/icons": "^4.11.2",
+		"@scorecard/shared": "*",
+		"async": "^3.2.0",
+		"async-es": "^3.2.4",
+		"cypress-multi-reporters": "^1.6.0",
+		"file-saver": "^2.0.5",
+		"highcharts": "^9.3.1",
+		"immer": "^9.0.5",
+		"intro.js": "^5.0.0",
+		"intro.js-react": "^0.5.0",
+		"jodit-react": "^1.1.25",
+		"lodash": "^4.17.21",
+		"luxon": "^2.0.2",
+		"react-beautiful-dnd": "^13.1.0",
+		"react-color": "^2.19.3",
+		"react-dnd": "^15.1.1",
+		"react-dnd-html5-backend": "^15.1.2",
+		"react-error-boundary": "^3.1.3",
+		"react-error-overlay": "6.0.9",
+		"react-hook-form": "^7.43.8",
+		"react-js-loading-shimmer": "^1.0.10",
+		"react-jsx-parser": "^1.28.4",
+		"react-router-dom": "^6.25.1",
+		"react-to-print": "^2.14.0",
+		"react-web-vitals": "^1.0.1",
+		"recoil": "^0.6.1",
+		"usehooks-ts": "^2.9.1",
+		"xlsx": "^0.18.2"
+	},
+	"cypress-cucumber-preprocessor": {
+		"nonGlobalStepDefinitions": true
+	},
+	"config": {
+		"commitizen": {
+			"path": "./node_modules/cz-conventional-changelog"
+		}
+	},
+	"resolutions": {
+		"react-error-overlay": "6.0.9"
+	}
 }
diff --git a/packages/app/src/locales/index.ts → packages/app/src/locales/index.js b/packages/app/src/locales/index.ts → packages/app/src/locales/index.js
@@ -6,13 +6,13 @@
 // the code is regenerated.
 // </auto-generated>
 //------------------------------------------------------------------------------
-import i18n from "@dhis2/d2-i18n";
+import i18n from '@dhis2/d2-i18n'
 
-import enTranslations from "./en/translations.json";
-import frTranslations from "./fr/translations.json";
+import enTranslations from './en/translations.json'
+import frTranslations from './fr/translations.json'
 
-const namespace = "default";
-i18n.addResources("en", namespace, enTranslations);
-i18n.addResources("fr", namespace, frTranslations);
+const namespace = 'default'
+i18n.addResources('en', namespace, enTranslations)
+i18n.addResources('fr', namespace, frTranslations)
 
-export default i18n;
+export default i18n
diff --git a/packages/app/src/modules/Main/Components/EmptyScoreCardList/index.tsx b/packages/app/src/modules/Main/Components/EmptyScoreCardList/index.tsx
@@ -2,26 +2,25 @@ import i18n from "@dhis2/d2-i18n";
 import { Button, colors } from "@dhis2/ui";
 import { ScorecardIdState, useMediaQuery } from "@scorecard/shared";
 import React from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useResetRecoilState } from "recoil";
+import { steps } from "../ScoreCardManagement/state/pages";
 import { ReactComponent as ScorecardIllustration } from "./resources/scorecard_illustration.svg";
 
 export default function EmptyScoreCardList() {
 	const resetScorecardIdState = useResetRecoilState(ScorecardIdState);
 	const { width, height } = useMediaQuery();
-	const history = useHistory();
+	const navigate = useNavigate();
 
 	const onNewScorecardClick = () => {
 		resetScorecardIdState();
-		history.push("/add", { from: "home" });
+		const initialStep = steps[0].id;
+		navigate(`/add/${initialStep}`, { state: { from: "home" } });
 	};
 
 	return (
 		<div className="center">
-			<div
-				className="column center"
-				style={{ height }}
-			>
+			<div className="column center" style={{ height }}>
 				<div
 					className="container-bordered text-center center column background-white"
 					style={{ height: height * 0.6, width: width * 0.5, borderRadius: 8 }}