Skip to content

Commit

Permalink
refactored
Browse files Browse the repository at this point in the history
  • Loading branch information
@Prince0906
Prince0906 committed Jul 5, 2024
1 parent 0d4621e commit df51d0d
Showing 1 changed file with 55 additions and 63 deletions.
118 changes: 55 additions & 63 deletions app/assets/javascripts/components/wizard/form_panel.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,70 @@
import React, { useRef, useCallback } from 'react';
import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import Panel from './panel.jsx';
import DatePicker from '../common/date_picker.jsx';
import Calendar from '../common/calendar.jsx';
import CourseDateUtils from '../../utils/course_date_utils.js';

// Utility function for safe property access and transformation
function __guard__(value, transform) {
return (typeof value !== 'undefined' && value !== null) ? transform(value) : undefined;
}

const FormPanel = ({ course, shouldShowSteps, updateCourse, isValid, persistCourse, noDates }) => {
const noDatesRef = useRef(null);

const setNoBlackoutDatesChecked = useCallback(() => {
const { checked } = noDatesRef.current;
const toPass = { ...course, no_day_exceptions: checked };
updateCourse(toPass);
}, [course, updateCourse]);

const updateCourseDates = useCallback((valueKey, value) => {
const updatedCourse = CourseDateUtils.updateCourseDates(course, valueKey, value);
updateCourse(updatedCourse);
}, [course, updateCourse]);

const saveCourse = useCallback(() => {
if (isValid) {
persistCourse(course.slug);
const FormPanel = (props) => {
const [anyDatesSelected, setAnyDatesSelected] = useState(false);
const [blackoutDatesSelected, setBlackoutDatesSelected] = useState(false);
const noDatesRef = useRef(null); // Use useRef for noDates
const setNoBlackoutDatesChecked = () => {
const { checked } = noDatesRef.current; // Access current property of the ref
const toPass = { ...props.course, no_day_exceptions: checked }; // Avoid mutating props
props.updateCourse(toPass);
};
const updateCourseDates = (valueKey, value) => {
const updatedCourse = CourseDateUtils.updateCourseDates(props.course, valueKey, value);
props.updateCourse(updatedCourse);
};
const saveCourse = () => {
if (props.isValid) {
props.persistCourse(props.course.slug);
return true;
}
alert(I18n.t('error.form_errors'));
return false;
}, [isValid, persistCourse, course.slug]);

const nextEnabled = useCallback(() => {
return (__guard__(course.weekdays, x => x.indexOf(1)) >= 0)
&& (__guard__(course.day_exceptions, x => x.length) > 0 || course.no_day_exceptions);
}, [course.weekdays, course.day_exceptions, course.no_day_exceptions]);

const dateProps = CourseDateUtils.dateProps(course);

const step1 = shouldShowSteps
? <h2><span>1.</span><small>{I18n.t('wizard.confirm_dates')}</small></h2>
: <p>{I18n.t('wizard.confirm_dates')}</p>;

};
const nextEnabled = () => {
if (__guard__(props.course.weekdays, x => x.indexOf(1)) >= 0 && (__guard__(props.course.day_exceptions, x1 => x1.length) > 0 || props.course.no_day_exceptions)) {
return true;
}
return false;
};
const dateProps = CourseDateUtils.dateProps(props.course);
const step1 = props.shouldShowSteps ? (
<h2>
<span>1.</span>
{/* eslint-disable-next-line i18next/no-literal-string */}
<small> Confirm the course`&apos;`s start and end dates.</small>
</h2>
) : (
// eslint-disable-next-line i18next/no-literal-string
<p>Confirm the course`&apos;`s start and end dates.</p>
);
const rawOptions = (
<div>
<div className="course-dates__step">
{step1}
<div className="vertical-form full-width">
<DatePicker
onChange={updateCourseDates}
value={course.start}
value={props.course.start}
value_key="start"
editable={true}
validation={CourseDateUtils.isDateValid}
label="Course Start"
/>
<DatePicker
onChange={updateCourseDates}
value={course.end}
value={props.course.end}
value_key="end"
editable={true}
validation={CourseDateUtils.isDateValid}
label="Course End"
date_props={dateProps.end}
enabled={Boolean(course.start)}
enabled={Boolean(props.course.start)}
/>
</div>
</div>
Expand All @@ -75,7 +74,7 @@ const FormPanel = ({ course, shouldShowSteps, updateCourse, isValid, persistCour
<div className="vertical-form full-width">
<DatePicker
onChange={updateCourseDates}
value={course.timeline_start}
value={props.course.timeline_start}
value_key="timeline_start"
editable={true}
validation={CourseDateUtils.isDateValid}
Expand All @@ -84,38 +83,33 @@ const FormPanel = ({ course, shouldShowSteps, updateCourse, isValid, persistCour
/>
<DatePicker
onChange={updateCourseDates}
value={course.timeline_end}
value={props.course.timeline_end}
value_key="timeline_end"
editable={true}
validation={CourseDateUtils.isDateValid}
label="Assignment End"
date_props={dateProps.timeline_end}
enabled={Boolean(course.start)}
enabled={Boolean(props.course.start)}
/>
</div>
</div>
<hr />
<div className="wizard_form course-dates course-dates_step">
<Calendar
course={course}
course={props.course}
editable={true}
save={true}
setAnyDatesSelected={() => {}}
setBlackoutDatesSelected={() => {}}
setAnyDatesSelected={() => setAnyDatesSelected(!anyDatesSelected)}
setBlackoutDatesSelected={() => setBlackoutDatesSelected(blackoutDatesSelected)}
calendarInstructions={I18n.t('wizard.calendar_instructions')}
updateCourse={updateCourse}
updateCourse={props.updateCourse}
/>
<label>
{I18n.t('I have no class holidays')}
{ I18n.t('I have no class holidays') }
<input
type="checkbox"
onChange={setNoBlackoutDatesChecked}
ref={(checkbox) => {
noDatesRef.current = checkbox;
if (noDates) {
noDates.current = checkbox;
}
}}
ref={noDatesRef} // Use ref attribute correctly
/>
</label>
</div>
Expand All @@ -124,14 +118,11 @@ const FormPanel = ({ course, shouldShowSteps, updateCourse, isValid, persistCour

return (
<Panel
course={course}
shouldShowSteps={shouldShowSteps}
updateCourse={updateCourse}
isValid={isValid}
raw_options={rawOptions}
nextEnabled={nextEnabled}
{...props}
saveCourse={saveCourse}
helperText={I18n.t('wizard.select_dates_and_continue')}
nextEnabled={nextEnabled}
raw_options={rawOptions}
helperText="Select meeting days and holiday dates, then continue."
/>
);
};
Expand All @@ -141,8 +132,9 @@ FormPanel.propTypes = {
shouldShowSteps: PropTypes.bool,
updateCourse: PropTypes.func.isRequired,
isValid: PropTypes.bool.isRequired,
persistCourse: PropTypes.func.isRequired,
noDates: PropTypes.shape({ current: PropTypes.object })
};
}

export default FormPanel;
function __guard__(value, transform) {
return (typeof value !== 'undefined' && value !== null) ? transform(value) : undefined;
}

0 comments on commit df51d0d

Please sign in to comment.