DEV Community: code lover

todo

code lover — Fri, 04 Apr 2025 04:51:21 +0000

Backend

npm i bcryptjs cors dotenv express joi jsonwebtoken mongoose nodemon
folder structure

controllers

controllers/authController.js

const User = require("../models/User");
const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");
const { registerSchema, loginSchema } = require("../utils/authValidation");

const generateToken = (userId) => {
  return jwt.sign({ userId }, process.env.JWT_SECRET, { expiresIn: "7d" });
};

const registerUser = async (req, res) => {
  const { error } = registerSchema.validate(req.body);
  if (error) return res.status(400).json({ msg: error.details[0].message });

  try {
    let user = await User.findOne({ email: req.body.email });
    if (user) return res.status(400).json({ msg: "User already exists" });

    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(req.body.password, salt);

    user = new User({ ...req.body, password: hashedPassword });
    await user.save();

    res.status(201).json({
      msg: "User registered successfully",
      token: generateToken(user.id),
      user: { id: user.id, name: user.name, email: user.email },
    });
  } catch (error) {
    res.status(500).json({ msg: "Server error" });
  }
};

const loginUser = async (req, res) => {
  const { error } = loginSchema.validate(req.body);
  if (error) return res.status(400).json({ msg: error.details[0].message });

  try {
    const user = await User.findOne({ email: req.body.email });
    if (!user) return res.status(400).json({ msg: "Invalid credentials" });

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

    res.json({
      msg: "User login successfully",
      token: generateToken(user.id),
      user: { id: user.id, name: user.name, email: user.email },
    });
  } catch (error) {
    res.status(500).json({ msg: "Server error" });
  }
};

module.exports = { registerUser, loginUser };

controllers/todoController.js

const Todo = require("../models/Todo");
const { todoSchema } = require("../utils/todoValidation");

const createTodo = async (req, res) => {
  const { error } = todoSchema.validate(req.body);
  if (error) return res.status(400).json({ msg: error.details[0].message });

  try {
    const todo = new Todo({ ...req.body, user: req.user });
    await todo.save();
    res.status(201).json(todo);
  } catch (error) {
    res.status(500).json({ msg: "Server error" });
  }
};

const getTodos = async (req, res) => {
  try {
    const todos = await Todo.find({ user: req.user }).sort({ createdAt: -1 });
    res.json(todos);
  } catch (error) {
    res.status(500).json({ msg: "Server error" });
  }
};

const updateTodo = async (req, res) => {
  const { error } = todoSchema.validate(req.body);
  if (error) return res.status(400).json({ msg: error.details[0].message });

  try {
    const todo = await Todo.findOneAndUpdate(
      { _id: req.params.id, user: req.user },
      req.body,
      { new: true }
    );
    if (!todo) return res.status(404).json({ msg: "Todo not found" });
    res.json(todo);
  } catch (error) {
    res.status(500).json({ msg: "Server error" });
  }
};

const deleteTodo = async (req, res) => {
  try {
    const todo = await Todo.findOneAndDelete({
      _id: req.params.id,
      user: req.user,
    });
    if (!todo) return res.status(404).json({ msg: "Todo not found" });
    res.json({ msg: "Todo deleted successfully" });
  } catch (error) {
    res.status(500).json({ msg: "Server error" });
  }
};

module.exports = { createTodo, getTodos, updateTodo, deleteTodo };

middleware:-
middleware/authMiddleware.js

const jwt = require("jsonwebtoken");

const protect = (req, res, next) => {
  const authHeader = req.header("Authorization");

  if (!authHeader || !authHeader.startsWith("Bearer ")) {
    return res.status(401).json({ msg: "No token, authorization denied" });
  }

  const token = authHeader.split(" ")[1]; // Extract token after "Bearer "

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded.userId;
    next();
  } catch (error) {
    res.status(401).json({ msg: "Invalid token" });
  }
};

module.exports = protect;
**models:-**

models/Todo.js

const mongoose = require("mongoose");

const todoSchema = new mongoose.Schema(
  {
    user: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true },
    title: { type: String, required: true },
    description: { type: String },
    priority: {
      type: String,
      enum: ["low", "medium", "high"],
      default: "medium",
    },
    status: {
      type: String,
      enum: ["pending", "completed"],
      default: "pending",
    },
    dueDate: { type: Date, required: true },
  },
  { timestamps: true }
);

module.exports = mongoose.model("Todo", todoSchema);

models/User.js

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema(
  {
    name: { type: String, required: true },
    email: { type: String, required: true, unique: true },
    password: { type: String, required: true },
  },
  { timestamps: true }
);

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

routes:-
routes/authRoutes.js

const express = require("express");
const { registerUser, loginUser } = require("../controllers/authController");

const router = express.Router();

router.post("/register", registerUser);

router.post("/login", loginUser);

module.exports = router;

routes/todoRoutes.js

const express = require("express");
const {
  createTodo,
  getTodos,
  updateTodo,
  deleteTodo,
} = require("../controllers/todoController");
const protect = require("../middleware/authMiddleware");

const router = express.Router();

router.post("/", protect, createTodo);
router.get("/", protect, getTodos);
router.put("/:id", protect, updateTodo);
router.delete("/:id", protect, deleteTodo);

module.exports = router;

utils:-
utils/authValidation.js

const Joi = require("joi");

const registerSchema = Joi.object({
  name: Joi.string().min(3).max(30).required(),
  email: Joi.string().email().required(),
  password: Joi.string().min(6).required(),
});

const loginSchema = Joi.object({
  email: Joi.string().email().required(),
  password: Joi.string().min(6).required(),
});

module.exports = { registerSchema, loginSchema };

utils/jwt.js

const generateToken = (userId) => {
  return jwt.sign({ id: userId }, process.env.JWT_SECRET, {
    expiresIn: "1d",
  });
};

const verifyToken = (token) => {
  return jwt.verify(token, process.env.JWT_SECRET);
};

utils/todoValidation.js

const Joi = require("joi");

const todoSchema = Joi.object({
  title: Joi.string().min(3).max(100).required(),
  description: Joi.string().max(500).allow(""),
  priority: Joi.string().valid("low", "medium", "high").default("medium"),
  status: Joi.string().valid("pending", "completed").default("pending"),
  dueDate: Joi.date().greater("now").required(),
});

module.exports = { todoSchema };

.env

PORT=5000
MONGO_URI=
JWT_SECRET=i-am-utsav-ioopen-source

config.js

const mongoose = require("mongoose");
require("dotenv").config();

