Revert "TaskID #223472 feat: Conversion CRA to Vite R&D"

Sunbird-ALL · Aug 12, 2024 · 614f37e · 614f37e
1 parent ddb6ad0
commit 614f37e
Show file tree

Hide file tree

Showing 23 changed files with 172 additions and 234 deletions.
diff --git a/.github/workflows/all-dev-rig.yml b/.github/workflows/all-dev-rig.yml
@@ -3,7 +3,7 @@ name: ALL rig dev Deployment
 on:
   push:
     branches:
-      - all-1.2
+      - all-1.2.1
 
 jobs:
   deploy:
@@ -44,37 +44,37 @@ jobs:
       - name: Build and Package Application
         env:
           SKIP_PREFLIGHT_CHECK: ${{ vars.SKIP_PREFLIGHT_CHECK }}
-          VITE_APP_MODE: ${{ vars.REACT_APP_MODE }}
-          VITE_APP_authToken: ${{ vars.REACT_APP_authToken }}
-          VITE_APP_PID: ${{ vars.REACT_APP_PID }}
-          VITE_APP_UID: ${{ vars.REACT_APP_UID }}
-          VITE_APP_ID: ${{ vars.REACT_APP_ID }}
-          VITE_APP_VER: ${{ vars.REACT_APP_VER }}
-          VITE_APP_TIMEDIFF: ${{ vars.REACT_APP_TIMEDIFF }}
-          VITE_APP_HOST: ${{ vars.REACT_APP_HOST }}
-          VITE_APP_ENDPOINT: ${{ vars.REACT_APP_ENDPOINT }}
-          VITE_APP_APISLUG: ${{ vars.REACT_APP_APISLUG }}
-          VITE_APP_CHANNEL: ${{ vars.REACT_APP_CHANNEL }}
-          VITE_APP_ENV: ${{ vars.REACT_APP_ENV }}
-          VITE_APP_BATCHSIZE: ${{ vars.REACT_APP_BATCHSIZE }}
-          VITE_APP_CONTENT_SIZE: ${{ vars.REACT_APP_CONTENT_SIZE }}
-          VITE_APP_LANGUAGE: ${{ vars.REACT_APP_LANGUAGE }}
-          VITE_APP_TELEMETRY_MODE: ${{ vars.REACT_APP_TELEMETRY_MODE }}
-          VITE_APP_VIRTUAL_ID_HOST: ${{ vars.REACT_APP_VIRTUAL_ID_HOST }}
-          VITE_APP_LEARNER_AI_ORCHESTRATION_HOST: ${{ vars.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST }}
-          VITE_APP_LEARNER_AI_APP_HOST: ${{ vars.REACT_APP_LEARNER_AI_APP_HOST }}
-          VITE_APP_CONTENT_SERVICE_APP_HOST: ${{ vars.REACT_APP_CONTENT_SERVICE_APP_HOST }}
-          VITE_APP_CAPTURE_AUDIO: ${{ vars.REACT_APP_CAPTURE_AUDIO }}
-          VITE_APP_AWS_S3_BUCKET_NAME: ${{ vars.REACT_APP_AWS_S3_BUCKET_NAME }}
-          VITE_APP_AWS_S3_BUCKET_URL: ${{ vars.REACT_APP_AWS_S3_BUCKET_URL }}
-          VITE_APP_AWS_S3_REGION: ${{ vars.REACT_APP_AWS_S3_REGION }}
-          VITE_APP_AWS_S3_BUCKET_CONTENT_URL: ${{ vars.REACT_APP_AWS_S3_BUCKET_CONTENT_URL }}
-          VITE_APP_MIN_DECIBELS: ${{ vars.REACT_APP_MIN_DECIBELS }}
-          VITE_APP_IS_AUDIOPREPROCESSING: ${{ vars.REACT_APP_IS_AUDIOPREPROCESSING }}
-          VITE_APP_POST_LEARNER_PROGRESS: ${{ vars.REACT_APP_POST_LEARNER_PROGRESS }}
-          VITE_APP_IS_APP_IFRAME: ${{ vars.REACT_APP_IS_APP_IFRAME }}
-          VITE_APP_IS_IN_APP_AUTHORISATION: ${{ vars.REACT_APP_IS_IN_APP_AUTHORISATION }}
-          VITE_APP_IS_APP_LANGUAGES: ${{ vars.REACT_APP_IS_APP_LANGUAGES }}
+          REACT_APP_MODE: ${{ vars.REACT_APP_MODE }}
+          REACT_APP_authToken: ${{ vars.REACT_APP_authToken }}
+          REACT_APP_PID: ${{ vars.REACT_APP_PID }}
+          REACT_APP_UID: ${{ vars.REACT_APP_UID }}
+          REACT_APP_ID: ${{ vars.REACT_APP_ID }}
+          REACT_APP_VER: ${{ vars.REACT_APP_VER }}
+          REACT_APP_TIMEDIFF: ${{ vars.REACT_APP_TIMEDIFF }}
+          REACT_APP_HOST: ${{ vars.REACT_APP_HOST }}
+          REACT_APP_ENDPOINT: ${{ vars.REACT_APP_ENDPOINT }}
+          REACT_APP_APISLUG: ${{ vars.REACT_APP_APISLUG }}
+          REACT_APP_CHANNEL: ${{ vars.REACT_APP_CHANNEL }}
+          REACT_APP_ENV: ${{ vars.REACT_APP_ENV }}
+          REACT_APP_BATCHSIZE: ${{ vars.REACT_APP_BATCHSIZE }}
+          REACT_APP_CONTENT_SIZE: ${{ vars.REACT_APP_CONTENT_SIZE }}
+          REACT_APP_LANGUAGE: ${{ vars.REACT_APP_LANGUAGE }}
+          REACT_APP_TELEMETRY_MODE: ${{ vars.REACT_APP_TELEMETRY_MODE }}
+          REACT_APP_VIRTUAL_ID_HOST: ${{ vars.REACT_APP_VIRTUAL_ID_HOST }}
+          REACT_APP_LEARNER_AI_ORCHESTRATION_HOST: ${{ vars.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST }}
+          REACT_APP_LEARNER_AI_APP_HOST: ${{ vars.REACT_APP_LEARNER_AI_APP_HOST }}
+          REACT_APP_CONTENT_SERVICE_APP_HOST: ${{ vars.REACT_APP_CONTENT_SERVICE_APP_HOST }}
+          REACT_APP_CAPTURE_AUDIO: ${{ vars.REACT_APP_CAPTURE_AUDIO }}
+          REACT_APP_AWS_S3_BUCKET_NAME: ${{ vars.REACT_APP_AWS_S3_BUCKET_NAME }}
+          REACT_APP_AWS_S3_BUCKET_URL: ${{ vars.REACT_APP_AWS_S3_BUCKET_URL }}
+          REACT_APP_AWS_S3_REGION: ${{ vars.REACT_APP_AWS_S3_REGION }}
+          REACT_APP_AWS_S3_BUCKET_CONTENT_URL: ${{ vars.REACT_APP_AWS_S3_BUCKET_CONTENT_URL }}
+          REACT_APP_MIN_DECIBELS: ${{ vars.REACT_APP_MIN_DECIBELS }}
+          REACT_APP_IS_AUDIOPREPROCESSING: ${{ vars.REACT_APP_IS_AUDIOPREPROCESSING }}
+          REACT_APP_POST_LEARNER_PROGRESS: ${{ vars.REACT_APP_POST_LEARNER_PROGRESS }}
+          REACT_APP_IS_APP_IFRAME: ${{ vars.REACT_APP_IS_APP_IFRAME }}
+          REACT_APP_IS_IN_APP_AUTHORISATION: ${{ vars.REACT_APP_IS_IN_APP_AUTHORISATION }}
+          REACT_APP_IS_APP_LANGUAGES: ${{ vars.REACT_APP_IS_APP_LANGUAGES }}
           CI: false  # Disabling CI to not treat warnings as errors
         run: npm run build
 

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,2 +1,4 @@
-# .husky/pre-commit
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
 npx lint-staged
