Upgrade react-scripts

package.json

@@ -28,7 +28,7 @@
     "react-notifications": "^1.7.2",
     "react-owl-carousel": "^2.3.3",
     "react-router-dom": "^6.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "react-scroll-to-top": "^1.0.9",
     "react-select": "^5.2.1",
     "react-toastify": "^8.1.1",

src/components/card/index.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import moment from "moment";
 import { ICard } from "../../interfaces/CardInterface";
-import { translation } from "../../locales/en-US/translation.json";
+import ts from "../../locales/en-US/translation.json";
 
 const HtmlToReactParser = require("html-to-react").Parser;
 
+let translation = ts.translation;
+
 const convertToPlain = (html: string) => {
   const htmlToParser = new HtmlToReactParser();
   const reactElement = htmlToParser.parse(html);

src/components/footer/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 const Footer: React.FC = () => (
   <footer className="footer-section mt-3">

src/components/nav_bar/index.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 const NavBar: React.FC = () => {
   const [isNavBarScroll, setNavbarScroll] = useState<boolean>(false);

src/global.d.ts

@@ -9,3 +9,7 @@ declare module "*.png" {
 declare module "*.svg" {
   export default "" as string;
 }
+
+declare module "*.json" {
+  export default {} as any
+}

src/pages/about/hero-section.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 const HeroSection: React.FC = () => (
   <div>

src/pages/about/pioneers-section.tsx

@@ -2,7 +2,9 @@ import React from "react";
 import OwlCarousel from 'react-owl-carousel';
 import pioneers from '../../data/PioneersData.json';
 import { SLIDER_RESPONSIVE_BREAKPOINTS } from '../../constants';
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 const PioneersSection: React.FC = () => (
   <div className="pioneers">

src/pages/blog/blog-list-section.tsx

@@ -3,7 +3,9 @@ import { Card } from "../../components";
 import { IBlog } from "../../interfaces/BlogInterface";
 import { getBlogs } from "../../api/BlogAction";
 import { CARD_TYPE_BLOG } from '../../constants';
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 const BlogList: React.FC = () => {
   const [blogList, setBlogList] = useState<IBlog>();

src/pages/blog/hero-section.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 const HeroSection: React.FC = () => (
   <div className="container mb-5">

src/pages/board/board-by-year.tsx

@@ -2,7 +2,9 @@ import React, { useState, useEffect } from "react";
 import { IBoard, IBoardMemberDetails } from "../../interfaces/BoardInterface";
 import boardData from "../../data/BoardSectionData.json";
 import BoardMemberCard from "./board-member-card";
-import { translation } from "../../locales/en-US/translation.json";
+import ts from "../../locales/en-US/translation.json";
+
+let translation = ts.translation;
 
 const BoardByYear: React.FC = () => {
   const [id, setid] = useState<number>(0);

src/pages/contact/contact-form-section.tsx

@@ -4,7 +4,9 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import * as Yup from 'yup';
 import { ToastContainer, toast } from "react-toastify";
 import { sendMessage } from "../../api/ContactAction";
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 type IContactFormSection = {
   name: string;

src/pages/contact/hero-section.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 const HeroSection: React.FC = () => (
   <div className="container mb-5">

src/pages/event/hero-section.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 const HeroSection: React.FC = () => (
   <div className="container mb-5">

src/pages/event/past-events.tsx

@@ -3,8 +3,12 @@ import Slider from "react-owl-carousel";
 import {IEvent} from "../../interfaces/EventInterface";
 import {CARD_TYPE_EVENT, SLIDER_RESPONSIVE_BREAKPOINTS,} from "../../constants";
 import {Card, NoContent} from "../../components";
-import {translation} from "../../locales/en-US/translation.json";
-import {EventData} from '../../data/PastEventData.json';
+import ts from "../../locales/en-US/translation.json";
+import ev from '../../data/PastEventData.json';
+
+let EventData = ev.EventData;
+
+let translation = ts.translation;
 
 const PastEvents: React.FC = () => {
     let slider: any;

src/pages/event/past-webina.tsx

@@ -5,10 +5,12 @@ import {
   SLIDER_RESPONSIVE_BREAKPOINTS,
 } from "../../constants";
 import Slider from "react-owl-carousel";
-import { translation } from "../../locales/en-US/translation.json";
+import ts from "../../locales/en-US/translation.json";
 import { IWebinar } from "../../interfaces/WebinarInterface";
 import { getWebinars } from "../../api/WebinarAction";
 
+let translation = ts.translation;
+
 const PastWebinars: React.FC = () => {
   let slider: any;
   let keyboardCode: number;

src/pages/event/top-speakers.tsx

@@ -6,11 +6,13 @@ import {
 } from "../../constants";
 import Slider from "react-owl-carousel";
 // import speakers from '../../data/TopSpeakersData.json';
-import { translation } from "../../locales/en-US/translation.json";
+import ts from "../../locales/en-US/translation.json";
 
 import { getTopSpeakers } from "../../api/TopSpeakerAction";
 import { ITopSpeaker } from "../../interfaces/TopSpeakerInterface";
 
+let translation = ts.translation;
+
 const TopSpeakers: React.FC = () => {
   let slider: any;
   let keyboardCode: number;

src/pages/home/blogs-section.tsx

@@ -4,7 +4,9 @@ import { getBlogs } from "../../api/BlogAction";
 import Slider from "react-owl-carousel";
 import { Card } from "../../components";
 import { CARD_TYPE_BLOG, SLIDER_RESPONSIVE_BREAKPOINTS } from '../../constants';
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 const BlogSection: React.FC = () => {
   let slider: any;

src/pages/home/hero-section.tsx

@@ -1,9 +1,11 @@
 import { ContactShadows, OrbitControls } from "@react-three/drei";
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
 import { Canvas } from "@react-three/fiber";
 import React, { Suspense } from "react";
 import { Logo3DModel } from "../../components";
 
+let translation = ts.translation;
+
 const HeroSection: React.FC = () => (
   <div className="container mb-5">
     <div className="hero-section-bg" />

src/pages/home/past-events-section.tsx

@@ -8,7 +8,9 @@ import {
   SLIDER_RESPONSIVE_BREAKPOINTS,
 } from "../../constants";
 import { Card, NoContent } from "../../components";
-import { translation } from "../../locales/en-US/translation.json";
+import ts from "../../locales/en-US/translation.json";
+
+let translation = ts.translation;
 
 const PastEventSection: React.FC = () => {
   let slider: any;

src/pages/home/past-webinars-section.tsx

@@ -7,7 +7,9 @@ import {
 import { Card, NoContent } from "../../components";
 import {getPastWebinars} from "../../api/WebinarAction";
 import {IWebinar} from "../../interfaces/WebinarInterface";
-import { translation } from "../../locales/en-US/translation.json";
+import ts from "../../locales/en-US/translation.json";
+
+let translation = ts.translation;
 
 const PastWebinarSection: React.FC = () => {
   let slider: any;

src/pages/home/who-we-are-section.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 const WhatWeDoSection: React.FC = () => (
   <div className="who-we-are-section">

src/pages/join_us/hero-section.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation;
 
 const HeroSection: React.FC = () => (
   <div className="container mb-5">

src/pages/join_us/join-us-form-section.tsx

@@ -5,7 +5,9 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as Yup from "yup";
 import { ToastContainer, toast } from "react-toastify";
 import { submitApplication } from "../../api/ApplicationAction";
-import {translation} from '../../locales/en-US/translation.json';
+import ts from '../../locales/en-US/translation.json';
+
+let translation = ts.translation
 
 const options = [
   { value: "Public Speaking", label: "Public Speaking" },