DEV Community: Abhijit Meshram

Redux-toolkit

Abhijit Meshram — Fri, 21 Feb 2025 08:51:04 +0000

`rootReducer.js

import { combineReducers } from "redux";
import storage from "redux-persist/lib/storage";
import products from "./slices/product/products";
//--------auth------------------------
import signin from "./slices/auth/sign-in";
//--------LocalStorage-----------------------
import localStorage from "./slices/localstorage/localStorage";
//---------Dashboard----------------------
import home from "./slices/home";
//---------Access Permission-------------------
import menus from "./slices/access-permission/menus";
import roles from "./slices/access-permission/roles";
import employeeRoleMapping from "./slices/access-permission/employee-role-mapping";
//---------Masters-------------------
import levels from "./slices/masters/levels";
import States from "./slices/masters/State";
//---------Nodal Officer---------------------
import nodalOfficer from "./slices/nodal-officer/nodal-officer";
//---------Common---------------------
import common from "./slices/common";
//---------Customer---------------------
import customer from './slices/customer';
//---------meeting---------------------
import meetings from "./slices/meetings";
//---------meeting---------------------
import employee from "./slices/employee";
import zones from "./slices/masters/zones";
import cities from "./slices/masters/City";
//---------reports---------------------
import reports from "./slices/reports";

const rootPersistConfig = {
key: "root",
storage,
keyPrefix: "redux-",
whitelist: [],
};

export { rootPersistConfig, rootReducer };

store.js

import { useMemo } from "react";
import { configureStore } from '@reduxjs/toolkit';
import { rootPersistConfig, rootReducer } from './rootReducer';
import { persistReducer } from 'redux-persist';

let store;

function initStore(initialState) {
return configureStore({
reducer: persistReducer(rootPersistConfig, rootReducer),
initialState,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
immutableCheck: false,
}),
});
}

export const initializeStore = (preloadedState) => {
let initialStore = store ?? initStore(preloadedState);

// After navigating to a page with an initial Redux state, merge that state
// with the current state in the store, and create a new store
if (preloadedState && store) {
    initialStore = initStore({
        ...store.getState(),
        ...preloadedState,
    });
    // Reset the current store
    store = undefined;
}

// For SSG and SSR always create a new store
if (typeof window === "undefined") {
    return initialStore;
}
// Create the store once in the client
if (!store) store = initialStore;

return initialStore;

};

export function useStore(initialState) {
return useMemo(() => initializeStore(initialState), [initialState]);
}

home.js

import { createSlice } from "@reduxjs/toolkit";
// utils
import axios from "../axios/axiosMain";
import api from "../api_urls";

const initialState = {
isLoading: false,
error: null,
meetDayList: [],
dashboardData: [],
reqsCustomersNodalOffsData : [],
graphData : []
};

export function getMeetingDayByMonth(month) {
return async (dispatch) => {
try {
const response = await axios.get(${api?.home_meetingday}/${month});
dispatch(slice.actions.hasgetMeetingDayByMonthSucc(response.data));
} catch (error) {
dispatch(slice.actions.hasError(error));
}
};
}

export function getListOfMappedNodalOfficer() {
return async (dispatch) => {
try {
const response = await axios.get(${api?.mapped_nodal_officers});
dispatch(slice.actions.hasGetListOfMappedNodalOfficerSucc(response.data));
} catch (error) {
dispatch(slice.actions.hasError(error));
}
};
}

export function getReqsCustomersNodalOffs() {
return async (dispatch) => {
try {
const response = await axios.get(${api?.reqs_customers_nodaloff});
dispatch(slice.actions.hasReqsCustomersNodalOffsSucc(response.data));
} catch (error) {
dispatch(slice.actions.hasError(error));
}
};
}

export function getDashboardGraphsData(payload) {
return async (dispatch) => {
try {
const response = await axios.post(${api?.get_dashboard_graph_data}, payload);
dispatch(slice.actions.hasReqGraphDataSucc(response.data));
} catch (error) {
dispatch(slice.actions.hasError(error));
}
};
}

// Reducer
export default slice.reducer;

axios.js

import axios from "axios";
import { toast } from "react-toastify";

const crypto = require("crypto");

const keyString = process.env.CRYPTO_SECURITY_KEY; // This must be exactly 16 characters
const key = Buffer.from(keyString, "utf-8");

const axiosInstance = axios.create({ baseURL: process.env.API_URL });

axiosInstance.interceptors.request.use((config) => {
// Encrypt the data before sending it
// if (config.data) {
// const jsonString = JSON.stringify(config.data);
// const iv = crypto.randomBytes(16); // Generate a random IV
// const cipher = crypto.createCipheriv('aes-128-cbc', key, iv);
// let encrypted = cipher.update(jsonString, 'utf-8', 'binary');
// encrypted += cipher.final('binary');
// const encryptedBase64 = Buffer.from(encrypted, 'binary').toString('base64');
// const ivBase64 = iv.toString('base64');
// let encryptedPayload = ${ivBase64}:${encryptedBase64};
// config.data = {payload:encryptedPayload};
// }
return config;
});

axiosInstance.interceptors.response.use(
(response) => {
// Decrypt the response data
if (response && response.data && typeof response?.data?.data == "string") {
const encryptedData = response?.data?.data;
const parts = encryptedData.split(":");
const iv = Buffer.from(parts[0], "base64");
const encryptedText = Buffer.from(parts[1], "base64");
const decipher = crypto.createDecipheriv("aes-128-cbc", key, iv);
let decrypted = decipher.update(encryptedText, "binary", "utf-8");
decrypted += decipher.final("utf-8");
// Parse the decrypted JSON string
response.data.data = JSON.parse(decrypted);
}
if (response.data.statusCode == 200 && response.data.message) {
toast.success(

{response.data.message}

,
{
position: toast.POSITION.TOP_RIGHT,
hideProgressBar: true,
theme: "colored",
}
);
}
return response;
},
(error) => {
if (error?.response?.status === 400) {
error?.response?.data.errors && error?.response?.data.errors.length > 0
? error?.response?.data.errors.map((data) => {
toast.error(

{data}

,
{
position: toast.POSITION.TOP_RIGHT,
hideProgressBar: true,
theme: "colored",
}
);
})
: toast.error(

We're sorry for the inconvenience. Please try again after some
time.

,
{
position: toast.POSITION.TOP_RIGHT,
hideProgressBar: true,
theme: "colored",
}
);
} else if (
error?.response?.status === 404 ||
error?.response?.status === 500
) {
//Requested Resource Not Found OR Server Side Wrror
if (error?.response?.data.error) {
toast.error(

{error?.response?.data.error}.

{error?.response?.data.message}.

,
{
position: toast.POSITION.TOP_RIGHT,
theme: "colored",
autoClose: 5000,
closeButton: false,
closeOnClick: false,
draggable: false,
pauseOnHover: false,
style: {
width: "400px",
},
}
);
}
} else {
console.warn(
"Status : ",
error?.response?.status,
"Error Log :",
error?.response?.data
);
toast.error(

We're having trouble connecting to the server. Please try again later.

,
{
position: toast.POSITION.TOP_RIGHT,
theme: "colored",
autoClose: 5000,
closeButton: false,
closeOnClick: false,
draggable: false,
pauseOnHover: false,
style: {
width: "400px",
},
}
);
}
return Promise.reject(
(error.response && error.response?.data) || "Something went wrong"
);
}
);

export default axiosInstance;

axiosMain.js

const crypto = require("crypto");
import axios from "axios";
import Router from "next/router";
import { toast } from "react-toastify";
import Swal from "sweetalert2";

let isSwalOpen401 = false;
let isSwalOpen403 = false;

const keyString = process.env.CRYPTO_SECURITY_KEY; // This must be exactly 16 characters
const key = Buffer.from(keyString, "utf-8");

{response.data.message}

{data}

,
{
position: toast.POSITION.TOP_RIGHT,
hideProgressBar: true,
theme: "colored",
}
);
})
: toast.error(

We're sorry for the inconvenience. Please try again after some
time.

,
{
position: toast.POSITION.TOP_RIGHT,
hideProgressBar: true,
theme: "colored",
}
);
} else if (error?.response?.status === 401) {
//Unauthorized Request
if (!isSwalOpen401) {
isSwalOpen401 = true;
Swal.fire({
title: "",
text: "Your session has ended. Would you like to start over?",
icon: "warning",
showCancelButton: true,
confirmButtonText: "Yes",
cancelButtonText: "No",
allowOutsideClick: false,
}).then((result) => {
if (result.isConfirmed) {
axiosInstance.get(/authapi/refresh).finally(() => {});
} else {
axiosInstance.get(/authapi/logout).finally(() => {
isSwalOpen401 = false;
localStorage.clear();
Router.push("/");
});
}
});
}
} else if (error?.response?.status === 403) {
if (!isSwalOpen403) {
isSwalOpen403 = true;
Swal.fire({
title: "",
text: error?.response?.data.message,
icon: "warning",
showCancelButton: false,
showConfirmButton: false,
allowOutsideClick: false,
timer: 5000,
timerProgressBar: true,
didClose: () => {
axiosInstance.get(/authapi/logout).finally(() => {
isSwalOpen403 = false;
Router.push("/");
localStorage.clear();
});
},
});
}
} else if (error?.response?.status === 404) {
//Requested Resource Not Found OR Server Side Wrror
if (Router.pathname !== "/404") {
// Router.push("/404");
}
} else if (error?.response?.status === 500) {
//Requested Resource Not Found OR Server Side Wrror
if (error?.response?.data.error) {
toast.error(

{error?.response?.data.error}

{error?.response?.data.message}

We're having trouble connecting to the server. Please try again later.

,
{
position: toast.POSITION.TOP_RIGHT,
theme: "colored",
autoClose: 5000,
closeButton: false,
closeOnClick: false,
draggable: false,
pauseOnHover: false,
style: {
width: "400px",
},
}
);
}
return Promise.reject(
(error.response && error.response?.data) || "Something went wrong"
);
}
);
export default axiosInstance;

_app.js

import '../styles/globals.scss'
import Contentlayout from '../shared/layout-components/layout/content-layout'
import Authenticationlayout from '../shared/layout-components/layout/authentication-layout'
import { Provider } from "react-redux";
import { useStore } from "../shared/redux/store";
import PropTypes from 'prop-types';

MyApp.propTypes = {
Component: PropTypes.elementType,
pageProps: PropTypes.object,
};
export default MyApp;

My-Dcorm

Abhijit Meshram — Mon, 03 Feb 2025 03:27:00 +0000

myapi/
│── node_modules/ # Dependencies
│── uploads/ # Uploaded images (auto-created)
│── config/
│ ├── config.json # Database configuration
│── models/
│ ├── index.js # Sequelize setup
│ ├── user.js # User model
│── migrations/
│── controllers/
│ ├── userController.js # User API logic
│── routes/
│ ├── userRoutes.js # User routes
│── middleware/
│ ├── upload.js # Multer file upload configuration
│── .env # Environment variables
│── .gitignore # Ignore unnecessary files
│── package.json # Project dependencies
│── package-lock.json # Locked dependencies
│── server.js # Main entry point

//table creation
USE mydb;

CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100) UNIQUE,
password VARCHAR(255),
photo VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE customers (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
phone VARCHAR(15),
email VARCHAR(100) UNIQUE,
address TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

//
mkdir myapi && cd myapi
npm init -y

//
npm install express mysql2 sequelize bcryptjs jsonwebtoken multer dotenv body-parser cors

//set-up ORM
npx sequelize-cli init

//config.json
{
"development": {
"username": "root",
"password": "",
"database": "mydb",
"host": "127.0.0.1",
"dialect": "mysql"
}
}
//create model
npx sequelize-cli model:generate --name User --attributes name:string,email:string,password:string,photo:string
//migrate databse
npx sequelize-cli db:migrate

//server.js
require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const userRoutes = require("./routes/userRoutes");

const app = express();

app.use(cors());
app.use(bodyParser.json());
app.use("/uploads", express.static("uploads")); // Serve uploaded images
app.use("/users", userRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(Server running on port ${PORT}));

//user-route
const express = require("express");
const { register, login, getUsers, updateUser, deleteUser, forgotPassword } = require("../controllers/userController");
const upload = require("../middleware/upload");

const router = express.Router();

router.get("/", getUsers);
router.post("/register", upload.single("photo"), register);
router.post("/login", login);
router.put("/:id", upload.single("photo"), updateUser);
router.delete("/:id", deleteUser);
router.post("/forgot-password", forgotPassword);

module.exports = router;

//cantroller
const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");
const { User } = require("../models");

exports.getUsers = async (req, res) => {
try {
const users = await User.findAll();
res.json(users);
} catch (err) {
res.status(500).json({ error: err.message });
}
};

exports.register = async (req, res) => {
try {
const { name, email, password } = req.body;
const hashedPassword = await bcrypt.hash(password, 10);
const photo = req.file ? req.file.path : null;

    const user = await User.create({ name, email, password: hashedPassword, photo });
    res.status(201).json(user);
} catch (err) {
    res.status(500).json({ error: err.message });
}

};

exports.login = async (req, res) => {
try {
const { email, password } = req.body;
const user = await User.findOne({ where: { email } });

    if (!user) return res.status(404).json({ message: "User not found" });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ message: "Invalid credentials" });

    const token = jwt.sign({ id: user.id }, "secret", { expiresIn: "1h" });
    res.json({ token, user });
} catch (err) {
    res.status(500).json({ error: err.message });
}

};

exports.updateUser = async (req, res) => {
try {
const { id } = req.params;
const { name, email } = req.body;
const photo = req.file ? req.file.path : null;

    const user = await User.findByPk(id);
    if (!user) return res.status(404).json({ message: "User not found" });

    await user.update({ name, email, photo });
    res.json(user);
} catch (err) {
    res.status(500).json({ error: err.message });
}

};

exports.deleteUser = async (req, res) => {
try {
const { id } = req.params;
const user = await User.findByPk(id);
if (!user) return res.status(404).json({ message: "User not found" });

    await user.destroy();
    res.json({ message: "User deleted successfully" });
} catch (err) {
    res.status(500).json({ error: err.message });
}

};

exports.forgotPassword = async (req, res) => {
try {
const { email, newPassword } = req.body;
const user = await User.findOne({ where: { email } });

    if (!user) return res.status(404).json({ message: "User not found" });

    const hashedPassword = await bcrypt.hash(newPassword, 10);
    await user.update({ password: hashedPassword });

    res.json({ message: "Password reset successful" });
} catch (err) {
    res.status(500).json({ error: err.message });
}

};

//middleware upload
const multer = require("multer");

const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "uploads/");
},
filename: (req, file, cb) => {
cb(null, Date.now() + "-" + file.originalname);
}
});

const upload = multer({ storage });
module.exports = upload;

//model index.js
const { Sequelize, DataTypes } = require("sequelize");
const config = require("../config/config.json")["development"];

const sequelize = new Sequelize(config.database, config.username, config.password, {
host: config.host,
dialect: config.dialect
});

const db = {};
db.sequelize = sequelize;
db.Sequelize = Sequelize;

// Import models
db.User = require("./user")(sequelize, DataTypes);

module.exports = db;

//model-usermigration.js
module.exports = {
up: async (queryInterface, Sequelize) => {
await queryInterface.createTable("Users", {
id: {
allowNull: false,
autoIncrement: true,
primaryKey: true,
type: Sequelize.INTEGER
},
name: {
type: Sequelize.STRING,
allowNull: false
},
email: {
type: Sequelize.STRING,
allowNull: false,
unique: true
},
password: {
type: Sequelize.STRING,
allowNull: false
},
photo: {
type: Sequelize.STRING
},
createdAt: {
allowNull: false,
type: Sequelize.DATE,
defaultValue: Sequelize.literal("CURRENT_TIMESTAMP")
},
updatedAt: {
allowNull: false,
type: Sequelize.DATE,
defaultValue: Sequelize.literal("CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP")
}
});
},

down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable("Users");
}

};

//model user.js
module.exports = (sequelize, DataTypes) => {
const User = sequelize.define("User", {
name: {
type: DataTypes.STRING,
allowNull: false
},
email: {
type: DataTypes.STRING,
allowNull: false,
unique: true
},
password: {
type: DataTypes.STRING,
allowNull: false
},
photo: {
type: DataTypes.STRING
}
});

return User;

};
//
module.exports = (sequelize, DataTypes) => {
return sequelize.define("User", {
name: { type: DataTypes.STRING, allowNull: false },
email: { type: DataTypes.STRING, allowNull: false, unique: true },
password: { type: DataTypes.STRING, allowNull: false },
photo: { type: DataTypes.STRING }
}, { timestamps: true });
};

Node.js dependencies

node_modules/
npm-debug.log
yarn-error.log

Environment variables

.env

Logs

logs/
.log
npm-debug.log
yarn-debug.log*
yarn-error.log*

Database files

*.sqlite
*.sqlite-journal

Uploaded images

uploads/

IDE and OS files

.vscode/
.DS_Store
Thumbs.db

React-Dcur

Abhijit Meshram — Tue, 10 Dec 2024 20:28:15 +0000

{
  "name": "merncrud",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^1.3.4",
    "bootstrap": "^5.3.3",
    "cra-template": "1.2.0",
    "formik": "^2.2.9",
    "react": "^19.0.0",
    "react-bootstrap": "^2.10.6",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1",
    "react-toastify": "^10.0.6",
    "sweetalert2": "^11.7.0",
    "web-vitals": "^4.2.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
`


