onaio · peterMuriuki · Oct 25, 2023 · Oct 26, 2023 · Oct 27, 2023 · Oct 27, 2023
diff --git a/.yarnrc b/.yarnrc
diff --git a/app/CHANGELOG.md b/app/CHANGELOG.md
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/app/package.json b/app/package.json
@@ -2,24 +2,27 @@
   "name": "@opensrp/web",
   "version": "0.1.10",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@2fd/ant-design-icons": "^2.6.0",
     "@ant-design/icons": "^4.7.0",
-    "@onaio/connected-private-route": "^0.0.11",
+    "@ant-design/pro-components": "^2.6.32",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@onaio/connected-reducer-registry": "^0.0.3",
     "@onaio/gatekeeper": "1.0.0",
     "@onaio/redux-reducer-registry": "^0.0.9",
-    "@onaio/session-reducer": "^0.0.12",
+    "@onaio/session-reducer": "^0.0.13",
     "@onaio/utils": "^0.0.1",
     "@opensrp/error-boundary-fallback": "^0.0.7",
     "@opensrp/fhir-care-team": "^0.0.1",
     "@opensrp/fhir-client": "^0.0.1",
     "@opensrp/fhir-group-management": "^0.0.5",
     "@opensrp/fhir-healthcare-service": "^0.0.1",
     "@opensrp/fhir-location-management": "^0.0.1",
-    "@opensrp/fhir-quest-form": "^0.0.0",
+    "@opensrp/fhir-quest-form": "workspace:^",
     "@opensrp/fhir-team-management": "^0.0.5",
-    "@opensrp/fhir-user-management": "^0.0.1",
+    "@opensrp/fhir-user-management": "workspace:^",
     "@opensrp/fhir-views": "^0.0.0",
     "@opensrp/i18n": "^0.0.1",
     "@opensrp/keycloak-service": "^0.0.17",
@@ -31,48 +34,48 @@
     "@opensrp/server-logout": "^0.0.2",
     "@opensrp/server-service": "^0.0.17",
     "@opensrp/store": "^0.0.10",
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@sentry/react": "^5.27.4",
     "antd": "^5.5.2",
     "bootstrap": "^4.5.2",
     "client-oauth2": "^4.3.3",
     "connected-react-router": "^6.8.0",
     "jsdom-global": "^3.0.2",
     "lodash": "^4.17.20",