const connectDB = async () => {
  try {
    await mongoose.connect(process.env.MONGO_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    console.log("MongoDB Connected...");
  } catch (error) {
    console.error("MongoDB Connection Failed:", error);
    process.exit(1);
  }
};

module.exports = connectDB;

server.js

const express = require("express");
const dotenv = require("dotenv");
const cors = require("cors");
const connectDB = require("./config");

const authRoutes = require("./routes/authRoutes");
const todoRoutes = require("./routes/todoRoutes");

dotenv.config();
connectDB();

const app = express();

app.use(express.json());
app.use(cors());

app.use("/api/auth", authRoutes);
app.use("/api/todos", todoRoutes);

app.get("/", (req, res) => {
  res.send("API is running...");
});

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

package.json

{
  "name": "backend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "bcryptjs": "^3.0.2",
    "cors": "^2.8.5",
    "dotenv": "^16.4.7",
    "express": "^4.21.2",
    "express-validator": "^7.2.1",
    "joi": "^17.13.3",
    "jsonwebtoken": "^9.0.2",
    "mongoose": "^8.10.1"
  },
  "devDependencies": {
    "nodemon": "^3.1.9"
  }
}

Frontend

main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
// import AppRouter from "./AppRouter.jsx";
import { Toaster } from "react-hot-toast";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
    {/* <AppRouter /> */}
    <Toaster position="top-right" />
  </StrictMode>
);

app.jsx

// import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
// import Login from "./pages/Login";
// import Register from "./pages/Register";
// import Dashboard from "./pages/Dashboard";
// import { ProtectedRoute } from "./authMiddleware";

import AuthProvider from "./provider/authProvider";
import Routes from "./routes";

function App() {
  return (
    // <Router>
    //   <Routes>
    //     <Route path="/" element={<Login />} />
    //     <Route path="/register" element={<Register />} />
    //     {/* <Route path="/dashboard" element={<Dashboard />} /> */}

    //     <Route
    //       path="/dashboard"
    //       element={
    //         <ProtectedRoute>
    //           <Dashboard />
    //         </ProtectedRoute>
    //       }
    //     />
    //   </Routes>
    // </Router>
    <AuthProvider>
      <Routes />
    </AuthProvider>
  );
}

export default App;

AppRouter.jsx

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import { useState, useEffect } from "react";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Dashboard from "./pages/Dashboard";
// import NotFound from "./pages/NotFound";

const AppRouter = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem("token");
    setIsAuthenticated(!!token);
  }, []);

  return (
    <Router>
      <Routes>
        <Route
          path="/"
          element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" />}
        />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        {/* <Route path="*" element={<NotFound />} /> */}
      </Routes>
    </Router>
  );
};

export default AppRouter;

authMiddleware.js

import { useNavigate } from "react-router-dom";

export const ProtectedRoute = ({ children }) => {
  const navigate = useNavigate();
  const token = localStorage.getItem("token");
  return token ? children : navigate("/");
};

index.css


@tailwind utilities;

html.dark {
  background-color: #121212;
  color: white;
}

.dark .bg-white {
  background-color: #1e1e1e;
}

.dark .border {
  border-color: #333;
}

.dark .shadow {
  box-shadow: 0px 4px 6px rgba(255, 255, 255, 0.1);
}

App.css

@import "tailwindcss";

utils/axios.js

import axios from "axios";

const API = axios.create({
  baseURL: "http://localhost:5000/api",
});

API.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => Promise.reject(error)
);

export default API;

routes
routes/ProtectedRoute.jsx

import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../provider/authProvider";

export const ProtectedRoute = () => {
  const { token } = useAuth();

  // Check if the user is authenticated
  if (!token) {
    // If not authenticated, redirect to the login page
    return <Navigate to="/login" />;
  }

  // If authenticated, render the child routes
  return <Outlet />;
};

routes/index.jsx

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { useAuth } from "../provider/authProvider";
import { ProtectedRoute } from "./ProtectedRoute";
import Login from "../pages/Login";
// import Logout from "../pages/Logout";
import Dashboard from "../pages/Dashboard";
import TodoList from "../components/second/TodoList";

const Routes = () => {
  const { token } = useAuth();

  // Define public routes accessible to all users
  const routesForPublic = [
    {
      path: "/service",
      element: <div>Service Page</div>,
    },
    {
      path: "/about-us",
      element: <div>About Us</div>,
    },
  ];

  // Define routes accessible only to authenticated users
  const routesForAuthenticatedOnly = [
    {
      path: "/",
      element: <ProtectedRoute />, // Wrap the component in ProtectedRoute
      children: [
        {
          path: "",
          element: <Dashboard />,
          // element: <TodoList />,
        },
        {
          path: "/profile",
          element: <div>User Profile</div>,
        },
        // {
        //   path: "/logout",
        //   element: <Logout />,
        // },
      ],
    },
  ];

  // Define routes accessible only to non-authenticated users
  const routesForNotAuthenticatedOnly = [
    // {
    //   path: "/",
    //   element: <div>Home Page</div>,
    // },
    {
      path: "/login",
      element: <Login />,
    },
  ];

  // Combine and conditionally include routes based on authentication status
  const router = createBrowserRouter([
    ...routesForPublic,
    ...(!token ? routesForNotAuthenticatedOnly : []),
    ...routesForAuthenticatedOnly,
  ]);

  // Provide the router configuration using RouterProvider
  return <RouterProvider router={router} />;
};

export default Routes;

provider
provider/authProvider.jsx

import axios from "axios";
import { createContext, useContext, useEffect, useMemo, useState } from "react";

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  // State to hold the authentication token
  const [token, setToken_] = useState(localStorage.getItem("token"));

  // Function to set the authentication token
  const setToken = (newToken) => {
    setToken_(newToken);
  };

  useEffect(() => {
    if (token) {
      axios.defaults.headers.common["Authorization"] = "Bearer " + token;
      localStorage.setItem("token", token);
    } else {
      delete axios.defaults.headers.common["Authorization"];
      localStorage.removeItem("token");
    }
  }, [token]);

  // Memoized value of the authentication context
  const contextValue = useMemo(
    () => ({
      token,
      setToken,
    }),
    [token]
  );

  // Provide the authentication context to the children components
  return (
    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
  );
};

export const useAuth = () => {
  return useContext(AuthContext);
};

export default AuthProvider;

pages
pages/Dashboard.jsx

import { useState, useEffect } from "react";
import API from "../utils/axios";
import TodoModal from "../components/TodoModal";
import toast from "react-hot-toast";
import DarkModeToggle from "../components/DarkModeToggle";
import { useAuth } from "../provider/authProvider";
import { useNavigate } from "react-router-dom";

