Skip to content

Commit

Permalink
Refactors several components and completes all unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbusch3
mbusch3 committed Jul 7, 2023
1 parent eff90f0 commit b1ec319
Show file tree
Hide file tree
Showing 20 changed files with 2,694 additions and 976 deletions.
1,076 changes: 363 additions & 713 deletions .../obojobo-repository/shared/components/__snapshots__/course-score-data-dialog.test.js.snap
View file

Large diffs are not rendered by default.

100 changes: 100 additions & 0 deletions ...ojobo-repository/shared/components/__snapshots__/course-score-data-list-item.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CourseScoreDataListItem renders correctly when selected 1`] = `
<div
className="course-score-data-list--item is-selected"
onClick={[Function]}
>
<div
className="courseTitle"
>
Mock Course Title
(
MCT-101
)
</div>
<div
className="userCount"
>
10
Learner
s
</div>
<div
className="accessed"
>
Last Accessed  
<span
className="timestamp"
>
Apr 1st 2020 - 9:15 AM
</span>
</div>
</div>
`;

exports[`CourseScoreDataListItem renders with standard expected props 1`] = `
<div
className="course-score-data-list--item"
onClick={[Function]}
>
<div
className="courseTitle"
>
Mock Course Title
(
MCT-101
)
</div>
<div
className="userCount"
>
10
Learner
s
</div>
<div
className="accessed"
>
Last Accessed  
<span
className="timestamp"
>
Apr 1st 2020 - 9:15 AM
</span>
</div>
</div>
`;

exports[`CourseScoreDataListItem user count displays properly without the "s" for 1 learner 1`] = `
<div
className="course-score-data-list--item"
onClick={[Function]}
>
<div
className="courseTitle"
>
Mock Course Title
(
MCT-101
)
</div>
<div
className="userCount"
>
1
Learner
</div>
<div
className="accessed"
>
Last Accessed  
<span
className="timestamp"
>
Apr 1st 2020 - 9:15 AM
</span>
</div>
</div>
`;
124 changes: 54 additions & 70 deletions packages/app/obojobo-repository/shared/components/course-score-data-dialog.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,42 @@
require('./course-score-data-dialog.scss')

const { CSSTransition } = require('react-transition-group')
const { useState, useEffect, createRef } = require('react')
const React = require('react')
const ModuleImage = require('./module-image')
const Button = require('./button')
const Loading = require('./loading')
const ReactModal = require('react-modal')
const dayjs = require('dayjs')
const CourseStats = require('./stats/course-stats')
const CourseScoreDataListItem = require('./course-score-data-list-item')
const CourseStatsTypeSelect = require('./stats/course-stats-type-select')
const CourseStatsFilterControls = require('./stats/course-stats-filter-controls')
const CourseStatsSearchControls = require('./stats/course-stats-search-controls')
const Search = require('./search')

const VIEW_MODE_FINAL_ASSESSMENT_SCORE = 'final-assessment-scores'
const VIEW_MODE_ALL_ATTEMPTS = 'all-attempts'

const CourseScoreDataDialog = ({
draftId,
title,
onClose,
isCoursesLoading,
hasCoursesLoaded,
courses
}) => {
const [fetchUrl, setFetchUrl] = useState(null)
const [selectedIndex, setSelectedIndex] = useState(null)
const [selectedCourse, setSelectedCourse] = useState(null)
const [courseIsLoading, setCourseIsLoading] = useState(false)
const [courseHasLoaded, setCourseHasLoaded] = useState(false)
const [courseData, setCourseData] = useState(null)
const [isMenuOpen, setIsMenuOpen] = useState(true)
const [courseSearch, setCourseSearch] = useState('')

const [searchViewMode, setSearchViewMode] = useState(VIEW_MODE_FINAL_ASSESSMENT_SCORE)
const [searchSettings, setSearchSettings] = useState('')
const [searchContent, setSearchContent] = useState('')
const [searchFilterSettings, setSearchFilterSettings] = useState({

const CourseScoreDataDialog = ({ draftId, title, onClose, isCoursesLoading, courses }) => {
// const [fetchUrl, setFetchUrl] = React.useState(null)
const [selectedIndex, setSelectedIndex] = React.useState(null)
const [selectedCourse, setSelectedCourse] = React.useState(null)
const [courseIsLoading, setCourseIsLoading] = React.useState(false)
const [courseHasLoaded, setCourseHasLoaded] = React.useState(false)
const [courseData, setCourseData] = React.useState(null)
const [isMenuOpen, setIsMenuOpen] = React.useState(true)
const [courseSearch, setCourseSearch] = React.useState('')

const [searchViewMode, setSearchViewMode] = React.useState(VIEW_MODE_FINAL_ASSESSMENT_SCORE)
const [searchSettings, setSearchSettings] = React.useState('')
const [searchContent, setSearchContent] = React.useState('')
const [searchFilterSettings, setSearchFilterSettings] = React.useState({
showIncompleteAttempts: false,
showPreviewAttempts: false,
showAdvancedFields: false
})

const baseUrl = `/api/assessments/${draftId}`
const menuRef = createRef()

// When the fetchUrl changes, fetch the data from that URL and save it to courseData.
useEffect(() => {
if (!fetchUrl) {
return
}
fetch(fetchUrl, {})
.then(res => res.json())
.then(res => {
setCourseData(res.value)
setCourseIsLoading(false)
setCourseHasLoaded(true)
})
}, [fetchUrl])
const menuRef = React.createRef()

const filterCourses = courses => {
if (courseSearch.trim().length == 0) {
Expand All @@ -72,7 +51,7 @@ const CourseScoreDataDialog = ({
const haystack = course.contextTitle.toLowerCase() + course.contextLabel.toLowerCase()

// If each word in the search can be found in the course title and label, return true
containsAll = true
let containsAll = true
lowerCaseArray.forEach(word => {
if (!haystack.includes(word)) {
containsAll = false
Expand All @@ -84,7 +63,10 @@ const CourseScoreDataDialog = ({

const filteredCourses = filterCourses(courses)

const selectCourse = contextId => {
const selectCourse = async contextId => {
if (selectedCourse == contextId) {
return
}
setCourseData(null)
setCourseIsLoading(true)
setCourseHasLoaded(false)
Expand All @@ -96,7 +78,20 @@ const CourseScoreDataDialog = ({

const newFetchUrl = `${baseUrl}/course/${contextId}/details`
setSelectedIndex(contextId)
setFetchUrl(newFetchUrl)
const courseData = await runFetch(newFetchUrl)
loadCourseData(courseData)
}

const runFetch = fetchUrl => {
return fetch(fetchUrl, {})
.then(res => res.json())
.then(res => res.value)
}

const loadCourseData = courseData => {
setCourseData(courseData)
setCourseIsLoading(false)
setCourseHasLoaded(true)
}

const toggleMenu = () => {
Expand All @@ -122,7 +117,7 @@ const CourseScoreDataDialog = ({
<div className="course-search">
<Search
onChange={setCourseSearch}
focusOnMount={true}
focusOnMount={false}
placeholder="Search..."
value={courseSearch}
/>
Expand All @@ -140,9 +135,10 @@ const CourseScoreDataDialog = ({
courseLabel={course.contextLabel}
courseUserCount={parseInt(course.userCount)}
courseLastAccessed={dayjs(course.lastAccessed).format('MMM Do YYYY - h:mm A')}
onClick={selectCourse}
courseClick={selectCourse}
isSelected={selectedIndex === course.contextId}
index={course.contextId}
key={course.contextId}
/>
))}
</div>
Expand All @@ -152,20 +148,8 @@ const CourseScoreDataDialog = ({
)
}

const onChangeViewMode = event => {
setSearchViewMode(event.target.value)
}

const renderModeSelection = () => {
return (
<label className="view-mode">
Show:
<select onChange={onChangeViewMode} value={searchViewMode}>
<option value={VIEW_MODE_FINAL_ASSESSMENT_SCORE}>Final Assessment Scores</option>
<option value={VIEW_MODE_ALL_ATTEMPTS}>All Attempt Scores</option>
</select>
</label>
)
const changeViewMode = mode => {
setSearchViewMode(mode)
}

const validCourseSelected = selectedIndex !== null
Expand Down Expand Up @@ -196,21 +180,21 @@ const CourseScoreDataDialog = ({
<div className="data-viewer--header">
<div className="data-viewer--header--title-container">
<div className="data-viewer--header--title">{currentCourseTitle}</div>
{validCourseSelected ? <small>{currentCourseAccessed}</small> : ''}
<small>{currentCourseAccessed}</small>
</div>
<div className="data-viewer--header--filter-container">
<CourseStatsSearchControls
searchSettings={searchSettings}
onChangeSearchSettings={setSearchSettings}
onChangeSearchContent={setSearchContent}
/>
</div>
{validCourseSelected ? (
<div className="data-viewer--header--filter-container">
<CourseStatsSearchControls
onChangeSearchSettings={setSearchSettings}
onChangeSearchContent={setSearchContent}
/>
</div>
) : (
''
)}
</div>
<div className="data-viewer--filter-controls">
{renderModeSelection()}
<CourseStatsTypeSelect
viewMode={searchViewMode}
onChangeViewMode={changeViewMode}
/>
<CourseStatsFilterControls
filterSettings={searchFilterSettings}
onChangeFilterSettings={setSearchFilterSettings}
Expand Down
Loading

0 comments on commit b1ec319

Please sign in to comment.