+    "querystring": "^0.2.1",
+    "querystring-es3": "^0.2.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-query": "^3.15.1",
-    "react-scripts": "4.0.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "seamless-immutable": "^7.1.4"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "cd ../ && yarn test app --verbose --collectCoverage=true && cd app",
-    "test:watch": "cd ../ && yarn test app --verbose --watch && cd app",
-    "lint": "eslint ./**/*.{ts,tsx} --max-warnings 0",
-    "lint-snap": "eslint ./**/*.snap",
-    "eject": "react-scripts eject",
-    "coveralls": "set CI=true && yarn test --runInBand --verbose --coverage=true --forceExit --detectOpenHandles && cat ./coverage/lcov.info | coveralls"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+  "devDependencies": {
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "assert": "^2.1.0",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "https-browserify": "^1.0.0",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "typescript": "^5.2.2",
+    "url": "^0.11.3",
+    "util": "^0.12.5",
+    "vite": "^5.0.8",
+    "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
   },
   "peerDependencies": {
-    "react": "17.0.0",
-    "react-dom": "17.0.0",
     "react-helmet": "^6.1.0",
     "react-redux": "^7.2.1",
     "react-router": "^5.2.1",

diff --git a/app/public/index.html b/app/public/index.html
diff --git a/app/src/App/App.css b/app/src/App/App.css
@@ -1,5 +1,5 @@
-@import 'antd/dist/reset.css';
-@import '~bootstrap/dist/css/bootstrap.min.css';
+/* @import 'antd/dist/reset.css';
+@import '~bootstrap/dist/css/bootstrap.min.css'; */
 
 h2.page-title {
   font-weight: 200;

diff --git a/app/src/App/fhir-apps.tsx b/app/src/App/fhir-apps.tsx
@@ -12,7 +12,7 @@ import {
   useOAuthLogin,
   OauthCallbackProps,
 } from '@onaio/gatekeeper';
-import ConnectedPrivateRoute from '@onaio/connected-private-route';
+
 import { Switch, Route, Redirect, RouteComponentProps } from 'react-router';
 import { Spin } from 'antd';
 import { CustomLogout } from '../components/Logout';
@@ -63,6 +63,8 @@ import {
 import {
   CreateEditUser as FHIRConnectedCreateEditUser,
   UserList as FhirUserList,
+  USER_DETAILS_URL,
+  UserDetailsV2,
 } from '@opensrp/fhir-user-management';
 import { Home } from '../containers/pages/Home/Home';
 import {
@@ -100,7 +102,7 @@ import {
   qrListRouteKey,
   QUEST_FORM_VIEW_URL,
 } from '@opensrp/fhir-views';
-import { QuestRForm, resourceTypeParam, resourceIdParam } from '@opensrp/fhir-quest-form';
+// import { QuestRForm, resourceTypeParam, resourceIdParam } from '@opensrp/fhir-quest-form';
 import {
   CommodityList,
   ADD_EDIT_COMMODITY_URL,
@@ -153,20 +155,20 @@ const FHIRApps = () => {
     <Switch>
       {/* tslint:disable jsx-no-lambda */}
       {/* Home Page view */}
-      <ConnectedPrivateRoute
+      <PrivateComponent
         redirectPath={APP_CALLBACK_URL}
         disableLoginProtection={DISABLE_LOGIN_PROTECTION}
         exact
         path={URL_HOME}
         component={Home}
       />
-      <PrivateComponent
+      {/* <PrivateComponent
         redirectPath={APP_CALLBACK_URL}
         disableLoginProtection={DISABLE_LOGIN_PROTECTION}
         path={`${QUEST_FORM_VIEW_URL}/:${resourceIdParam}/:${resourceTypeParam}`}
         permissions={['Questionnaire.read']}
         component={QuestRForm}
-      />
+      /> */}
       <PrivateComponent
         redirectPath={APP_CALLBACK_URL}
         disableLoginProtection={DISABLE_LOGIN_PROTECTION}
@@ -224,6 +226,14 @@ const FHIRApps = () => {
         permissions={['iam_user.read']}
         component={FhirUserList}
       />
+      <PrivateComponent
+        redirectPath={APP_CALLBACK_URL}
+        disableLoginProtection={DISABLE_LOGIN_PROTECTION}
+        exact
+        path={USER_DETAILS_URL}
+        permissions={['iam_user.read']}
+        component={UserDetailsV2}
+      />
       <PrivateComponent
         redirectPath={APP_CALLBACK_URL}
         disableLoginProtection={DISABLE_LOGIN_PROTECTION}
@@ -464,7 +474,7 @@ const FHIRApps = () => {
       />
       <PublicComponent exact path={APP_CALLBACK_PATH} component={CallbackComponent} />
       {/* tslint:enable jsx-no-lambda */}
-      <ConnectedPrivateRoute
+      <PrivateComponent
         redirectPath={APP_CALLBACK_URL}
         disableLoginProtection={DISABLE_LOGIN_PROTECTION}
         exact

diff --git a/app/src/configs/utils.ts b/app/src/configs/utils.ts
@@ -4,7 +4,7 @@
  * @param defaultValue - The default value to return the value is not defined in process.env and window._env_.
  */
 export const setEnv = (name: string, defaultValue: any) => {
-  const { [name]: envValue } = process.env;
+  const { [name]: envValue } = import.meta.env;
   const value = typeof envValue === 'undefined' ? defaultValue : envValue;
 
   if (typeof (window as any)._env_ === 'undefined') {

diff --git a/app/src/containers/pages/Home/Home.tsx b/app/src/containers/pages/Home/Home.tsx
@@ -39,7 +39,7 @@ export const Home = () => {
       <Helmet>
         <title>{t('OpenSRP Web')}</title>
       </Helmet>
-      <Row justify="center" className="weclome-box">
+      <Row justify="center" className="welcome-box">
         <Col span={6}>
           <h3>{t('Welcome to OpenSRP')}</h3>
         </Col>

diff --git a/app/src/index.tsx b/app/src/index.tsx
@@ -1,6 +1,5 @@
 import './configs/dispatchConfig'; // this needs to be imported before anything else
 import React, { Suspense } from 'react';
-import ReactDOM from 'react-dom';
 import { history } from '@onaio/connected-reducer-registry';
 import { ConnectedRouter } from 'connected-react-router';
 import { Provider } from 'react-redux';
@@ -16,14 +15,15 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { OpensrpWebI18nProvider } from '@opensrp/i18n';
 import '@opensrp/react-utils/dist/components/CommonStyles/index.css';
 import { RbacProvider } from '@opensrp/rbac';
+import ReactDOM from 'react-dom/client'
 
 // tslint:disable-next-line: ordered-imports
 import './styles/css/index.css';
 import { Spin } from 'antd';
 // tslint:disable-next-line: ordered-imports
 const queryClient = new QueryClient();
 
-if (process.env.NODE_ENV === 'production') {
+if (import.meta.env.DEV) {
   const { tags, ...sentryConfigs } = SENTRY_CONFIGS;
   Sentry.init(sentryConfigs);
   if (tags) {
@@ -35,7 +35,7 @@ if (process.env.NODE_ENV === 'production') {
   }
 }
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <Suspense fallback={() => <Spin className="custom-spinner" />}>
     <Sentry.ErrorBoundary fallback={() => <ErrorBoundaryFallback homeUrl={URL_HOME} />}>
       <Provider store={store}>
@@ -50,8 +50,7 @@ ReactDOM.render(
         </ConnectedRouter>
       </Provider>
     </Sentry.ErrorBoundary>
-  </Suspense>,
-  document.getElementById('opensrp-root')
+  </Suspense>
 );
 
 // If you want your app to work offline and load faster, you can change

diff --git a/app/tsconfig.json b/app/tsconfig.json
@@ -1,26 +1,25 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/app/tsconfig.node.json b/app/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}