const Dashboard = () => {
  const { setToken } = useAuth();
  const navigate = useNavigate();

  const [todos, setTodos] = useState([]);
  const [modalOpen, setModalOpen] = useState(false);
  const [editTodo, setEditTodo] = useState(null);
  const [statusFilter, setStatusFilter] = useState("all");
  const [sortOrder, setSortOrder] = useState("newest");
  const [filteredTodos, setFilteredTodos] = useState([]);
  const [loading, setLoading] = useState(false); // Add loading state

  const fetchTodos = async () => {
    setLoading(true); // Start loading
    try {
      const res = await API.get("/todos");
      setTodos(res.data);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false); // End loading
    }
  };

  useEffect(() => {
    fetchTodos();
  }, []);

  useEffect(() => {
    let updatedTodos = [...todos];

    if (statusFilter !== "all") {
      updatedTodos = updatedTodos.filter((todo) =>
        statusFilter === "completed"
          ? todo.status === "completed"
          : todo.status === "pending"
      );
    }

    if (sortOrder === "newest") {
      updatedTodos.sort((a, b) => new Date(b.dueDate) - new Date(a.dueDate));
    } else {
      updatedTodos.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate));
    }

    setFilteredTodos(updatedTodos);
  }, [statusFilter, sortOrder, todos]);

  const deleteTodo = async (id) => {
    try {
      await API.delete(`/todos/${id}`);
      setTodos((prev) => prev.filter((todo) => todo._id !== id));
      toast.success("To-Do deleted successfully!");
    } catch (err) {
      console.log(err);
      toast.error("Failed to delete To-Do!");
    }
  };

  // const logOut = () => {
  //   localStorage.removeItem("token");
  //   window.location.href = "/";
  // };



  const handleLogout = () => {
    setToken();
    navigate("/", { replace: true });
  };

  return (
    <div className="p-6">
      <DarkModeToggle />
      <button className="p-3 bg-gray-500 cursor-pointer" onClick={handleLogout}>
        Logout
      </button>{" "}
      <h2 className="text-xl font-bold mb-4">To-Do List</h2>
      <button
        className="p-2 bg-green-500 text-white rounded mb-4"
        onClick={() => setModalOpen(true)}
        aria-label="Add a new to-do"
      >
        Add To-Do
      </button>
      <div className="flex gap-4 mb-4">
        <select
          className="p-2 border rounded"
          onChange={(e) => setStatusFilter(e.target.value)}
          value={statusFilter}
        >
          <option value="all">All</option>
          <option value="completed">Completed</option>
          <option value="pending">Pending</option>
        </select>

        <select
          className="p-2 border rounded"
          onChange={(e) => setSortOrder(e.target.value)}
          value={sortOrder}
        >
          <option value="newest">Newest First</option>
          <option value="oldest">Oldest First</option>
        </select>

        <button
          className="p-2 bg-green-500 text-white rounded"
          onClick={() => setModalOpen(true)}
        >
          Add To-Do
        </button>
      </div>
      {
        loading ? (
          <p className="text-center">Loading todos...</p>
        ) : (
          <table className="w-full mt-4 border-collapse border border-gray-300">
            <thead>
              <tr className="bg-gray-200">
                <th scope="col" className="border p-2">Title</th>
                <th className="border p-2">Description</th>
                <th className="border p-2">Priority</th>
                <th className="border p-2">Due Date</th>
                <th className="border p-2">Status</th>
                <th className="border p-2">Actions</th>
              </tr>
            </thead>
            <tbody>
              {/* {todos.map((todo) => (
            <tr key={todo._id} className="border">
              <td className="border p-2">{todo.title}</td>
              <td className="border p-2">{todo.description}</td>
              <td className="border p-2">{todo.priority}</td>
              <td className="border p-2">
                {new Date(todo.dueDate).toLocaleDateString()}
              </td>
              <td className="border p-2">
                {todo.status === "completed" ? (
                  <span className="text-green-500">Completed</span>
                ) : (
                  <span className="text-red-500">Pending</span>
                )}
              </td>

              <td className="border p-2 flex gap-2">
                <button
                  className="p-1 bg-yellow-500 text-white rounded"
                  onClick={() => {
                    setEditTodo(todo);
                    setModalOpen(true);
                  }}
                >
                  Edit
                </button>
                <button
                  className="p-1 bg-red-500 text-white rounded"
                  onClick={() => deleteTodo(todo._id)}
                >
                  Delete
                </button>
              </td>
            </tr>
          ))} */}

              {filteredTodos.map((todo) => (
                <tr key={todo._id} className="border">
                  <td className="border p-2">{todo.title}</td>
                  <td className="border p-2">{todo.description}</td>
                  <td className="border p-2">{todo.priority}</td>
                  <td className="border p-2">
                    {new Date(todo.dueDate).toLocaleDateString()}
                  </td>
                  <td className="border p-2">
                    {todo.status === "completed" ? (
                      <span className="text-green-500">Completed</span>
                    ) : (
                      <span className="text-red-500">Pending</span>
                    )}
                  </td>
                  <td className="border p-2 flex gap-2">
                    <button
                      className="p-1 bg-yellow-500 text-white rounded"
                      onClick={() => {
                        setEditTodo(todo);
                        setModalOpen(true);
                      }}
                    >
                      Edit
                    </button>
                    <button
                      className="p-1 bg-red-500 text-white rounded"
                      onClick={() => deleteTodo(todo._id)}
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      <TodoModal
        isOpen={modalOpen}
        onClose={() => {
          setModalOpen(false);
          setEditTodo(null);
        }}
        refreshTodos={fetchTodos}
        editTodo={editTodo}
      />
    </div>
  );
};

export default Dashboard;

pages/Login.jsx

import { useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
import { Formik } from "formik";
import * as Yup from "yup";
import API from "../utils/axios";
import { useAuth } from "../provider/authProvider";

const LoginInitialValues = {
  email: "",
  password: "",
};

const LogInSchema = Yup.object().shape({
  email: Yup.string()
    .email("Invalid email address")
    .required("Email is required"),
  password: Yup.string()
    .required("Password is required")
    .matches(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
      "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one number, and one special character"
    ),
});

const Login = () => {
  const navigate = useNavigate();
  const { setToken } = useAuth();

  // const handleLogin = async (e) => {
  //   e.preventDefault();
  //   try {
  //     const { data } = await axios.post(
  //       "http://localhost:5000/api/auth/login",
  //       { email, password }
  //     );
  //     localStorage.setItem("token", data.token);
  //     toast.success("Login successful!");
  //     navigate("/dashboard");
  //   } catch (error) {
  //     toast.error(error.response?.data?.msg || "Login failed");
  //   }
  // };

  const handleSubmit = async (values, { setSubmitting }) => {
    try {
      const response = await API.post("/auth/login", {
        email: values.email,
        password: values.password,
      });
      console.log("LLLL", response);

      // localStorage.setItem("token", response.data.token);
      toast.success(response?.data?.data?.msg || "Login successfully");
      // navigate("/dashboard");
      setToken(response?.data?.token);
      navigate("/", { replace: true });
    } catch (error) {
      // console.log("error.....", error);
      toast.error(error?.response?.data?.msg || "Login failed");
    }
    setSubmitting(false);
  };

  return (
    <div className="flex justify-center items-center h-screen">
      {/* <form
        onSubmit={handleLogin}
        className="bg-white p-6 rounded-lg shadow-lg"
      > */}
      <Formik
        initialValues={LoginInitialValues}
        validationSchema={LogInSchema}
        onSubmit={(values, { setSubmitting }) =>
          handleSubmit(values, setSubmitting)
        }
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting,
          isValid,
        }) => (
          <form className="space-y-2 max-w-2xl w-full" onSubmit={handleSubmit}>
            <h2 className="text-2xl font-bold mb-4">Login</h2>
            <input
              type="text"
              placeholder="Email Address"
              className={`border p-2 w-full ${errors.email && touched.email ? "border-red-600" : ""
                }`}
              name="email"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
            />
            <div className="text-red-500 text-sm">
              {errors.email && touched.email && errors.email}
            </div>
            <input
              type="password"
              placeholder="Password"
              className={`border p-2 w-full ${errors.password && touched.password ? "border-red-600" : ""
                }`}
              name="password"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.password}
            />
            <div className="text-red-500 text-sm">
              {errors.password && touched.password && errors.password}
            </div>
            <button
              type="submit"
              className="bg-blue-500 text-white p-2 rounded w-full"
            >
              Login
            </button>
            <div
              className="mx-auto text-center mt-2 cursor-pointer"
              onClick={() => navigate("/register")}
            >
              Register
            </div>
            {/* </form> */}
          </form>
        )}
      </Formik>
    </div>
  );
};

export default Login;

pages/Register.jsx

import { useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
import { Formik } from "formik";
import * as Yup from "yup";
import API from "../utils/axios";

const LoginInitialValues = {
  name: "",
  email: "",
  password: "",
  confirmPassword: "",
};

const LogInSchema = Yup.object().shape({
  name: Yup.string().required("Username is required"),
  email: Yup.string()
    .email("Invalid email address")
    .required("Email is required"),
  password: Yup.string()
    .required("Password is required")
    .matches(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
      "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one number, and one special character"
    ),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref("password")], "Passwords must match")
    .min(8, "Confirm password must be at least 8 characters")
    .required("Confirm password is required"),
});

