import React , { useEffect , useState } from "react" ; import API from "@aws-amplify/api" ; import { WithTranslation , withTranslation } from "react-i18next" ; import { SyllabusKey } from "../../constants/syllabus-data" ; import Accordion from "semantic-ui-react/dist/commonjs/modules/Accordion" ; import Course from "../../types/course" ; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" ; import { faChevronDown , faChevronRight } from "@fortawesome/free-solid-svg-icons" ; import Placeholder from "semantic-ui-react/dist/commonjs/elements/Placeholder" ; import Table from "semantic-ui-react/dist/commonjs/collections/Table" ; import Label from "semantic-ui-react/dist/commonjs/elements/Label" ; interface Props extends WithTranslation { course : Course ; } interface ScheduleProps { content : string ; } interface TextbooksProps { content : string ; } const Schedule = ( { content } ) => { const items = content . split ( "\n" ) . filter ( c => c ) . filter ( ( c , i ) => i % 2 === 1 ) ; return ( < Table basic = 'very' > { items . map ( ( item , i ) => ( < Table . Body > < Table . Row > < Table . Cell > < Label > < p > { i + 1 } < /p></Label > < /Table.Cell> < Table . Cell > < p > { item } < /p></Table . Cell > < /Table.Row> < /Table.Body>))} < /Table>); } ; const Textbooks = ( { content } ) => { return ( < div > { content . split ( "\n" ) . map ( c => c && < p > { c } < /p>)} { } < /div>); } ; const CourseMoreDetails = ( { course , t } ) => { const [ activeDetailsIndex , setActiveDetailsIndex ] = useState ( - 1 ) ; const details = [ { title : t ( `courseMoreDetails.Outline` ) , content : course [ SyllabusKey . OUTLINE ] && course [ SyllabusKey . OUTLINE ] . split ( "\n" ) . map ( c => c && < p > { c } < /p>) } , { title : t ( `courseMoreDetails.Objective` ) , content : course [ SyllabusKey . OBJECTIVE ] && course [ SyllabusKey . OBJECTIVE ] . split ( "\n" ) . map ( c => c && < p > { c } < /p>) } , { title : t ( `courseMoreDetails.Schedule` ) , content : course [ SyllabusKey . SCHEDULE ] && < Schedule content = { course [ SyllabusKey . SCHEDULE ] } / > } , { title : t ( `courseMoreDetails.Self Study` ) , content : course [ SyllabusKey . SELF_STUDY ] && course [ SyllabusKey . SELF_STUDY ] . split ( "\n" ) . map ( c => c && < p > { c } < /p>) } , { title : t ( `courseMoreDetails.Textbook` ) , content : course [ SyllabusKey . TEXT ] && < Textbooks content = { course [ SyllabusKey . TEXT ] } /> } , { title : t ( `courseMoreDetails.Reference` ) , content : course [ SyllabusKey . REFERENCE ] && < Textbooks content = { course [ SyllabusKey . REFERENCE ] } /> } , { title : t ( `courseMoreDetails.Note` ) , content : course [ SyllabusKey . NOTE ] && course [ SyllabusKey . NOTE ] . split ( "\n" ) . map ( c => c && < p > { c } < /p>) } , ] ; return ( < Accordion style = { { padding : "0px 2em" } } > { details . map ( ( detail , i ) => detail . content && ( < React . Fragment key = { i } > < Accordion . Title active = { activeDetailsIndex === i } index = { i } style = { { borderBottom : "1px solid #ccc" } } onClick = { ( ) => { activeDetailsIndex === i ? setActiveDetailsIndex ( - 1 ) : setActiveDetailsIndex ( i ) ; } } > < h6 > < FontAwesomeIcon icon = { activeDetailsIndex === i ? faChevronDown : faChevronRight } /> {detail.title} < /h6> < /Accordion.Title> < Accordion . Content active = { activeDetailsIndex === i } > { detail . content } < /Accordion.Content> < /React.Fragment>))} < /Accordion>); } ; export default withTranslation ( "translation" ) ( CourseMoreDetails ) ;