`import React, {useState, useEffect} from 'react';
import './App.css';
import { Table, Row, Col, Button } from 'react-bootstrap';
import AddModal from './component/AddModal';
import axios from 'axios';
import { ToastContainer, toast } from 'react-toastify';
import Swal from 'sweetalert2';

function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);

  const [rowData, setRowData] = useState([
    {firstname: "Punam", lastname: "Khobragade" },

]);

const [rowValues, setRowValues] = useState("")


useEffect(()=>{
  fetch('http://localhost:5001/api/users') 
    .then(response => response.json())
    .then(data => setRowData(data));
},[])

const handleShow = () => {
  setRowValues("")
  setShow(true);
}

const handleDelete = (data) => {
  Swal.fire({
    title: 'Are you sure?',
    text: "You wan't to delete data!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!',
  }).then((result) => {
    if (result.isConfirmed) {
   fetch(`http://localhost:5001/api/user/${data._id}`, {
    method: "DELETE",
    body: JSON.stringify({

    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
    },
  })
    .then(response => response.json())
    .then(data => {
      Swal.fire('Deleted!', 'The user has been deleted.', 'success');
      fetch('http://localhost:5001/api/users') // api for the get request
      .then(response => response.json())
      .then(data => setRowData(data));
    })
  }
});
}

