Skip to content

Commit

Permalink
Added Batch API endpoint
Browse files Browse the repository at this point in the history
  • Loading branch information
@ethanf108
ethanf108 committed Oct 17, 2023
1 parent cd81aba commit 30a2c92
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 62 deletions.
7 changes: 7 additions & 0 deletions src/API/Types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,10 @@ export interface IntroEvalsForm {
social_events: string | null,
comments: string | null,
}

export interface Batch {
name: string,
members: string[],
creator: string,
conditions: string[]
}
112 changes: 64 additions & 48 deletions src/pages/Slideshow/BatchSlide.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,79 @@
import { useState } from "react";
import { Button, Col, Container, Row } from "reactstrap"
import { Batch } from "../../API/Types";

const BatchSlide = (props: {
name: string,
names: string[],
batch: Batch,
onPassFail: (passed: boolean) => void
}) => {

const [passed, setPassed] = useState<string | null>(null);

return (
<section data-transition="slide" className="vw-100">
<Container className="d-flex flex-column vh-100 px-0 w-100">
<Row>
<Col className="text-center">
<h2>{props.name}</h2>
</Col>
</Row>
<Row>
<section data-transition="slide">
<section data-transition="slide" className="vw-100">
<Container className="d-flex flex-column vh-100 px-0 w-100">
<Row>
<Col className="text-center">
<h2>{props.batch.name}</h2>
</Col>
</Row>
<Row>
{
props.batch.members.map((f, i) =>
<Col key={i} className="py-0 m-0 col-2">
<p className="batch-name py-1 m-0">{f}</p>
</Col>
)
}
</Row>
{
props.names.map((f, i) =>
<Col key={i} className="py-0 m-0 col-2">
<p className="batch-name py-1 m-0">{f}</p>
</Col>
)
passed == null ?
<Row className="text-center m-3 py-3 align-self-center">
<Button
className="mr-3 shadow-none border-success border rounded pf-button"
onClick={_ => {
props.onPassFail(true);
setPassed("Passed");
}}
>
<h1 className="text-success px-5">Pass</h1>
</Button>
<Button
className="mr-3 shadow-none disband-gray border rounded pf-button"
onClick={_ => setPassed("Disbanded")}
>
<h1 className="px-5 disband-gray">Disband</h1>
</Button>
<Button
className="mr-3 shadow-none border-danger border rounded pf-button"
onClick={_ => {
props.onPassFail(false);
setPassed("Failed");
}}
>
<h1 className="text-danger px-5">Fail</h1>
</Button>
</Row>
:
<h3 className={`py-3 my-3 ${passed === "Passed" ? "text-success" : (passed == "Failed" ? "text-danger" : "")}`}>{passed}</h3>
}
</Row>
{
passed == null ?
<Row className="text-center m-3 py-3 align-self-center">
<Button
className="mr-3 shadow-none border-success border rounded pf-button"
onClick={_ => {
props.onPassFail(true);
setPassed("Passed");
}}
>
<h1 className="text-success px-5">Pass</h1>
</Button>
<Button
className="mr-3 shadow-none disband-gray border rounded pf-button"
onClick={_ => setPassed("Disbanded")}
>
<h1 className="px-5 disband-gray">Disband</h1>
</Button>
<Button
className="mr-3 shadow-none border-danger border rounded pf-button"
onClick={_ => {
props.onPassFail(false);
setPassed("failed");
}}
>
<h1 className="text-danger px-5">Fail</h1>
</Button>
</Row>
:
<h3 className={`py-3 my-3 ${passed === "Success" ? "text-success" : (passed == "Failed" ? "text-danger" : "")}`}>{passed}</h3>
}
</Container>
</Container>
</section>
<section data-transition="slide" className="vw-100">
<Container className="d-flex flex-column vh-100 px-0 w-100">
<Row>
<Col>
<h2>Creator: {props.batch.creator}</h2>
</Col>
</Row>
<Row className="py-3">
<Col>
{props.batch.conditions.map(c => <p>{c}</p>)}
</Col>
</Row>
</Container>
</section>
</section>
)
}
Expand Down
59 changes: 45 additions & 14 deletions src/pages/Slideshow/IntroEvalsSlideshow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ import 'reveal.js/dist/reset.css'
import 'reveal.js/dist/reveal.css'
import 'reveal.js/dist/theme/white.css'
import './index.css'
import { IntroEvalsSummary } from "../../API/Types";
import { Batch, IntroEvalsSummary } from "../../API/Types";
import { getJSON, toastError } from "../../API/API";
import { Container } from "reactstrap";
import { Col, Container, Row } from "reactstrap";
import BatchSlide from "./BatchSlide";
import NumberBox from "./NumberBox";

const IntroEvalsSlideshow = () => {

Expand All @@ -20,38 +21,68 @@ const IntroEvalsSlideshow = () => {
slides.initialize();
}

const [removedMembers, setRemovedMembers] = useState<string[]>([]);

const [frosh, setFrosh] = useState<IntroEvalsSummary[]>([]);

useEffect(() => {
getJSON<IntroEvalsSummary[]>("/api/evals/intro")
.then(setFrosh).then(initSlides)
.then(setFrosh)
.then(initSlides)
.catch(toastError("Unable to fetch Intro Evals data"));
}, [])

interface Batch {
name: string,
names: string[],
}
const [batches, setBatches] = useState<Batch[]>([]);

useEffect(() => {
getJSON<Batch[]>("/api/batch")
.then(e => setBatches(e.map(b => ({
...b,
members: b.members.map(m => m.split(",")[0]),
}))))
.catch(toastError("Unable to fetch Batches"))
}, []);

const batches: Batch[] = [];
const passFailBatch = (batch: Batch) => (pass: boolean) => {
setRemovedMembers([...removedMembers, ...batch.members])
}

return (
<div className="reveal vh-100 vw-100">
<div className="slides w-100" data-transition="slide">
{/* placeholder, because slideshow doesn't work unless at least one slide is present from the beginning*/}
<section data-transition="slide" className="vw-100">
<Container className="d-flex flex-column vh-100 px-0 d-xl-flex w-100">
<h2>Intro Evals Slideshow</h2>
{/* placeholder, because slideshow doesn't work unless at least one slide is present from the beginning*/}
</Container>
<section data-transition="slide" className="vw-100">
<Container className="d-flex flex-column vh-100 px-0 d-xl-flex w-100">
<h2>Intro Evals Slideshow</h2>
<Row className="text-center align-self-center w-100 justify-content-center py-3">
<Col className="col-3">
<NumberBox text={`${frosh.length}`} subtext="Intro Members" success={true} />
</Col>
<Col className="col-3">
<NumberBox text={`${batches.length}`} subtext="Batches" success={true} />
</Col>
</Row>
</Container>
</section>
<section data-transition="slide" className="vw-100">
<Container className="d-flex flex-column vh-100 px-0 d-xl-flex w-100">
<p>Hi :)</p>
</Container>
</section>
</section>
{
batches.map((b, i) =>
<BatchSlide key={i} name={b.name} names={b.names} onPassFail={(pass) => setFrosh(frosh.filter(f => !b.names.includes(f.name)))} />
<BatchSlide
key={i}
batch={b}
onPassFail={passFailBatch(b)}
/>
)
}

{
frosh.sort((a, b) => a.name.localeCompare(b.name)).map((f, i) =>
frosh.filter(f => !removedMembers.includes(f.name)).sort((a, b) => a.name.localeCompare(b.name)).map((f, i) =>
<Slide
key={i}
uid={f.uid}
Expand Down

0 comments on commit 30a2c92

Please sign in to comment.