Skip to content

Commit

Permalink
Merge pull request #2273 from flacial/2208-lesson-submissions-to-revi…
Browse files Browse the repository at this point in the history 
…ew-badge-0-submissions

fix: Submission review count shows with none submissions
  • Loading branch information
@flacial
flacial authored Sep 10, 2022
2 parents ab249a9 + d9dc26e commit 72c893d
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 322 deletions.
6 changes: 4 additions & 2 deletions __tests__/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10090,7 +10090,8 @@ exports[`Storyshots Components/LessonCard With Completed 1`] = `
Create basic Front-End Mini-Projects that demonstrate User Interface logic and understanding of Web Development.
</p>
<a
className="btn btn-sm btn-primary text-white float-end mb-2 me-2me-0"
className="btn btn-sm btn-primary text-white float-end mb-2 me-2 me-0"
data-testid="review-submissions-count"
href="/review/js0"
onClick={[Function]}
onMouseEnter={[Function]}
Expand Down Expand Up @@ -10187,7 +10188,8 @@ exports[`Storyshots Components/LessonCard With Completed 1`] = `
</p>
</div>
<a
className="btn btn-sm btn-primary text-white float-end mb-2 me-2"
className="btn btn-sm btn-primary text-white float-end mb-2 me-2 "
data-testid="review-submissions-count"
href="/review/js0"
onClick={[Function]}
onMouseEnter={[Function]}
Expand Down
60 changes: 0 additions & 60 deletions __tests__/pages/__snapshots__/curriculum.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2060,16 +2060,6 @@ exports[`Curriculum Page Should render with lessonStatus data 1`] = `
>
A super simple introduction to help you get started!
</p>
<a
class="btn btn-sm btn-primary text-white float-end mb-2 me-2me-0"
href="/review/js0"
>
Review
<span>
0
</span>
Submissions
</a>
</div>
<div
class="d-none d-sm-flex p-2"
Expand Down Expand Up @@ -2149,16 +2139,6 @@ exports[`Curriculum Page Should render with lessonStatus data 1`] = `
A super simple introduction to help you get started!
</p>
</div>
<a
class="btn btn-sm btn-primary text-white float-end mb-2 me-2"
href="/review/js0"
>
Review
<span>
0
</span>
Submissions
</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -2243,16 +2223,6 @@ exports[`Curriculum Page Should render with lessonStatus data 1`] = `
>
Learn how to solve simple algorithm problems recursively with the following exercises.
</p>
<a
class="btn btn-sm btn-primary text-white float-end mb-2 me-2me-0"
href="/review/js1"
>
Review
<span>
0
</span>
Submissions
</a>
</div>
<div
class="d-none d-sm-flex p-2"
Expand Down Expand Up @@ -2332,16 +2302,6 @@ exports[`Curriculum Page Should render with lessonStatus data 1`] = `
Learn how to solve simple algorithm problems recursively with the following exercises.
</p>
</div>
<a
class="btn btn-sm btn-primary text-white float-end mb-2 me-2"
href="/review/js1"
>
Review
<span>
0
</span>
Submissions
</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -2426,16 +2386,6 @@ exports[`Curriculum Page Should render with lessonStatus data 1`] = `
>
These exercises will help you gain a better understanding of what it means for a data structure to be non-primitive.
</p>
<a
class="btn btn-sm btn-primary text-white float-end mb-2 me-2me-0"
href="/review/js2"
>
Review
<span>
0
</span>
Submissions
</a>
</div>
<div
class="d-none d-sm-flex p-2"
Expand Down Expand Up @@ -2515,16 +2465,6 @@ exports[`Curriculum Page Should render with lessonStatus data 1`] = `
These exercises will help you gain a better understanding of what it means for a data structure to be non-primitive.
</p>
</div>
<a
class="btn btn-sm btn-primary text-white float-end mb-2 me-2"
href="/review/js2"
>
Review
<span>
0
</span>
Submissions
</a>
</div>
</div>
</div>
Expand Down
30 changes: 25 additions & 5 deletions components/LessonCard.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@ jest.mock('@apollo/client')
import { useQuery } from '@apollo/client'
import * as React from 'react'
import LessonCard from './LessonCard'
import { render } from '@testing-library/react'
import { render, screen } from '@testing-library/react'
import { SubmissionStatus } from '../graphql'