const handleEdit = (data) => {
  Swal.fire({
    title: 'Are you sure?',
    text: "You wan't to Edit data!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes',
  }).then((result) => {
    if (result.isConfirmed) {
  setRowValues(data);
  setShow(true)
}
});
}

const formatDate = (date) => {
  if (!date) return '';
  const parsedDate = new Date(date);
  const year = parsedDate.getFullYear();
  const month = (parsedDate.getMonth() + 1).toString().padStart(2, '0');
  const day = parsedDate.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
};


  return (
    <>
    <ToastContainer/>
    <Row className="p-5">
     <Col md={12} className='d-flex justify-content-between align-items-center'>
      <h4>User List</h4>
      <span>
        <Button variant="info" onClick={(()=>handleShow())}>Add User</Button>
      </span>
     </Col>
     <Col md={12} className='mg-t-15'>
    <Table striped bordered hover responsive>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Photo</th>
          <th>Gender</th>
          <th>Email</th>
          <th>Mobile Number</th>
          <th>DOB</th>
          <th>City</th>
          <th>Professional Skills</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {rowData?.length > 0 && rowData.map((item, index)=>(
        <tr key={index}>
          <td>{index + 1}</td>
          <td>{item?.firstname}</td>
          <td>{item?.lastname}</td>
          <td><img src={item?.photo} alt="" height={50} width={50}/></td>
          <td>{item?.gender}</td>
          <td>{item?.email}</td>
          <td>{item?.mobile}</td>
          <td>{formatDate(item?.dob)}</td>
          <td>{item?.city}</td>
          <td>{item?.skills}</td>
          <td>
            <Button variant='info' onClick={(()=>handleEdit(item))}>Edit</Button> &nbsp;
            <Button variant = "danger" onClick={(()=>handleDelete(item))}>Delete</Button>

          </td>

        </tr>

        ))}

      </tbody>
    </Table>
    </Col>
    </Row>
    {show &&
    <AddModal
    show={show}
    handleClose={handleClose}
    rowValues={rowValues}
    setRowData={setRowData}
    />}
    </>
  );
}

