From d320b5ea51f11025f96215d68fc7402ff60c1bc1 Mon Sep 17 00:00:00 2001 From: kevin-liu Date: Fri, 2 Sep 2022 17:06:10 -0400 Subject: [PATCH 01/11] Created the form to search for the courses --- .../pages/ParentBooking/ParentBookingCard.js | 129 ++++++++++++------ .../ParentBooking/ParentBookingContainer.js | 10 +- src/styles/calendar.less | 11 ++ 3 files changed, 103 insertions(+), 47 deletions(-) diff --git a/src/components/pages/ParentBooking/ParentBookingCard.js b/src/components/pages/ParentBooking/ParentBookingCard.js index d39bae26..4ce01d87 100644 --- a/src/components/pages/ParentBooking/ParentBookingCard.js +++ b/src/components/pages/ParentBooking/ParentBookingCard.js @@ -1,81 +1,126 @@ // WE ARE CURRENTLY TRYING OUT THE SingleBookingComponent.js PLEASE REFER TO THAT COMPONENT FOR BOOKING FOR NOW - import React from 'react'; import { connect } from 'react-redux'; -import { Card, Button } from 'antd'; +import { Typography, Input, Select, Layout, Form } from 'antd'; import { dateConverter } from '../../common/dateHelpers'; import { timeConverter } from '../../common/timeHelpers'; import axiosWithAuth from '../../../utils/axiosWithAuth'; import { useOktaAuth } from '@okta/okta-react'; import { addToCart } from '../../../redux/actions/parentActions'; +import { dummyData } from '../../../dummyData'; const ParentBookingCard = props => { const { - child_name, - subject, - description, + course_name, + course_description, start_date, end_date, start_time, end_time, + number_of_sessions, location, - instructor_name, + days_of_week, size, - course_id, + min_age, + max_age, } = props.booking; + const { Content } = Layout; const { addToCart } = props; + const { Item } = Form; + const { Option } = Select; + const { Title } = Typography; const { authState } = useOktaAuth(); const { idToken } = authState; + const handleClick = e => { axiosWithAuth(idToken) - .post( - '/children/1/enrollments', // TODO: Hook this request up to pass the ID of the parent/child involved once we have this data in state. - { child_id: 1, class_id: course_id, completed: true } - ) + .post() .then(res => console.log(res)) // TODO: Let's perform some action with this result. .catch(err => console.log(`message: ${err.message}`)); }; - const data = [ - { title: 'student name', text: child_name }, - { title: 'course', text: subject }, - { title: 'description', text: description }, - { title: 'first day of class', text: dateConverter(start_date) }, - { title: 'last day of class', text: dateConverter(end_date) }, - { - title: 'time', - text: `${timeConverter(start_time)} - ${timeConverter(end_time)}`, - }, - { title: 'location', text: location }, - { title: 'instructor', text: instructor_name }, - { title: 'class size', text: size }, - ]; + // const data = [ + // { title: 'student name', text: child_name }, + // { title: 'course', text: subject }, + // { title: 'description', text: description }, + // { title: 'first day of class', text: dateConverter(start_date) }, + // { title: 'last day of class', text: dateConverter(end_date) }, + // { + // title: 'time', + // text: `${timeConverter(start_time)} - ${timeConverter(end_time)}`, + // }, + // { title: 'location', text: location }, + // { title: 'instructor', text: instructor_name }, + // { title: 'class size', text: size }, + // ]; const handleAddCourse = booking => { addToCart(booking); }; return ( - - {data.map((itm, idx) => { - return ( -
- {itm.title}: {itm.text} + + +
+
+ + SEARCH FOR AVAILABLE COURSES + +
+ + + + + + + // + // + /> + + + + + + +
- ); - })} - - +
+ + ); }; diff --git a/src/components/pages/ParentBooking/ParentBookingContainer.js b/src/components/pages/ParentBooking/ParentBookingContainer.js index a1e32ee1..de7d2e42 100644 --- a/src/components/pages/ParentBooking/ParentBookingContainer.js +++ b/src/components/pages/ParentBooking/ParentBookingContainer.js @@ -55,14 +55,14 @@ const ParentBookingContainer = props => { {tabs.map((item, index) => ( - {currentTab && + {/* {currentTab && currentTab.map((item, idx) => { return ( -
- -
+
*/} + + {/*
); - })} + })} */} ))} diff --git a/src/styles/calendar.less b/src/styles/calendar.less index 13a50aa4..fff86227 100644 --- a/src/styles/calendar.less +++ b/src/styles/calendar.less @@ -161,3 +161,14 @@ div.ant-picker-calendar-date-value { margin: 0 4%; } } +//Calendar Card for +input[type="date"]::before { + color: #999; + content: attr(placeholder); + margin-right: 122px; +} +input[type="date"]:focus::before { + display: none; +} + + From 82685b75d0d775f6569c9cf3e0a63c53687538a9 Mon Sep 17 00:00:00 2001 From: Laila Arkadan <91079490+lailaarkadan@users.noreply.github.com> Date: Thu, 8 Sep 2022 22:22:45 -0600 Subject: [PATCH 02/11] implemented design from figma --- .../pages/ParentBooking/BookingCalendar.js | 16 + .../pages/ParentBooking/ParentBookingCard.js | 303 +++++++++++++++--- 2 files changed, 276 insertions(+), 43 deletions(-) create mode 100644 src/components/pages/ParentBooking/BookingCalendar.js diff --git a/src/components/pages/ParentBooking/BookingCalendar.js b/src/components/pages/ParentBooking/BookingCalendar.js new file mode 100644 index 00000000..9f6f12bc --- /dev/null +++ b/src/components/pages/ParentBooking/BookingCalendar.js @@ -0,0 +1,16 @@ +import { Calendar } from 'antd'; +import React from 'react'; + +const BookingCalendar = () => { + const onPanelChange = (value, mode) => { + console.log(value.format('YYYY-MM-DD'), mode); + }; + + return ( +
+ +
+ ); +}; + +export default BookingCalendar; diff --git a/src/components/pages/ParentBooking/ParentBookingCard.js b/src/components/pages/ParentBooking/ParentBookingCard.js index 4ce01d87..f335cfec 100644 --- a/src/components/pages/ParentBooking/ParentBookingCard.js +++ b/src/components/pages/ParentBooking/ParentBookingCard.js @@ -1,13 +1,14 @@ // WE ARE CURRENTLY TRYING OUT THE SingleBookingComponent.js PLEASE REFER TO THAT COMPONENT FOR BOOKING FOR NOW import React from 'react'; import { connect } from 'react-redux'; -import { Typography, Input, Select, Layout, Form } from 'antd'; +import { Typography, Input, Select, Layout, Form, Calendar } from 'antd'; import { dateConverter } from '../../common/dateHelpers'; import { timeConverter } from '../../common/timeHelpers'; import axiosWithAuth from '../../../utils/axiosWithAuth'; import { useOktaAuth } from '@okta/okta-react'; import { addToCart } from '../../../redux/actions/parentActions'; import { dummyData } from '../../../dummyData'; +import BookingCalendar from './BookingCalendar'; const ParentBookingCard = props => { const { @@ -28,7 +29,7 @@ const ParentBookingCard = props => { const { Content } = Layout; const { addToCart } = props; const { Item } = Form; - const { Option } = Select; + const { button } = Select; const { Title } = Typography; const { authState } = useOktaAuth(); @@ -68,53 +69,269 @@ const ParentBookingCard = props => { - SEARCH FOR AVAILABLE COURSES + BOOK WITH US. + <br /> + LEARN MORE THAN JUST CODE!
- - - - - - - // - // - /> - - - + + + + + +
- - - - - - -
+
- SEARCH - + + + + + +
+ + + +
+
+ + + +
+
+ + + +
+
+

