Skip to content

Commit

Permalink
refactor: updated frontend-build & resolved eslint issues (#265)
Browse files Browse the repository at this point in the history
  • Loading branch information
@BilalQamar95
BilalQamar95 authored Feb 9, 2023
1 parent 9814a06 commit 524232f
Show file tree
Hide file tree
Showing 24 changed files with 950 additions and 981 deletions.
1,431 changes: 714 additions & 717 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
},
"devDependencies": {
"@edx/browserslist-config": "^1.1.0",
"@edx/frontend-build": "12.0.3",
"@edx/frontend-build": "12.3.0",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "11.2.7",
"@testing-library/react-hooks": "7.0.2",
Expand Down
20 changes: 9 additions & 11 deletions src/components/NotFoundPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@ import PageWrapper from './PageWrapper';

export const NOT_FOUND_TEXT = 'No catalog information is available on this page';

function NotFoundPage() {
return (
<PageWrapper>
<FormattedMessage
id="notFound.text"
defaultMessage={NOT_FOUND_TEXT}
description="Error message returned when no data can be returned."
/>
</PageWrapper>
);
}
const NotFoundPage = () => (
<PageWrapper>
<FormattedMessage
id="notFound.text"
defaultMessage={NOT_FOUND_TEXT}
description="Error message returned when no data can be returned."
/>
</PageWrapper>
);

export default NotFoundPage;
14 changes: 6 additions & 8 deletions src/components/PageWrapper.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,12 @@ import { PAGE_TITLE } from '../constants';
export const DATA_TEST_ID = 'enterprise-catalogs-content';

// eslint-disable-next-line react/prop-types
function PageWrapper({ children, className }) {
return (
<Container size="xl" className={className}>
<Helmet title={PAGE_TITLE} />
<div data-testid={DATA_TEST_ID}>{children}</div>
</Container>
);
}
const PageWrapper = ({ children, className }) => (
<Container className={className}>
<Helmet title={PAGE_TITLE} />
<div data-testid={DATA_TEST_ID}>{children}</div>
</Container>
);

PageWrapper.defaultProps = {
className: '',
Expand Down
28 changes: 14 additions & 14 deletions src/components/app/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,18 @@ import { logError } from '@edx/frontend-platform/logging';
import CatalogPage from '../catalogPage/CatalogPage';
import NotFoundPage from '../NotFoundPage';

export function EnterpriseCatalogsApp() {
return (
<>
<Header />
<Switch>
<PageRoute exact path="/" component={CatalogPage} />
<PageRoute path="*" component={NotFoundPage} />
</Switch>
<Footer />
</>
);
}
export const EnterpriseCatalogsApp = () => (
<>
<Header />
<Switch>
<PageRoute exact path="/" component={CatalogPage} />
<PageRoute path="*" component={NotFoundPage} />
</Switch>
<Footer />
</>
);

export default function App() {
const App = () => {
useEffect(() => {
if (process.env.HOTJAR_APP_ID) {
try {
Expand All @@ -43,4 +41,6 @@ export default function App() {
<EnterpriseCatalogsApp />
</AppProvider>
);
}
};

export default App;
38 changes: 18 additions & 20 deletions src/components/catalogInfoModal/CatalogInfoModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,21 @@ import messages from './CatalogInfoModal.messages';
import CatalogCourseModalBanner from '../catalogModalBanner/CatalogCourseModalBanner';
import CatalogProgramModalBanner from '../catalogModalBanner/CatalogProgramModalBanner';

function SkillsListing({ skillNames }) {
return (
<ul className="mx-2 course-info-skills-list">
{skillNames.slice(0, 5).map((s) => (
<li key={`skill-name-${s}`}>{s}</li>
))}
</ul>
);
}
const SkillsListing = ({ skillNames }) => (
<ul className="mx-2 course-info-skills-list">
{skillNames.slice(0, 5).map((s) => (
<li key={`skill-name-${s}`}>{s}</li>
))}
</ul>
);

SkillsListing.propTypes = {
skillNames: PropTypes.arrayOf(PropTypes.string).isRequired,
};

function CourseModal({
const CourseModal = ({
intl, isOpen, onClose, isExecEdType, selectedCourse,
}) {
}) => {
const {
courseTitle,
courseProvider,
Expand Down Expand Up @@ -133,7 +131,7 @@ function CourseModal({
</ModalDialog>
</div>
);
}
};

CourseModal.propTypes = {
intl: intlShape.isRequired,
Expand All @@ -156,7 +154,7 @@ CourseModal.propTypes = {
}).isRequired,
};

function CourseDisplayForProgram({ course }) {
const CourseDisplayForProgram = ({ course }) => {
const { image, title, short_description: desc } = course;
// removing html tags in description
const regex = /(<([^>]+)>)/gi;
Expand All @@ -183,7 +181,7 @@ function CourseDisplayForProgram({ course }) {
</div>
</div>
);
}
};

CourseDisplayForProgram.propTypes = {
course: PropTypes.shape({
Expand All @@ -193,9 +191,9 @@ CourseDisplayForProgram.propTypes = {
}).isRequired,
};

function ProgramModal({
const ProgramModal = ({
intl, isOpen, onClose, selectedProgram,
}) {
}) => {
const {
programTitle,
programProvider,
Expand Down Expand Up @@ -310,7 +308,7 @@ function ProgramModal({
</ModalDialog>
</div>
);
}
};

ProgramModal.propTypes = {
intl: intlShape.isRequired,
Expand All @@ -330,15 +328,15 @@ ProgramModal.propTypes = {
}).isRequired,
};

function CatalogCourseInfoModal({
const CatalogCourseInfoModal = ({
intl,
isOpen,
onClose,
isExecEdType,
selectedCourse,
selectedProgram,
renderProgram,
}) {
}) => {
if (!selectedCourse && !renderProgram) {
return null;
}
Expand All @@ -365,7 +363,7 @@ function CatalogCourseInfoModal({
onClose={onClose}
/>
);
}
};

CatalogCourseInfoModal.defaultProps = {
isOpen: false,
Expand Down
94 changes: 46 additions & 48 deletions src/components/catalogModalBanner/CatalogCourseModalBanner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,75 +36,73 @@ function availabilitySubtitle(start, end, upcomingRuns) {
return retString;
}

function CatalogCourseModalBanner({
const CatalogCourseModalBanner = ({
intl,
coursePrice,
courseAssociatedCatalogs,
startDate,
endDate,
upcomingRuns,
execEd,
}) {
return (
<div className="banner">
}) => (
<div className="banner">
<div className="banner-section mx-3">
<div className="banner h4 mb-0">
<Icon className="mr-1" src={MoneyOutline} />
{coursePrice.split('.')[0]}
</div>
<div className="banner-subtitle small">
{intl.formatMessage(
messages['CatalogCourseModalBanner.bannerPriceText'],
)}
</div>
</div>
<div className="banner-section slash">/</div>
{checkSubscriptions(courseAssociatedCatalogs) && !execEd && (
<>
<div className="banner-section mx-3">
<div className="banner h4 mb-0">
<Icon className="mr-1" src={MoneyOutline} />
{coursePrice.split('.')[0]}
</div>
<div className="banner-subtitle small">
<Icon className="mr-1" src={BookOpen} />
{intl.formatMessage(
messages['CatalogCourseModalBanner.bannerPriceText'],
messages['CatalogCourseModalBanner.bannerCatalogText'],
)}
</div>
<div className="banner-subtitle small">
{checkSubscriptions(courseAssociatedCatalogs)}
</div>
</div>
<div className="banner-section slash">/</div>
{checkSubscriptions(courseAssociatedCatalogs) && !execEd && (
<>
<div className="banner-section mx-3">
<div className="banner h4 mb-0">
<Icon className="mr-1" src={BookOpen} />
{intl.formatMessage(
messages['CatalogCourseModalBanner.bannerCatalogText'],
)}
</div>
<div className="banner-subtitle small">
{checkSubscriptions(courseAssociatedCatalogs)}
</div>
</div>
<div className="banner-section slash">/</div>
</>
)}
{execEd && (
<>
<div className="banner-section mx-3">
<div className="banner h4 mb-0">
<Icon className="mr-1" src={Book} />
{intl.formatMessage(
messages['CatalogCourseModalBanner.bannerExecEdText'],
)}
</div>
<div className="banner-subtitle small">
{intl.formatMessage(
messages['CatalogCourseModalBanner.bannerExecEdSubtext'],
)}
</div>
</div>
<div className="banner-section slash">/</div>
</>
)}
</>
)}
{execEd && (
<>
<div className="banner-section mx-3">
<div className="banner h4 mb-0">
<Icon className="mr-1" src={EventNote} />
{checkAvailability(startDate, endDate)}
<Icon className="mr-1" src={Book} />
{intl.formatMessage(
messages['CatalogCourseModalBanner.bannerExecEdText'],
)}
</div>
<div className="banner-subtitle small">
{availabilitySubtitle(startDate, endDate, upcomingRuns)}{' '}
{intl.formatMessage(
messages['CatalogCourseModalBanner.bannerExecEdSubtext'],
)}
</div>
</div>
<div className="banner-section slash">/</div>
</>
)}
<div className="banner-section mx-3">
<div className="banner h4 mb-0">
<Icon className="mr-1" src={EventNote} />
{checkAvailability(startDate, endDate)}
</div>
<div className="banner-subtitle small">
{availabilitySubtitle(startDate, endDate, upcomingRuns)}{' '}
</div>
</div>
);
}
</div>
);

CatalogCourseModalBanner.defaultProps = {
coursePrice: '0',
Expand Down
Loading

0 comments on commit 524232f

Please sign in to comment.