export default App;

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9kxt17uvl5694gn0l7n.png)`



`import React, { useState } from "react";
import { Form, Button, Modal, Row } from "react-bootstrap";
import { ToastContainer, toast } from "react-toastify";
import { useFormik } from "formik";
import * as Yup from "yup";
import axios from "axios";
import Swal from "sweetalert2";

const AddModal = (props) => {
  const { show, handleClose, rowValues, setRowData } = props;

  const handleSave = (data) => {
    console.log(data, "data1111111111");
    if (!rowValues) {
      fetch(`http://localhost:5001/api/user/`, {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
      })
        .then((response) => response.json())
        .then((data) => {
          if (data) {
            Swal.fire(
              "Created!",
              "The user has been Created successfully.",
              "success"
            );
            handleClose();
            fetch("http://localhost:5001/api/users")
              .then((response) => response.json())
              .then((data) => setRowData(data));
          }
        });
    } else {
      fetch(`http://localhost:5001/api/user/${rowValues._id}`, {
        method: "PUT",
        body: JSON.stringify(data),
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
      })
        .then((response) => response.json())
        .then((data) => {
          if (data) {
            if (data) {
              Swal.fire(
                "Updated!",
                "The user has been Updated successfully.",
                "success"
              );
              handleClose();
              fetch("http://localhost:5001/api/users") // api for the get request
                .then((response) => response.json())
                .then((data) => setRowData(data));
            }
          }
        });
    }
  };

  const formatDate = (date) => {
    if (!date) return "";
    const parsedDate = new Date(date);
    const year = parsedDate.getFullYear();
    const month = (parsedDate.getMonth() + 1).toString().padStart(2, "0");
    const day = parsedDate.getDate().toString().padStart(2, "0");
    return `${year}-${month}-${day}`;
  };

  const addEditUserForm = useFormik({
    enableReinitialize: true,
    initialValues: {
      firstName: rowValues?.firstname || "",
      lastName: rowValues?.lastname || "",
      email: rowValues?.email || "",
      mobile: rowValues?.mobile || "",
      photo: rowValues?.photo || "",
      gender: rowValues?.gender || "",
      city: rowValues?.city || "",
      skills: rowValues?.skills ? rowValues.skills.split(",") : [],
      dob: rowValues?.dob ? formatDate(rowValues.dob) : "",
    },
    validationSchema: Yup.object().shape({
      firstName: Yup.string().required("Required"),
      lastName: Yup.string().required("Required"),
      email: Yup.string().required("Required").email("Invalid email address"),
      mobile: Yup.string()
        .required("Required")
        .matches(/^[0-9]{10}$/, "Mobile number must be 10 digits"),
      city: Yup.string().required("Required"),
      dob: Yup.string().required("Required"),
      gender: Yup.string()
        .required("Gender is required")
        .oneOf(["male", "female"], "Required"),
      skills: Yup.array().min(1, "At least one skill is required"),
    }),
    onSubmit: (values) => {
      const skillsData =
        values.skills?.length > 0 && values.skills.map(String).join(",");

      console.log(values, "dfdfdfdfdf", skillsData);
      const payload = {
        firstname: values.firstName,
        lastname: values.lastName,
        email: values.email,
        mobile: values.mobile,
        photo: values.photo,
        gender: values.gender,
        city: values.city,
        skills: skillsData,
        dob: values.dob,
        photo: values.photo,
      };

      handleSave(payload);
    },
  });

  console.log(addEditUserForm, "addEditUserForm");
  const handlePhotoChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        addEditUserForm.setFieldValue("photo", reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  const skillsArray = [
    { label: "Communication", value: "Communication" },
    { label: "Critical Thinking", value: "Critical Thinking" },
    { label: "Problem Solving", value: "Problem Solving" },
  ];

  console.log(addEditUserForm, "addEditUserForm111");

  return (
    <>
      <ToastContainer />
      <Modal show={show} onHide={handleClose} size="xl" backdrop="static">
        <Form onSubmit={addEditUserForm.handleSubmit}>
          <Modal.Header closeButton>
            <Modal.Title>{rowValues ? "Update" : "Add"} User</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <Row>
              <Form.Group className="mb-3 col-md-6" controlId="firstName">
                <Form.Label>First Name</Form.Label>
                <Form.Control
                  id="firstName"
                  name="firstName"
                  type="text"
                  onChange={addEditUserForm.handleChange}
                  value={addEditUserForm.values.firstName}
                  autoComplete="off"
                />
                {addEditUserForm.errors.firstName &&
                addEditUserForm.touched.firstName ? (
                  <div className="text-danger">
                    {addEditUserForm.errors.firstName}
                  </div>
                ) : null}
              </Form.Group>
              <Form.Group className="mb-3 col-md-6" controlId="lastName">
                <Form.Label>Last Name</Form.Label>
                <Form.Control
                  id="lastName"
                  name="lastName"
                  type="text"
                  onChange={addEditUserForm.handleChange}
                  value={addEditUserForm.values.lastName}
                  autoComplete="off"
                />
                {addEditUserForm.errors.lastName &&
                addEditUserForm.touched.lastName ? (
                  <div className="text-danger">
                    {addEditUserForm.errors.lastName}
                  </div>
                ) : null}
              </Form.Group>
              {console.log(addEditUserForm.values, "fgfgffgf")}
              <Form.Group className="mb-3 col-md-6" controlId="dob">
                <Form.Label>Date of Birth</Form.Label>
                <Form.Control
                  id="dob"
                  name="dob"
                  type="date"
                  onChange={addEditUserForm.handleChange}
                  value={addEditUserForm.values.dob || ""}
                  autoComplete="off"
                />

                {addEditUserForm.errors.dob && addEditUserForm.touched.dob ? (
                  <div className="text-danger">
                    {addEditUserForm.errors.dob}
                  </div>
                ) : null}
              </Form.Group>
              <Form.Group className="mb-3 col-md-6" controlId="photo">
                <Form.Label>Photo</Form.Label>

                <Form.Control
                  id="photo"
                  name="photo"
                  type="file"
                  onChange={handlePhotoChange}
                  //  value={addEditUserForm.values.photo}
                />
                {addEditUserForm.errors.photo &&
                addEditUserForm.touched.photo ? (
                  <div className="text-danger">
                    {addEditUserForm.errors.photo}
                  </div>
                ) : null}
              </Form.Group>
              <Form.Group className="mb-3 col-md-6" controlId="gender">
                <Form.Label>Gender</Form.Label>
                <div className="d-flex align-items-center">
                  <Form.Check
                    type="radio"
                    id="1"
                    label="Male"
                    checked={addEditUserForm.values.gender == "male"}
                    onClick={() =>
                      addEditUserForm.setFieldValue("gender", "male")
                    }
                  />{" "}
                  &nbsp; &nbsp;
                  <Form.Check
                    type="radio"
                    id="1"
                    checked={addEditUserForm.values.gender == "female"}
                    label="Female"
                    onClick={() =>
                      addEditUserForm.setFieldValue("gender", "female")
                    }
                  />
                </div>
                {addEditUserForm.errors.gender &&
                addEditUserForm.touched.gender ? (
                  <div className="text-danger">
                    {addEditUserForm.errors.gender}
                  </div>
                ) : null}
              </Form.Group>
              <Form.Group className="mb-3 col-md-6" controlId="formBasicEmail">
                <Form.Label>Email Id</Form.Label>

                <Form.Control
                  id="email"
                  name="email"
                  type="text"
                  onChange={addEditUserForm.handleChange}
                  value={addEditUserForm.values.email}
                  autoComplete="off"
                />
                {addEditUserForm.errors.email &&
                addEditUserForm.touched.email ? (
                  <div className="text-danger">
                    {addEditUserForm.errors.email}
                  </div>
                ) : null}
              </Form.Group>
              <Form.Group className="mb-3 col-md-6" controlId="formBasicEmail">
                <Form.Label>Mobile No.</Form.Label>

                <Form.Control
                  id="mobile"
                  name="mobile"
                  type="text"
                  onChange={addEditUserForm.handleChange}
                  value={addEditUserForm.values.mobile}
                  autoComplete="off"
                />
                {addEditUserForm.errors.mobile &&
                addEditUserForm.touched.mobile ? (
                  <div className="text-danger">
                    {addEditUserForm.errors.mobile}
                  </div>
                ) : null}
              </Form.Group>
              <Form.Group className="mb-3 col-md-6" controlId="formBasicEmail">
                <Form.Label>City</Form.Label>

                <Form.Select
                  aria-label="Default select example"
                  onChange={(e) =>
                    addEditUserForm.setFieldValue("city", e.target.value)
                  }
                  value={addEditUserForm.values.city}
                >
                  <option value="*"></option>
                  <option value="Nagpur">Nagpur</option>
                  <option value="Chandrapur">Chandrapur</option>
                  <option value="Mumbai">Mumbai</option>
                </Form.Select>
                {addEditUserForm.errors.city && addEditUserForm.touched.city ? (
                  <div className="text-danger">
                    {addEditUserForm.errors.city}
                  </div>
                ) : null}
              </Form.Group>
              <Form.Group className="mb-3 col-md-12" controlId="formBasicEmail">
                <Form.Label>Skills</Form.Label>

                <div className="d-flex align-items-center">
                  {skillsArray?.map((item, index) => (
                    <span style={{ marginRight: "10px" }} key={index}>
                      <Form.Check
                        type="checkbox"
                        id={index}
                        label={item?.label}
                        checked={addEditUserForm.values.skills.includes(
                          item.label
                        )}
                        onChange={() => {
                          const updatedSkills =
                            addEditUserForm.values.skills.includes(item.label)
                              ? addEditUserForm.values.skills.filter(
                                  (skill) => skill !== item.label
                                )
                              : [...addEditUserForm.values.skills, item.label];
                          addEditUserForm.setFieldValue(
                            "skills",
                            updatedSkills
                          );
                        }}
                      />
                    </span>
                  ))}
                  {addEditUserForm.errors.skills &&
                  addEditUserForm.touched.skills ? (
                    <div className="text-danger">
                      {addEditUserForm.errors.skills}
                    </div>
                  ) : null}
                </div>
              </Form.Group>
            </Row>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="info" type="submit">
              Submit
            </Button>
          </Modal.Footer>
        </Form>
      </Modal>
    </>
  );
};

export default AddModal;

mongo-dcur

Abhijit Meshram — Tue, 10 Dec 2024 18:34:45 +0000

{
"name": "backend",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"body-parser": "^1.20.3",
"cors": "^2.8.5",
"dotenv": "^16.4.7",
"express": "^4.21.2",
"mongodb": "^6.11.0",
"mongoose": "^8.8.4",
"nodemon": "^3.1.7"
}
}

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const connectDatabase = require('./dbconnection/dbconnection');
const routes = require('./routes/studentroutes');

