From af873d8155176fcb4c9a6e1d09de4a71dc75ecda Mon Sep 17 00:00:00 2001
From: Sumit Kumar Mridha <3sumit5@gmail.com>
Date: Sun, 24 Dec 2023 18:47:41 +0530
Subject: [PATCH 1/5] First commit
---
.vscode/settings.json | 4 +-
index.html | 4 +-
public/mockServiceWorker.js | 189 ++++++++++++++++++------------------
src/pages/Home.jsx | 135 ++++++++++++++++++++++++--
4 files changed, 226 insertions(+), 106 deletions(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f6e64a..47e36fb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,7 +6,7 @@
"scss.validate": false,
"less.validate": false,
"editor.codeActionsOnSave": {
- "source.fixAll.stylelint": true,
- "source.fixAll.eslint": true
+ "source.fixAll.stylelint": "explicit",
+ "source.fixAll.eslint": "explicit"
}
}
diff --git a/index.html b/index.html
index 7a8272f..caf7097 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,8 @@
Codebuddy React Interview
-
-
+
+
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
index 2f1d1d5..6bc04ab 100644
--- a/public/mockServiceWorker.js
+++ b/public/mockServiceWorker.js
@@ -8,124 +8,124 @@
* - Please do NOT serve this file on production.
*/
-const INTEGRITY_CHECKSUM = 'c5f7f8e188b673ea4e677df7ea3c5a39'
-const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
-const activeClientIds = new Set()
+const INTEGRITY_CHECKSUM = "c5f7f8e188b673ea4e677df7ea3c5a39";
+const IS_MOCKED_RESPONSE = Symbol("isMockedResponse");
+const activeClientIds = new Set();
-self.addEventListener('install', function () {
- self.skipWaiting()
-})
+self.addEventListener("install", function () {
+ self.skipWaiting();
+});
-self.addEventListener('activate', function (event) {
- event.waitUntil(self.clients.claim())
-})
+self.addEventListener("activate", function (event) {
+ event.waitUntil(self.clients.claim());
+});
-self.addEventListener('message', async function (event) {
- const clientId = event.source.id
+self.addEventListener("message", async function (event) {
+ const clientId = event.source.id;
if (!clientId || !self.clients) {
- return
+ return;
}
- const client = await self.clients.get(clientId)
+ const client = await self.clients.get(clientId);
if (!client) {
- return
+ return;
}
const allClients = await self.clients.matchAll({
- type: 'window',
- })
+ type: "window",
+ });
switch (event.data) {
- case 'KEEPALIVE_REQUEST': {
+ case "KEEPALIVE_REQUEST": {
sendToClient(client, {
- type: 'KEEPALIVE_RESPONSE',
- })
- break
+ type: "KEEPALIVE_RESPONSE",
+ });
+ break;
}
- case 'INTEGRITY_CHECK_REQUEST': {
+ case "INTEGRITY_CHECK_REQUEST": {
sendToClient(client, {
- type: 'INTEGRITY_CHECK_RESPONSE',
+ type: "INTEGRITY_CHECK_RESPONSE",
payload: INTEGRITY_CHECKSUM,
- })
- break
+ });
+ break;
}
- case 'MOCK_ACTIVATE': {
- activeClientIds.add(clientId)
+ case "MOCK_ACTIVATE": {
+ activeClientIds.add(clientId);
sendToClient(client, {
- type: 'MOCKING_ENABLED',
+ type: "MOCKING_ENABLED",
payload: true,
- })
- break
+ });
+ break;
}
- case 'MOCK_DEACTIVATE': {
- activeClientIds.delete(clientId)
- break
+ case "MOCK_DEACTIVATE": {
+ activeClientIds.delete(clientId);
+ break;
}
- case 'CLIENT_CLOSED': {
- activeClientIds.delete(clientId)
+ case "CLIENT_CLOSED": {
+ activeClientIds.delete(clientId);
const remainingClients = allClients.filter((client) => {
- return client.id !== clientId
- })
+ return client.id !== clientId;
+ });
// Unregister itself when there are no more clients
if (remainingClients.length === 0) {
- self.registration.unregister()
+ self.registration.unregister();
}
- break
+ break;
}
}
-})
+});
-self.addEventListener('fetch', function (event) {
- const { request } = event
+self.addEventListener("fetch", function (event) {
+ const { request } = event;
// Bypass navigation requests.
- if (request.mode === 'navigate') {
- return
+ if (request.mode === "navigate") {
+ return;
}
// Opening the DevTools triggers the "only-if-cached" request
// that cannot be handled by the worker. Bypass such requests.
- if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
- return
+ if (request.cache === "only-if-cached" && request.mode !== "same-origin") {
+ return;
}
// Bypass all requests when there are no active clients.
// Prevents the self-unregistered worked from handling requests
// after it's been deleted (still remains active until the next reload).
if (activeClientIds.size === 0) {
- return
+ return;
}
// Generate unique request ID.
- const requestId = crypto.randomUUID()
- event.respondWith(handleRequest(event, requestId))
-})
+ const requestId = crypto.randomUUID();
+ event.respondWith(handleRequest(event, requestId));
+});
async function handleRequest(event, requestId) {
- const client = await resolveMainClient(event)
- const response = await getResponse(event, client, requestId)
+ const client = await resolveMainClient(event);
+ const response = await getResponse(event, client, requestId);
// Send back the response clone for the "response:*" life-cycle events.
// Ensure MSW is active and ready to handle the message, otherwise
// this message will pend indefinitely.
if (client && activeClientIds.has(client.id)) {
- ;(async function () {
- const responseClone = response.clone()
+ (async function () {
+ const responseClone = response.clone();
sendToClient(
client,
{
- type: 'RESPONSE',
+ type: "RESPONSE",
payload: {
requestId,
isMockedResponse: IS_MOCKED_RESPONSE in response,
@@ -137,11 +137,11 @@ async function handleRequest(event, requestId) {
},
},
[responseClone.body],
- )
- })()
+ );
+ })();
}
- return response
+ return response;
}
// Resolve the main client for the given event.
@@ -149,49 +149,49 @@ async function handleRequest(event, requestId) {
// that registered the worker. It's with the latter the worker should
// communicate with during the response resolving phase.
async function resolveMainClient(event) {
- const client = await self.clients.get(event.clientId)
+ const client = await self.clients.get(event.clientId);
- if (client?.frameType === 'top-level') {
- return client
+ if (client?.frameType === "top-level") {
+ return client;
}
const allClients = await self.clients.matchAll({
- type: 'window',
- })
+ type: "window",
+ });
return allClients
.filter((client) => {
// Get only those clients that are currently visible.
- return client.visibilityState === 'visible'
+ return client.visibilityState === "visible";
})
.find((client) => {
// Find the client ID that's recorded in the
// set of clients that have registered the worker.
- return activeClientIds.has(client.id)
- })
+ return activeClientIds.has(client.id);
+ });
}
async function getResponse(event, client, requestId) {
- const { request } = event
+ const { request } = event;
// Clone the request because it might've been already used
// (i.e. its body has been read and sent to the client).
- const requestClone = request.clone()
+ const requestClone = request.clone();
function passthrough() {
- const headers = Object.fromEntries(requestClone.headers.entries())
+ const headers = Object.fromEntries(requestClone.headers.entries());
// Remove internal MSW request header so the passthrough request
// complies with any potential CORS preflight checks on the server.
// Some servers forbid unknown request headers.
- delete headers['x-msw-intention']
+ delete headers["x-msw-intention"];
- return fetch(requestClone, { headers })
+ return fetch(requestClone, { headers });
}
// Bypass mocking when the client is not active.
if (!client) {
- return passthrough()
+ return passthrough();
}
// Bypass initial page load requests (i.e. static assets).
@@ -199,22 +199,22 @@ async function getResponse(event, client, requestId) {
// means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
// and is not ready to handle requests.
if (!activeClientIds.has(client.id)) {
- return passthrough()
+ return passthrough();
}
// Bypass requests with the explicit bypass header.
// Such requests can be issued by "ctx.fetch()".
- const mswIntention = request.headers.get('x-msw-intention')
- if (['bypass', 'passthrough'].includes(mswIntention)) {
- return passthrough()
+ const mswIntention = request.headers.get("x-msw-intention");
+ if (["bypass", "passthrough"].includes(mswIntention)) {
+ return passthrough();
}
// Notify the client that a request has been intercepted.
- const requestBuffer = await request.arrayBuffer()
+ const requestBuffer = await request.arrayBuffer();
const clientMessage = await sendToClient(
client,
{
- type: 'REQUEST',
+ type: "REQUEST",
payload: {
id: requestId,
url: request.url,
@@ -233,38 +233,35 @@ async function getResponse(event, client, requestId) {
},
},
[requestBuffer],
- )
+ );
switch (clientMessage.type) {
- case 'MOCK_RESPONSE': {
- return respondWithMock(clientMessage.data)
+ case "MOCK_RESPONSE": {
+ return respondWithMock(clientMessage.data);
}
- case 'MOCK_NOT_FOUND': {
- return passthrough()
+ case "MOCK_NOT_FOUND": {
+ return passthrough();
}
}
- return passthrough()
+ return passthrough();
}
function sendToClient(client, message, transferrables = []) {
return new Promise((resolve, reject) => {
- const channel = new MessageChannel()
+ const channel = new MessageChannel();
channel.port1.onmessage = (event) => {
if (event.data && event.data.error) {
- return reject(event.data.error)
+ return reject(event.data.error);
}
- resolve(event.data)
- }
+ resolve(event.data);
+ };
- client.postMessage(
- message,
- [channel.port2].concat(transferrables.filter(Boolean)),
- )
- })
+ client.postMessage(message, [channel.port2].concat(transferrables.filter(Boolean)));
+ });
}
async function respondWithMock(response) {
@@ -273,15 +270,15 @@ async function respondWithMock(response) {
// instance will have status code set to 0. Since it's not possible to create
// a Response instance with status code 0, handle that use-case separately.
if (response.status === 0) {
- return Response.error()
+ return Response.error();
}
- const mockedResponse = new Response(response.body, response)
+ const mockedResponse = new Response(response.body, response);
Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
value: true,
enumerable: true,
- })
+ });
- return mockedResponse
+ return mockedResponse;
}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 16836af..993ef66 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,7 +1,19 @@
import { Icon } from "@iconify/react";
+import { useState } from "react";
import { Link } from "react-router-dom";
const Home = () => {
+ const [stepNo, setStepNo] = useState(1);
+
+ const back = () => {
+ if (stepNo > 1) setStepNo(stepNo - 1);
+ };
+
+ const saveAndNext = () => {
+ console.log("hello");
+ if (stepNo < 3) setStepNo(stepNo + 1);
+ };
+
return (
@@ -11,12 +23,123 @@ const Home = () => {
Welcome to the home page!
-
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus eos quis iure unde incidunt?
- Hic, quisquam. Voluptate placeat officiis corporis dolores ea unde maxime, sed nulla cumque
- amet quam aliquam quas incidunt debitis sit aut a soluta quisquam repellat dignissimos qui.
- Perspiciatis similique quaerat reiciendis nam aliquam?
-