Andal.LND/frontend-app-learner-dashboard
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: lint fixes

Browse Source
This commit is contained in:
Ben Warzeski
2022-05-25 14:52:37 -04:00
parent 787e780645
commit f051a152b2
19 changed files with 152 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/containers/CourseCard/CourseCardFooter.jsx
View File

@@ -1,9 +1,17 @@
import React from 'react';
import { Button, PageBanner, Alert } from '@edx/paragon';
import { Program } from '@edx/paragon/icons';
import {
// Button,
// PageBanner,
Alert,
} from '@edx/paragon';
import {
// Program
} from '@edx/paragon/icons';
export const CourseCardFooter = () => (
<Alert variant='success'>
<Alert variant="success">
footer
</Alert>
);
);
export default CourseCardFooter;

16
src/containers/CourseCard/CourseCardMenu.jsx
View File

@@ -5,18 +5,20 @@ import { MoreVert } from '@edx/paragon/icons';
export const CourseCardMenu = () => (
<Dropdown>
<Dropdown.Toggle
id='dropdown-toggle-with-iconbutton'
id="dropdown-toggle-with-iconbutton"
as={IconButton}
src={MoreVert}
iconAs={Icon}
variant='primary'
alt='Actions dropdown'
variant="primary"
alt="Actions dropdown"
/>
<Dropdown.Menu>
<Dropdown.Item href='#/action-1'>Unenroll</Dropdown.Item>
<Dropdown.Item href='#/action-2'>Email Settings</Dropdown.Item>
<Dropdown.Item href='#/action-3'>Share to Facebook</Dropdown.Item>
<Dropdown.Item href='#/action-3'>Share to Twitter</Dropdown.Item>
<Dropdown.Item href="#/action-1">Unenroll</Dropdown.Item>
<Dropdown.Item href="#/action-2">Email Settings</Dropdown.Item>
<Dropdown.Item href="#/action-3">Share to Facebook</Dropdown.Item>
<Dropdown.Item href="#/action-3">Share to Twitter</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
export default CourseCardMenu;

13
src/containers/CourseCard/RelatedProgram.jsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable quotes */
import React from 'react';
import { Button, useToggle, ModalDialog } from '@edx/paragon';
import { Program } from '@edx/paragon/icons';
@@ -6,7 +7,12 @@ export const RelatedProgram = () => {
const [isOpen, open, close] = useToggle(false);
return (
<>
<Button variant='tertiary' size="sm" iconBefore={Program} onClick={open}>
<Button
variant="tertiary"
size="sm"
iconBefore={Program}
onClick={open}
>
2 Related Program
</Button>
<ModalDialog
@@ -24,10 +30,13 @@ export const RelatedProgram = () => {
<ModalDialog.Body>
<p>
I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
{/* eslint-disable-next-line */}
I am baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
</p>
</ModalDialog.Body>
</ModalDialog>
</>
);
};
export default RelatedProgram;

30
src/containers/CourseCard/index.jsx
View File

@@ -1,16 +1,15 @@
import React, { useContext } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Program, Locked, MoreVert } from '@edx/paragon/icons';
import { Locked } from '@edx/paragon/icons';
import { Button, Card } from '@edx/paragon';
import { RelatedProgram } from './RelatedProgram';
import { CourseCardMenu } from './CourseCardMenu';
import { CourseCardFooter } from './CourseCardFooter';
import { courseData } from 'data/services/lms/fakeData/courses';
import RelatedProgram from './RelatedProgram';
import CourseCardMenu from './CourseCardMenu';
import CourseCardFooter from './CourseCardFooter';
function CourseCard({ courseID }) {
export const CourseCard = ({ courseID }) => {
const {
title,
imageUrl,
@@ -18,13 +17,12 @@ function CourseCard({ courseID }) {
displayOrg,
accessExpiryDate,
} = courseData[courseID] || {};
console.log(courseID);
return (
<div>
<Card orientation='horizontal'>
<Card orientation="horizontal">
<Card.ImageCap
src={imageUrl}
srcAlt='course thumbnail'
srcAlt="course thumbnail"
// logoSrc='https://via.placeholder.com/150'
// logoAlt='Card logo'
/>
@@ -36,8 +34,8 @@ function CourseCard({ courseID }) {
<Card.Section>
{displayOrg} • {displayNumber} • Access expires {accessExpiryDate}
</Card.Section>
<Card.Footer orientation='vertical' textElement={<RelatedProgram />}>
<Button iconBefore={Locked} variant='outline-primary'>
<Card.Footer orientation="vertical" textElement={<RelatedProgram />}>
<Button iconBefore={Locked} variant="outline-primary">
Upgrade
</Button>
<Button>Resume</Button>
@@ -47,14 +45,12 @@ function CourseCard({ courseID }) {
<CourseCardFooter />
</div>
);
}
};
CourseCard.propTypes = {
// intl: intlShape.isRequired,
courseID: PropTypes.string.isRequired,
};
CourseCard.defaultProps = {};
export default CourseCard;
// export default injectIntl(CourseCard);

6
src/containers/CourseList/index.jsx
View File

@@ -1,13 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import CourseCard from 'containers/CourseCard';
export const CourseList = ({ courseIDs }) => (
<div className='d-flex flex-column flex-grow-1'>
<div className="d-flex flex-column flex-grow-1">
{courseIDs.map((id) => (
<CourseCard courseID={id} />
))}
</div>
);
CourseList.propTypes = {
courseIDs: PropTypes.arrayOf(PropTypes.string).isRequired,
};
export default CourseList;

40
src/containers/Dashboard/index.jsx
View File

@@ -3,29 +3,27 @@ import React from 'react';
import CourseList from 'containers/CourseList';
import WidgetSidebar from 'containers/WidgetSidebar';
import { courseIDs } from 'data/services/lms/fakeData/courses';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import EmptyCourse from '../EmptyCourse';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import messages from '../Dashboard/messages';
import messages from './messages';
export const Dashboard = () => {
return (
<div className='d-flex flex-column p-2'>
{courseIDs.length ? (
<>
<h2 className='py-2'>
<FormattedMessage {...messages.myCourse} />
</h2>
<div className='d-flex'>
<CourseList courseIDs={courseIDs} />
<WidgetSidebar />
</div>
</>
) : (
<EmptyCourse />
)}
</div>
);
};
export const Dashboard = () => (
<div className="d-flex flex-column p-2">
{courseIDs.length ? (
<>
<h2 className="py-2">
<FormattedMessage {...messages.myCourse} />
</h2>
<div className="d-flex">
<CourseList courseIDs={courseIDs} />
<WidgetSidebar />
</div>
</>
) : (
<EmptyCourse />
)}
</div>
);
export default Dashboard;

8
src/containers/EmptyCourse/index.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react';
import messages from './messages';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import { Button } from '@edx/paragon'
import { Button } from '@edx/paragon';
import messages from './messages';
import './index.scss';
export const EmptyCourse = () => (
<div className='empty-course'>
<img src='empty-course.svg' />
<div className="empty-course">
<img src="empty-course.svg" alt="empty course banner" />
<h1>
<FormattedMessage {...messages.lookingForChallengePrompt} />
</h1>

68
src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.jsx
View File

@@ -8,42 +8,40 @@ import { Person } from '@edx/paragon/icons';
import messages from './messages';
function AuthenticatedUserDropdown({ intl, username }) {
return (
<>
<Dropdown className='user-dropdown'>
<Dropdown.Toggle invertColors variant='primary'>
<Icon src={Person} />
<span data-hj-suppress className='d-none d-md-inline'>
{username}
</span>
</Dropdown.Toggle>
<Dropdown.Menu className='dropdown-menu-right'>
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
{intl.formatMessage(messages.dashboard)}
</Dropdown.Item>{' '}
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${username}`}>
{intl.formatMessage(messages.profile)}
export const AuthenticatedUserDropdown = ({ intl, username }) => (
<>
<Dropdown className="user-dropdown">
<Dropdown.Toggle invertColors variant="primary">
<Icon src={Person} />
<span data-hj-suppress className="d-none d-md-inline">
{username}
</span>
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu-right">
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
{intl.formatMessage(messages.dashboard)}
</Dropdown.Item>{' '}
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${username}`}>
{intl.formatMessage(messages.profile)}
</Dropdown.Item>
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
{intl.formatMessage(messages.account)}
</Dropdown.Item>
{getConfig().ORDER_HISTORY_URL && (
<Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
{intl.formatMessage(messages.orderHistory)}
</Dropdown.Item>
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
{intl.formatMessage(messages.account)}
</Dropdown.Item>
{getConfig().ORDER_HISTORY_URL && (
<Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
{intl.formatMessage(messages.orderHistory)}
</Dropdown.Item>
)}
<Dropdown.Item href={getConfig().SUPPORT_URL}>
{intl.formatMessage(messages.help)}
</Dropdown.Item>
<Dropdown.Item href={getConfig().LOGOUT_URL}>
{intl.formatMessage(messages.signOut)}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
}
)}
<Dropdown.Item href={getConfig().SUPPORT_URL}>
{intl.formatMessage(messages.help)}
</Dropdown.Item>
<Dropdown.Item href={getConfig().LOGOUT_URL}>
{intl.formatMessage(messages.signOut)}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
AuthenticatedUserDropdown.propTypes = {
intl: intlShape.isRequired,

20
src/containers/LearnerDashboardHeader/GreetingBanner.jsx
View File

@@ -6,28 +6,28 @@ import messages from './messages';
export const GreetingBanner = () => {
let greetMessage;
let hour = new Date().getHours();
const hour = new Date().getHours();
if ( hour > 16 ) {
if (hour > 16) {
greetMessage = messages.goodEvening;
}
else if ( hour > 11 ) {
} else if (hour > 11) {
greetMessage = messages.goodAfternoon;
}
else {
} else {
greetMessage = messages.goodMorning;
}
return (
<div className='d-flex p-5 align-items-center justify-content-center'>
<div className="d-flex p-5 align-items-center justify-content-center">
<img
className='d-block'
className="d-block"
src={getConfig().LOGO_URL}
alt={getConfig().SITE_NAME}
/>
<h1 className='text-center text-white'>
<h1 className="text-center text-white">
<FormattedMessage {...greetMessage} />
</h1>
</div>
);
};
export default GreetingBanner;

14
src/containers/LearnerDashboardHeader/index.jsx
View File

@@ -5,17 +5,17 @@ import { Program } from '@edx/paragon/icons';
import { Button } from '@edx/paragon';
import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
import { GreetingBanner } from './GreetingBanner';
import GreetingBanner from './GreetingBanner';
import messages from './messages';
function LearnerDashboardHeader({ intl }) {
export const LearnerDashboardHeader = ({ intl }) => {
const { authenticatedUser } = useContext(AppContext);
return (
<div className='d-flex flex-column bg-primary'>
<header className='learner-dashboard-header'>
<div className='d-flex'>
<div className="d-flex flex-column bg-primary">
<header className="learner-dashboard-header">
<div className="d-flex">
<Button variant="inverse-tertiary" iconBefore={Program}>{intl.formatMessage(messages.switchToProgram)}</Button>
<div className='flex-grow-1'></div>
<div className="flex-grow-1" />
{authenticatedUser && (
<AuthenticatedUserDropdown username={authenticatedUser.username} />
)}
@@ -24,7 +24,7 @@ function LearnerDashboardHeader({ intl }) {
<GreetingBanner />
</div>
);
}
};
LearnerDashboardHeader.propTypes = {
intl: intlShape.isRequired,

4
src/containers/LearnerDashboardHeader/messages.js
View File

@@ -50,8 +50,8 @@ const messages = defineMessages({
switchToProgram: {
id: 'leanerDashboard.switchToProgram',
defaultMessage: 'Switch to Programs',
description: 'Header link for switching to program page.'
}
description: 'Header link for switching to program page.',
},
});
export default messages;

14
src/containers/WidgetSidebar/index.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react';
import messages from './messages';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import { Hyperlink, Card } from '@edx/paragon';
import messages from './messages';
import './index.scss';
export const WidgetSidebar = () => (
<div className='widget-sidebar'>
<div className='d-flex'>
<div className="widget-sidebar">
<div className="d-flex">
{/* <img src='more-courses-sidewidget.svg' />
<div>
<h3>
@@ -17,16 +17,16 @@ export const WidgetSidebar = () => (
<FormattedMessage {...messages.findCoursesButton} />
</Hyperlink>
</div> */}
<Card orientation='horizontal' className='mb-4'>
<Card orientation="horizontal" className="mb-4">
<Card.ImageCap
src='more-courses-sidewidget.svg'
srcAlt='course side widget'
src="more-courses-sidewidget.svg"
srcAlt="course side widget"
/>
<Card.Body>
<h3>
<FormattedMessage {...messages.lookingForChallengePrompt} />
</h3>
<Hyperlink variant='brand' destination='#'>
<Hyperlink variant="brand" destination="#">
<FormattedMessage {...messages.findCoursesButton} />
</Hyperlink>
</Card.Body>

2
src/data/redux/requests/selectors.js
View File

@@ -1,6 +1,6 @@
import { StrictDict } from 'utils';
import { RequestStates } from 'data/constants/requests';
import * as module from './selectors';
// import * as module from './selectors';
export const requestStatus = (state, { requestKey }) => state.requests[requestKey];

8
src/data/redux/thunkActions/app.js
View File

@@ -1,16 +1,16 @@
import { StrictDict } from 'utils';
import { selectors, actions } from 'data/redux';
import { locationId } from 'data/constants/app';
// import { selectors, actions } from 'data/redux';
// import { locationId } from 'data/constants/app';
// import { } from './requests';
import * as module from './app';
// import * as module from './app';
/**
* initialize the app, loading ora and course metadata from the api, and loading the initial
* submission list data.
*/
export const initialize = () => (dispatch) => {
export const initialize = () => () => {
};
export default StrictDict({

6
src/data/redux/thunkActions/requests.js
View File

@@ -1,10 +1,10 @@
import { StrictDict } from 'utils';
import { RequestKeys } from 'data/constants/requests';
// import { RequestKeys } from 'data/constants/requests';
import { actions } from 'data/redux';
import api from 'data/services/lms/api';
// import api from 'data/services/lms/api';
import * as module from './requests';
// import * as module from './requests';
/**
* Wrapper around a network request promise, that sends actions to the redux store to

10
src/data/services/lms/api.js
View File

@@ -1,13 +1,15 @@
// import { StrictDict } from 'utils';
/*
import { StrictDict } from 'utils';
import { locationId } from 'data/constants/app';
// import { paramKeys } from './constants';
import { paramKeys } from './constants';
import urls from './urls';
import {
// client,
client,
get,
// post,
post,
stringifyUrl,
} from './utils';
*/
/*********************************************************************************
* GET Actions

34
src/data/services/lms/messages.js
View File

@@ -1,34 +0,0 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
import { gradingStatuses } from './constants';
const messages = defineMessages({
ungraded: {
id: 'learner-dashboard.lms-api.gradingStatusDisplay.ungraded',
defaultMessage: 'Ungraded',
description: 'Grading status label for ungraded submission',
},
locked: {
id: 'learner-dashboard.lms-api.gradingStatusDisplay.locked',
defaultMessage: 'Currently being graded by someone else',
description: 'Grading status label for locked submission',
},
graded: {
id: 'learner-dashboard.lms-api.gradingStatusDisplay.graded',
defaultMessage: 'Grading Completed',
description: 'Grading status label for graded submission',
},
inProgress: {
id: 'learner-dashboard.lms-api.gradingStatusDisplay.inProgress',
defaultMessage: 'You are currently grading this response',
description: 'Grading status label for in-progress submission',
},
});
// re-keying the messages to ensure that the api can link to them even if the passed
// status keys change.
export default {
[gradingStatuses.ungraded]: messages.ungraded,
[gradingStatuses.locked]: messages.locked,
[gradingStatuses.graded]: messages.graded,
[gradingStatuses.inProgress]: messages.inProgress,
};

85
src/test/inspector.js
View File

@@ -1,12 +1,10 @@
/* eslint-disable import/no-extraneous-dependencies */
import { within } from '@testing-library/react';
// import { within } from '@testing-library/react';
import fakeData from 'data/services/lms/fakeData';
import { gradingStatusTransform } from 'data/redux/grading/selectors/selected';
// import fakeData from 'data/services/lms/fakeData';
// import { gradingStatusTransform } from 'data/redux/grading/selectors/selected';
import appMessages from './messages';
const { rubricConfig } = fakeData.oraMetadata;
// import appMessages from './messages';
/**
* App inspector class providing methods to return elements from within
@@ -23,86 +21,11 @@ class Inspector {
this.findByLabelText = this.el.findByLabelText;
}
/**
* Returns listView elements (immediate return methods)
*/
get listView() {
const table = () => this.getByRole('table');
const tableRows = () => table().querySelectorAll('tbody tr');
return {
table,
tableRows,
selectedBtn: (num) => this.getByText(`View selected responses (${num})`),
loadingResponses: () => this.getByText(appMessages.ListView.loadingResponses),
listCheckbox: (index) => (
within(tableRows().item(index)).getByTitle('Toggle Row Selected')
),
backLink: () => this.getByText(appMessages.ListView.backToResponsesLowercase).closest('a'),
reloadBtn: () => this.getByText(appMessages.ListView.reloadSubmissions).closest('button'),
};
}
/**
* Returns Review Modal elements (immediate return methods)
*/
get review() {
const modal = this.getByRole('dialog');
const modalEl = within(modal);
const { getByLabelText, getByText } = modalEl;
const rubricContent = () => modalEl.getByText(appMessages.Rubric.rubric).closest('div');
const rubricFeedback = () => (
within(rubricContent()).getByText(appMessages.Rubric.overallComments).closest('div')
);
const rubricCriterion = (index) => (
within(rubricContent()).getByText(rubricConfig.criteria[index].prompt).closest('div')
);
return {
modal: () => modal,
modalEl: () => modalEl,
nextNav: () => getByLabelText(appMessages.ReviewActionsComponents.loadNext),
prevNav: () => getByLabelText(appMessages.ReviewActionsComponents.loadPrevious),
hideRubricBtn: () => getByText(appMessages.ReviewActions.hideRubric),
showRubricBtn: () => getByText(appMessages.ReviewActions.showRubric),
loadingResponse: () => getByText(appMessages.ReviewModal.loadingResponse),
retryFetchLink: () => (
getByText(appMessages.ReviewErrors.reloadSubmission).closest('button')
),
username: (index) => getByText(fakeData.ids.username(index)),
gradingStatus: (submission) => (
getByText(appMessages.lms[gradingStatusTransform(submission)])
),
rubric: {
criteria: () => modal.querySelectorAll('.rubric-criteria'),
feedbackInput: () => within(rubricFeedback()).getByRole('textbox'),
submitGradeBtn: () => modalEl.getByText(appMessages.Rubric.submitGrade),
criterion: rubricCriterion,
criterionOption: (criterionIndex, optionIndex) => (
within(rubricCriterion(criterionIndex))
.getByText(rubricConfig.criteria[criterionIndex].options[optionIndex].label)
),
criterionFeedback: (index) => within(rubricCriterion(index)).getByRole('textbox'),
},
};
}
/**
* Returns promises for attempting to find elements within the DOM
*/
get find() {
return {
listView: {
viewAllResponsesBtn: () => this.findByText(appMessages.ListView.viewAllResponses),
loadErrorHeading: () => this.findByText(appMessages.ListView.loadErrorHeading),
},
review: {
prevNav: () => (
this.review.modalEl().findByLabelText(appMessages.ReviewActionsComponents.loadPrevious)
),
loadErrorHeading: () => this.findByText(appMessages.ReviewErrors.loadErrorHeading),
startGradingBtn: () => this.findByText(appMessages.ReviewActionsComponents.startGrading),
overrideGradeBtn: () => this.findByText(appMessages.ReviewActionsComponents.overrideGrade),
submitGradeBtn: () => this.findByText(appMessages.Rubric.submitGrade),
},
};
}
}

25
src/test/messages.js
View File

@@ -1,30 +1,9 @@
import InfoPopover from 'components/InfoPopover/messages';
import ResponseDisplay from 'containers/ResponseDisplay/messages';
import ResponseDisplayComponents from 'containers/ResponseDisplay/components/messages';
import CriterionContainer from 'containers/CriterionContainer/messages';
import ListView from 'containers/ListView/messages';
import ReviewActions from 'containers/ReviewActions/messages';
import ReviewActionsComponents from 'containers/ReviewActions/components/messages';
import Rubric from 'containers/Rubric/messages';
import ReviewModal from 'containers/ReviewModal/messages';
import ReviewErrors from 'containers/ReviewModal/ReviewErrors/messages';
import lms from 'data/services/lms/messages';
/*
const mapMessages = (messages) => Object.keys(messages).reduce(
(acc, key) => ({ ...acc, [key]: messages[key].defaultMessage }),
{},
);
*/
export default {
InfoPopover: mapMessages(InfoPopover),
ResponseDisplay: mapMessages(ResponseDisplay),
ResponseDisplayComponents: mapMessages(ResponseDisplayComponents),
CriterionContainer: mapMessages(CriterionContainer),
ListView: mapMessages(ListView),
ReviewActions: mapMessages(ReviewActions),
ReviewActionsComponents: mapMessages(ReviewActionsComponents),
Rubric: mapMessages(Rubric),
ReviewModal: mapMessages(ReviewModal),
ReviewErrors: mapMessages(ReviewErrors),
lms: mapMessages(lms),
};