const app = express();

// Middleware
app.use(bodyParser.json());
app.use(cors());

// Database Connection
connectDatabase();

// Routes
app.use('/api', routes);

// Start Server
app.listen(5001, () => {
console.log('Server started on port 5001');
});

const express = require('express');
const { getUsers, createUser, updateUser, deleteUser } = require('../controller/studentcontroller');
const router = express.Router();

router.get('/users', getUsers);
router.post('/user', createUser);
router.put('/user/:id', updateUser);
router.delete('/user/:id', deleteUser);

module.exports = router;

`const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
firstname: {
type: String,
required: true, // Add validation if necessary
},
lastname: {
type: String,
required: true,
},
email: {
type: String,
required: true,
unique: true, // Ensures no duplicate emails
},
mobile: {
type: String,
required: true,
},
city: {
type: String,
},
gender: {
type: String,
enum: ['Male', 'Female', 'Other'], // Limit to specific values if needed
},
skills: {
type: String,
},
dob: {
type: Date,
},
photo: {
type: String,
default: '', // Default value for the photo field
},
}, { timestamps: true }); // Automatically adds createdAt and updatedAt fields

module.exports = mongoose.model('User', userSchema);

const mongoose = require('mongoose');

module.exports = connectDatabase;`

`const User = require('../components/userSchema');

const getUsers = async (req, res) => {
try {
const users = await User.find({});
res.send(users);
} catch (error) {
console.error(error);
res.status(500).send(error);
}
};

const updateUser = async (req, res) => {
const { id } = req.params;

try {
const user = await User.findByIdAndUpdate(id, req.body, { new: true });
res.send(user);
} catch (error) {
console.error(error);
res.status(500).send(error);
}
};

const deleteUser = async (req, res) => {
const { id } = req.params;

try {
const user = await User.findByIdAndDelete(id);
res.send(user);
} catch (error) {
console.error(error);
res.status(500).send(error);
}
};

module.exports = {
getUsers,
createUser,
updateUser,
deleteUser,
};
`