All files / pages CoursesShowPage.js

100% Statements 18/18
100% Branches 4/4
100% Functions 2/2
100% Lines 18/18

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                        50x 50x     50x                           50x                           50x 18x   32x         50x 3x 3x 3x 3x               1x   2x 1x   1x 1x           50x                                        
import React from 'react'
import {useBackend} from 'main/utils/useBackend';
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
import CoursesTable from 'main/components/Courses/CoursesTable';
import { useCurrentUser} from 'main/utils/currentUser';
import {useParams} from "react-router-dom";
import StudentsForm from "../components/Students/StudentsForm";
import {toast} from "react-toastify";
import axios from "axios";
import StudentsTable from "../components/Students/StudentsTable";
 
export default function CoursesShowPage() {
    let { id } = useParams();
    const { data: currentUser } = useCurrentUser();
 
    const { data: courses, error: _error, status: _status } =
        useBackend(
            // Stryker disable next-line all : don't test internal caching of React Query
            [`/api/courses?id=${id}`],
 
            { // Stryker disable next-line all : GET is the default
                method: "GET", url: "/api/courses/get",
                params: {
                    id
                },
            },
    []
        );
 
    const { data: students, error: _studenterror, status: _studentStatus } =
        useBackend(
            // Stryker disable next-line all : don't test internal caching of React Query
            [`/api/students/all?courseId=${id}`],
 
            { // Stryker disable next-line all : GET is the default
                method: "GET", url: "/api/students/all",
                params: {
                    courseId:id
                },
            },
            []
        );
    //this ensures the table row doesn't show up when there's no backend
    let passIn;
    if(courses.length !== 0){
        passIn = [courses]
    }else{
        passIn = courses;
    }
    /*I couldn't get useBackendMutation to work, so this is a hodgepodge of work from this stack overflow url:
    * https://stackoverflow.com/questions/71035309/file-upload-using-axios-in-react
    * and useBackend.js*/
    const onSubmit = async (data) => {
        const formData = new FormData();
        formData.append("file", data.upload[0]);
        try {
            await axios.post("/api/students/upload/egrades", formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                params:{
                    courseId: id
                }
            });
            toast("Student roster successfully uploaded.");
        }catch(e){
            if (e.response.data?.message) {
                toast(e.response.data.message);
            } else {
                const errorMessage = `Error communicating with backend on /api/students/upload/egrades`;
                toast(errorMessage);
            }
        }
    }
 
 
    return (
        <BasicLayout>
            <div className="pt-2">
                <h1>Course</h1>
                <CoursesTable courses={passIn} currentUser={currentUser}/>
            </div>
            <div>
                <div className="row pt-3">
                    <div className="col col-8">
                        <h2>Student Roster</h2>
                        <StudentsTable students={students}/>
                    </div>
                    <div className="col col-4">
                        <StudentsForm submitAction={onSubmit}/>
                    </div>
                </div>
            </div>
        </BasicLayout>
);
}