From 8a48d3b6c672b28be87f2a317d2e4246603adc61 Mon Sep 17 00:00:00 2001 From: Malopieds Date: Mon, 14 Oct 2024 21:50:03 +0200 Subject: [PATCH] feat: bulk create user --- src/App.tsx | 55 ++--- src/component/Navigation/Navigation.tsx | 260 ++++++++++++------------ src/pages/admin/BulkCreateUser.tsx | 100 +++++++++ 3 files changed, 263 insertions(+), 152 deletions(-) create mode 100644 src/pages/admin/BulkCreateUser.tsx diff --git a/src/App.tsx b/src/App.tsx index c904f2b..ec01392 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,35 +9,38 @@ import Practical from "./pages/Practical"; import LoginPage from "./pages/Login"; import PageTest from "./pages/PageTest"; import CreateTp from "./pages/admin/CreateTp"; +import BulkUsers from "./pages/admin/BulkCreateUser"; function App() { - const [showNotif, setShowNotif] = useState(false); - return ( - - - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - + const [showNotif, setShowNotif] = useState(false); + return ( + + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + - {showNotif && ( -
-
- Message sent successfully. - -
-
- )} - - ); + {showNotif && ( +
+
+ Message sent successfully. + +
+
+ )} + + ); } export default App; diff --git a/src/component/Navigation/Navigation.tsx b/src/component/Navigation/Navigation.tsx index 50fd5c4..6374455 100644 --- a/src/component/Navigation/Navigation.tsx +++ b/src/component/Navigation/Navigation.tsx @@ -1,146 +1,154 @@ import React, { useEffect, useState } from "react"; import { - ChartPieIcon, - DocumentTextIcon, - EnvelopeIcon, - CommandLineIcon, - Bars3Icon, - SunIcon, - MoonIcon, + ChartPieIcon, + DocumentTextIcon, + EnvelopeIcon, + CommandLineIcon, + Bars3Icon, + SunIcon, + MoonIcon, } from "@heroicons/react/24/outline"; import { Link } from "react-router-dom"; interface NavigationProps { - children: React.ReactElement; + children: React.ReactElement; } const Navigation: React.FC = ({ - children, + children, }: NavigationProps) => { - const [isDrawerOpen, setIsDrawerOpen] = useState(false); - const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen); + const [isDrawerOpen, setIsDrawerOpen] = useState(false); + const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen); - const [theme, setTheme] = useState( - localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark", - ); + const [theme, setTheme] = useState( + localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark", + ); - // update state on toggle - const handleToggle = (e) => { - if (theme === "light") { - setTheme("dark"); - } else { - setTheme("light"); - } - }; + // update state on toggle + const handleToggle = (e) => { + if (theme === "light") { + setTheme("dark"); + } else { + setTheme("light"); + } + }; - // set theme state in localstorage on mount & also update localstorage on state change - useEffect(() => { - localStorage.setItem("theme", theme); - const localTheme = localStorage.getItem("theme"); - // add custom data-theme attribute to html tag required to update theme using DaisyUI - document.querySelector("html").setAttribute("data-theme", localTheme); - }, [theme]); + // set theme state in localstorage on mount & also update localstorage on state change + useEffect(() => { + localStorage.setItem("theme", theme); + const localTheme = localStorage.getItem("theme"); + // add custom data-theme attribute to html tag required to update theme using DaisyUI + document.querySelector("html").setAttribute("data-theme", localTheme); + }, [theme]); - return ( -
-
- -
-
-
- -
-
-
- ); + ); }; export default Navigation; diff --git a/src/pages/admin/BulkCreateUser.tsx b/src/pages/admin/BulkCreateUser.tsx new file mode 100644 index 0000000..f5131d6 --- /dev/null +++ b/src/pages/admin/BulkCreateUser.tsx @@ -0,0 +1,100 @@ +import axios from "axios"; +import { useState } from "react"; + +function BulkUsers() { + const [file, setFile] = useState(null); + const [userData, setUserData] = useState([]); + const [practical, setPractical] = useState("0"); + + const handlePracticalChange = (e) => { + setPractical(e.target.value); + } + + const handleFileChange = (event) => { + const selectedFile = event.target.files[0]; + if (selectedFile && selectedFile.type === 'text/csv') { + setFile(selectedFile); + parseCSV(selectedFile); + } else { + alert('Please upload a valid CSV file.'); + } + }; + + const parseCSV = (file) => { + const reader = new FileReader(); + reader.onload = (event) => { + const text = event.target.result; + const rows = text.split('\n').map((row) => row.split(',')); + const formattedData = rows.map((row) => ({ + name: row[0], + email: row[1], + // Add other fields as necessary + })); + setUserData(formattedData); + }; + reader.readAsText(file); + }; + + const handleSubmit = () => { + // Handle submission logic (e.g., sending data to the backend) + console.log('Submitting data:', userData.filter(user => user.name !== "")); + axios.post("/api/users/jdmi", userData.filter(user => user.name !== "")).then(res => console.log(res)); + }; + + return ( +
+

Bulk User Creation

+ + {userData.length > 0 && ( +
+ + + + + + {/* Add other headers as necessary */} + + + + {userData.map((user, index) => ( + + + + + ))} + +
NameEmail
{user.name}{user.email}
+
+ )} + +
+ + +
+ +
+ ); +} + +export default BulkUsers;