github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/admin/EditCourse.tsx (about) 1 import React, { useState } from "react" 2 import { Course } from "../../../proto/qf/types_pb" 3 import { useAppState } from "../../overmind" 4 import DynamicTable, { Row } from "../DynamicTable" 5 import CourseForm from "../forms/CourseForm" 6 7 8 const EditCourse = (): JSX.Element => { 9 const state = useAppState() 10 const [course, setCourse] = useState<Course>() 11 12 const courses = state.courses.map(c => { 13 const selected = course?.ID === c.ID 14 const data: Row = [] 15 data.push(c.name) 16 data.push(c.code) 17 data.push(c.tag) 18 data.push(c.year.toString()) 19 data.push(c.slipDays.toString()) 20 data.push( 21 <span className={selected ? "badge badge-danger clickable" : "badge badge-primary clickable"} 22 onClick={() => { selected ? setCourse(undefined) : setCourse(c) }}> 23 {selected ? "Cancel" : "Edit"} 24 </span> 25 ) 26 return data 27 }) 28 29 return ( 30 <div className={"box"}> 31 <DynamicTable header={["Course", "Code", "Tag", "Year", "Slipdays", "Edit"]} data={courses} /> 32 {course ? <CourseForm editCourse={course} /> : null} 33 </div> 34 ) 35 } 36 37 export default EditCourse