Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 14x 14x 14x 14x 14x 14x 14x 14x 14x 2x 14x 2x 2x 1x 14x 3x 3x 1x 5x 3x 2x | import React, { useState } from "react";
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
import { Accordion, Form, Button } from "react-bootstrap";
export default function CSVDownloadsPage() {
const [quarter, setQuarter] = useState("");
const [subjectArea, setSubjectArea] = useState("");
const normalizedQuarter = quarter.trim();
const normalizedSubjectArea = subjectArea.trim().toUpperCase();
const isValidQuarter = /^\d{5}$/.test(normalizedQuarter);
const isValidSubjectArea = normalizedSubjectArea.length > 0;
const byQuarterUrl = `/api/courses/csv/quarter?yyyyq=${encodeURIComponent(normalizedQuarter)}`;
const byQuarterAndSubjectUrl =
`/api/courses/csv/byQuarterAndSubjectArea?yyyyq=${encodeURIComponent(normalizedQuarter)}` +
`&subjectArea=${encodeURIComponent(normalizedSubjectArea)}`;
const downloadCsv = (url) => {
window.location.assign(url);
};
const handleQuarterSubmit = (e) => {
e.preventDefault();
if (isValidQuarter) {
downloadCsv(byQuarterUrl);
}
};
const handleQuarterSubjectSubmit = (e) => {
e.preventDefault();
if (isValidQuarter && isValidSubjectArea) {
downloadCsv(byQuarterAndSubjectUrl);
}
};
return (
<BasicLayout>
<div className="container mt-3">
<h1>CSV Downloads</h1>
<Accordion defaultActiveKey="by-quarter" className="mt-3">
{/* Download by Quarter */}
<Accordion.Item eventKey="by-quarter">
<Accordion.Header>
Download all UCSB classes by Quarter
</Accordion.Header>
<Accordion.Body>
<Form onSubmit={handleQuarterSubmit}>
<Form.Group className="mb-3" controlId="quarterOnly">
<Form.Label>Quarter (yyyyq)</Form.Label>
<Form.Control
type="text"
placeholder="e.g. 20261"
value={quarter}
onChange={(e) => setQuarter(e.target.value)}
pattern="\d{5}"
/>
<Form.Text muted>
Example: 20254 (F25), 20261 (W26), 20262 (S26)
</Form.Text>
</Form.Group>
<Button
type="submit"
variant="primary"
disabled={!isValidQuarter}
>
Download CSV
</Button>
</Form>
</Accordion.Body>
</Accordion.Item>
{/* Download by Quarter + Subject Area */}
<Accordion.Item eventKey="by-quarter-and-subject-area">
<Accordion.Header>
Download all UCSB classes by Quarter and Subject Area
</Accordion.Header>
<Accordion.Body>
<Form onSubmit={handleQuarterSubjectSubmit}>
<Form.Group className="mb-3" controlId="quarterWithSubject">
<Form.Label>Quarter (yyyyq)</Form.Label>
<Form.Control
type="text"
placeholder="e.g. 20261"
value={quarter}
onChange={(e) => setQuarter(e.target.value)}
pattern="\d{5}"
/>
</Form.Group>
<Form.Group className="mb-3" controlId="subjectArea">
<Form.Label>Subject Area</Form.Label>
<Form.Control
type="text"
placeholder="e.g. CMPSC"
value={subjectArea}
onChange={(e) => setSubjectArea(e.target.value)}
/>
</Form.Group>
<Button
type="submit"
variant="primary"
disabled={!isValidQuarter || !isValidSubjectArea}
>
Download CSV
</Button>
</Form>
</Accordion.Body>
</Accordion.Item>
</Accordion>
</div>
</BasicLayout>
);
}
|