const Register = () => {
  const navigator = useNavigate();
  const handleSubmit = async (values, { setSubmitting }) => {
    try {
      const response = await API.post("/auth/register", {
        name: values.name,
        email: values.email,
        password: values.password,
      });
      toast.success(response?.data?.data?.msg || "Registration successfully");
      navigator("/");
    } catch (error) {
      console.log("error.....", error);
      toast.error(error?.response?.data?.msg || "Registration failed");
    }
    setSubmitting(false);
  };
  return (
    <div className="flex justify-center items-center h-screen">
      {/* <form
        onSubmit={handleRegister}
        className="bg-white p-6 rounded-lg shadow-lg"
      > */}
      <Formik
        initialValues={LoginInitialValues}
        validationSchema={LogInSchema}
        onSubmit={(values, { setSubmitting }) =>
          handleSubmit(values, setSubmitting)
        }
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting,
          isValid,
        }) => (
          <form className="space-y-2 max-w-2xl w-full" onSubmit={handleSubmit}>
            <h2 className="text-2xl font-bold">Register</h2>
            <input
              type="text"
              placeholder="Name"
              className={`border p-2 w-full ${
                errors.name && touched.name ? "border-red-600" : ""
              }`}
              name="name"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.name}
            />
            <div className="text-red-500 text-sm">
              {errors.name && touched.name && errors.name}
            </div>
            <input
              type="text"
              placeholder="Email Address"
              className={`border p-2 w-full ${
                errors.email && touched.email ? "border-red-600" : ""
              }`}
              name="email"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
            />
            <div className="text-red-500 text-sm">
              {errors.email && touched.email && errors.email}
            </div>
            <input
              type="text"
              placeholder="Password"
              className={`border p-2 w-full ${
                errors.password && touched.password ? "border-red-600" : ""
              }`}
              name="password"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.password}
            />
            <div className="text-red-500 text-sm">
              {errors.password && touched.password && errors.password}
            </div>
            <input
              type="password"
              placeholder="confirmPassword"
              className={`border p-2 w-full ${
                errors.confirmPassword && touched.confirmPassword
                  ? "border-red-600"
                  : ""
              }`}
              name="confirmPassword"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.confirmPassword}
            />
            <div className="text-red-500 text-sm">
              {errors.confirmPassword &&
                touched.confirmPassword &&
                errors.confirmPassword}
            </div>
            <button
              type="submit"
              className="bg-green-500 text-white p-2 rounded w-full"
            >
              Register
            </button>
            <div
              className="mx-auto text-center mt-2 cursor-pointer"
              onClick={() => navigator("/")}
            >
              Login
            </div>
          </form>
        )}
      </Formik>
    </div>
  );
};

export default Register;

components
components/DarkModeToggle.jsx

import { useState, useEffect } from "react";

const DarkModeToggle = () => {
  const [darkMode, setDarkMode] = useState(
    localStorage.getItem("theme") === "dark"
  );

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }, [darkMode]);

  return (
    <button
      onClick={() => setDarkMode(!darkMode)}
      className="p-2 bg-gray-500 text-white rounded"
    >
      {darkMode ? "Light Mode" : "Dark Mode"}
    </button>
  );
};

export default DarkModeToggle;

components/TodoModal.jsx

import { useEffect } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import API from "../utils/axios";
import toast from "react-hot-toast";

