Merge pull request #56 from MCA-NITW/Expeirence-Page

Expeirence page

client/src/App.jsx

@@ -4,6 +4,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import NavBar from './components/NavBar/NavBar';
 import Authentication from './pages/Auth/Authentication';
 import Companies from './pages/Companies/Companies';
+import Experience from './pages/Experience/Experience';
 import Home from './pages/Home/Home';
 import Profile from './pages/Profile/Profile';
 import Stats from './pages/Stats/Stats';
@@ -56,6 +57,11 @@ const App = () => {
 					element: <Companies />,
 					loader: checkAuthAction
 				},
+				{
+					path: 'experience',
+					element: <Experience />,
+					loader: checkAuthAction
+				},
 				{
 					path: 'profile',
 					element: <Profile />,

client/src/api/experienceApi.jsx

@@ -0,0 +1,17 @@
+import axiosInstance from './axiosInstance';
+
+export const addExperience = async (experienceData) => axiosInstance.post('/experiences/add', experienceData);
+
+export const getAllExperience = async () => axiosInstance.get('/experiences/view');
+
+export const getExperienceByTag = async (tag) => axiosInstance.get(`/experiences/view/${tag}`);
+
+export const getExperienceByUser = async (id) => axiosInstance.get(`/experiences/user/${id}`);
+
+export const addComment = async (commentData) => axiosInstance.post('/experiences/comment/add', commentData);
+
+export const updateExperience = async (id, experienceData) => axiosInstance.put(`/experiences/update/${id}`, experienceData);
+
+export const deleteExperience = async (id) => axiosInstance.delete(`/experiences/delete/${id}`);
+
+export const deleteComment = async (id, commentId) => axiosInstance.delete(`/experiences/comment/delete/${id}/${commentId}`);

client/src/components/Company/CompanyTable.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { MdDelete, MdEdit } from 'react-icons/md';
 import { toast } from 'react-toastify';
@@ -15,11 +15,19 @@ const CompanyTable = () => {
 	const [companyData, setCompanyData] = useState(null);
 	const [isFormOpen, setIsFormOpen] = useState(false);
 	const [isAdd, setIsAdd] = useState(false);
-	const user = getUser();
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [companyToDelete, setCompanyToDelete] = useState(null);
 	const closeModal = () => setIsModalOpen(false);
 
+	const [user, setUser] = useState({});
+	useEffect(() => {
+		const fetchUser = async () => {
+			const user = await getUser();
+			setUser(user);
+		};
+		fetchUser();
+	}, []);
+
 	const fetchData = useCallback(async () => {
 		try {
 			const response = await getCompanies();

client/src/components/NavBar/NavBar.jsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { BiStats } from 'react-icons/bi';
 import { CgProfile } from 'react-icons/cg';
 import { FaHome, FaSignInAlt, FaUsers } from 'react-icons/fa';
+import { GiStarSwirl } from 'react-icons/gi';
 import { GoOrganization } from 'react-icons/go';
 import { PiSignOutBold } from 'react-icons/pi';
 import { RiTeamFill } from 'react-icons/ri';
@@ -67,6 +68,11 @@ const NavBar = () => {
 					label: 'Companies',
 					icon: <GoOrganization />
 				},
+				{
+					to: 'experience',
+					label: 'Experience',
+					icon: <GiStarSwirl />
+				},
 				{
 					to: 'profile',
 					label: 'Profile',

client/src/components/Student/StudentTable.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { GrValidate } from 'react-icons/gr';
 import { MdDelete } from 'react-icons/md';
 import { toast } from 'react-toastify';
@@ -23,7 +23,15 @@ const StudentTable = () => {
 	const [selectedStudent, setSelectedStudent] = useState(null);
 	const [selectedStudentDelete, setSelectedStudentDelete] = useState(null);
 	const [companies, setCompanies] = useState([]);
-	const user = getUser();
+	const [user, setUser] = useState({});
+
+	useEffect(() => {
+		const fetchUser = async () => {
+			const user = await getUser();
+			setUser(user);
+		};
+		fetchUser();
+	}, []);
 
 	const fetchData = useCallback(async () => {
 		try {
@@ -232,6 +240,7 @@ const StudentTable = () => {
 		generateColumn('role', 'Role', 110, 'left', false, false, user.role === 'admin' ? roleDropdownRenderer : roleFormatter),
 		generateColumn('name', 'Name', 130, 'left'),
 		generateColumn('rollNo', 'Roll No', 100),
+		generateColumn('batch', 'Batch', 90, null, false, false),
 		generateColumn('email', 'Email', 225),
 		placementColumn,
 		...(user.role === 'admin' || user.role === 'placementCoordinator' ? academicColumn : [])

client/src/pages/Experience/Experience.css

@@ -0,0 +1,174 @@
+.modal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.3);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 15;
+	backdrop-filter: blur(1.5px);
+}
+
+.modal-dialog {
+	width: 100%;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.experience-form {
+	display: flex;
+	flex-direction: column;
+	gap: 7.5px;
+	text-align: center;
+	width: 100%;
+	max-width: 900px;
+	background: var(--color-bg);
+	padding: 20px;
+	border-radius: 1rem;
+	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+	border: 1px solid var(--color-primary);
+}
+
+.experience-form-group {
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	width: 100%;
+	text-align: left;
+	padding: 10px;
+	border-radius: 5px;
+	background: var(--color-bg-variant);
+}
+
+.experience-form-group label {
+	font-size: 1rem;
+	width: 100%;
+}
+
+.experience-form-group input,
+.experience-form-group textarea {
+	width: 100%;
+	padding: 10px;
+	font-size: 1.2rem;
+	border: 1px solid var(--color-primary);
+	border-radius: 5px;
+	background: var(--color-bg);
+	color: var(--color-primary);
+}
+
+.experience-form-group textarea {
+	resize: vertical;
+	min-height: 300px;
+}
+
+.modal-buttons {
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+	margin-top: 10px;
+}
+
+.experience-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	background: var(--color-bg);
+	padding: 10px;
+	border-radius: 1rem;
+	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+	border: 5px solid var(--color-bg-variant);
+	margin: 20px 0 0 0;
+	overflow-y: auto;
+	gap: 10px;
+	align-items: center;
+	height: 100%;
+}
+
+.experience-item {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 10px;
+	border-radius: 1rem;
+	background: var(--color-bg-variant);
+	width: 100%;
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+	border: 5px solid var(--color-bg);
+}
+
+.experience-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.experience-header h3 {
+	font-size: 1.1rem;
+}
+
+.experience-header div {
+	display: flex;
+	gap: 10px;
+	color: var(--color-light);
+}
+
+.experience-item button {
+	background: transparent;
+	border: none;
+	color: var(--color-white);
+	font-size: 1.3rem;
+	cursor: pointer;
+	text-align: left;
+}
+
+.experience-item button:hover {
+	color: var(--color-primary);
+}
+
+.experience-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+}
+.modal {
+	padding: 20px;
+}
+.view-modal-dialog {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	max-width: 900px;
+	background: var(--color-bg);
+	border-radius: 1rem;
+	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+	height: 100%;
+	border: 5px solid var(--color-bg);
+}
+
+.experience-view {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	width: 100%;
+	padding: 20px;
+	background: var(--color-bg-variant);
+	height: 100%;
+	overflow-y: scroll;
+	border-radius: 1rem;
+}
+
+.experience-content {
+	overflow-y: scroll;
+	background: var(--color-bg);
+	padding: 20px;
+	border-radius: 1rem;
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+	border: 5px solid var(--color-bg-variant);
+}