+ All times are in Central Standard Time (US & Canada) +

+
+
+ +
+ +
From bac3f41e60971b896ddee080ab7bf766b5435b0a Mon Sep 17 00:00:00 2001 From: Laila Arkadan <91079490+lailaarkadan@users.noreply.github.com> Date: Sat, 17 Sep 2022 14:55:33 -0600 Subject: [PATCH 03/11] added dynamic btns --- .../pages/ParentBooking/BookingTimeBtn.js | 22 +++ .../pages/ParentBooking/ParentBookingCard.js | 39 +++-- src/parentDummyData.js | 148 ++++++++++++++++-- src/styles/ParentStyles/booking.less | 18 ++- 4 files changed, 201 insertions(+), 26 deletions(-) create mode 100644 src/components/pages/ParentBooking/BookingTimeBtn.js diff --git a/src/components/pages/ParentBooking/BookingTimeBtn.js b/src/components/pages/ParentBooking/BookingTimeBtn.js new file mode 100644 index 00000000..801bfda1 --- /dev/null +++ b/src/components/pages/ParentBooking/BookingTimeBtn.js @@ -0,0 +1,22 @@ +import React from 'react'; + +const BookingTimeBtn = ({ filterAvailableTimes, availableTime }) => { + return ( +
+ {availableTime.map((time, index) => { + return ( + + ); + })} +
+ ); +}; + +export default BookingTimeBtn; diff --git a/src/components/pages/ParentBooking/ParentBookingCard.js b/src/components/pages/ParentBooking/ParentBookingCard.js index f335cfec..9c3a740b 100644 --- a/src/components/pages/ParentBooking/ParentBookingCard.js +++ b/src/components/pages/ParentBooking/ParentBookingCard.js @@ -1,14 +1,19 @@ // WE ARE CURRENTLY TRYING OUT THE SingleBookingComponent.js PLEASE REFER TO THAT COMPONENT FOR BOOKING FOR NOW -import React from 'react'; +import React, { useState } from 'react'; import { connect } from 'react-redux'; -import { Typography, Input, Select, Layout, Form, Calendar } from 'antd'; +import { Typography, Input, Select, Layout, Form } from 'antd'; import { dateConverter } from '../../common/dateHelpers'; import { timeConverter } from '../../common/timeHelpers'; import axiosWithAuth from '../../../utils/axiosWithAuth'; import { useOktaAuth } from '@okta/okta-react'; import { addToCart } from '../../../redux/actions/parentActions'; -import { dummyData } from '../../../dummyData'; +// import { dummyData } from '../../../dummyData'; +import { parentDummyData } from '../../../parentDummyData'; import BookingCalendar from './BookingCalendar'; +import BookingTimeBtn from './BookingTimeBtn'; +import '../../../styles/ParentStyles/booking.less'; + +// console.log(Times); const ParentBookingCard = props => { const { @@ -57,6 +62,17 @@ const ParentBookingCard = props => { // { title: 'class size', text: size }, // ]; + // const [availableTime, setAvailableTime] = useState(Times); + const Times = [ + ...new Set(parentDummyData.availableCourses.map(time => time.start_time)), + ]; + + const filterAvailableTimes = start_time => { + const filteredTimes = parentDummyData.availableCourses.filter( + course => course.start_time === start_time + ); + return filteredTimes; + }; const handleAddCourse = booking => { addToCart(booking); }; @@ -141,14 +157,19 @@ const ParentBookingCard = props => { flex: '1', }} > -
+ + {/*
- -
+ +
{ > 5:00 PM -
+ */}
Date: Mon, 26 Sep 2022 20:24:02 -0600 Subject: [PATCH 04/11] connected program and date selections to display available courses. --- .../pages/ParentBooking/BookingCalendar.js | 40 +- .../pages/ParentBooking/BookingProgram.js | 148 +++++ .../pages/ParentBooking/BookingTimeBtn.js | 22 - .../pages/ParentBooking/ParentBookingCard.js | 507 ++++++++--------- .../PreferredCourseOptions.js.js | 55 ++ .../ParentBooking/SelectedCourseDetails.js | 32 ++ src/parentDummyData.js | 514 ++++++++++++++++-- src/styles/ParentStyles/booking.less | 36 +- 8 files changed, 981 insertions(+), 373 deletions(-) create mode 100644 src/components/pages/ParentBooking/BookingProgram.js delete mode 100644 src/components/pages/ParentBooking/BookingTimeBtn.js create mode 100644 src/components/pages/ParentBooking/PreferredCourseOptions.js.js create mode 100644 src/components/pages/ParentBooking/SelectedCourseDetails.js diff --git a/src/components/pages/ParentBooking/BookingCalendar.js b/src/components/pages/ParentBooking/BookingCalendar.js index 9f6f12bc..f9427c18 100644 --- a/src/components/pages/ParentBooking/BookingCalendar.js +++ b/src/components/pages/ParentBooking/BookingCalendar.js @@ -1,14 +1,40 @@ -import { Calendar } from 'antd'; -import React from 'react'; +import { Alert, Calendar } from 'antd'; +import React, { useState } from 'react'; +import moment from 'moment'; -const BookingCalendar = () => { - const onPanelChange = (value, mode) => { - console.log(value.format('YYYY-MM-DD'), mode); +const BookingCalendar = ({ handleCalendarClick }) => { + const [value, setValue] = useState(moment()); + const [selectedValue, setSelectedValue] = useState(moment()); + + const onSelect = newValue => { + setValue(newValue); + setSelectedValue(newValue); + }; + const onPanelChange = newValue => { + setValue(newValue); }; return ( -
- +
+ +
); }; diff --git a/src/components/pages/ParentBooking/BookingProgram.js b/src/components/pages/ParentBooking/BookingProgram.js new file mode 100644 index 00000000..86c9dec4 --- /dev/null +++ b/src/components/pages/ParentBooking/BookingProgram.js @@ -0,0 +1,148 @@ +import { Card, Radio } from 'antd'; +import { useState, useEffect } from 'react'; +import { parentDummyData } from '../../../parentDummyData'; +import { LeftOutlined, RightOutlined } from '@ant-design/icons'; + +// const defaultValues = { +// program: '', +// course: '', +// date: '', +// }; +const BookingProgram = ({ handleRadioClick, disabled }) => { + const [index, setIndex] = useState(0); + // const [userChoice, setUserChoice] = useState(defaultValues); + // const [disabled, setDisabled] = useState(false); + // const toggleDisabled = () => { + // setDisabled(!disabled); + // }; + + const subjectsArray = [ + ...new Set( + parentDummyData.availableCourses.map(course => { + return course.subject; + }) + ), + ]; + + let selectProgramArray = subjectsArray.slice(index, index + 3); + + useEffect(() => { + const lastIndex = subjectsArray.length - 1; + if (index < 0) { + setIndex(lastIndex); + } + if (index > lastIndex) { + setIndex(0); + } + }, [index, subjectsArray]); + + // const handleRadioClick = e => { + // setUserChoice({ program: e.target.value }); + // console.log(userChoice); + // }; + // const handleCalendarClick = e => { + // setUserChoice({ date: e.target.value }); + // console.log(userChoice); + // }; + + // const handleTime = e => { + // setUserChoice({ time: e.target.value }); + // console.log(userChoice); + // }; + + return ( + <> +
+ + + +
+ {selectProgramArray.map((subject, index) => { + return ( + + + {subject} + + + ); + })} +
+ + + +
+ + ); +}; + +export default BookingProgram; + +// const startTimes = parentDummyData.availableCourses.map( +// time => time.start_time +// ); + +// const endTimes = parentDummyData.availableCourses.map(time => time.end_time); +// let durationArr = []; +// let duration = ''; +// const [durations, setDurations] = useState([]); +// const generateDurationArr = () => { +// for (let i = 0; i < endTimes.length; i++) { +// let difference = +// parseInt(endTimes[i][0] + endTimes[i][1]) - +// parseInt(startTimes[i][0] + startTimes[i][1]); +// duration += difference; +// if (endTimes[i][3] !== '0' || startTimes[i][3] !== '0') { +// duration += ' - ' + (difference + 1); +// } +// duration += ' hour(s)'; +// durationArr.push(duration); +// duration = ''; +// } +// setDurations(durationArr); +// }; +// useEffect(() => { +// generateDurationArr(); +// }, [durationArr, endTimes, startTimes]); diff --git a/src/components/pages/ParentBooking/BookingTimeBtn.js b/src/components/pages/ParentBooking/BookingTimeBtn.js deleted file mode 100644 index 801bfda1..00000000 --- a/src/components/pages/ParentBooking/BookingTimeBtn.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -const BookingTimeBtn = ({ filterAvailableTimes, availableTime }) => { - return ( -
- {availableTime.map((time, index) => { - return ( - - ); - })} -
- ); -}; - -export default BookingTimeBtn; diff --git a/src/components/pages/ParentBooking/ParentBookingCard.js b/src/components/pages/ParentBooking/ParentBookingCard.js index 9c3a740b..50ab8963 100644 --- a/src/components/pages/ParentBooking/ParentBookingCard.js +++ b/src/components/pages/ParentBooking/ParentBookingCard.js @@ -1,80 +1,111 @@ // WE ARE CURRENTLY TRYING OUT THE SingleBookingComponent.js PLEASE REFER TO THAT COMPONENT FOR BOOKING FOR NOW -import React, { useState } from 'react'; -import { connect } from 'react-redux'; -import { Typography, Input, Select, Layout, Form } from 'antd'; -import { dateConverter } from '../../common/dateHelpers'; -import { timeConverter } from '../../common/timeHelpers'; -import axiosWithAuth from '../../../utils/axiosWithAuth'; -import { useOktaAuth } from '@okta/okta-react'; -import { addToCart } from '../../../redux/actions/parentActions'; -// import { dummyData } from '../../../dummyData'; +import React, { useEffect, useState, useRef } from 'react'; +import { Typography, Input, Layout, Form, Radio } from 'antd'; import { parentDummyData } from '../../../parentDummyData'; import BookingCalendar from './BookingCalendar'; -import BookingTimeBtn from './BookingTimeBtn'; +import PreferredCourseOptions from './PreferredCourseOptions.js'; import '../../../styles/ParentStyles/booking.less'; +import BookingProgram from './BookingProgram'; +import SelectedCourseDetails from './SelectedCourseDetails'; -// console.log(Times); +const courseDetails = { + instructor_name: '', + size: '', + subject: '', + description: '', + start_date: '', + end_date: '', + start_time: '', + end_time: '', + price: '', +}; -const ParentBookingCard = props => { - const { - course_name, - course_description, - start_date, - end_date, - start_time, - end_time, - number_of_sessions, - location, - days_of_week, - size, - min_age, - max_age, - } = props.booking; +const ParentBookingCard = () => { + // course_id: 1, + // instructor_id: 1, + // instructor_name: 'Test003', + // size: 15, + // subject: 'CS101', + // description: 'Computer Science fundamentals', + // prereqs: [], + // start_date: '01/19/2022', + // end_date: '02/10/2022', + // start_time: '17:00:00', + // end_time: '18:00:00', + // location: 'https://zoom.us/my/john123', + // price: 1000, const { Content } = Layout; - const { addToCart } = props; const { Item } = Form; - const { button } = Select; const { Title } = Typography; + const [searchResults, setSearchResults] = useState([]); + + const [show, setShow] = useState(true); + const [disabled, setDisabled] = useState(false); + const [render, setRender] = useState(false); + const [clickable, setClickable] = useState(false); + const [selectedOption, setSelectedOption] = useState(courseDetails); - const { authState } = useOktaAuth(); - const { idToken } = authState; + let valuesObject = {}; + let program; + let date = 'no date selected'; + let newArray = []; + let resultArray = []; + + const toggleDisabled = () => { + setDisabled(!disabled); + }; - const handleClick = e => { - axiosWithAuth(idToken) - .post() - .then(res => console.log(res)) // TODO: Let's perform some action with this result. - .catch(err => console.log(`message: ${err.message}`)); + const handleRadioClick = e => { + program = e.target.value; + valuesObject.program = program; }; - // const data = [ - // { title: 'student name', text: child_name }, - // { title: 'course', text: subject }, - // { title: 'description', text: description }, - // { title: 'first day of class', text: dateConverter(start_date) }, - // { title: 'last day of class', text: dateConverter(end_date) }, - // { - // title: 'time', - // text: `${timeConverter(start_time)} - ${timeConverter(end_time)}`, - // }, - // { title: 'location', text: location }, - // { title: 'instructor', text: instructor_name }, - // { title: 'class size', text: size }, - // ]; + const handleCalendarClick = value => { + date = value.format('MM/DD/YYYY'); + valuesObject.date = date; + }; + + const handleAvailability = e => { + e.preventDefault(); + + newArray = parentDummyData.availableCourses.filter((course, index) => { + let programDate = course.start_date; + let selectedDate = valuesObject.date; + let programMonth = programDate.substring(0, 2); + let selectedMonth = selectedDate.substring(0, 2); + let programYear = programDate.substring(6); + let selectedYear = selectedDate.substring(6); - // const [availableTime, setAvailableTime] = useState(Times); - const Times = [ - ...new Set(parentDummyData.availableCourses.map(time => time.start_time)), - ]; + return parseInt(programMonth) >= parseInt(selectedMonth) && + programYear === selectedYear + ? course + : null; + }); - const filterAvailableTimes = start_time => { - const filteredTimes = parentDummyData.availableCourses.filter( - course => course.start_time === start_time + resultArray = newArray.filter( + course => course.subject === valuesObject.program ); - return filteredTimes; + resultArray.unshift('-- Select a Course --'); + setSearchResults(resultArray); + setSelectedOption(resultArray[0]); + if (valuesObject.program && valuesObject.date) { + setShow(!show); + } + + toggleDisabled(); + }; + + const handleRefresh = () => { + window.location.reload(); }; - const handleAddCourse = booking => { - addToCart(booking); + + const handleSelecteCourse = () => { + setRender(!render); + }; + + const updateSelection = (inputName, inputValue) => { + setSelectedOption({ ...selectedOption, [inputName]: inputValue }); }; return ( @@ -91,11 +122,13 @@ const ParentBookingCard = props => {
LEARN MORE THAN JUST CODE! -
- + +
{ Select Program
- +
{ margin: ' 20px 0 15px 0', }} > - Select Time + Select Date + {/*
+ {date} +
*/}
{ flexWrap: 'wrap', }} > - + @@ -151,205 +187,125 @@ const ParentBookingCard = props => { name={'availability'} style={{ display: 'flex', - // flexWrap: 'wrap', - minWidth: '450px', + minWidth: '525px', flexDirection: 'column', flex: '1', }} > - - - {/*
- - - -
-
- - - -
-
- - - -
*/} -
-

- All times are in Central Standard Time (US & Canada) -

-
- + {!show && !render && ( +
+

+ All times are in Central Standard Time (US & Canada) +

+
+ )} + + {!show && !render && ( + + )} +
+ {show && !clickable && ( + + )} + {render && ( + + )} + {!show && !render && ( + + )} + {!show && render && ( + + )} + {!show && ( + + )} +
@@ -362,11 +318,4 @@ const ParentBookingCard = props => { ); }; -const mapStateToProps = state => ({ - cart: state.parentReducer.cart, - bookings: state.parentReducer.bookings, -}); - -export default connect(mapStateToProps, { - addToCart, -})(ParentBookingCard); +export default ParentBookingCard; diff --git a/src/components/pages/ParentBooking/PreferredCourseOptions.js.js b/src/components/pages/ParentBooking/PreferredCourseOptions.js.js new file mode 100644 index 00000000..9b3027c8 --- /dev/null +++ b/src/components/pages/ParentBooking/PreferredCourseOptions.js.js @@ -0,0 +1,55 @@ +import { Result } from 'antd'; +import React, { useState } from 'react'; +import { timeConverter } from '../../common/timeHelpers'; + +const PreferredCourseOptions = ({ + searchResults, + selectedOption, + updateSelection, +}) => { + const onChange = e => { + const name = e.target.name; + const { value } = e.target; + updateSelection(name, value); + }; + let choice; + + return ( + + ); +}; + +export default PreferredCourseOptions; diff --git a/src/components/pages/ParentBooking/SelectedCourseDetails.js b/src/components/pages/ParentBooking/SelectedCourseDetails.js new file mode 100644 index 00000000..5a4a1857 --- /dev/null +++ b/src/components/pages/ParentBooking/SelectedCourseDetails.js @@ -0,0 +1,32 @@ +import React from 'react'; + +const SelectedCourseDetails = ({ selectedOption }) => { + // const courseDetails = { + // instructor_name: '', + // size: '', + // subject: '', + // description: '', + // start_date: '', + // end_date: '', + // start_time: '', + // end_time: '', + // price: '', + // }; + + return ( +
+

Course Details:

+

Instructor: {selectedOption.instructor_name}

+

Size: {selectedOption.size}

+

Subject: {selectedOption.subject}

+

Description: {selectedOption.description}

+

Start Date: {selectedOption.start_date}

+

End Date : {selectedOption.end_date}

+

Start Time: {selectedOption.start_time}

+

End Time: {selectedOption.end_time}

+

Price: {selectedOption.price}

+
+ ); +}; + +export default SelectedCourseDetails; diff --git a/src/parentDummyData.js b/src/parentDummyData.js index 4bb8fe1b..68b62dcc 100644 --- a/src/parentDummyData.js +++ b/src/parentDummyData.js @@ -27,7 +27,7 @@ export const parentDummyData = { messages: [ { - sent_at: '2021-11-02T01:51:39+00:00', + sent_at: '2021/11/02T01:51:39+00:00', title: 'Help with Homework?', read: true, message: 'I need the answers to the assignment please.', @@ -35,7 +35,7 @@ export const parentDummyData = { sender_id: 1, }, { - sent_at: '2021-11-02T01:51:39+00:00', + sent_at: '2021/11/02T01:51:39+00:00', title: "What's my grade?", read: true, message: 'Hey Ms. Teacher can you tell me my grade?', @@ -43,7 +43,7 @@ export const parentDummyData = { sender_id: 1, }, { - sent_at: '2021-11-02T01:51:39+00:00', + sent_at: '2021/11/02T01:51:39+00:00', title: 'Going to need to cancel.', read: false, message: 'My child has to miss the class', @@ -51,7 +51,7 @@ export const parentDummyData = { sender_id: 2, }, { - sent_at: '2021-11-02T01:51:39+00:00', + sent_at: '2021/11/02T01:51:39+00:00', title: 'Kid is sick', read: true, message: 'Can we get a refund for this class?', @@ -59,7 +59,7 @@ export const parentDummyData = { sender_id: 3, }, { - sent_at: '2021-11-02T01:51:39+00:00', + sent_at: '2021/11/02T01:51:39+00:00', title: 'When is class?', read: false, message: 'I noticed the time was funky and had to ask.', @@ -67,7 +67,7 @@ export const parentDummyData = { sender_id: 5, }, { - sent_at: '2021-11-02T01:51:39+00:00', + sent_at: '2021/11/02T01:51:39+00:00', title: 'Is this a yoga course?', read: false, message: 'How is yoga and coding taught together?', @@ -75,7 +75,7 @@ export const parentDummyData = { sender_id: 7, }, { - sent_at: '2021-11-02T01:51:39+00:00', + sent_at: '2021/11/02T01:51:39+00:00', title: 'Where is my achievement?', read: false, message: "my achievement didn't pop up when I did class.", @@ -97,8 +97,8 @@ export const parentDummyData = { subject: 'CS101', description: 'Computer Science fundamentals', prereqs: null, - start_date: '2021-05-30T07:00:00.000Z', - end_date: '2022-10-10T07:00:00.000Z', + start_date: '2021/05/30T07:00:00.000Z', + end_date: '2022/10/10T07:00:00.000Z', start_time: '17:00:00', end_time: '18:00:00', location: 'https://zoom.us/my/john123', @@ -114,8 +114,8 @@ export const parentDummyData = { subject: 'JavaScriptB', description: 'Intermediate JavaScript.', prereqs: ['JavaScriptA'], - start_date: '2021-12-15T07:00:00.000Z', - end_date: '2022-10-11T07:00:00.000Z', + start_date: '2021/12/15T07:00:00.000Z', + end_date: '2022/10/11T07:00:00.000Z', start_time: '15:00:00', end_time: '16:00:00', location: 'https://zoom.us/my/john321', @@ -131,8 +131,8 @@ export const parentDummyData = { subject: 'CS101', description: 'Computer Science fundamentals', prereqs: null, - start_date: '2021-12-22T07:00:00.000Z', // mm-dd-yyyy - end_date: '2022-10-10T07:00:00.000Z', + start_date: '2021/12/22T07:00:00.000Z', // mm/dd/yyyy + end_date: '2022/10/10T07:00:00.000Z', start_time: '17:00:00', end_time: '18:00:00', location: 'https://zoom.us/my/john123', @@ -148,8 +148,8 @@ export const parentDummyData = { subject: 'JavaScriptB', description: 'Intermediate JavaScript.', prereqs: ['JavaScriptA'], - start_date: '2021-12-20T07:00:00.000Z', - end_date: '2022-10-11T07:00:00.000Z', + start_date: '2021/12/20T07:00:00.000Z', + end_date: '2022/10/11T07:00:00.000Z', start_time: '15:00:00', end_time: '16:00:00', location: 'https://zoom.us/my/john321', @@ -167,12 +167,12 @@ export const parentDummyData = { size: 20, subject: 'App Building Fundamentals', description: - 'A month-long course where students with design, build, and deploy an app from beginning to end!', + 'A month/long course where students with design, build, and deploy an app from beginning to end!', prereqs: [' JavaScript', 'HTML', 'CSS'], - start_date: '04/04/2022', - end_date: '04/28/2022', + start_date: '12/04/2022', + end_date: '12/28/2022', start_time: '08:00:00', - end_time: '9:00:00', + end_time: '09:00:00', location: "Children's Coding Center", price: 1200, }, @@ -185,12 +185,12 @@ export const parentDummyData = { size: 16, subject: 'App Building Fundamentals', description: - 'A month-long course where students with design, build, and deploy an app from beginning to end!', + 'A month/long course where students with design, build, and deploy an app from beginning to end!', prereqs: ['JavaScript', 'HTML', 'CSS'], - start_date: ' 04/04/2022', + start_date: '04/04/2022', end_date: '04/28/2022', - start_time: '8:30:00', - end_time: '9:30:00', + start_time: '08:30:00', + end_time: '09:30:00', location: 'https://zoom.us/my/john321', price: 800, }, @@ -203,9 +203,9 @@ export const parentDummyData = { subject: 'Welcome to Python!', description: 'Please select a course!', prereqs: ['javascript,css,html'], - start_date: 'more - info', - end_date: '11-19-2022', - start_time: '9:00:00', + start_date: '10/07/2022', + end_date: '11/06/2022', + start_time: '09:00:00', end_time: '10:00:00', location: 'https://zoom.us/my/haleyh', price: 500, @@ -219,8 +219,8 @@ export const parentDummyData = { subject: 'JavaScriptB', description: 'Intermediate JavaScript.', prereqs: ['JavaScriptA'], - start_date: '2021-12-05T07:00:00.000Z', - end_date: '2022-10-11T07:00:00.000Z', + start_date: '10/19/2022', + end_date: '11/20/2022', start_time: '10:00:00', end_time: '11:00:00', location: 'https://zoom.us/my/john321', @@ -232,16 +232,16 @@ export const parentDummyData = { instructor_id: 2, instructor_name: 'Test013', size: 16, - subject: 'App Building Fundamentals', + subject: 'Intro to HTML', description: - 'A month-long course where students with design, build, and deploy an app from beginning to end!', - prereqs: ['JavaScript', 'HTML', 'CSS'], - start_date: ' 04/04/2022', - end_date: '04/28/2022', - start_time: '11:00:00', - end_time: '12:00:00', + ' A course where students with design, build, and deploy an app from beginning to end!', + prereqs: [''], + start_date: '03/05/2022', + end_date: '03/25/2022', + start_time: '13:00:00', + end_time: '14:00:00', location: 'https://zoom.us/my/tommy', - price: 800, + price: 450, }, { schedule_id: 2, @@ -252,8 +252,8 @@ export const parentDummyData = { subject: 'JavaScriptB', description: 'Intermediate JavaScript.', prereqs: ['JavaScriptA'], - start_date: '2021-12-05T07:00:00.000Z', - end_date: '2022-10-11T07:00:00.000Z', + start_date: '05/01/2022', + end_date: '06/04/2022', start_time: '15:00:00', end_time: '16:00:00', location: 'https://zoom.us/my/john321', @@ -268,8 +268,8 @@ export const parentDummyData = { subject: 'Intro to CSS', description: 'Welcome to CSS!', prereqs: ['Html'], - start_date: '2022-10-10T07:00:00.000Z', - end_date: '2022-10-11T07:00:00.000Z', + start_date: '09/01/2022', + end_date: '10/04/2022', start_time: '15:30:00', end_time: '17:45:00', location: 'https://zoom.us/my/john321', @@ -284,8 +284,8 @@ export const parentDummyData = { subject: ' Intro JavaScript', description: 'Welcome to JavaScript!', prereqs: ['Html,css'], - start_date: '11`-19-2022', - end_date: '12-10-2022', + start_date: '11/19/2022', + end_date: '12/10/2022', start_time: '15:45:00', end_time: '16:45:00', location: 'https://zoom.us/my/john321', @@ -300,8 +300,8 @@ export const parentDummyData = { subject: 'CS101', description: 'Computer Science fundamentals', prereqs: [], - start_date: '2021-12-10T07:00:00.000Z', - end_date: '2022-10-10T07:00:00.000Z', + start_date: '01/19/2022', + end_date: '02/10/2022', start_time: '17:00:00', end_time: '18:00:00', location: 'https://zoom.us/my/john123', @@ -316,13 +316,435 @@ export const parentDummyData = { subject: 'Fundamental Python', description: 'Computer Science fundamentals', prereqs: ['JavaScript', 'HTML', 'CSS'], - start_date: '2021-12-10T07:00:00.000Z', - end_date: '2022-10-10T07:00:00.000Z', + start_date: '04/04/2022', + end_date: '04/28/2022', + start_time: '17:00:00', + end_time: '18:00:00', + location: 'https://zoom.us/my/john123', + price: 500, + }, + { + schedule_id: 5, + course_id: 8, + instructor_id: 80, + instructor_name: 'Mark', + size: 20, + subject: 'App Building Fundamentals', + description: 'Computer Science fundamentals', + prereqs: ['JavaScript', 'HTML', 'CSS'], + start_date: '10/30/2022', + end_date: '11/28/2022', + start_time: '17:00:00', + end_time: '18:00:00', + location: 'https://zoom.us/my/john123', + price: 500, + }, + { + schedule_id: 5, + course_id: 8, + instructor_id: 80, + instructor_name: 'Mark', + size: 20, + subject: 'App Building Fundamentals', + description: 'Computer Science fundamentals', + prereqs: ['JavaScript', 'HTML', 'CSS'], + start_date: '05/12/2022', + end_date: '06/28/2022', + start_time: '10:10:00', + end_time: '11:15:00', + location: 'https://zoom.us/my/john123', + price: 500, + }, + { + schedule_id: 0, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test009', + size: 14, + subject: 'Welcome to Python!', + description: 'Please select a course!', + prereqs: ['javascript,css,html'], + start_date: '06/1/2022', + end_date: '07/31/2022', + start_time: '14:00:00', + end_time: '15:00:00', + location: 'https://zoom.us/my/haleyh', + price: 500, + }, + { + schedule_id: 0, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test009', + size: 14, + subject: 'Welcome to Python!', + description: 'Please select a course!', + prereqs: ['javascript,css,html'], + start_date: '01/13/2023', + end_date: '02/24/202', + start_time: '16:30:00', + end_time: '17:40:00', + location: 'https://zoom.us/my/haleyh', + price: 500, + }, + { + schedule_id: 0, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test009', + size: 14, + subject: 'Welcome to Python!', + description: 'Please select a course!', + prereqs: ['javascript,css,html'], + start_date: '11/07/2022', + end_date: '11/06/2022', + start_time: '11:00:00', + end_time: '12:10:00', + location: 'https://zoom.us/my/haleyh', + price: 500, + }, + { + schedule_id: 0, + course_id: 0, + instructor_id: 2, + instructor_name: 'Test013', + size: 16, + subject: 'Intro to HTML', + description: + ' A course where students with design, build, and deploy an app from beginning to end!', + prereqs: [''], + start_date: '08/15/2022', + end_date: '09/25/2022', + start_time: '10:00:00', + end_time: '11:00:00', + location: 'https://zoom.us/my/tommy', + price: 450, + }, + { + schedule_id: 0, + course_id: 0, + instructor_id: 2, + instructor_name: 'Test013', + size: 16, + subject: 'Intro to HTML', + description: + ' A course where students with design, build, and deploy an app from beginning to end!', + prereqs: [''], + start_date: '12/03/2022', + end_date: '12/18/2022', + start_time: '8:10:00', + end_time: '9:10:00', + location: 'https://zoom.us/my/tommy', + price: 450, + }, + { + schedule_id: 0, + course_id: 0, + instructor_id: 2, + instructor_name: 'Test013', + size: 16, + subject: 'Intro to HTML', + description: + ' A course where students with design, build, and deploy an app from beginning to end!', + prereqs: [''], + start_date: '03/15/2022', + end_date: '04/25/2022', + start_time: '10:00:00', + end_time: '11:00:00', + location: 'https://zoom.us/my/tommy', + price: 450, + }, + { + schedule_id: 0, + course_id: 0, + instructor_id: 2, + instructor_name: 'Test013', + size: 16, + subject: 'Intro to HTML', + description: + ' A course where students with design, build, and deploy an app from beginning to end!', + prereqs: [''], + start_date: '07/10/2022', + end_date: '07/26/2022', + start_time: '16:30:00', + end_time: '17:30:00', + location: 'https://zoom.us/my/tommy', + price: 450, + }, + { + schedule_id: 2, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test006', + size: 16, + subject: 'JavaScriptB', + description: 'Intermediate JavaScript.', + prereqs: ['JavaScriptA'], + start_date: '06/16/2022', + end_date: '07/20/2022', + start_time: '9:00:00', + end_time: '10:00:00', + location: 'https://zoom.us/my/john321', + price: 1200, + }, + { + schedule_id: 2, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test006', + size: 16, + subject: 'JavaScriptB', + description: 'Intermediate JavaScript.', + prereqs: ['JavaScriptA'], + start_date: '12/01/2022', + end_date: '01/04/2023', + start_time: '11:10:00', + end_time: '12:10:00', + location: 'https://zoom.us/my/john321', + price: 1200, + }, + { + schedule_id: 2, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test006', + size: 16, + subject: 'JavaScriptB', + description: 'Intermediate JavaScript.', + prereqs: ['JavaScriptA'], + start_date: '03/10/2022', + end_date: '06/15/2022', + start_time: '15:30:00', + end_time: '14:30:00', + location: 'https://zoom.us/my/john321', + price: 1200, + }, + { + schedule_id: 3, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test008', + size: 12, + subject: 'Intro to CSS', + description: 'Welcome to CSS!', + prereqs: ['Html'], + start_date: '04/15/2022', + end_date: '05/14/2022', + start_time: '10:30:00', + end_time: '11:45:00', + location: 'https://zoom.us/my/john321', + price: 500, + }, + { + schedule_id: 3, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test008', + size: 12, + subject: 'Intro to CSS', + description: 'Welcome to CSS!', + prereqs: ['Html'], + start_date: '1/01/2022', + end_date: '01/04/2023', + start_time: '13:00:00', + end_time: '14:00:00', + location: 'https://zoom.us/my/john321', + price: 500, + }, + { + schedule_id: 3, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test008', + size: 12, + subject: 'Intro to CSS', + description: 'Welcome to CSS!', + prereqs: ['Html'], + start_date: '07/01/2022', + end_date: '08/04/2022', + start_time: '08:30:00', + end_time: '09:45:00', + location: 'https://zoom.us/my/john321', + price: 500, + }, + { + schedule_id: 2, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test010', + size: 15, + subject: ' Intro JavaScript', + description: 'Welcome to JavaScript!', + prereqs: ['Html,css'], + start_date: '03/12/2022', + end_date: '04/20/2022', + start_time: '08:45:00', + end_time: '09:45:00', + location: 'https://zoom.us/my/john321', + price: 600, + }, + { + schedule_id: 2, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test010', + size: 15, + subject: ' Intro JavaScript', + description: 'Welcome to JavaScript!', + prereqs: ['Html,css'], + start_date: '08/19/2022', + end_date: '09/10/2022', + start_time: '10:35:00', + end_time: '11:35:00', + location: 'https://zoom.us/my/john321', + price: 600, + }, + { + schedule_id: 2, + course_id: 3, + instructor_id: 2, + instructor_name: 'Test010', + size: 15, + subject: ' Intro JavaScript', + description: 'Welcome to JavaScript!', + prereqs: ['Html,css'], + start_date: '10/14/2022', + end_date: '11/13/2022', + start_time: '14:15:00', + end_time: '15:15:00', + location: 'https://zoom.us/my/john321', + price: 600, + }, + { + schedule_id: 1, + course_id: 1, + instructor_id: 1, + instructor_name: 'Test003', + size: 15, + subject: 'CS101', + description: 'Computer Science fundamentals', + prereqs: [], + start_date: '05/28/2022', + end_date: '06/28/2022', + start_time: '15:00:00', + end_time: '16:00:00', + location: 'https://zoom.us/my/john123', + price: 1000, + }, + { + schedule_id: 1, + course_id: 1, + instructor_id: 1, + instructor_name: 'Test003', + size: 15, + subject: 'CS101', + description: 'Computer Science fundamentals', + prereqs: [], + start_date: '12/10/2022', + end_date: '01/10/2023', + start_time: '11:00:00', + end_time: '12:00:00', + location: 'https://zoom.us/my/john123', + price: 1000, + }, + + { + schedule_id: 3, + course_id: 5, + instructor_id: 10, + instructor_name: 'Mark', + size: 20, + subject: 'Fundamental Python', + description: 'Computer Science fundamentals', + prereqs: ['JavaScript', 'HTML', 'CSS'], + start_date: '09/22/2022', + end_date: '10/28/2022', + start_time: '9:00:00', + end_time: '10:00:00', + location: 'https://zoom.us/my/john123', + price: 500, + }, + { + schedule_id: 3, + course_id: 5, + instructor_id: 10, + instructor_name: 'Mark', + size: 20, + subject: 'Fundamental Python', + description: 'Computer Science fundamentals', + prereqs: ['JavaScript', 'HTML', 'CSS'], + start_date: '03/24/2022', + end_date: '04/08/2022', + start_time: '13:10:00', + end_time: '14:15:00', + location: 'https://zoom.us/my/john123', + price: 500, + }, + { + schedule_id: 3, + course_id: 5, + instructor_id: 10, + instructor_name: 'Mark', + size: 20, + subject: 'Intro to React', + description: 'Welcome to React', + prereqs: ['JavaScript', 'HTML', 'CSS'], + start_date: '03/15/2022', + end_date: '04/18/2022', + start_time: '13:30:00', + end_time: '14:45:00', + location: 'https://zoom.us/my/john123', + price: 500, + }, + { + schedule_id: 3, + course_id: 5, + instructor_id: 10, + instructor_name: 'Mark', + size: 20, + subject: 'Intro to React', + description: 'Welcome to React', + prereqs: ['JavaScript', 'HTML', 'CSS'], + start_date: '08/03/2022', + end_date: '09/08/2022', + start_time: '10:10:00', + end_time: '11:15:00', + location: 'https://zoom.us/my/john123', + price: 500, + }, + { + schedule_id: 3, + course_id: 5, + instructor_id: 10, + instructor_name: 'Mark', + size: 20, + subject: 'Intro to React', + description: 'Welcome to React', + prereqs: ['JavaScript', 'HTML', 'CSS'], + start_date: '06/01/2023', + end_date: '07/05/2023', + start_time: '08:00:00', + end_time: '09:05:00', + location: 'https://zoom.us/my/john123', + price: 500, + }, + { + schedule_id: 3, + course_id: 5, + instructor_id: 10, + instructor_name: 'Mark', + size: 20, + subject: 'Intro to React', + description: 'Welcome to React', + prereqs: ['JavaScript', 'HTML', 'CSS'], + start_date: '10/30/2022', + end_date: '11/28/2022', start_time: '17:00:00', end_time: '18:00:00', location: 'https://zoom.us/my/john123', price: 500, }, ], + newsfeed: [], }; diff --git a/src/styles/ParentStyles/booking.less b/src/styles/ParentStyles/booking.less index 94b49783..10e91e69 100644 --- a/src/styles/ParentStyles/booking.less +++ b/src/styles/ParentStyles/booking.less @@ -1,20 +1,18 @@ - -.image{ - max-width: 100%; +.image { + max-width: 100%; } -.btn-container { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - } - .btn { - border-radius: 10px; - padding: 10px 2px; - margin: 6px; - flex: 1; - background-color: #3bc9b5; - font-size: 16px; - font-weight: bold; - color: #680049; - } - \ No newline at end of file +// .drop-down-container { +// // display: flex; + // flex-wrap: wrap; + // justify-content: space-around; +// } +// .drop-down { + // border-radius: 10px; + // padding: 10px 2px; + // margin: 6px; + // flex: 1 125px; + // background-color: #3bc9b5; + // font-size: 16px; + // font-weight: bold; + // color: #680049; +// } From 5d03e4a23b7637d571ea4531a0b03ce851e6a300 Mon Sep 17 00:00:00 2001 From: kevin-liu Date: Tue, 4 Oct 2022 14:15:24 -0400 Subject: [PATCH 05/11] fixed available courses select functionality --- .../pages/ParentBooking/BookingProgram.js | 55 ++--------------- .../pages/ParentBooking/ParentBookingCard.js | 60 +++++-------------- .../PreferredCourseOptions.js.js | 37 ++++-------- .../ParentBooking/SelectedCourseDetails.js | 12 ---- src/components/pages/ParentBooking/index.js | 1 - 5 files changed, 31 insertions(+), 134 deletions(-) diff --git a/src/components/pages/ParentBooking/BookingProgram.js b/src/components/pages/ParentBooking/BookingProgram.js index 86c9dec4..deac433a 100644 --- a/src/components/pages/ParentBooking/BookingProgram.js +++ b/src/components/pages/ParentBooking/BookingProgram.js @@ -3,18 +3,11 @@ import { useState, useEffect } from 'react'; import { parentDummyData } from '../../../parentDummyData'; import { LeftOutlined, RightOutlined } from '@ant-design/icons'; -// const defaultValues = { -// program: '', -// course: '', -// date: '', -// }; const BookingProgram = ({ handleRadioClick, disabled }) => { const [index, setIndex] = useState(0); - // const [userChoice, setUserChoice] = useState(defaultValues); - // const [disabled, setDisabled] = useState(false); - // const toggleDisabled = () => { - // setDisabled(!disabled); - // }; + + // we used set to remove the duplicate courses in the dummy data but when it is connected to the backend it shouldn't have duplicates + // remove set when connected const subjectsArray = [ ...new Set( @@ -36,20 +29,6 @@ const BookingProgram = ({ handleRadioClick, disabled }) => { } }, [index, subjectsArray]); - // const handleRadioClick = e => { - // setUserChoice({ program: e.target.value }); - // console.log(userChoice); - // }; - // const handleCalendarClick = e => { - // setUserChoice({ date: e.target.value }); - // console.log(userChoice); - // }; - - // const handleTime = e => { - // setUserChoice({ time: e.target.value }); - // console.log(userChoice); - // }; - return ( <>
@@ -76,6 +55,7 @@ const BookingProgram = ({ handleRadioClick, disabled }) => { {selectProgramArray.map((subject, index) => { return ( { }; export default BookingProgram; - -// const startTimes = parentDummyData.availableCourses.map( -// time => time.start_time -// ); - -// const endTimes = parentDummyData.availableCourses.map(time => time.end_time); -// let durationArr = []; -// let duration = ''; -// const [durations, setDurations] = useState([]); -// const generateDurationArr = () => { -// for (let i = 0; i < endTimes.length; i++) { -// let difference = -// parseInt(endTimes[i][0] + endTimes[i][1]) - -// parseInt(startTimes[i][0] + startTimes[i][1]); -// duration += difference; -// if (endTimes[i][3] !== '0' || startTimes[i][3] !== '0') { -// duration += ' - ' + (difference + 1); -// } -// duration += ' hour(s)'; -// durationArr.push(duration); -// duration = ''; -// } -// setDurations(durationArr); -// }; -// useEffect(() => { -// generateDurationArr(); -// }, [durationArr, endTimes, startTimes]); diff --git a/src/components/pages/ParentBooking/ParentBookingCard.js b/src/components/pages/ParentBooking/ParentBookingCard.js index 50ab8963..ba1c55c8 100644 --- a/src/components/pages/ParentBooking/ParentBookingCard.js +++ b/src/components/pages/ParentBooking/ParentBookingCard.js @@ -1,6 +1,6 @@ // WE ARE CURRENTLY TRYING OUT THE SingleBookingComponent.js PLEASE REFER TO THAT COMPONENT FOR BOOKING FOR NOW -import React, { useEffect, useState, useRef } from 'react'; -import { Typography, Input, Layout, Form, Radio } from 'antd'; +import React, { useState } from 'react'; +import { Typography, Input, Layout, Form } from 'antd'; import { parentDummyData } from '../../../parentDummyData'; import BookingCalendar from './BookingCalendar'; import PreferredCourseOptions from './PreferredCourseOptions.js'; @@ -21,20 +21,6 @@ const courseDetails = { }; const ParentBookingCard = () => { - // course_id: 1, - // instructor_id: 1, - // instructor_name: 'Test003', - // size: 15, - // subject: 'CS101', - // description: 'Computer Science fundamentals', - // prereqs: [], - // start_date: '01/19/2022', - // end_date: '02/10/2022', - // start_time: '17:00:00', - // end_time: '18:00:00', - // location: 'https://zoom.us/my/john123', - // price: 1000, - const { Content } = Layout; const { Item } = Form; const { Title } = Typography; @@ -43,12 +29,10 @@ const ParentBookingCard = () => { const [show, setShow] = useState(true); const [disabled, setDisabled] = useState(false); const [render, setRender] = useState(false); - const [clickable, setClickable] = useState(false); const [selectedOption, setSelectedOption] = useState(courseDetails); let valuesObject = {}; - let program; - let date = 'no date selected'; + let newArray = []; let resultArray = []; @@ -57,19 +41,17 @@ const ParentBookingCard = () => { }; const handleRadioClick = e => { - program = e.target.value; + let program = e.target.value; valuesObject.program = program; }; const handleCalendarClick = value => { - date = value.format('MM/DD/YYYY'); + let date = value.format('MM/DD/YYYY'); valuesObject.date = date; }; const handleAvailability = e => { - e.preventDefault(); - - newArray = parentDummyData.availableCourses.filter((course, index) => { + newArray = parentDummyData.availableCourses.filter(course => { let programDate = course.start_date; let selectedDate = valuesObject.date; let programMonth = programDate.substring(0, 2); @@ -86,7 +68,6 @@ const ParentBookingCard = () => { resultArray = newArray.filter( course => course.subject === valuesObject.program ); - resultArray.unshift('-- Select a Course --'); setSearchResults(resultArray); setSelectedOption(resultArray[0]); if (valuesObject.program && valuesObject.date) { @@ -100,7 +81,7 @@ const ParentBookingCard = () => { window.location.reload(); }; - const handleSelecteCourse = () => { + const handleSelectedCourse = () => { setRender(!render); }; @@ -139,7 +120,7 @@ const ParentBookingCard = () => { > Select Program
- + { }} > Select Date - {/*
- {date} -
*/}
{ )}
- {show && !clickable && ( + {show && ( @@ -265,7 +235,7 @@ const ParentBookingCard = () => { padding: '7px 0', textTransform: 'uppercase', }} - onClick={handleSelecteCourse} + onClick={handleSelectedCourse} > View Selection Details diff --git a/src/components/pages/ParentBooking/PreferredCourseOptions.js.js b/src/components/pages/ParentBooking/PreferredCourseOptions.js.js index 9b3027c8..8d627658 100644 --- a/src/components/pages/ParentBooking/PreferredCourseOptions.js.js +++ b/src/components/pages/ParentBooking/PreferredCourseOptions.js.js @@ -1,21 +1,15 @@ -import { Result } from 'antd'; -import React, { useState } from 'react'; +import React from 'react'; import { timeConverter } from '../../common/timeHelpers'; -const PreferredCourseOptions = ({ - searchResults, - selectedOption, - updateSelection, -}) => { +const PreferredCourseOptions = ({ searchResults, updateSelection }) => { const onChange = e => { - const name = e.target.name; const { value } = e.target; - updateSelection(name, value); + updateSelection(value); }; - let choice; return ( diff --git a/src/components/pages/ParentBooking/SelectedCourseDetails.js b/src/components/pages/ParentBooking/SelectedCourseDetails.js index 5a4a1857..cd3eeb92 100644 --- a/src/components/pages/ParentBooking/SelectedCourseDetails.js +++ b/src/components/pages/ParentBooking/SelectedCourseDetails.js @@ -1,18 +1,6 @@ import React from 'react'; const SelectedCourseDetails = ({ selectedOption }) => { - // const courseDetails = { - // instructor_name: '', - // size: '', - // subject: '', - // description: '', - // start_date: '', - // end_date: '', - // start_time: '', - // end_time: '', - // price: '', - // }; - return (

Course Details:

diff --git a/src/components/pages/ParentBooking/index.js b/src/components/pages/ParentBooking/index.js index a332e55e..399b0b98 100644 --- a/src/components/pages/ParentBooking/index.js +++ b/src/components/pages/ParentBooking/index.js @@ -13,7 +13,6 @@ function ParentBooking() { - From 4d24d56bbbea5f30c852eb0b3751bb1bfc97f5de Mon Sep 17 00:00:00 2001 From: Laila Arkadan <91079490+lailaarkadan@users.noreply.github.com> Date: Thu, 6 Oct 2022 10:29:41 -0600 Subject: [PATCH 06/11] testing --- .../pages/ParentBooking/BookingCalendar.js | 4 +- .../pages/ParentBooking/BookingProgram.js | 14 +- .../pages/ParentBooking/ParentBookingCard.js | 193 ++++++++++-------- .../PreferredCourseOptions.js.js | 20 +- src/parentDummyData.js | 18 +- src/styles/ParentStyles/booking.less | 144 +++++++++++-- 6 files changed, 264 insertions(+), 129 deletions(-) diff --git a/src/components/pages/ParentBooking/BookingCalendar.js b/src/components/pages/ParentBooking/BookingCalendar.js index f9427c18..b8a48e8e 100644 --- a/src/components/pages/ParentBooking/BookingCalendar.js +++ b/src/components/pages/ParentBooking/BookingCalendar.js @@ -23,15 +23,17 @@ const BookingCalendar = ({ handleCalendarClick }) => { }} > diff --git a/src/components/pages/ParentBooking/BookingProgram.js b/src/components/pages/ParentBooking/BookingProgram.js index deac433a..0d6a19b5 100644 --- a/src/components/pages/ParentBooking/BookingProgram.js +++ b/src/components/pages/ParentBooking/BookingProgram.js @@ -31,8 +31,9 @@ const BookingProgram = ({ handleRadioClick, disabled }) => { return ( <> -
+
{ return ( { }} > {
diff --git a/src/components/pages/ParentBooking/ParentBookingCard.js b/src/components/pages/ParentBooking/ParentBookingCard.js index ba1c55c8..f83a7518 100644 --- a/src/components/pages/ParentBooking/ParentBookingCard.js +++ b/src/components/pages/ParentBooking/ParentBookingCard.js @@ -1,6 +1,6 @@ // WE ARE CURRENTLY TRYING OUT THE SingleBookingComponent.js PLEASE REFER TO THAT COMPONENT FOR BOOKING FOR NOW import React, { useState } from 'react'; -import { Typography, Input, Layout, Form } from 'antd'; +import { Typography, Input, Layout, Form, Button } from 'antd'; import { parentDummyData } from '../../../parentDummyData'; import BookingCalendar from './BookingCalendar'; import PreferredCourseOptions from './PreferredCourseOptions.js'; @@ -90,12 +90,12 @@ const ParentBookingCard = () => { }; return ( - +
@@ -104,19 +104,20 @@ const ParentBookingCard = () => { LEARN MORE THAN JUST CODE! -
+
Select Program
@@ -128,23 +129,28 @@ const ParentBookingCard = () => {
Select Date
- + @@ -152,36 +158,40 @@ const ParentBookingCard = () => {
{!show && !render && (

All times are in Central Standard Time (US & Canada)

@@ -194,20 +204,23 @@ const ParentBookingCard = () => { searchResults={searchResults} /> )} -
+
{show && ( - + )} {render && ( { /> )} {!show && !render && ( - + )} {!show && render && ( - + )} {!show && ( - + )}
diff --git a/src/components/pages/ParentBooking/PreferredCourseOptions.js.js b/src/components/pages/ParentBooking/PreferredCourseOptions.js.js index 8d627658..22cde2d4 100644 --- a/src/components/pages/ParentBooking/PreferredCourseOptions.js.js +++ b/src/components/pages/ParentBooking/PreferredCourseOptions.js.js @@ -11,16 +11,16 @@ const PreferredCourseOptions = ({ searchResults, updateSelection }) => { +