test

.env.example

@@ -1,10 +1,10 @@
-REACT_APP_API_KEY=
-REACT_APP_AUTH_DOMAIN=
-REACT_APP_DATABASE_URL=
-REACT_APP_PROJECT_ID=
-REACT_APP_STORAGE_BUCKET=
-REACT_APP_MESSAGING_SENDER_ID=
-REACT_APP_APP_ID=
-REACT_APP_MEASUREMENT_ID=
-CYPRESS_USER_EMAIL=
-CYPRESS_USER_PASSWORD=
+REACT_APP_API_KEY="AIzaSyBqriYAEd3ehY22sMULIR3rLadzq9gfitk"
+REACT_APP_AUTH_DOMAIN="meta-collage.firebaseapp.com"
+REACT_APP_DATABASE_URL="https://meta-collage.firebaseio.com"
+REACT_APP_PROJECT_ID="meta-collage"
+REACT_APP_STORAGE_BUCKET="meta-collage.appspot.com"
+REACT_APP_MESSAGING_SENDER_ID="945339039740"
+REACT_APP_APP_ID="1:945339039740:web:7b82885ea8ac635ed3bc79"
+REACT_APP_MEASUREMENT_ID="G-NYQ7XJXJ89"
+CYPRESS_USER_EMAIL="rageshwaranhr@gmail.com"
+CYPRESS_USER_PASSWORD="ragesh@2004"

cypress.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    projectId: "tayjsb",
+    // ...rest of the Cypress project config
+  }

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.1",
   "private": true,
   "dependencies": {
+    "cross-env": "^7.0.3",
     "firebase": "^9.6.7",
     "graphviz-react": "^1.2.0",
     "prop-types": "^15.8.1",
@@ -11,9 +12,8 @@
     "react-admin-firebase": "^3.2.29",
     "react-dom": "^17.0.2",
     "react-firebaseui": "^6.0.0",
-    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.5",
     "react-math-view": "^1.3.2",
-    "react-scripts": "5.0.0",
     "typescript": "^4.5.5",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.4",
@@ -30,8 +30,8 @@
     "workbox-streams": "^5.1.4"
   },
   "scripts": {
-    "start": "node -r dotenv/config node_modules/react-scripts/bin/react-scripts.js start",
-    "build": "NODE_ENV=production node_modules/react-scripts/bin/react-scripts.js build --stats && mv build/index.html build/app.html",
+    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider node -r dotenv/config node_modules/react-scripts/bin/react-scripts.js start",
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production node_modules/react-scripts/bin/react-scripts.js build --stats && mv build/index.html build/app.html",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "deploy": "firebase deploy",
@@ -62,6 +62,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -72,8 +73,10 @@
     "@types/react": "^16.14.23",
     "@types/react-dom": "^16.9.14",
     "@types/react-helmet": "^6.1.5",
-    "cypress": "^9.5.1",
+    "@types/react-router-dom": "^5.3.3",
+    "cypress": "^13.13.0",
     "dotenv": "^16.0.0",
-    "eslint-plugin-cypress": "^2.12.1"
+    "eslint-plugin-cypress": "^2.12.1",
+    "react-scripts": "^5.0.1"
   }
 }

src/@core/application/layout/Login.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import {Login, LoginForm} from "react-admin";
+import { Login, LoginForm } from "react-admin";
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
-import {getAuth, GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider} from "firebase/auth";
-
-import {Helmet} from "react-helmet";
+import { getAuth, GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider } from "firebase/auth";
+import { Helmet, HelmetProvider } from "react-helmet-async"; // Updated import to react-helmet-async
 
 const uiConfig = {
     signInFlow: 'redirect',
@@ -15,25 +14,27 @@ const uiConfig = {
     ]
 };
 
-const SignInScreen = () => <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={getAuth()}/>;
+const SignInScreen = () => <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={getAuth()} />;
 
 const CustomLoginForm = (props: any) => (
     <div>
-        <LoginForm  redirect="/app/#/grammars" {...props} />
-        <SignInScreen/>
+        <LoginForm redirect="/app/#/grammars" {...props} />
+        <SignInScreen />
     </div>
 );
 
 const LoginPage = (props: any) => (
     <main>
-        <Helmet>
-            <title>Login | Theory of computation</title>
-            <meta name="description" content="Theory of computation - UABC | Carlos Eduardo Sanchez Torres"/>
-        </Helmet>
+        <HelmetProvider> {/* Wrap your Helmet components with HelmetProvider */}
+            <Helmet>
+                <title>Login | Theory of computation</title>
+                <meta name="description" content="Theory of computation - UABC | Carlos Eduardo Sanchez Torres" />
+            </Helmet>
+        </HelmetProvider>
         <Login {...props}>
-            <CustomLoginForm {...props}/>
+            <CustomLoginForm {...props} />
         </Login>
     </main>
 );
 
-export default LoginPage;
+export default LoginPage;

src/App.tsx

@@ -1,30 +1,29 @@
-import {Admin, Resource} from 'react-admin';
+import React from 'react';
+import { Admin, Resource } from 'react-admin';
 import grammar from './grammars';
-import {dataProvider} from "./@shared/DataProvider";
-import {authProvider} from "./@shared/AuthProvider";
+import { dataProvider } from "./@shared/DataProvider";
+import { authProvider } from "./@shared/AuthProvider";
 import LoginPage from "./@core/application/layout/Login";
-import {Helmet} from "react-helmet";
-import React from "react";
-import {theme} from "./@core/application/layout/Theme";
+import { HelmetProvider, Helmet } from "react-helmet-async"; // Adjust import to use react-helmet-async
+import { theme } from "./@core/application/layout/Theme";
 import automata from "./automata";
-
+import MetaTags from './MetaTags'; // Adjust import path accordingly
 
 const App = () => (
+  <HelmetProvider>
     <main>
-        <Helmet>
-            <title>Theory of computation</title>
-            <meta name="description" content="Theory of computation - UABC | Carlos Eduardo Sanchez Torres"/>
-        </Helmet>
-        <Admin
-            theme={theme}
-            authProvider={authProvider}
-            dataProvider={dataProvider}
-            loginPage={LoginPage}
-        >
-            <Resource name="grammars" {...grammar} />
-            <Resource name="automata" {...automata} />
-        </Admin>
+      <MetaTags />
+      <Admin
+        theme={theme}
+        authProvider={authProvider}
+        dataProvider={dataProvider}
+        loginPage={LoginPage}
+      >
+        <Resource name="grammars" {...grammar} />
+        <Resource name="automata" {...automata} />
+      </Admin>
     </main>
+  </HelmetProvider>
 );
 
-export default App;
+export default App;

src/MetaTags.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async'; // Adjust import to use react-helmet-async
+
+
+const MetaTags = () => (
+  <Helmet>
+    <title data-rh="true">THEORY OF COMPUTATION</title>
+  </Helmet>
+);
+
+export default MetaTags;

tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
   "include": [
     "src"
@@ -27,6 +27,6 @@
     "src/**/*.test.tsx",
     "src/**/*.test.ts",
     "src/**/*.spec.ts",
-    "src/**/*.spec.tsx",
+    "src/**/*.spec.tsx"
   ]
 }