Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IssueId #221316 feat Add Lazy Routing in ALL [React] #90

Open
wants to merge 6 commits into
base: all-1.1
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
"env": {
"es6": true,
"browser": true,
"node": true
"node": true,
"serviceworker": true
},
"settings": {
"react": {
Expand Down
12 changes: 11 additions & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,19 @@
href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.cdnfonts.com/css/bad-comic" rel="stylesheet" />
<script src="./js/jquery-3.7.0.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js').then(registration => {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(error => {
console.log('ServiceWorker registration failed: ', error);
});
});
}
Comment on lines +26 to +34
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider removing console logs in production environments.

The script for registering the service worker is correctly implemented. However, consider removing or replacing console.log statements with a more robust logging mechanism suitable for production environments to avoid exposing potentially sensitive information.

</script>
<title>EkStep</title>
</head>
<body>
Expand Down
70 changes: 70 additions & 0 deletions public/service-worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
// Define the name for the cache
const CACHE_NAME = 'my-cache-v1';

// Event listener for installation of the service worker
self.addEventListener('install', event => {
// Perform installation steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log('Opened cache');
// No need to pre-cache any resources during installation
})
);
});

// Event listener for fetching assets
self.addEventListener('fetch', event => {
event.respondWith(
caches.open(CACHE_NAME).then(cache => {
return cache.match(event.request).then(response => {
if (response) {
// Resource is in cache, return it
// console.log('Resource is cached:', event.request.url);
return response;
}

// Resource is not in cache, fetch it from network and cache it
return fetch(event.request).then(networkResponse => {
// Check if fetched response is valid
if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
return networkResponse;
}

// Clone the response because it's a stream that can only be consumed once
const responseToCache = networkResponse.clone();

// Cache the fetched response
caches.open(CACHE_NAME).then(cache => {
cache.put(event.request, responseToCache);
});

// console.log('Resource is fetched from network and cached:', event.request.url);
return networkResponse;
}).catch(error => {
// Fetch failed, return a fallback response
console.error('Fetch failed:', error);
// You can return a custom offline page or a fallback response here
});
});
})
);
});

// Event listener for activation of the service worker
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];

event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
// Delete caches not in cacheWhitelist
return caches.delete(cacheName);
}
})
);
})
);
});
7 changes: 4 additions & 3 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import { startEvent } from './services/callTelemetryIntract';
import '@project-sunbird/telemetry-sdk/index.js';

const App = () => {
const ranonce = useRef(false);
const ranonce = useRef(false);

useEffect(() => {
const initService = async () => {
var did;
Expand Down Expand Up @@ -69,7 +70,7 @@ const App = () => {
};

setFp();
}, []);
}, []);

return (
<StyledEngineProvider injectFirst>
Expand All @@ -82,4 +83,4 @@ const App = () => {
);
};