const TodoModal = ({ isOpen, onClose, refreshTodos, editTodo }) => {
  const formik = useFormik({
    initialValues: {
      title: editTodo ? editTodo.title : "",
      description: editTodo ? editTodo.description : "",
      priority: editTodo ? editTodo.priority : "low",
      dueDate: editTodo ? editTodo.dueDate.split("T")[0] : "",
      status: editTodo ? editTodo.status : "pending",
    },
    validationSchema: Yup.object({
      title: Yup.string().required("Title is required"),
      priority: Yup.string().oneOf(["low", "medium", "high"]).required(),
      dueDate: Yup.date().required("Due date is required"),
      status: Yup.string().oneOf(["pending", "completed"]).required(),
    }),
    onSubmit: async (values) => {
      try {
        if (editTodo) {
          await API.put(`/todos/${editTodo._id}`, values);
          toast.success("To-Do updated successfully!");
        } else {
          await API.post("/todos", values);
          toast.success("To-Do added successfully!");
        }
        refreshTodos();
        onClose();
      } catch (err) {
        toast.error("Something went wrong!");
      }
    },
  });

  useEffect(() => {
    if (editTodo) {
      formik.setValues({
        title: editTodo.title,
        priority: editTodo.priority,
        dueDate: editTodo.dueDate.split("T")[0],
        status: editTodo.status,
        description: editTodo.description,
      });
    }
  }, [editTodo]);

  return (
    isOpen && (
      <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
        <div className="bg-white p-6 rounded-lg w-96">
          <h2 className="text-xl font-bold mb-4">
            {editTodo ? "Edit" : "Add"} To-Do
          </h2>
          <form onSubmit={formik.handleSubmit}>
            <input
              type="text"
              name="title"
              placeholder="Title"
              className="w-full p-2 border rounded mb-2"
              {...formik.getFieldProps("title")}
            />
            {formik.touched.title && formik.errors.title && (
              <p className="text-red-500">{formik.errors.title}</p>
            )}
            <input
              type="text"
              name="description"
              placeholder="description"
              className="w-full p-2 border rounded mb-2"
              {...formik.getFieldProps("description")}
            />
            {formik.touched.description && formik.errors.description && (
              <p className="text-red-500">{formik.errors.description}</p>
            )}

            <select
              name="priority"
              className="w-full p-2 border rounded mb-2"
              {...formik.getFieldProps("priority")}
            >
              <option value="low">Low</option>
              <option value="medium">Medium</option>
              <option value="high">High</option>
            </select>

            <select
              name="status"
              className="w-full p-2 border rounded mb-2"
              {...formik.getFieldProps("status")}
            >
              <option value="pending">Pending</option>
              <option value="completed">Completed</option>
            </select>

            <input
              type="date"
              name="dueDate"
              className="w-full p-2 border rounded mb-2"
              {...formik.getFieldProps("dueDate")}
            />
            {formik.touched.dueDate && formik.errors.dueDate && (
              <p className="text-red-500">{formik.errors.dueDate}</p>
            )}

            <button
              type="submit"
              className="w-full p-2 bg-blue-500 text-white rounded"
            >
              {editTodo ? "Update" : "Add"} To-Do
            </button>
          </form>
        </div>
      </div>
    )
  );
};

export default TodoModal;

components/second/TodoForm.jsx

// TodoForm.jsx
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import API from '../../utils/axios';

const TodoForm = ({ fetchTodos, todo = {}, isUpdate = false, closeModal }) => {
    const validationSchema = Yup.object({
        title: Yup.string()
            .min(2, 'Title must be at least 2 characters')
            .max(50, 'Title must be less than 50 characters')
            .required('Title is required'),
        description: Yup.string()
            .max(200, 'Description must be less than 200 characters')
            .required('Description is required'),
        dueDate: Yup.date()
            .required('Due date is required')
            .min(new Date(), 'Due date cannot be in the past'),
        priority: Yup.string()
            .oneOf(['low', 'medium', 'high'], 'Invalid priority')
            .required('Priority is required'),
        status: Yup.string().oneOf(["pending", "completed"])
            .required('Status is required'),
    });

    const initialValues = {
        title: todo.title || '',
        description: todo.description || '',
        dueDate: todo.dueDate ? new Date(todo.dueDate).toISOString().split('T')[0] : '',
        priority: todo.priority || 'low',
        status: todo.status || 'pending',
    };

    const handleSubmit = async (values, { resetForm }) => {
        try {
            if (isUpdate) {
                await API.put(`/todos/${todo._id}`, values);
                closeModal();
            } else {
                await API.post('/todos', values);
                resetForm();
            }
            fetchTodos();
        } catch (error) {
            console.error('Error submitting todo:', error);
        }
    };

    return (
        <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={handleSubmit}
            enableReinitialize
        >
            {({ isSubmitting }) => (
                <Form className="space-y-4">
                    <div>
                        <label htmlFor="title" className="block text-sm font-medium text-gray-700">Title</label>
                        <Field
                            name="title"
                            type="text"
                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                        />
                        <ErrorMessage name="title" component="div" className="text-red-500 text-sm mt-1" />
                    </div>

                    <div>
                        <label htmlFor="description" className="block text-sm font-medium text-gray-700">Description</label>
                        <Field
                            name="description"
                            as="textarea"
                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                            rows="3"
                        />
                        <ErrorMessage name="description" component="div" className="text-red-500 text-sm mt-1" />
                    </div>

                    <div>
                        <label htmlFor="dueDate" className="block text-sm font-medium text-gray-700">Due Date</label>
                        <Field
                            name="dueDate"
                            type="date"
                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                        />
                        <ErrorMessage name="dueDate" component="div" className="text-red-500 text-sm mt-1" />
                    </div>

                    <div>
                        <label htmlFor="priority" className="block text-sm font-medium text-gray-700">Priority</label>
                        <Field
                            as="select"
                            name="priority"
                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                        >
                            <option value="low">Low</option>
                            <option value="medium">Medium</option>
                            <option value="high">High</option>
                        </Field>
                        <ErrorMessage name="priority" component="div" className="text-red-500 text-sm mt-1" />
                    </div>

                    <div>
                        <label htmlFor="status" className="block text-sm font-medium text-gray-700">Status</label>
                        <Field
                            as="select"
                            name="status"
                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                        >
                            <option value="pending">Pending</option>
                            <option value="completed">Completed</option>
                        </Field>
                        <ErrorMessage name="status" component="div" className="text-red-500 text-sm mt-1" />
                    </div>

                    <button
                        type="submit"
                        disabled={isSubmitting}
                        className="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 disabled:bg-indigo-400"
                    >
                        {isUpdate ? 'Update' : 'Create'} Todo
                    </button>
                </Form>
            )}
        </Formik>
    );
};

export default TodoForm;

components/second/TodoList.jsx

// TodoList.jsx
import React, { useState, useEffect } from 'react';
import API from '../../utils/axios';
import TodoForm from './TodoForm';
import { useAuth } from '../../provider/authProvider';
import { useNavigate } from 'react-router-dom';

