All files / components/Students StudentsForm.js

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
 
 
 
 
 
 
 
 
 
61x
 
61x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {useForm} from "react-hook-form";
import {Button, Form, Row} from "react-bootstrap";
import React from "react";
 
function StudentsForm({submitAction}){
    const {
        register,
        formState: {errors},
        handleSubmit
    } = useForm()
 
    return(
        <Form onSubmit={handleSubmit(submitAction)}>
            <Row>
                <Form.Group className="mb-2">
                    <Form.Label htmlFor="upload">Upload Student Roster</Form.Label>
                    <Form.Control data-testid="StudentsForm-upload"
                                  id="upload"
                                  type="file"
                                  accept=".csv"
                                  isInvalid={Boolean(errors.upload)}
                        {...register("upload", {required:true})} />
                    <Form.Control.Feedback type="invalid">
                        {errors.upload && 'Roster is required. '}
                    </Form.Control.Feedback>
                </Form.Group>
            </Row>
            <Row>
                <Button type="submit"
                        data-testid="StudentsForm-submit"
                        className="mb-3"
                >
                    Upload
                </Button>
            </Row>
        </Form>
    );
}
 
export default StudentsForm