Merge pull request #51 from MCA-NITW/sagargupta16/user-profile-page

Sagargupta16/user profile page
MCA-NITW · Feb 3, 2024 · dc0357f · dc0357f
2 parents 3a453a9 + 92a4a71
commit dc0357f
Show file tree

Hide file tree

Showing 19 changed files with 381 additions and 128 deletions.
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/favicon_io/about.txt b/client/public/favicon_io/about.txt
@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Leckerli One
+- Font Author: Copyright (c) 2011 Gesine Todt (www.gesine-todt.de hallo@gesine-todt.de), with Reserved Font Names "Leckerli"
+- Font Source: http://fonts.gstatic.com/s/leckerlione/v20/V8mCoQH8VCsNttEnxnGQ-1itLZxcBtItFw.ttf
+- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))
diff --git a/client/public/favicon_io/android-chrome-192x192.png b/client/public/favicon_io/android-chrome-192x192.png
diff --git a/client/public/favicon_io/android-chrome-512x512.png b/client/public/favicon_io/android-chrome-512x512.png
diff --git a/client/public/favicon_io/apple-touch-icon.png b/client/public/favicon_io/apple-touch-icon.png
diff --git a/client/public/favicon_io/favicon-16x16.png b/client/public/favicon_io/favicon-16x16.png
diff --git a/client/public/favicon_io/favicon-32x32.png b/client/public/favicon_io/favicon-32x32.png
diff --git a/client/public/favicon_io/favicon.ico b/client/public/favicon_io/favicon.ico
diff --git a/client/public/favicon_io/site.webmanifest b/client/public/favicon_io/site.webmanifest
@@ -0,0 +1,19 @@
+{
+	"name": "",
+	"short_name": "",
+	"icons": [
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone"
+}
diff --git a/client/public/index.html b/client/public/index.html
@@ -2,11 +2,14 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
-		<meta name=" MCA Placement" content="MCA Placement" />
-		<title>MCA Placement</title>
+		<meta name="Placemento" content="MCA Placement Portal" />
+		<link rel="apple-touch-icon" sizes="180x180" href="./favicon_io/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="./favicon_io/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="./favicon_io/favicon-16x16.png" />
+		<link rel="manifest" href="./favicon_io/site.webmanifest" />
+		<title style="font-family: 'Comic Sans MS', sans-serif">Placemento</title>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/client/src/components/Company/CompanyTable.jsx b/client/src/components/Company/CompanyTable.jsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { MdDelete, MdEdit } from 'react-icons/md';
 import { toast } from 'react-toastify';
@@ -23,9 +23,19 @@ const CompanyTable = () => {
 	const fetchData = useCallback(async () => {
 		try {
 			const response = await getCompanies();
+			response.data.forEach((company) => {
+				company.id = company._id;
+				company.selectedStudents = company.selectedStudentsRollNo.length;
+				company.cutoff_pg = formatCutoff(company.cutoffs.pg);
+				company.cutoff_ug = formatCutoff(company.cutoffs.ug);
+				company.cutoff_12 = formatCutoff(company.cutoffs.twelth);
+				company.cutoff_10 = formatCutoff(company.cutoffs.tenth);
+				company.ctcBase = company.ctcBreakup.base;
+			});
 			setCompanies(response.data);
 		} catch (error) {
 			console.error('Error fetching companies:', error);
+			toast.error(<ToastContent res="error" messages={['Error fetching companies.']} />);
 		}
 	}, []);
 
@@ -39,7 +49,7 @@ const CompanyTable = () => {
 			await deleteCompany(companyToDelete.id);
 			toast.success(<ToastContent res="success" messages={[`Company ${companyToDelete.name} deleted successfully.`]} />);
 			setIsModalOpen(false);
-			fetchData();
+			setCompanies((prevCompanies) => prevCompanies.filter((company) => company.id !== companyToDelete.id));
 		} catch (error) {
 			console.error('Error deleting company:', error);
 			toast.error(<ToastContent res="error" messages={[`Error deleting company ${companyToDelete.name}.`]} />);
@@ -75,76 +85,78 @@ const CompanyTable = () => {
 
 	const formatCutoff = (cutoff) => (cutoff.cgpa ? `${cutoff.cgpa} CGPA` : `${cutoff.percentage}%`);
 
-	const buttonRenderer = (params, className, icon, onClick) => {
-		return (
-			<button className={className} onClick={() => onClick(params.data)}>
-				{icon}
-			</button>
-		);
-	};
-
-	const deleteButtonRenderer = (params) => {
-		return buttonRenderer(params, 'btn--icon--del', <MdDelete />, handleDeleteButtonClick);
-	};
-
-	const editButtonRenderer = (params) => {
-		return buttonRenderer(params, 'btn--icon--edit', <MdEdit />, handleEditButtonClick);
-	};
+	const buttonRenderer = useMemo(
+		() => (params, className, icon, onClick) => {
+			return (
+				<button className={className} onClick={() => onClick(params.data)}>
+					{icon}
+				</button>
+			);
+		},
+		[]
+	);
 
-	const actionsColumn = generateNestedColumn('Actions', [
-		generateColumn(null, 'Delete', 55, 'left', false, false, deleteButtonRenderer),
-		generateColumn(null, 'Edit', 55, 'left', false, false, editButtonRenderer)
-	]);
-
-	const columnDefinitions = [
-		...(user.role === 'admin' || user.role === 'placementCoordinator' ? [actionsColumn] : []),
-		generateColumn('name', 'Name', 150, 'left'),
-		generateColumn('status', 'Status', 100, null, false),
-		generateColumn('typeOfOffer', 'Offer', 90),
-		generateColumn('profile', 'Profile', 150),
-		generateColumn('profileCategory', 'Category', 100),
-		generateColumn('interviewShortlist', 'Shortlists', 120),
-		generateColumn('selectedStudents', 'Selects', 100),
-		generateColumn('dateOfOffer', 'Offer Date', 125, null, true, false, (params) =>
-			params.value ? new Date(params.value).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' }) : ''
-		),
-		generateColumn('locations', 'Locations', 130, null, false, true),
-		generateNestedColumn('CTC (LPA)', [
-			generateColumn('ctc', 'CTC', 80, null, true, false, (params) => params.value.toFixed(2)),
-			generateColumn('ctcBase', 'Base', 80, null, true, false, (params) => params.value.toFixed(2))
-		]),
-		generateNestedColumn('Cutoffs', [
-			generateColumn('cutoff_pg', 'PG', 80, null, false, false),
-			generateColumn('cutoff_ug', 'UG', 80, null, false, false),
-			generateColumn('cutoff_12', '12', 80, null, false, false),
-			generateColumn('cutoff_10', '10', 80, null, false, false)
-		]),
-		generateColumn('bond', 'Bond', 60, null, false, false)
-	];
-
-	const mapCompanyData = (company) => ({
-		...company,
-		id: company._id,
-		selectedStudents: company.selectedStudentsRollNo.length,
-		cutoff_pg: formatCutoff(company.cutoffs.pg),
-		cutoff_ug: formatCutoff(company.cutoffs.ug),
-		cutoff_12: formatCutoff(company.cutoffs.twelth),
-		cutoff_10: formatCutoff(company.cutoffs.tenth),
-		ctcBase: company.ctcBreakup.base
-	});
+	const actionsColumn = useMemo(
+		() =>
+			generateNestedColumn('Actions', [
+				generateColumn(null, 'Delete', 55, 'left', false, false, (params) =>
+					buttonRenderer(params, 'btn--icon--del', <MdDelete />, handleDeleteButtonClick)
+				),
+				generateColumn(null, 'Edit', 55, 'left', false, false, (params) =>
+					buttonRenderer(params, 'btn--icon--edit', <MdEdit />, handleEditButtonClick)
+				)
+			]),
+		[buttonRenderer]
+	);
 
-	const rowData = companies.map(mapCompanyData);
+	const columnDefinitions = useMemo(
+		() => [
+			...(user.role === 'admin' || user.role === 'placementCoordinator' ? [actionsColumn] : []),
+			generateColumn('name', 'Name', 150, 'left'),
+			generateColumn('status', 'Status', 100, null, false),
+			generateColumn('typeOfOffer', 'Offer', 90),
+			generateColumn('profile', 'Profile', 150),
+			generateColumn('profileCategory', 'Category', 100),
+			generateColumn('interviewShortlist', 'Shortlists', 120),
+			generateColumn('selectedStudents', 'Selects', 100),
+			generateColumn('dateOfOffer', 'Offer Date', 125, null, true, false, (params) =>
+				params.value
+					? new Date(params.value).toLocaleDateString('en-US', {
+							day: 'numeric',
+							month: 'short',
+							year: 'numeric'
+						})
+					: ''
+			),
+			generateColumn('locations', 'Locations', 130, null, false, true),
+			generateNestedColumn('CTC (LPA)', [
+				generateColumn('ctc', 'CTC', 80, null, true, false, (params) => params.value.toFixed(2)),
+				generateColumn('ctcBase', 'Base', 80, null, true, false, (params) => params.value.toFixed(2))
+			]),
+			generateNestedColumn('Cutoffs', [
+				generateColumn('cutoff_pg', 'PG', 80, null, false, false),
+				generateColumn('cutoff_ug', 'UG', 80, null, false, false),
+				generateColumn('cutoff_12', '12', 80, null, false, false),
+				generateColumn('cutoff_10', '10', 80, null, false, false)
+			]),
+			generateColumn('bond', 'Bond', 60, null, false, false)
+		],
+		[actionsColumn, user.role]
+	);
 
 	const handleAddCompanyClick = () => {
 		setIsAdd(true);
 		setCompanyData(null);
 		setIsFormOpen(true);
 	};
 
-	const handleCloseForm = (fetch) => {
-		setIsFormOpen(false);
-		if (fetch) fetchData();
-	};
+	const handleCloseForm = useCallback(
+		(fetch) => {
+			setIsFormOpen(false);
+			if (fetch) fetchData();
+		},
+		[fetchData]
+	);
 
 	const renderCompanyForm = () => {
 		if (!isFormOpen) return null;
@@ -162,7 +174,7 @@ const CompanyTable = () => {
 				</button>
 			)}
 			{renderCompanyForm()}
-			<AgGridTable rowData={rowData} columnDefinitions={columnDefinitions} fetchData={fetchData} />
+			<AgGridTable rowData={companies} columnDefinitions={columnDefinitions} fetchData={fetchData} />
 			<Modal
 				isOpen={isModalOpen}
 				onClose={closeModal}

diff --git a/client/src/components/NavBar/NavBar.jsx b/client/src/components/NavBar/NavBar.jsx
@@ -105,7 +105,7 @@ const NavBar = () => {
 		<>
 			<nav className={classes.nav}>
 				<NavLink to="/" aria-label="Home" className={classes['nav__logo']}>
-					<span>MCA</span>
+					<span>Placemento</span>
 				</NavLink>
 				<div className={classes['nav__list']}>
 					{navItems.map((item) => (

diff --git a/client/src/components/Student/StudentTable.jsx b/client/src/components/Student/StudentTable.jsx
@@ -134,7 +134,10 @@ const StudentTable = () => {
 	};
 
 	const companyDropdownRenderer = (params) => {
-		const options = companies.map((company) => ({ value: company.id, label: company.name }));
+		const options = companies.map((company) => ({
+			value: company.id,
+			label: company.name
+		}));
 		options.unshift({ value: 'np', label: 'Not Placed' });
 		return dropdownRenderer(params, options, updateStudentCompany, params.data.placedAt?.companyId);
 	};

diff --git a/client/src/index.css b/client/src/index.css
@@ -1,12 +1,11 @@
-@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:wght@200;300;400;500;600&family=Roboto&display=swap');
-
 * {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	outline: 0;
 	box-sizing: border-box;
 	text-decoration: none;
+	font-family: 'Comic Sans MS', 'Comic Sans', cursive;
 }
 
 :root {
@@ -19,14 +18,22 @@
 
 	--color-bg: #1e1e26;
 	--color-bg-variant: #2c2c33;
+	--color-bg-variant-2: #3a3a40;
 	--color-primary: #ffcc66;
 	--color-primary-variant: rgba(255, 204, 102, 0.5);
+	--color-danger: #ff6666;
+	--color-danger-variant: rgba(255, 102, 102, 0.5);
+	--color-success: #66ff66;
+	--color-success-variant: rgba(102, 255, 102, 0.5);
+	--color-warning: #ffcc66;
+	--color-warning-variant: rgba(255, 204, 102, 0.5);
+	--color-info: #66ccff;
+	--color-info-variant: rgba(102, 204, 255, 0.5);
 }
 
 html {
 	scroll-behavior: smooth;
 	font-size: 90%;
-	font-family: 'Comic Sans MS', 'Comic Sans', cursive;
 	color: var(--color-white);
 	line-height: 1.7;
 	background: var(--color-bg);