diff --git a/eslintrc.json b/eslintrc.json
@@ -4,8 +4,7 @@
     "plugin:import/errors",
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
-    "prettier",
-    "react-app"
+    "prettier"
   ],
   "plugins": ["react", "import", "jsx-a11y", "prettier"],
   "rules": {

diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.0.2",
+    "react-scripts": "5.0.1",
     "react-virtualized": "^9.22.3",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",
@@ -42,12 +43,14 @@
     "sass": "^1.44.0",
     "split-graphemes": "^0.5.0",
     "use-sound": "^4.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.1"
   },
   "scripts": {
-    "start": "vite",
-    "build": "vite build",
-    "serve": "vite preview",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "prettier:cli": "prettier \"src/**/*.js\" \"**/*.json\"",
@@ -84,22 +87,16 @@
     ]
   },
   "devDependencies": {
-    "@mui/styles": "^5.15.10",
-    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^7.32.0",
+    "prettier": "^2.3.2",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.35.0",
     "husky": "^9.0.11",
     "lint-staged": "^11.0.0",
-    "prettier": "^2.3.2",
     "react": "^18.2.0",
-    "vite": "^5.3.4"
+    "@mui/styles": "^5.15.10"
   },
-  "lint-staged": {
+  "lint-staged": { 
     "src/**/*.{js,jsx}": [
       "npx eslint --fix",
       "npx prettier --write"

diff --git a/index.html → public/index.html b/index.html → public/index.html
@@ -13,7 +13,7 @@
       content="Base React App structure for Devigital Systems Projects"
     />
     <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -26,7 +26,6 @@
     <title>EkStep</title>
   </head>
   <body>
-    <div id="root">
-    <script type="module" src="/src/index.jsx"></script>
+    <div id="root" />
   </body>
 </html>
diff --git a/src/App.jsx → src/App.js b/src/App.jsx → src/App.js
@@ -8,8 +8,7 @@ import { AppContent } from './views';
 import theme from './assets/styles/theme';
 import { initialize } from './services/telementryService';
 import { startEvent } from './services/callTelemetryIntract';
-import '../src/index.css'; 
-// import '@project-sunbird/telemetry-sdk/index.js';
+import '@project-sunbird/telemetry-sdk/index.js';
 
 const App = () => {
     const ranonce = useRef(false); 
@@ -25,27 +24,27 @@ const App = () => {
 
             await initialize({
                 context: {
-                    mode: import.meta.env.VITE_APP_MODE, // To identify preview used by the user to play/edit/preview
+                    mode: process.env.REACT_APP_MODE, // To identify preview used by the user to play/edit/preview
                     authToken: '', // Auth key to make  api calls
                     did: did, // Unique id to identify the device or browser
                     uid: 'anonymous',
-                    channel: import.meta.env.VITE_APP_CHANNEL, // Unique id of the channel(Channel ID)
-                    env: import.meta.env.VITE_APP_ENV,
+                    channel: process.env.REACT_APP_CHANNEL, // Unique id of the channel(Channel ID)
+                    env: process.env.REACT_APP_ENV,
 
                     pdata: {
                         // optional
-                        id: import.meta.env.VITE_APP_ID, // Producer ID. For ex: For sunbird it would be "portal" or "genie"
-                        ver: import.meta.env.VITE_APP_VER, // Version of the App
-                        pid: import.meta.env.VITE_APP_PID, // Optional. In case the component is distributed, then which instance of that component
+                        id: process.env.REACT_APP_ID, // Producer ID. For ex: For sunbird it would be "portal" or "genie"
+                        ver: process.env.REACT_APP_VER, // Version of the App
+                        pid: process.env.REACT_APP_PID, // Optional. In case the component is distributed, then which instance of that component
                     },
                     tags: [
                         // Defines the tags data
                         '',
                     ],
                     timeDiff: 0, // Defines the time difference// Defines the object roll up data
-                    host: import.meta.env.VITE_APP_HOST, // Defines the from which domain content should be load
-                    endpoint: import.meta.env.VITE_APP_ENDPOINT,
-                    apislug: import.meta.env.VITE_APP_APISLUG,
+                    host: process.env.REACT_APP_HOST, // Defines the from which domain content should be load
+                    endpoint: process.env.REACT_APP_ENDPOINT,
+                    apislug: process.env.REACT_APP_APISLUG,
                 },
                 config: {},
                 // tslint:disable-next-line:max-line-length

diff --git a/src/components/Assesment/Assesment.jsx b/src/components/Assesment/Assesment.jsx
@@ -343,7 +343,7 @@ export const ProfileHeader = ({
 
   const handleProfileBack = () => {
     try {
-      if (import.meta.env.VITE_APP_IS_APP_IFRAME === "true") {
+      if (process.env.REACT_APP_IS_APP_IFRAME === "true") {
         window.parent.postMessage({ type: "restore-iframe-content" });
         navigate("/");
       } else {
@@ -519,7 +519,7 @@ export const ProfileHeader = ({
               </Box>
             </Box>
           </Box>
-          {import.meta.env.VITE_APP_IS_IN_APP_AUTHORISATION === "true" && (
+          {process.env.REACT_APP_IS_IN_APP_AUTHORISATION === "true" && (
             <CustomTooltip title="Logout">
               <Box>
                 <CustomIconButton onClick={handleLogout}>
@@ -568,10 +568,10 @@ const Assesment = ({ discoverStart }) => {
       (async () => {
         setLocalData("profileName", username);
         const usernameDetails = await axios.post(
-          `${import.meta.env.VITE_APP_VIRTUAL_ID_HOST}/${config.URLS.GET_VIRTUAL_ID}?username=${username}`
+          `${process.env.REACT_APP_VIRTUAL_ID_HOST}/${config.URLS.GET_VIRTUAL_ID}?username=${username}`
         );
         const getMilestoneDetails = await axios.get(
-          `${import.meta.env.VITE_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${usernameDetails?.data?.result?.virtualID}?language=${lang}`
+          `${process.env.REACT_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${usernameDetails?.data?.result?.virtualID}?language=${lang}`
         );
 
         localStorage.setItem(
@@ -594,7 +594,7 @@ const Assesment = ({ discoverStart }) => {
 
         localStorage.setItem("lang", lang || "ta");
         const getPointersDetails = await axios.get(
-          `${import.meta.env.VITE_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${usernameDetails?.data?.result?.virtualID}/${session_id}?language=${lang}`
+          `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${usernameDetails?.data?.result?.virtualID}/${session_id}?language=${lang}`
         );
         setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0);
 
@@ -605,7 +605,7 @@ const Assesment = ({ discoverStart }) => {
         const virtualId = getLocalData("virtualId");
         const language = lang;
         const getMilestoneDetails = await axios.get(
-          `${import.meta.env.VITE_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${virtualId}?language=${language}`
+          `${process.env.REACT_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${virtualId}?language=${language}`
         );
         localStorage.setItem(
           "getMilestone",
@@ -625,7 +625,7 @@ const Assesment = ({ discoverStart }) => {
 
         if (virtualId) {
           const getPointersDetails = await axios.get(
-            `${import.meta.env.VITE_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}`
+            `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}`
           );
           setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0);
         }

diff --git a/src/components/AssesmentEnd/AssesmentEnd.jsx b/src/components/AssesmentEnd/AssesmentEnd.jsx
@@ -34,7 +34,7 @@ const AssesmentEnd = () => {
       const previous_level = getLocalData("previous_level");
       setPreviousLevel(previous_level?.replace("m", ""));
       const getMilestoneDetails = await axios.get(
-        `${import.meta.env.VITE_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${virtualId}?language=${lang}`
+        `${process.env.REACT_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${virtualId}?language=${lang}`
       );
       const { data } = getMilestoneDetails;
       setLevel(data.data.milestone_level);
@@ -45,7 +45,7 @@ const AssesmentEnd = () => {
         localStorage.setItem("sessionId", sessionId)
       }
       const getPointersDetails = await axios.get(
-        `${import.meta.env.VITE_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}`
+        `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}`
       );
       setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0);
     })();

diff --git a/src/components/DiscoverEnd/DiscoverEnd.jsx b/src/components/DiscoverEnd/DiscoverEnd.jsx
@@ -41,7 +41,7 @@ const SpeakSentenceComponent = () => {
       const virtualId = getLocalData("virtualId");
       const lang = getLocalData("lang");
       const getMilestoneDetails = await axios.get(
-        `${import.meta.env.VITE_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${virtualId}?language=${lang}`
+        `${process.env.REACT_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${virtualId}?language=${lang}`
       );
       const { data } = getMilestoneDetails;
       setLevel(data.data.milestone_level);
@@ -54,7 +54,7 @@ const SpeakSentenceComponent = () => {
 
   const handleProfileBack = () => {
     try {
-      if (import.meta.env.VITE_APP_IS_APP_IFRAME === 'true') {
+      if (process.env.REACT_APP_IS_APP_IFRAME === 'true') {
         navigate("/")
       } else {
         navigate("/discover-start")