Day 2, Session 2

Course Card example

import React from 'react'; import { useKeyedState } from '@edx/react-unit-test-utils'; import { Container } from '@edx/paragon'; import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; import { getConfig } from '@edx/frontend-platform/config'; const apis = { courses: 'courses/v1/courses/', }; const useExamplePageData = () => { const get = (uri) => getAuthenticatedHttpClient() .get(`${getConfig().LMS_BASE_URL}/api/${uri}`); const [apiObjects, setAPIObjects] = useKeyedState('apiObjects', {}); const logAPI = (key, uri) => { get(uri).then(({ data }) => { apiObjects[key] = data; }); }; React.useEffect(() => { Object.keys(apis).forEach(key => { get(apis[key]).then(({ data }) => { setAPIObjects((old) => ({ ...old, [key]: data })); }); }); }, []); // empty list means only on first load. return { courses: apiObjects.courses }; }; const CourseCard = ({ course }) => { // https://paragon-openedx.netlify.app/components/card/#card-variants const { name, id, short_description } = course; const bannerImgUrl = course.media.banner_img.uri_absolute; return ( <Card> </Card> ); }; const ExamplePage = () => { const { courses } = useExamplePageData(); // courses: [{ <course object> }]; console.log({ courses }); return ( <main> <Container className="py-5"> <h1>Courses</h1> {courses.map((course) => ( <CourseCard course={course} /> ))} </Container> </main> ); }; export default ExamplePage;
{ "blocks_url": "http://localhost:18000/api/courses/v2/blocks/?course_id=course-v1%3AedX%2BDemoX%2BDemo_Course", "effort": null, "end": null, "enrollment_start": "2013-02-05T00:00:00Z", "enrollment_end": null, "id": "course-v1:edX+DemoX+Demo_Course", "media": { "banner_image": { "uri": "/asset-v1:edX+DemoX+Demo_Course+type@asset+block@images_course_image.jpg", "uri_absolute": "http://localhost:18000/asset-v1:edX+DemoX+Demo_Course+type@asset+block@images_course_image.jpg" }, "course_image": { "uri": "/asset-v1:edX+DemoX+Demo_Course+type@asset+block@images_course_image.jpg" }, "course_video": { "uri": null }, "image": { "raw": "http://localhost:18000/asset-v1:edX+DemoX+Demo_Course+type@asset+block@images_course_image.jpg", "small": "http://localhost:18000/asset-v1:edX+DemoX+Demo_Course+type@asset+block@images_course_image.jpg", "large": "http://localhost:18000/asset-v1:edX+DemoX+Demo_Course+type@asset+block@images_course_image.jpg" } }, "name": "Demonstration Course", "number": "DemoX", "org": "edX", "short_description": null, "start": "2013-02-05T05:00:00Z", "start_display": "Feb. 5, 2013", "start_type": "timestamp", "pacing": "instructor", "mobile_available": false, "hidden": false, "invitation_only": false, "course_id": "course-v1:edX+DemoX+Demo_Course" },

Course Selection example

import React from 'react'; import { useKeyedState } from '@edx/react-unit-test-utils'; import { Container } from '@edx/paragon'; import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; import { getConfig } from '@edx/frontend-platform/config'; const apis = { courses: 'courses/v1/courses/', }; const useExamplePageData = () => { const get = (uri) => getAuthenticatedHttpClient() .get(`${getConfig().LMS_BASE_URL}/api/${uri}`); const [apiObjects, setAPIObjects] = useKeyedState('apiObjects', {}); const logAPI = (key, uri) => { get(uri).then(({ data }) => { apiObjects[key] = data; }); }; React.useEffect(() => { Object.keys(apis).forEach(key => { get(apis[key]).then(({ data }) => { setAPIObjects((old) => ({ ...old, [key]: data })); }); }); }, []); // empty list means only on first load. const [selectedCourseId, setSelectedCourseId] = useKeyedState('selectedCourseId', null); const onSelectCourseId = (event) => { console.log({ event }); setSelectedCourseId(event.target.value); }; const courseList = apiObjects.courses; const courseObject = courseList.reduce((obj, curr) => ({ ...obj, [curr.id]: curr }), {}); return { courses: apiObjects.courses, selectedCourse: courseObject[selectedCourseId], onSelectCourseId, }; }; const CourseCard = ({ course }) => { // https://paragon-openedx.netlify.app/components/card/#card-variants const { name, id, short_description } = course; const bannerImgUrl = course.media.banner_img.uri_absolute; return (<Card />); }; const CourseSelection = ({ courses, onSelectCourseId }) => { // https://paragon-openedx.netlify.app/components/form/form-radio/#controlled-usage return ( <Form> <Form.RadioSet onChange={onSelectCourseId}> {...} </Form.RadioSet> </Form> ) } const ExamplePage = () => { const { courses, selectedCourse, onSelectCourseId } = useExamplePageData(); return ( <main> <Container className="py-5"> <h1>Courses</h1> <CourseSelection courses={courses} onSelectCourseId={courseId} /> {selectedCourse && <CourseCard course={selectedCourse} />} </Container> </main> ); }; export default ExamplePage;

Â