// Imported to be able to use expect(...).toBeInTheDocument()
import '@testing-library/jest-dom'

describe('Lesson Card Complete State', () => {
const props = {
challengesUrl: '/challengeUrl',
Expand All @@ -20,6 +23,7 @@ describe('Lesson Card Complete State', () => {
)
expect(container).toMatchSnapshot()
})

test('Should render lessonCard with loading...', async () => {
useQuery.mockReturnValue({
loading: true
Expand All @@ -30,6 +34,7 @@ describe('Lesson Card Complete State', () => {
)
expect(container).toMatchSnapshot()
})

test('Should render lessonCard with submission count', async () => {
useQuery.mockReturnValue({
data: {
Expand All @@ -47,10 +52,25 @@ describe('Lesson Card Complete State', () => {
}
})

const { container } = render(
<LessonCard {...props} currentState="completed" />
)
expect(container).toMatchSnapshot()
render(<LessonCard {...props} currentState="completed" />)

expect(
screen.getAllByTestId('review-submissions-count')[0]
).toBeInTheDocument()
})

test('Should render lessonCard with no submission count', async () => {
useQuery.mockReturnValue({
data: {
submissions: []
}
})

render(<LessonCard {...props} currentState="completed" />)

expect(
screen.queryByTestId('review-submissions-count')
).not.toBeInTheDocument()
})
})

Expand Down
68 changes: 32 additions & 36 deletions components/LessonCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import GET_SUBMISSIONS from '../graphql/queries/getSubmissions'
import NavLink from './NavLink'
import Image from 'next/image'
import styles from '../scss/lessonCard.module.scss'
import { SubmissionStatus } from '../graphql'
import { Submission, SubmissionStatus } from '../graphql'
import Link from 'next/link'
import { get } from 'lodash'

type Props = {
lessonId: number
Expand All @@ -27,50 +28,45 @@ type ReviewButtonProps = {
className?: string
}

type ReviewCountProps = {
lessonId: number
}

const ReviewCount: React.FC<ReviewCountProps> = props => {
const { loading, data } = useQuery(GET_SUBMISSIONS, {
variables: { lessonId: props.lessonId },
fetchPolicy: 'network-only',
nextFetchPolicy: 'cache-first'
})

if (loading) {
return (
<div className="spinner-border spinner-border-sm mx-1" role="status" />
)
}

if (!data) {
return <span>0</span>
}
const pendingSubmissionsCount = data.submissions.reduce(
(acc: number, val: any) => {
if (val.status === SubmissionStatus.Open) {
return acc + 1
}
return acc
},
0
const ReviewButton: React.FC<ReviewButtonProps> = props => {
const { loading, data } = useQuery<{ submissions: Submission[] }>(
GET_SUBMISSIONS,
{
variables: { lessonId: props.lessonId },
fetchPolicy: 'network-only',
nextFetchPolicy: 'cache-first'
}
)

return <span>{pendingSubmissionsCount}</span>
}
const style = `btn btn-sm btn-primary text-white float-end mb-2 me-2 ${
props.className || ''
}`

const ReviewButton: React.FC<ReviewButtonProps> = props => {
let style = 'btn btn-sm btn-primary text-white float-end mb-2 me-2'
if (props.className) style += props.className
if (!props.isCompleted) {
return null
}

const submissions = get(data, 'submissions') || []

const pendingSubmissionsCount = submissions.reduce((acc, val) => {
if (val.status === SubmissionStatus.Open) {
return acc + 1
}
return acc
}, 0)

if ((data && !pendingSubmissionsCount) || (!data && !loading)) return <></>

const content = loading ? (
<div className="spinner-border spinner-border-sm mx-1" role="status" />
) : (
<span>{pendingSubmissionsCount}</span>
)

return (
<Link href={props.reviewUrl}>
<a className={style}>
Review <ReviewCount lessonId={props.lessonId} /> Submissions
<a data-testid="review-submissions-count" className={style}>
Review {content} Submissions
</a>
</Link>
)
Expand Down
Loading

1 comment on commit 72c893d

@vercel
Copy link

@vercel vercel bot commented on 72c893d Sep 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

c0d3-app – ./

v2.c0d3.app
c0d3-app.vercel.app
c0d3-app-git-master-c0d3-prod.vercel.app
c0d3-app-c0d3-prod.vercel.app
www.c0d3.com

Please sign in to comment.