export default App;
export default React.memo(App);
15 changes: 7 additions & 8 deletions src/components/Assesment/Assesment.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -247,9 +247,9 @@ export const MessageDialog = ({
>
<Box sx={{ position: "absolute", left: 10, bottom: 0 }}>
{isError ? (
<img src={cryPanda} alt="cryPanda" />
<img src={cryPanda} alt="cryPanda" loading="lazy" />
) : (
<img src={panda} alt="panda" />
<img src={panda} alt="panda" loading="lazy" />
)}
</Box>

Expand Down Expand Up @@ -294,9 +294,7 @@ export const MessageDialog = ({
mb={2}
>
<Box
onClick={() => {
closeDialog();
}}
onClick={closeDialog}
sx={{
cursor: "pointer",
background: "#6DAF19",
Expand Down Expand Up @@ -381,7 +379,7 @@ export const ProfileHeader = ({
{handleBack && (
<Box ml={{ xs: "10px", sm: "94px" }}>
<IconButton onClick={handleBack}>
<img src={back} alt="back" style={{ height: "30px" }} />
<img src={back} alt="back" style={{ height: "30px" }} loading="lazy" />
</IconButton>
</Box>
)}
Expand All @@ -392,7 +390,7 @@ export const ProfileHeader = ({
sx={{ cursor: "pointer" }}
onClick={handleProfileBack}
>
<img src={profilePic} alt="profile-pic" style={{ height: "30px" }} />
<img src={profilePic} alt="profile-pic" style={{ height: "30px", width:'30px' }} loading="lazy" />
</Box>
<Box ml="12px">
<span
Expand Down Expand Up @@ -553,6 +551,7 @@ const Assesment = ({ discoverStart }) => {
getMilestoneDetails?.data.data?.milestone_level?.replace("m", "")
)
);

let sessionId = getLocalData("sessionId");

if (!sessionId || sessionId === 'null'){
Expand Down Expand Up @@ -742,4 +741,4 @@ const Assesment = ({ discoverStart }) => {
);
};

export default Assesment;
export default React.memo(Assesment);
4 changes: 2 additions & 2 deletions src/components/AssesmentEnd/AssesmentEnd.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import homeBackground from "../../assets/images/homeBackground.png";
import { Typography } from "../../../node_modules/@mui/material/index";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import LevelCompleteAudio from "../../assets/audio/levelComplete.wav";
import { ProfileHeader } from "../Assesment/Assesment";
import desktopLevel5 from "../../assets/images/assesmentComplete.png";
Expand Down Expand Up @@ -396,4 +396,4 @@ const AssesmentEnd = () => {
);
};

export default AssesmentEnd;
export default React.memo(AssesmentEnd);
10 changes: 6 additions & 4 deletions src/components/DiscoverEnd/DiscoverEnd.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Box, Card, CardContent, IconButton, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import Confetti from "react-confetti";
import axios from "../../../node_modules/axios/index";
import { useNavigate } from "../../../node_modules/react-router-dom/dist/index";
Expand Down Expand Up @@ -77,21 +77,23 @@ const SpeakSentenceComponent = () => {
}}
>
<IconButton>
<img src={back} alt="back" style={{ height: "30px" }} />
<img src={back} alt="back" style={{ height: "30px" }} loading="lazy" />
</IconButton>
<Card sx={sectionStyle}>
<Box sx={{ position: "absolute", left: "3px", bottom: "0px" }}>
<img
src={discoverEndLeft}
alt="timer"
className={shake && "shakeImage"}
loading="lazy"
/>
</Box>
<Box sx={{ position: "absolute", right: "3px", bottom: "0px" }}>
<img
src={discoverEndRight}
alt="timer"
className={shake && "shakeImage"}
loading="lazy"
/>
</Box>
<Box>
Expand Down Expand Up @@ -132,7 +134,7 @@ const SpeakSentenceComponent = () => {
</Typography>

<Box
onClick={() => handleProfileBack()}
onClick={handleProfileBack}
sx={{
display: "flex",
justifyContent: "center",
Expand All @@ -149,4 +151,4 @@ const SpeakSentenceComponent = () => {
);
};

export default SpeakSentenceComponent;
export default React.memo(SpeakSentenceComponent);
6 changes: 3 additions & 3 deletions src/components/DiscoverSentance/DiscoverSentance.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "../../../node_modules/axios/index";
import elephant from "../../assets/images/elephant.svg";
Expand Down Expand Up @@ -92,7 +92,7 @@ const SpeakSentenceComponent = () => {
setVoiceText("");
setEnableNext(false);
}
if (voiceText == "success") {
if (voiceText === "success") {
// go_to_result(voiceText);
setVoiceText("");
}
Expand Down Expand Up @@ -346,4 +346,4 @@ const SpeakSentenceComponent = () => {
);
};

export default SpeakSentenceComponent;
export default React.memo(SpeakSentenceComponent);
15 changes: 11 additions & 4 deletions src/components/Layouts.jsx/MainLayout.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import Confetti from "react-confetti";
import LevelCompleteAudio from "../../assets/audio/levelComplete.wav";
import gameLoseAudio from "../../assets/audio/gameLose.wav";

import { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

const MainLayout = (props) => {
Expand Down Expand Up @@ -205,6 +205,7 @@ const MainLayout = (props) => {
<img
src={levelsImages?.[LEVEL]?.backgroundAddOn}
alt="backgroundAddOn"
loading="lazy"
/>
</Box>
)}
Expand Down Expand Up @@ -256,6 +257,7 @@ const MainLayout = (props) => {
src={catLoading}
alt="catLoading"
// sx={{ height: "58px", width: "58px" }}
loading="lazy"
/>
</Box>
</Card>
Expand Down Expand Up @@ -294,6 +296,7 @@ const MainLayout = (props) => {
src={timer}
alt="timer"
sx={{ height: "58px", width: "58px" }}
loading="lazy"
/>
</Box>
)}
Expand All @@ -312,6 +315,7 @@ const MainLayout = (props) => {
const showGreen = step + 1 <= currentStep;
return (
<Box
key={index}
index={index}
sx={{
height: "8px",
Expand Down Expand Up @@ -580,7 +584,7 @@ const MainLayout = (props) => {
alignItems: "center",
padding: "0px 24px 0px 20px",
}}
onClick={() => handleNext()}
onClick={handleNext}
>
<span
style={{
Expand All @@ -597,7 +601,7 @@ const MainLayout = (props) => {
{enableNext ? (
<Box
sx={{ cursor: "pointer" }}
onClick={() => handleNext()}
onClick={handleNext}
>
<NextButton />
</Box>
Expand Down Expand Up @@ -684,6 +688,7 @@ const MainLayout = (props) => {
src={clouds}
alt="clouds"
style={{ zIndex: 222 }}
loading="lazy"
/>
)}
</Box>
Expand All @@ -699,6 +704,7 @@ const MainLayout = (props) => {
src={gameWon}
alt="gameWon"
style={{ zIndex: 9999, height: 340 }}
loading="lazy"
/>
) : (
<Stack justifyContent="center"
Expand All @@ -707,6 +713,7 @@ const MainLayout = (props) => {
src={gameLost}
alt="gameLost"
style={{ height: 340 }}
loading="lazy"
/>
<Typography
sx={{ mb: 1, mt: 1, textAlign: "center" }}
Expand Down Expand Up @@ -977,4 +984,4 @@ const MainLayout = (props) => {
);
};

export default MainLayout;
export default React.memo(MainLayout);
Loading