Org dash

src/App.tsx

@@ -16,6 +16,7 @@ import StudentDashboard from "./pages/StudentDashboard";
 import RegistrationForm from "./pages/RegistrationForm";
 import { Header } from "./components/Header";
 import Footer from "./components/Footer";
+import OrgDash from "./pages/OrgDash";
 
 function App() {
   return (
@@ -54,6 +55,10 @@ function App() {
               path={ROUTER_PATHS.MENTOR_DASHBOARD}
               element={<MentorDashboard />}
             />
+            <Route 
+              path={ROUTER_PATHS.ORGANISOR_DASHBOARD}
+              element={<OrgDash/>}
+              />
             <Route
               path={ROUTER_PATHS.PASTPROGRAMS}
               element={<PastProgramsPage />}

src/components/ListItem.tsx

@@ -0,0 +1,81 @@
+import { useState } from "react"
+import { Project } from "../util/types"
+import OrgDashModal from "./OrgDashModal"
+
+function ListItem({ item } : {item : Project}) {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [isReject, setIsReject] = useState<boolean>(false);
+    const [actProj, setACtProject] = useState<Project>({} as Project);
+
+    const closeModal = () => setIsOpen(false);
+    const openModal = (isReject: boolean) => {
+        setIsOpen(true);
+        setIsReject(isReject);
+        setACtProject(item);
+    }
+    return (
+        <div className="ls-comp">
+            <h3 className="ls-comp-name">{item.name}</h3>
+            <div className="ls-comp-tags">
+                {
+                    item.tags.map((ele) => (
+                        <div className="ls-comp-tag">
+                            {ele}
+                        </div>
+                    ))
+                }
+            </div>
+            <p className="ls-comp-desc">{item.description}</p>
+            <div className="ls-comp-prs">Total Pulls: {item.pull_count}</div>
+            <div className="ls-comp-mentor">
+                Mentor: 
+                <a href={'https://github.com/' + item.mentor.username}>
+                    {'@'+item.mentor.username}
+                </a>
+            </div>
+            <div className="ls-comp-mentor-b">
+                Secondary Mentor: 
+                <a href={'https://github.com/' + item.secondary_mentor.username}>
+                    {'@'+item.secondary_mentor.name}
+                </a>
+            </div>
+            <div className="ls-comp-pull">{item.pull_count}</div>
+            <div className="ls-comp-info-btn">
+                <a className="ls-btn-repo ls-btn" href={item.repo_link}>View Project</a>
+                <a className="ls-btn-readme ls-btn" href={item.readme_link}>ReadMe</a>
+                <a className="ls-btn-comm ls-btn" href={item.comm_channel}>Join Channel</a>
+            </div>
+            <div className="ls-status-mark">
+                {item.status_remark && (
+                    item.project_status ? 
+                    <div className="ls-status-accept">Accepted</div> :
+                    <div className="ls-status-reject">Rejected</div>
+                )}
+            </div>
+            <div className="ls-compo-action-btn">
+                {!item.status_remark ? (
+                    <>
+                        <button className="approve-btn" onClick={() => openModal(false)}>Accept</button>
+                        <button className="reject-btn" onClick={() => openModal(true)}>Reject</button>
+                    </>
+                ) : (
+                    item.project_status ? (
+                        <>
+                            <button className="review-btn"  onClick={() => openModal(false)}>Review</button>
+                            <button className="reject-btn" onClick={() => openModal(true)}>Reject</button>
+                        </>
+                    ) : (
+                        <>
+                            <button className="approve-btn" onClick={() => openModal(false)}>Accept</button>
+                            <button className="review-btn" onClick={() => openModal(true)}>Review</button>
+                        </>
+                    )
+                )}
+
+            </div>
+            {isOpen && <OrgDashModal isReject={isReject} onClose={closeModal} project={actProj}/>}
+        </div>
+    )
+}
+
+export default ListItem

src/components/OrgDashModal.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import "../styles/OrgDashModal.css"
+import { BACKEND_URL } from "../util/constants";
+import { useAuthContext } from "../util/auth";
+import { Project } from "../util/types";
+
+function OrgDashModal({ isReject, onClose, project } : {isReject : boolean, onClose : () => void, project: Project}) {
+    const authContext = useAuthContext();
+    const handleWrapperClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+
+    const [review, setReview] = useState<string>(project.status_remark!);
+
+    const onBtnClick = () => {
+        fetch(`${BACKEND_URL}/project/`, {
+            method: "PUT",
+            headers: {
+				'Bearer' : `${authContext.jwt} `
+			},
+            body: JSON.stringify({
+                ...project,
+                "project_status": !isReject,
+                "status_remark": review,
+            })
+        }).then((resp) => {
+            if(resp.ok){
+                project.project_status = !isReject;
+                project.status_remark = review;
+                onClose();
+            }
+        })
+    }
+    return (
+        <div className="modal-main" onClick={handleWrapperClick}>
+            <div className="modal-wrapper">
+                <div className="modal-content">
+                    <div className="modal-title">
+                        Why do you want to {isReject ? "reject" : "approve"} the project?
+                    </div>
+                    <div className="modal-inp">
+                        <textarea className="modal-textarea" placeholder="Enter your review..." onChange={(e) => setReview(e.target.value)}>
+                            {project.status_remark}
+                        </textarea>
+                    </div>
+                    <div className="modal-btn">
+                        <button className="modal-cancel" onClick={onClose}>Cancel</button>
+                        {isReject ? <button className="reject-btn" onClick={onBtnClick}>Reject</button> : <button className="approve-btn" onClick={onBtnClick}>Approve</button>}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default OrgDashModal

src/pages/MentorDashboard.tsx

@@ -34,7 +34,7 @@ function MentorDashboard() {
       navigate(ROUTER_PATHS.STUDENT_DASHBOARD);
     }
 
-    if (authContext.userData.type !== "mentor") {
+    if (authContext.userData.type !== "mentor" && authContext.userData.type !== "organiser") {
       navigate(ROUTER_PATHS.HOME);
     }
   }, [authContext]);

src/pages/OrgDash.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react'
+import ListItem from '../components/ListItem'
+import { Project } from '../util/types'
+import { BACKEND_URL, GH_OAUTH_ORG_URL, PAGENATION_LEN, ROUTER_PATHS } from '../util/constants'
+import '../styles/OrgDash.css'
+import { useAuthContext } from '../util/auth'
+import { useNavigate } from 'react-router-dom'
+
+function OrgDash() {
+	const navigate = useNavigate();
+	const authContext = useAuthContext();
+	const [allData, setAllData] = useState<Project[]>([]);
+	const [filterData, setFilterData] = useState<Project[]>([]);
+	const [currPage, setCurrPage] = useState<Project[]>([]);
+	const [pgNo, setPgNo] = useState<number>(0);
+
+	useEffect(() => {
+		if (!authContext.isAuthenticated) {
+		  navigate(ROUTER_PATHS.HOME);
+		}
+
+		if (authContext.userData.type === "student") {
+		  navigate(ROUTER_PATHS.STUDENT_DASHBOARD);
+		}
+
+		console.log(authContext.userData.type)
+
+		if(authContext.userData.type !== "organiser"){
+			document.location = GH_OAUTH_ORG_URL;
+		}
+	  }, [authContext]);
+
+	  useEffect(() => {
+		fetch(`${BACKEND_URL}/project/all`, {
+			method: "GET",
+			headers: {
+				'Bearer' : `${authContext.jwt} `
+			}
+		}).then((res) => {
+			if(res.ok){
+				res.json().then((res:Project[]) => {
+					setAllData(res);
+					setFilterData(res.filter((item) => !item.status_remark));
+					setPgNo(1);
+				});
+				console.log(allData.length)
+			}
+		});
+	  }, []);
+
+	useEffect(() => {
+		const startidx = (pgNo - 1) * PAGENATION_LEN;
+		const endidx = Math.min(startidx + PAGENATION_LEN, filterData.length);
+		setCurrPage(filterData.slice(startidx, endidx));
+	}, [pgNo, filterData]);
+
+	const showAll = () => {
+		const fItems = allData.filter((item) => !item.status_remark);
+		setFilterData(fItems);
+		setPgNo(1);
+	}
+
+	const showAccept = () => {
+		const fItems = allData.filter((item) => item.status_remark && item.project_status);
+		setFilterData(fItems);
+		setPgNo(1);
+	}
+
+	const showReject = () => {
+		const fItems = allData.filter((item) => item.status_remark && !item.project_status);
+		setFilterData(fItems);
+		setPgNo(1);
+	}
+
+	const nextPage = () => {
+		if(pgNo < filterData.length / PAGENATION_LEN) setPgNo(pgNo + 1);
+	}
+
+	const prevPage = () => {
+		if(pgNo >= 2) setPgNo(pgNo - 1);
+	}
+	return (
+		<div className='org-dash-main'>
+			<div className="org-dash-left">
+				<div className="org-dash-title">Mentor Projects</div>
+				<div className="org-dash-type-btn">
+					<div className="org-dash-btn-all">
+						<button onClick={() => showAll()}>Review</button>
+					</div>
+					<div className="org-dash-btn-accept">
+						<button onClick={() => showAccept()} className='approve-btn'>Approved</button>
+					</div>
+					<div className="org-dash-btn-rej">
+						<button onClick={() => showReject()} className='reject-btn'>Rejected</button>
+					</div>
+				</div>
+				<div className="org-dash-view">
+					<div className="org-dash-table-wrap">
+						<div className="org-dash-table">
+								{currPage.map((value) => (
+									<ListItem item={value}/>
+								))}
+						</div>
+					</div>
+					<div className="org-dash-table-nav">
+						<button className='org-dash-table-back' onClick={() => prevPage()}>&lt;</button>
+						<div className="org-dash-table-info">
+							Showing {(pgNo - 1) * PAGENATION_LEN + 1} - {Math.min(pgNo * PAGENATION_LEN, filterData.length)} of {filterData.length}
+						</div>
+						<button className='org-dash-table-next' onClick={() => nextPage()}>&gt;</button>
+					</div>
+				</div>
+			</div>
+		</div>
+  	)
+}
+
+export default OrgDash

src/pages/ProjectForm.tsx

@@ -33,7 +33,7 @@ function ProjectForm(props: { isEditing?: boolean }) {
       navigate(ROUTER_PATHS.HOME);
     } else if (!authContext.isRegistered) {
       navigate(authContext.formLink);
-    } else if (authContext.userData.type !== "mentor") {
+    } else if (authContext.userData.type !== "mentor" && authContext.userData.type != "organiser") {
       navigate(authContext.dashboardLink);
     }
   });