done CSV dload and edit feature pending

package.json

@@ -9,8 +9,10 @@
  "@types/jest": "^27.5.2",
  "@types/node": "^16.18.11",
  "@types/react": "^18.0.26",
+ "@types/react-csv": "^1.1.3",
  "@types/react-dom": "^18.0.10",
  "react": "^18.2.0",
+ "react-csv": "^2.2.2",
  "react-dom": "^18.2.0",
  "react-scripts": "5.0.1",
  "typescript": "^4.9.4",

src/App.tsx

@@ -4,7 +4,8 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 function App() {
  return (
- <div className="w-screen h-screen flex justify-center items-center">
+ <div className="w-screen h-screen flex justify-center items-center flex-col">
+ <h1 className="text-2xl mt-[-180px] p-3">User Details</h1>
  <BrowserRouter>
  <Routes>
  <Route path="/" element={<Users />} />

src/content/Adduser.tsx

@@ -5,10 +5,14 @@ const Adduser = () => {
  const { setUserData, userData } = useContext(Appcontext);
  const [name, setName] = useState<string>("");
  const [mail, setMail] = useState<string>("");
+ const [role, setRole] = useState<string>("");
 
  const handleUser = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
- setUserData([...userData, { name, email: mail }]);
+ setUserData([
+ ...userData,
+ { name, email: mail, id: userData.length + 1, role },
+ ]);
  console.log(name, mail, userData.length);
  console.log("submited");
  };
@@ -26,13 +30,23 @@ const Adduser = () => {
  placeholder="Name here"
  className="border w-[300px] p-3 rounded-md"
  onChange={(e) => setName(e.target.value)}
+ required
  />
 
  <input
  type="email"
  placeholder="Email here"
  className="border w-[300px] p-3 rounded-md"
  onChange={(e) => setMail(e.target.value)}
+ required
+ />
+
+ <input
+ type="text"
+ placeholder="Role here"
+ className="border w-[300px] p-3 rounded-md"
+ onChange={(e) => setRole(e.target.value)}
+ required
  />
 
  <button className="border-2 p-2 w-[150px] rounded-md">Submit</button>

src/content/Users.tsx

@@ -2,22 +2,32 @@ import React, { FC, useState, useEffect } from "react";
 import Page from "./Page";
 import Appcontext from "../Context";
 import Adduser from "./Adduser";
+import { CSVLink } from "react-csv";
 
 export interface userDataInfo {
  name: string;
  email: string;
+ id: number;
+ role: string;
 }
 
 const Users: FC = () => {
  const [userData, setUserData] = useState<userDataInfo[]>([]);
  const [pageCount, setPageCount] = useState<number>(1);
+ const [searchValue, setSearchValue] = useState<string>("");
 
  const fetchData = async () => {
  const fetching = await fetch("https://jsonplaceholder.typicode.com/users");
  const res = await fetching.json();
  setUserData(res);
- // setUserData([...res, { name: "shri", email: "sasasasa" }]);
- console.log(res.length);
+ };
+
+ const deleteUser = (ids: number) => {
+ setUserData(userData.filter((data) => data.id !== ids));
+ };
+
+ const editUserData = (ids: number) => {
+ console.log("editing");
  };
 
  useEffect(() => {
@@ -28,12 +38,7 @@ const Users: FC = () => {
 
  return (
  <Appcontext.Provider
- value={{
- userData,
- setUserData,
- pageCount,
- setPageCount,
- }}
+ value={{ userData, setUserData, pageCount, setPageCount }}
  >
  <main className="w-[60%] h-[70vh] border-2 rounded-md">
  {/* Top content */}
@@ -45,19 +50,26 @@ const Users: FC = () => {
  {userData.length} users
  </h2>
  </div>
- <h1>some content here ---------</h1>
+ <h1>some content here --------- </h1>
  </div>
 
+ {/* search feature */}
+ <input
+ type="search"
+ className="border p-2 rounded-md focus:outline-dashed "
+ onChange={(e) => setSearchValue(e.target.value)}
+ placeholder="search Users...."
+ />
+
  <div className="flex justify-center items-center gap-5">
- <button className="p-2 border-2 rounded-md">Download CSV</button>
- <button
- className="p-2 border-2 rounded-md"
- // onClick={() => inputFocus.current.focus()}
- >
- + Add User
- </button>
+ <CSVLink data={userData}>
+ <button className="p-2 border-2 rounded-md"> Download CSV</button>
+ </CSVLink>
+
+ <button className="p-2 border-2 rounded-md">+ Add User</button>
  </div>
  </section>
+
  {/* Middle content */}
  <section className="flex flex-col w-[100%] h-[550px] border-b-2 overflow-hidden">
  {/* topic / nav */}
@@ -72,8 +84,20 @@ const Users: FC = () => {
  {/* user contents */}
  {userData.length > 0 &&
  userData
+ .filter((user: userDataInfo) => {
+ if (searchValue === "") {
+ return user;
+ } else if (
+ searchValue
+ .toLowerCase()
+ .replaceAll(" ", "")
+ .includes(user.name.toLowerCase().replaceAll(" ", ""))
+ ) {
+ return user;
+ }
+ })
  .slice(pageCount * 5 - 5, pageCount * 5)
- .map((data: any, idx: number) => {
+ .map((data: userDataInfo, idx: number) => {
  return (
  <div
  className="h-[100px] border flex w-[100%] justify-between items-center p-4"
@@ -85,16 +109,19 @@ const Users: FC = () => {
  </div>
 
  <h1>active</h1>
- <h1>dev</h1>
+ <h1>{data.role ? data.role : "developer"}</h1>
  <h1>7.30pm</h1>
  <div className="flex gap-4">
- <button>del</button>
- <button>edit</button>
+ <button onClick={() => deleteUser(data.id)}>del</button>
+ <button onClick={() => editUserData(data.id)}>
+ edit
+ </button>
  </div>
  </div>
  );
  })}
  </section>
+
  {/* Bottom content */}
  <Page />