akarshanxyz 1.0.0 → 1.0.2

package/a10/Pagination+FilteringwithReduxCache

@@ -0,0 +1,422 @@
+import express from "express";
+import mongoose from "mongoose";
+import cors from "cors";
+
+import React, { useEffect, useState } from "react";
+import {
+  configureStore,
+  createAsyncThunk,
+  createSlice,
+} from "@reduxjs/toolkit";
+
+import {
+  Provider,
+  useDispatch,
+  useSelector,
+} from "react-redux";
+
+/* ================= BACKEND ================= */
+
+const app = express();
+
+app.use(cors());
+app.use(express.json());
+
+mongoose.connect("mongodb://127.0.0.1:27017/ecommerce");
+
+const productSchema = new mongoose.Schema({
+  title: String,
+  price: Number,
+  category: String,
+});
+
+const Product = mongoose.model(
+  "Product",
+  productSchema
+);
+
+const seedProducts = async () => {
+  const count = await Product.countDocuments();
+
+  if (count === 0) {
+    await Product.insertMany([
+      {
+        title: "Laptop",
+        price: 50000,
+        category: "electronics",
+      },
+      {
+        title: "Phone",
+        price: 20000,
+        category: "electronics",
+      },
+      {
+        title: "TV",
+        price: 40000,
+        category: "electronics",
+      },
+      {
+        title: "Speaker",
+        price: 5000,
+        category: "electronics",
+      },
+      {
+        title: "Camera",
+        price: 35000,
+        category: "electronics",
+      },
+
+      {
+        title: "Shirt",
+        price: 1500,
+        category: "fashion",
+      },
+      {
+        title: "Jeans",
+        price: 2500,
+        category: "fashion",
+      },
+      {
+        title: "Shoes",
+        price: 3000,
+        category: "fashion",
+      },
+      {
+        title: "Jacket",
+        price: 4500,
+        category: "fashion",
+      },
+      {
+        title: "Watch",
+        price: 5000,
+        category: "fashion",
+      },
+
+      {
+        title: "Rice",
+        price: 1200,
+        category: "grocery",
+      },
+      {
+        title: "Milk",
+        price: 60,
+        category: "grocery",
+      },
+      {
+        title: "Bread",
+        price: 40,
+        category: "grocery",
+      },
+      {
+        title: "Eggs",
+        price: 120,
+        category: "grocery",
+      },
+      {
+        title: "Sugar",
+        price: 50,
+        category: "grocery",
+      },
+
+      {
+        title: "Keyboard",
+        price: 1800,
+        category: "electronics",
+      },
+      {
+        title: "Mouse",
+        price: 700,
+        category: "electronics",
+      },
+      {
+        title: "Sneakers",
+        price: 3500,
+        category: "fashion",
+      },
+      {
+        title: "Oil",
+        price: 180,
+        category: "grocery",
+      },
+      {
+        title: "T-shirt",
+        price: 800,
+        category: "fashion",
+      },
+    ]);
+  }
+};
+
+seedProducts();
+
+app.get("/products", async (req, res) => {
+  const page = Number(req.query.page) || 1;
+  const limit = Number(req.query.limit) || 5;
+
+  const totalProducts =
+    await Product.countDocuments();
+
+  const totalPages = Math.ceil(
+    totalProducts / limit
+  );
+
+  const products = await Product.find()
+    .skip((page - 1) * limit)
+    .limit(limit);
+
+  res.json({
+    products,
+    currentPage: page,
+    totalPages,
+  });
+});
+
+app.get(
+  "/products/category/:category",
+  async (req, res) => {
+    const products = await Product.find({
+      category: req.params.category,
+    });
+
+    res.json({ products });
+  }
+);
+
+app.listen(5000, () => {
+  console.log("Server running on port 5000");
+});
+
+/* ================= FRONTEND ================= */
+
+type ProductType = {
+  _id: string;
+  title: string;
+  price: number;
+  category: string;
+};
+
+type ProductState = {
+  pages: {
+    [key: number]: ProductType[];
+  };
+
+  currentPage: number;
+  totalPages: number;
+  filteredProducts: ProductType[];
+};
+
+const fetchProducts = createAsyncThunk(
+  "products/fetchProducts",
+  async (page: number) => {
+    const response = await fetch(
+      `http://localhost:5000/products?page=${page}&limit=5`
+    );
+
+    return response.json();
+  }
+);
+
+const fetchCategoryProducts =
+  createAsyncThunk(
+    "products/fetchCategoryProducts",
+    async (category: string) => {
+      const response = await fetch(
+        `http://localhost:5000/products/category/${category}`
+      );
+
+      return response.json();
+    }
+  );
+
+const initialState: ProductState = {
+  pages: {},
+  currentPage: 1,
+  totalPages: 1,
+  filteredProducts: [],
+};
+
+const productSlice = createSlice({
+  name: "products",
+
+  initialState,
+
+  reducers: {
+    setCurrentPage: (state, action) => {
+      state.currentPage = action.payload;
+    },
+  },
+
+  extraReducers: (builder) => {
+    builder.addCase(
+      fetchProducts.fulfilled,
+      (state, action) => {
+        state.pages[action.payload.currentPage] =
+          action.payload.products;
+
+        state.currentPage =
+          action.payload.currentPage;
+
+        state.totalPages =
+          action.payload.totalPages;
+      }
+    );
+
+    builder.addCase(
+      fetchCategoryProducts.fulfilled,
+      (state, action) => {
+        state.filteredProducts =
+          action.payload.products;
+      }
+    );
+  },
+});
+
+const { setCurrentPage } =
+  productSlice.actions;
+
+const store = configureStore({
+  reducer: {
+    products: productSlice.reducer,
+  },
+});
+
+type RootState = ReturnType<
+  typeof store.getState
+>;
+
+type AppDispatch = typeof store.dispatch;
+
+const ProductList = () => {
+  const dispatch = useDispatch<AppDispatch>();
+
+  const {
+    pages,
+    currentPage,
+    totalPages,
+    filteredProducts,
+  } = useSelector(
+    (state: RootState) => state.products
+  );
+
+  const [category, setCategory] =
+    useState("");
+
+  useEffect(() => {
+    if (!pages[currentPage]) {
+      dispatch(fetchProducts(currentPage));
+    }
+  }, [currentPage]);
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      dispatch(
+        setCurrentPage(currentPage + 1)
+      );
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      dispatch(
+        setCurrentPage(currentPage - 1)
+      );
+    }
+  };
+
+  const handleCategory = (
+    e: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const value = e.target.value;
+
+    setCategory(value);
+
+    if (value) {
+      dispatch(fetchCategoryProducts(value));
+    }
+  };
+
+  const products = category
+    ? filteredProducts
+    : pages[currentPage] || [];
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <h1>Product Listing</h1>
+
+      <select
+        value={category}
+        onChange={handleCategory}
+      >
+        <option value="">All</option>
+
+        <option value="electronics">
+          Electronics
+        </option>
+
+        <option value="fashion">
+          Fashion
+        </option>
+
+        <option value="grocery">
+          Grocery
+        </option>
+      </select>
+
+      <div>
+        {products.map((product) => (
+          <div
+            key={product._id}
+            style={{
+              border: "1px solid gray",
+              margin: "10px 0",
+              padding: "10px",
+            }}
+          >
+            <h3>{product.title}</h3>
+
+            <p>₹{product.price}</p>
+
+            <p>{product.category}</p>
+          </div>
+        ))}
+      </div>
+
+      {!category && (
+        <div>
+          <button
+            onClick={handlePrevious}
+            disabled={currentPage === 1}
+          >
+            Previous
+          </button>
+
+          <span
+            style={{ margin: "0 10px" }}
+          >
+            Page {currentPage} of{" "}
+            {totalPages}
+          </span>
+
+          <button
+            onClick={handleNext}
+            disabled={
+              currentPage === totalPages
+            }
+          >
+            Next
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const App = () => {
+  return (
+    <Provider store={store}>
+      <ProductList />
+    </Provider>
+  );
+};
+
+export default App;

package/a11/q1.txt

@@ -0,0 +1,266 @@
+const express = require("express");
+const http = require("http");
+const { Server } = require("socket.io");
+
+const app = express();
+const server = http.createServer(app);
+const io = new Server(server);
+
+let connectedUsers = 0;
+
+app.get("/", (req, res) => {
+  res.send(`
+<!DOCTYPE html>
+<html>
+<head>
+<title>Real-Time Chat App</title>
+<script src="/socket.io/socket.io.js"></script>
+<style>
+body{
+    font-family:Arial;
+    margin:20px;
+}
+nav button{
+    margin-right:10px;
+    padding:8px 15px;
+}
+.page{
+    display:none;
+    margin-top:20px;
+}
+.active{
+    display:block;
+}
+input{
+    margin:5px;
+    padding:5px;
+}
+#messages,#roomMessages{
+    border:1px solid black;
+    height:200px;
+    overflow-y:auto;
+    padding:10px;
+    margin-top:10px;
+}
+</style>
+</head>
+<body>
+
+<h1>Real-Time Chat Application</h1>
+
+<nav>
+<button onclick="showPage('home')">Home</button>
+<button onclick="showPage('private')">Private Chat</button>
+<button onclick="showPage('room')">Room Chat</button>
+</nav>
+
+<!-- HOME -->
+<div id="home" class="page active">
+    <h2>Home</h2>
+
+    <p><b>Your Socket ID:</b></p>
+    <p id="socketId"></p>
+
+    <p><b>Connected Users:</b></p>
+    <p id="userCount">0</p>
+
+    <h3>Notifications</h3>
+    <div id="notifications"></div>
+</div>
+
+<!-- PRIVATE CHAT -->
+<div id="private" class="page">
+    <h2>Private Chat</h2>
+
+    <input id="receiverId" placeholder="Receiver Socket ID">
+
+    <input id="privateMessage" placeholder="Message">
+
+    <button onclick="sendPrivateMessage()">
+        Send
+    </button>
+
+    <div id="messages"></div>
+</div>
+
+<!-- ROOM CHAT -->
+<div id="room" class="page">
+    <h2>Room Chat</h2>
+
+    <input id="roomName" placeholder="Room Name">
+
+    <button onclick="joinRoom()">
+        Join Room
+    </button>
+
+    <br>
+
+    <input id="roomMessage" placeholder="Room Message">
+
+    <button onclick="sendRoomMessage()">
+        Send
+    </button>
+
+    <div id="roomMessages"></div>
+</div>
+
+<script>
+
+const socket = io();
+
+let currentRoom = "";
+
+function showPage(page){
+    document.querySelectorAll(".page")
+    .forEach(p => p.classList.remove("active"));
+
+    document
+    .getElementById(page)
+    .classList.add("active");
+}
+
+socket.on("connect",()=>{
+    document.getElementById("socketId").innerText = socket.id;
+});
+
+socket.on("userCount",(count)=>{
+    document.getElementById("userCount").innerText = count;
+});
+
+socket.on("welcome",(msg)=>{
+    const div = document.createElement("div");
+    div.innerText = msg;
+    document
+      .getElementById("notifications")
+      .appendChild(div);
+});
+
+function sendPrivateMessage(){
+
+    const receiver =
+      document.getElementById("receiverId").value;
+
+    const message =
+      document.getElementById("privateMessage").value;
+
+    socket.emit("privateMessage",{
+        receiver,
+        message
+    });
+}
+
+socket.on("privateMessage",(data)=>{
+
+    const div = document.createElement("div");
+
+    div.innerText =
+      data.sender + ": " + data.message;
+
+    document
+      .getElementById("messages")
+      .appendChild(div);
+});
+
+function joinRoom(){
+
+    currentRoom =
+      document.getElementById("roomName").value;
+
+    socket.emit("joinRoom", currentRoom);
+}
+
+function sendRoomMessage(){
+
+    const msg =
+      document.getElementById("roomMessage").value;
+
+    socket.emit("roomMessage",{
+        room: currentRoom,
+        message: msg
+    });
+}
+
+socket.on("roomMessage",(data)=>{
+
+    const div = document.createElement("div");
+
+    div.innerText =
+      data.sender + ": " + data.message;
+
+    document
+      .getElementById("roomMessages")
+      .appendChild(div);
+});
+
+socket.on("roomNotification",(msg)=>{
+
+    const div = document.createElement("div");
+
+    div.innerText = msg;
+
+    document
+      .getElementById("roomMessages")
+      .appendChild(div);
+});
+
+</script>
+
+</body>
+</html>
+`);
+});
+
+io.on("connection", (socket) => {
+
+  connectedUsers++;
+
+  io.emit("userCount", connectedUsers);
+
+  io.emit(
+    "welcome",
+    "User joined: " + socket.id
+  );
+
+  socket.on("privateMessage", (data) => {
+
+    io.to(data.receiver).emit(
+      "privateMessage",
+      {
+        sender: socket.id,
+        message: data.message
+      }
+    );
+  });
+
+  socket.on("joinRoom", (room) => {
+
+    socket.join(room);
+
+    socket.to(room).emit(
+      "roomNotification",
+      socket.id + " joined room " + room
+    );
+  });
+
+  socket.on("roomMessage", (data) => {
+
+    io.to(data.room).emit(
+      "roomMessage",
+      {
+        sender: socket.id,
+        message: data.message
+      }
+    );
+  });
+
+  socket.on("disconnect", () => {
+
+    connectedUsers--;
+
+    io.emit("userCount", connectedUsers);
+  });
+});
+
+server.listen(3000, () => {
+  console.log("Server running on port 3000");
+});