const TodoList = () => {
    const { setToken } = useAuth();
    const navigate = useNavigate();



    const [todos, setTodos] = useState([]);
    const [showUpdateModal, setShowUpdateModal] = useState(false);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [selectedTodo, setSelectedTodo] = useState(null);

    useEffect(() => {
        fetchTodos();
    }, []);

    const fetchTodos = async () => {
        try {
            const response = await API.get('/todos');
            setTodos(response.data);
        } catch (error) {
            console.error('Error fetching todos:', error);
        }
    };

    const handleDeleteClick = (todo) => {
        setSelectedTodo(todo);
        setShowDeleteModal(true);
    };

    const handleUpdateClick = (todo) => {
        setSelectedTodo(todo);
        setShowUpdateModal(true);
    };

    const handleDelete = async () => {
        try {
            await API.delete(`/todos/${selectedTodo._id}`);
            setTodos(todos.filter(todo => todo._id !== selectedTodo._id));
            setShowDeleteModal(false);
        } catch (error) {
            console.error('Error deleting todo:', error);
        }
    };

    const handleLogout = () => {
        setToken();
        navigate("/", { replace: true });
    };

    return (
        <div className="container mx-auto mt-8 px-4">
            <button className='p-2 bg-gray-600 text-white cursor-pointer' onClick={handleLogout}>Logout</button>
            <h2 className="text-2xl font-bold mb-4">Todo List</h2>
            <TodoForm fetchTodos={fetchTodos} />

            <div className="mt-6 overflow-x-auto">
                <table className="w-full border-collapse">
                    <thead>
                        <tr className="bg-gray-100">
                            <th className="p-3 text-left">Title</th>
                            <th className="p-3 text-left">Description</th>
                            <th className="p-3 text-left">Due Date</th>
                            <th className="p-3 text-left">Priority</th>
                            <th className="p-3 text-left">Status</th>
                            <th className="p-3 text-left">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {todos.map(todo => (
                            <tr key={todo._id} className="border-b hover:bg-gray-50">
                                <td className="p-3">{todo.title}</td>
                                <td className="p-3">{todo.description}</td>
                                <td className="p-3">{new Date(todo.dueDate).toLocaleDateString()}</td>
                                <td className="p-3">
                                    <span className={`px-2 py-1 rounded capitalize ${todo.priority === 'high' ? 'bg-red-100 text-red-800' :
                                        todo.priority === 'medium' ? 'bg-yellow-100 text-yellow-800' :
                                            'bg-green-100 text-green-800'
                                        }`}>
                                        {todo.priority}
                                    </span>
                                </td>
                                <td className="p-3">
                                    <span className={`px-2 py-1 rounded capitalize ${todo.status === 'completed' ? 'bg-green-100 text-green-800' :
                                        todo.status === 'in-progress' ? 'bg-blue-100 text-blue-800' :
                                            'bg-gray-100 text-gray-800'
                                        }`}>
                                        {todo.status}
                                    </span>
                                </td>
                                <td className="p-3">
                                    <button
                                        onClick={() => handleUpdateClick(todo)}
                                        className="bg-yellow-500 text-white px-3 py-1 rounded mr-2 hover:bg-yellow-600"
                                    >
                                        Edit
                                    </button>
                                    <button
                                        onClick={() => handleDeleteClick(todo)}
                                        className="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600"
                                    >
                                        Delete
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

            {showUpdateModal && (
                <div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center">
                    <div className="bg-white p-6 rounded-lg w-full max-w-md">
                        <div className="flex justify-between items-center mb-4">
                            <h3 className="text-xl font-bold">Update Todo</h3>
                            <button onClick={() => setShowUpdateModal(false)} className="text-gray-500 hover:text-gray-700">
                                ×
                            </button>
                        </div>
                        <TodoForm
                            fetchTodos={fetchTodos}
                            todo={selectedTodo}
                            isUpdate={true}
                            closeModal={() => setShowUpdateModal(false)}
                        />
                    </div>
                </div>
            )}

            {showDeleteModal && (
                <div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center">
                    <div className="bg-white p-6 rounded-lg w-full max-w-md">
                        <h3 className="text-xl font-bold mb-4">Confirm Delete</h3>
                        <p className="mb-4">Are you sure you want to delete "{selectedTodo?.title}"?</p>
                        <div className="flex justify-end gap-2">
                            <button
                                onClick={() => setShowDeleteModal(false)}
                                className="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400"
                            >
                                Cancel
                            </button>
                            <button
                                onClick={handleDelete}
                                className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
                            >
                                Delete
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default TodoList;

Auth Protected Route example

code lover — Fri, 04 Apr 2025 04:12:00 +0000

app.jsx

import AuthProvider from "./provider/authProvider";
import Routes from "./routes";

function App() {
  return (
    <AuthProvider>
      <Routes />
    </AuthProvider>
  );
}

export default App;

provider/authProvider.jsx

import axios from "axios";
import { createContext, useContext, useEffect, useMemo, useState } from "react";

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  // State to hold the authentication token
  const [token, setToken_] = useState(localStorage.getItem("token"));

  // Function to set the authentication token
  const setToken = (newToken) => {
    setToken_(newToken);
  };

  useEffect(() => {
    if (token) {
      axios.defaults.headers.common["Authorization"] = "Bearer " + token;
      localStorage.setItem("token", token);
    } else {
      delete axios.defaults.headers.common["Authorization"];
      localStorage.removeItem("token");
    }
  }, [token]);

  // Memoized value of the authentication context
  const contextValue = useMemo(
    () => ({
      token,
      setToken,
    }),
    [token]
  );

  // Provide the authentication context to the children components
  return (
    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
  );
};

export const useAuth = () => {
  return useContext(AuthContext);
};

export default AuthProvider;

routes/ProtectedRoute.jsx

import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../provider/authProvider";

export const ProtectedRoute = () => {
  const { token } = useAuth();

  // Check if the user is authenticated
  if (!token) {
    // If not authenticated, redirect to the login page
    return <Navigate to="/login" />;
  }

  // If authenticated, render the child routes
  return <Outlet />;
};

routes/index.jsx

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { useAuth } from "../provider/authProvider";
import { ProtectedRoute } from "./ProtectedRoute";
import Login from "../pages/Login";
import Logout from "../pages/Logout";

const Routes = () => {
  const { token } = useAuth();

  // Define public routes accessible to all users
  const routesForPublic = [
    {
      path: "/service",
      element: <div>Service Page</div>,
    },
    {
      path: "/about-us",
      element: <div>About Us</div>,
    },
  ];

  // Define routes accessible only to authenticated users
  const routesForAuthenticatedOnly = [
    {
      path: "/",
      element: <ProtectedRoute />, // Wrap the component in ProtectedRoute
      children: [
        {
          path: "",
          element: <div>User Home Page</div>,
        },
        {
          path: "/profile",
          element: <div>User Profile</div>,
        },
        {
          path: "/logout",
          element: <Logout/>,
        },
      ],
    },
  ];

  // Define routes accessible only to non-authenticated users
  const routesForNotAuthenticatedOnly = [
    {
      path: "/",
      element: <div>Home Page</div>,
    },
    {
      path: "/login",
      element: <Login/>,
    },
  ];

  // Combine and conditionally include routes based on authentication status
  const router = createBrowserRouter([
    ...routesForPublic,
    ...(!token ? routesForNotAuthenticatedOnly : []),
    ...routesForAuthenticatedOnly,
  ]);

  // Provide the router configuration using RouterProvider
  return <RouterProvider router={router} />;
};

export default Routes;

pages/login.jsx

import { useNavigate } from "react-router-dom";
import { useAuth } from "../provider/authProvider";

const Login = () => {
  const { setToken } = useAuth();
  const navigate = useNavigate();

  const handleLogin = () => {
    setToken("this is a test token");
    navigate("/", { replace: true });
  };

  setTimeout(() => {
    handleLogin();
  }, 3 * 1000);

  return <>Login Page</>;
};

export default Login;

pages/Logout.jsx

import { useNavigate } from "react-router-dom";
import { useAuth } from "../provider/authProvider";

const Logout = () => {
  const { setToken } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    setToken();
    navigate("/", { replace: true });
  };

  setTimeout(() => {
    handleLogout();
  }, 3 * 1000);

  return <>Logout Page</>;
};

export default Logout;

 "dependencies": {
    "axios": "^1.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.2"
  },

https://github.com/sanjay-arya/react-auth-demo https://github.com/UtsavMavani2/react-auth-demo

Create a square radio button

code lover — Sat, 04 Nov 2023 11:57:44 +0000

To create a square radio button with a value inside, you can use HTML and CSS. Here's an example of how you can achieve this:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Style for the radio button container */
    .radio-container {
      display: inline-block;
      position: relative;
      padding-left: 30px; /* Adjust the size of the square */
    }

    /* Style for the radio button input */
    .radio-container input[type="radio"] {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    /* Style for the radio button label (the square) */
    .radio-container .radio-square {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px; /* Adjust the size of the square */
      height: 20px; /* Adjust the size of the square */
      background-color: #3498db; /* Color of the square */
      border: 1px solid #3498db; /* Border around the square */
    }

    /* Style for the value inside the square */
    .radio-container .radio-value {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white; /* Color of the text */
    }

    /* Style for the radio button label when selected */
    .radio-container input[type="radio"]:checked + .radio-square {
      background-color: #e74c3c; /* Change the color when selected */
    }
  </style>
</head>
<body>
  <label class="radio-container">
    <input type="radio" name="myRadioButton" value="A">
    <span class="radio-square">
      <span class="radio-value">A</span>
    </span>
  </label>

  <label class="radio-container">
    <input type="radio" name="myRadioButton" value="B">
    <span class="radio-square">
      <span class="radio-value">B</span>
    </span>
  </label>
</body>
</html>

In this example, we create a custom radio button using a label element that wraps an input of type "radio." We style the radio button using CSS. You can adjust the size of the square and its color as needed. The value inside the square is specified within the radio-value class. The example shows two radio buttons with values "A" and "B," but you can add more as needed.

React.js make custom Carousel with image inside Next ,Previous button and thumbnail image

code lover — Wed, 18 Oct 2023 06:52:14 +0000

To implement the nextImage, prevImage, and selectImage logic, you can use state to keep track of the current image index and update it accordingly. Here's how you can modify the Carousel component to include these functions:

import React, { useState } from 'react';
import bike from "../src/assert/images/grid-list/bike.jpg";
import breakfast from "../src/assert/images/grid-list/breakfast.jpg";
import camera from "../src/assert/images/grid-list/camera.jpg";
import honey from "../src/assert/images/grid-list/honey.jpg";
import "./Carousel.css ";

//import image
const images = [bike,breakfast,camera,honey]; 
const CarouselProviders = () => {
    const [currentImageIndex, setCurrentImageIndex] = useState(0);

    const nextImage = () => {
        setCurrentImageIndex((prevIndex) =>
          prevIndex === images.length - 1 ? 0 : prevIndex + 1
        );
      };

      const prevImage = () => {
        setCurrentImageIndex((prevIndex) =>
          prevIndex === 0 ? images.length - 1 : prevIndex - 1
        );
      };

      const selectImage = (index) => {
        setCurrentImageIndex(index);
      };

  return (
    <div>
      {/* <div className="carousel-container">
      <div className="carousel">
        <div className="carousel-image">
          <img src={images[currentImageIndex]} alt={`Image ${currentImageIndex}`} />
        </div>
        <div className="carousel-controls">
          <button onClick={prevImage}>Previous</button>
          <button onClick={nextImage}>Next</button>
        </div>
      </div>
      <div className="thumbnail-container">
        {images.map((image, index) => (
          <img
            key={index}
            src={image}
            alt={`Thumbnail ${index}`}
            className={index === currentImageIndex ? 'active' : ''}
            onClick={() => selectImage(index)}
          />
        ))}
      </div>
    </div> */}

<div className="carousel-container">
<div className="carousel">
      <div className="carousel-image">
        <img src={images[currentImageIndex]} alt={`Image ${currentImageIndex}`} />
        <div className="carousel-controls">
          <button className="prev" onClick={prevImage}>Previous</button>
          <button className="next" onClick={nextImage}>Next</button>
        </div>
      </div>
      </div>
      <div className="thumbnail-container">
        {images.map((image, index) => (
          <img
            key={index}
            src={image}
            alt={`Thumbnail ${index}`}
            className={index === currentImageIndex ? 'active' : ''}
            onClick={() => selectImage(index)}
          />
        ))}
      </div>
    </div>
    </div>
  )
}

export default CarouselProviders

In the code above, the nextImage function increments the image index, and if it reaches the end of the images array, it loops back to the first image. The prevImage function decrements the image index and, if it reaches the first image, it loops back to the last image. The selectImage function sets the current image index to the selected thumbnail index.

Make css Carouse.css file.

.carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel {
  display: flex;
  align-items: center;
  /* width: 80%; */
  position: relative;
}

.carousel-image {
  /* width: 70%; */
  display: flex;
  justify-content: center;
  position: relative;
}

.carousel-image img {
  max-width: 100%;
  transition: transform 0.3s ease-in-out;
}

.carousel-controls {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.carousel-controls button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.carousel-controls .prev {
  left: 0;
}

.carousel-controls .next {
  right: 0;
}

.thumbnail-container {
  display: flex;
  justify-content: center;
  width: 80%;
  margin-top: 20px;
}

.thumbnail-container img {
  width: 60px;
  height: 40px;
  margin: 0 10px;
  cursor: pointer;
}

.active {
  border: 2px solid #333;
}

ReactJS to fetch weather data from a weather API

code lover — Wed, 04 Oct 2023 11:52:24 +0000

ReactJS to fetch weather data from a weather API based on the user's location. In this example, we'll use the OpenWeatherMap API to get weather information. You'll need to sign up for an API key from OpenWeatherMap to use their service.

Here's a simple implementation:

Create a new React app (if you don't have one already) using create-react-app or your preferred method.
Install the necessary dependencies: You'll need to install the axios library to make API requests. You can install it using: npm install axios
Create a Weather component:

Create a new component, let's call it Weather.js. This component will handle fetching weather data and displaying it.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Weather = () => {
  const [weatherData, setWeatherData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Function to fetch weather data
    const fetchWeatherData = async () => {
      try {
        // Get user's location using the browser's geolocation API
        navigator.geolocation.getCurrentPosition(async (position) => {
          const { latitude, longitude } = position.coords;

          // Replace 'YOUR_API_KEY' with your actual OpenWeatherMap API key
          const apiKey = 'YOUR_API_KEY';
          const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`;

          const response = await axios.get(apiUrl);
          setWeatherData(response.data);
          setLoading(false);
        });
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    };

    fetchWeatherData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!weatherData) {
    return <div>No weather data available.</div>;
  }

  return (
    <div>
      <h1>Weather Information</h1>
      <p>Location: {weatherData.name}, {weatherData.sys.country}</p>
      <p>Temperature: {weatherData.main.temp}°C</p>
      <p>Weather: {weatherData.weather[0].description}</p>
    </div>
  );
};

export default Weather;

Use the Weather component:

import React from 'react';
import Weather from './Weather';

function App() {
  return (
    <div className="App">
      <Weather />
    </div>
  );
}

export default App;

Remember to replace 'YOUR_API_KEY' with your actual OpenWeatherMap API key in the Weather.js file.

This example demonstrates how to fetch weather data using the user's location. However, keep in mind that using the browser's geolocation API might prompt the user for permission to access their location.

Tab based login and signup logic in React.js

code lover — Wed, 04 Oct 2023 11:42:53 +0000

To implement a tab-based login and signup logic using React.js, you can follow these steps:

Setup Your Project: Make sure you have a React.js project set up. You can create one using Create React App or any other method you prefer .
Component Structure: Create a component structure that includes a parent component for the tabs and two child components for the login and signup forms.
State Management: Use React state to manage the active tab and the content to be displayed.
Tab Component: Create a component for the tabs that will allow users to switch between the login and signup forms.
Login and Signup Components: Create separate components for the login and signup forms. These components will render the necessary input fields and buttons.
Handling Tab Change: Implement a function to handle tab changes. This function should update the active tab in the component's state.
Conditional Rendering: Use the active tab state to conditionally render the login or signup form components.

Here's a basic example of how you could structure your code:

import React, { useState } from 'react';
import LoginForm from './LoginForm';
import SignupForm from './SignupForm';

function TabChangeLoginSignup() {
  const [activeTab, setActiveTab] = useState('login'); // Initial tab is 'login'

  const handleTabChange = (tab) => {
    setActiveTab(tab);
  };

  return (
    <div>
      <div>
        <button onClick={() => handleTabChange('login')}>Login</button>
        <button onClick={() => handleTabChange('signup')}>Signup</button>
      </div>
      <div>
        {activeTab === 'login' ? <LoginForm /> : <SignupForm />}
      </div>
    </div>
  );
}

export default TabChangeLoginSignup;

In this example, you'd need to create LoginForm.js and SignupForm.js components that render the actual forms. These components will handle form input, validation, and submission.

Remember that this is a basic example. You can enhance it by adding form validation, error handling, and styling as needed. Also, consider using a state management library like Redux or context API if your application grows more complex.

Custom Modal React.js

code lover — Wed, 04 Oct 2023 11:24:35 +0000

Exmaple-1:

To create a reusable and responsive custom modal in React.js that centers on screens with a minimum width of 768px and is positioned at the top 5% otherwise, you can follow these steps:

Set up a new React project or use an existing one.
Create a new component for your modal. You can name it CustomModal.js.

// CustomModal.js
import React from 'react';
import './CustomModal.css';

const CustomModal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div className="custom-modal">
      <div className="custom-modal-content">
        <button className="close-button" onClick={onClose}>
          Close
        </button>
        {children}
      </div>
    </div>
  );
};

export default CustomModal;

Create a CSS file for your modal styles. You can name it CustomModal.css.

/* CustomModal.css */
.custom-modal {
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  overflow: auto;
}

@media (min-width: 768px) {
  .custom-modal {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.custom-modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  max-width: 80%;
  width: 400px;
  max-height: 80%;
  overflow-y: auto;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
}

Create a parent component (e.g., App.js) where you'll use the CustomModal component.

// App.js
import React, { useState } from 'react';
import CustomModal from './CustomModal';

function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  const openModal = () => {
    setModalIsOpen(true);
  };

  const closeModal = () => {
    setModalIsOpen(false);
  };

  return (
    <div className="App">
      <button onClick={openModal}>Open Modal</button>
      <CustomModal isOpen={modalIsOpen} onClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is a reusable custom modal.</p>
      </CustomModal>
    </div>
  );
}

export default App;

Now you have a responsive and reusable custom modal that centers on screens with a minimum width of 768px and is positioned at the top 5% for smaller screens. The you can close the modal by clicking the "Close" button or pressing the Escape key.

Google Translate API in a React.js

code lover — Mon, 02 Oct 2023 04:01:05 +0000

Google Translate API in a React.js application to translate text between languages, you can follow these steps:

Set Up Google Cloud Project:

Go to the Google Cloud Console (https://console.cloud.google.com/).
Create a new project or use an existing one.
Enable the "Cloud Translation API" for your project.

Obtain API Key:

In the Cloud Console, navigate to "APIs & Services" > "Credentials."
Create a new API Key.
Keep this API Key handy as you'll need it to make API requests.

Install Dependencies:

Open your React.js project's terminal and install the necessary packages:

npm install axios

Create API Request:

Create a new file, e.g., GoogleTranslate.js, to handle API requests.
Inside this file, you can use Axios to send requests to the Google Translate API:

import axios from 'axios';

const API_KEY = 'YOUR_GOOGLE_TRANSLATE_API_KEY';
const API_URL = 'https://translation.googleapis.com/language/translate/v2';

const translateText = async (text, targetLanguage) => {
  const response = await axios.post(
    `${API_URL}?key=${API_KEY}`,
    {
      q: text,
      target: targetLanguage,
    }
  );

  return response.data.data.translations[0].translatedText;
};

export default translateText;

Integrate into React Component:

Now you can use the translateText function in your React components.
Let's assume you have an input field for the text and a dropdown to select the target language.
When the user enters text and selects a language, you can trigger the translation:

import React, { useState } from 'react';
import translateText from './GoogleTranslate';

function App() {
  const [inputText, setInputText] = useState('');
  const [targetLanguage, setTargetLanguage] = useState('es'); // Default: Spanish

  const handleTranslate = async () => {
    if (inputText) {
      const translatedText = await translateText(inputText, targetLanguage);
      // Do something with the translatedText, e.g., display it on the page.
    }
  };

  return (
    <div>
      <input
        type="text"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
      />
      <select
        value={targetLanguage}
        onChange={(e) => setTargetLanguage(e.target.value)}
      >
        <option value="es">Spanish</option>
        <option value="fr">French</option>
        {/* Add more language options */}
      </select>
      <button onClick={handleTranslate}>Translate</button>
    </div>
  );
}

export default App;

Remember to replace 'YOUR_GOOGLE_TRANSLATE_API_KEY' with your actual API Key in the GoogleTranslate.js file.

css image inside center class

code lover — Fri, 09 Jun 2023 07:26:19 +0000

span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }