Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

frontend linting #230

Closed
wants to merge 7 commits into from
Closed

frontend linting #230

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a81d0d3
frontend linting
ArnoutAllaert May 6, 2024
2c47f54
eslint install fix
ArnoutAllaert May 6, 2024
d2f29c0
install npm first
ArnoutAllaert May 6, 2024
3fb8ed2
Merge branch 'develop' into linter
ArnoutAllaert May 6, 2024
c2f3de7
frontend testen
ArnoutAllaert May 6, 2024
db90ff2
Merge branch 'develop' into linter
ArnoutAllaert May 23, 2024
4bccc7e
linter
ArnoutAllaert May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion .github/workflows/django.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ jobs:
uses: actions/setup-python@v3
with:
python-version: '3.10'
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '16'
- name: Install Dependencies
run: |
python3 -m pip install --upgrade pip
Expand All @@ -41,7 +45,17 @@ jobs:
cd api
flake8 .
cd ..
- name: Run Tests
- name: Install Dependencies Frontend
run: |
cd frontend/frontend
npm i
cd ../..
- name: Linting Frontend
run: |
cd frontend/frontend
eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0
cd ../..
- name: Run Backend Tests
env:
CLIENT_ID: ${{ secrets.CLIENT_ID }}
CLIENT_SECRET: ${{ secrets.CLIENT_SECRET }}
Expand All @@ -55,7 +69,13 @@ jobs:
DB_PORT: ${{ secrets.DB_PORT }}
DB_ENGINE: ${{secrets.DB_ENGINE}}


run: |
python manage.py makemigrations api
python manage.py migrate api
python manage.py test
- name: Run Frontend Tests
run: |
cd frontend/frontend
npm run cypress-component
cd ../..
15 changes: 0 additions & 15 deletions frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx
View file
Open in desktop

This file was deleted.

6 changes: 1 addition & 5 deletions frontend/frontend/src/components/AssignmentListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,7 @@ export function AssignmentListItem({
<ListItemText
id='dueDate'
sx={{ maxWidth: 150 }}
primary={
dueDate
? dueDate
: t('no_deadline')
}
primary={dueDate ? dueDate : t('no_deadline')}
/>
{/* Status Icon (for students only) */}
{isStudent && (
Expand Down
46 changes: 31 additions & 15 deletions frontend/frontend/src/components/CourseCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ import instance from '../axiosConfig.ts'
import { AssignmentListItem } from './AssignmentListItem.tsx'
import List from '@mui/material/List'
import ArchiveOutlinedIcon from '@mui/icons-material/ArchiveOutlined'
import PushPinIcon from '@mui/icons-material/PushPin';
import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
import PushPinIcon from '@mui/icons-material/PushPin'
import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'
import { Course, project } from '../pages/mainPage/MainPage.tsx'
import dayjs from 'dayjs'

Expand All @@ -38,7 +38,14 @@ interface CourseCardProps {
pinEvent: () => void
}

export function CourseCard({ courseId, archived, isStudent, archiveEvent, pinned, pinEvent }: CourseCardProps) {
export function CourseCard({
courseId,
archived,
isStudent,
archiveEvent,
pinned,
pinEvent,
}: CourseCardProps) {
// State variables
const [course, setCourse] = useState<Course>({
vak_id: 0,
Expand Down Expand Up @@ -99,7 +106,7 @@ export function CourseCard({ courseId, archived, isStudent, archiveEvent, pinned

const pinCourse = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation()
console.log("Course pinned/unpinned")
console.log('Course pinned/unpinned')
pinEvent()
}

Expand Down Expand Up @@ -222,11 +229,11 @@ export function CourseCard({ courseId, archived, isStudent, archiveEvent, pinned
alignSelf: 'flex-end',
}}
>
{pinned?
{pinned ? (
<PushPinIcon />
:
) : (
<PushPinOutlinedIcon />
}
)}
</IconButton>
</Box>
</Box>
Expand Down Expand Up @@ -327,7 +334,9 @@ export function CourseCard({ courseId, archived, isStudent, archiveEvent, pinned
assignment.titel
}
dueDate={
dayjs(assignment.deadline).format(
dayjs(
assignment.deadline
).format(
'DD/MM/YYYY HH:mm'
) || undefined
}
Expand All @@ -351,8 +360,8 @@ export function CourseCard({ courseId, archived, isStudent, archiveEvent, pinned
}}
>
<List disablePadding={true}>
{assignments
.map((assignment) => (
{assignments.map(
(assignment) => (
<AssignmentListItem
key={
assignment.project_id
Expand All @@ -365,9 +374,12 @@ export function CourseCard({ courseId, archived, isStudent, archiveEvent, pinned
assignment.titel
}
dueDate={
dayjs(assignment.deadline).format(
dayjs(
assignment.deadline
).format(
'DD/MM/YYYY HH:mm'
) || undefined
) ||
undefined
}
status={
assignment.project_id ===
Expand All @@ -378,7 +390,8 @@ export function CourseCard({ courseId, archived, isStudent, archiveEvent, pinned
isStudent
}
/>
))}
)
)}
</List>
</Box>
) : (
Expand Down Expand Up @@ -407,9 +420,12 @@ export function CourseCard({ courseId, archived, isStudent, archiveEvent, pinned
assignment.titel
}
dueDate={
dayjs(assignment.deadline).format(
dayjs(
assignment.deadline
).format(
'DD/MM/YYYY HH:mm'
) || undefined
) ||
undefined
}
status={
assignment.project_id ===
Expand Down
2 changes: 1 addition & 1 deletion frontend/frontend/src/components/GroupAccessComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function GroupAccessComponent({
width={'20vw'}
marginBottom={2}
>
{/* Button to navigate to groups page */}
{/* Button to navigate to groups page */}
{allowGroups ? (
<Button
id='groupButton'
Expand Down
1 change: 0 additions & 1 deletion frontend/frontend/src/components/LanguageSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ const locales = {
nl: { title: 'Nederlands' },
}


/**
* Component to switch between different language options.
* This component renders a list of menu items, each representing a language option.
Expand Down
6 changes: 1 addition & 5 deletions frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,7 @@ export function SubmissionListItemStudentPage({
<ListItemText
id='submissionTimestamp'
sx={{ maxWidth: 150 }}
primary={
timestamp
? timestamp
: t('time')
}
primary={timestamp ? timestamp : t('time')}
/>
{/* Display submission status icon */}
<ListItemIcon sx={{ minWidth: 35 }}>
Expand Down
4 changes: 2 additions & 2 deletions frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,8 +155,8 @@ export function SubmissionListItemTeacherPage({
primary={
submitted
? dayjs(submitted.tijdstip).format(
'DD/MM/YYYY HH:mm'
)
'DD/MM/YYYY HH:mm'
)
: '-'
}
/>
Expand Down
6 changes: 3 additions & 3 deletions frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -677,7 +677,7 @@ export function AddChangeAssignmentPage() {
</Typography>
<Box sx={{ padding: 1 }}>
<List
// This list will render the restrictions that are added to the assignment.
// This list will render the restrictions that are added to the assignment.
sx={{
maxHeight: '18vh',
overflowY: 'auto',
Expand Down Expand Up @@ -743,7 +743,7 @@ export function AddChangeAssignmentPage() {
>
{visible ? (
<IconButton
// Allows the teacher to select whether
// Allows the teacher to select whether
// the assignment is visible to students or not.
id='visibilityOn'
color={'info'}
Expand Down Expand Up @@ -775,7 +775,7 @@ export function AddChangeAssignmentPage() {
</Tooltip>
</Box>
<Box
// This section allows the teacher to set the
// This section allows the teacher to set the
// maximum score for the assignment.
aria-label={'maxScore'}
display={'flex'}
Expand Down
2 changes: 0 additions & 2 deletions frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { t } from 'i18next'
import { IconButton } from '@mui/material'
import { restriction } from './AddChangeAssignmentPage.tsx'


/**
* Component for an "Add Restriction" button that opens a dialog for adding restrictions.
* @returns {React.ReactElement} - The rendered component.
Expand Down Expand Up @@ -41,7 +40,6 @@ export default function AddRestrictionButton({
bgcolor: 'secondary.main',
marginRight: 1,
}}

onClick={() => {
setOpen(true)
setScroll('paper')
Expand Down
17 changes: 11 additions & 6 deletions frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,10 @@ export function AssignmentPage() {
`/groepen/?student=${user.user}`
)
if (groupResponse.data) {
const group = groupResponse.data.find((group: Group) => String(group.project) === assignmentId);
if (group){
const group = groupResponse.data.find(
(group: Group) => String(group.project) === assignmentId
)
if (group) {
const formData = new FormData()
formData.append('groep', group.groep_id)
formData.append('indiening_bestanden', submissionFile)
Expand All @@ -172,7 +174,10 @@ export function AssignmentPage() {
})
setSubmissionFile(undefined)
} else {
console.error('Group not found for assingmentId: ', assignmentId)
console.error(
'Group not found for assingmentId: ',
assignmentId
)
}
}
}
Expand Down Expand Up @@ -380,9 +385,9 @@ export function AssignmentPage() {
<strong>Deadline: </strong>
{assignment
? dayjs(assignment.deadline).format(
'DD/MM/YYYY HH:mm'
)
: 'no deadline'}
'DD/MM/YYYY HH:mm'
)
: 'no deadline'}
</Typography>
<div style={{ flexGrow: 1 }} />
<Button
Expand Down
2 changes: 1 addition & 1 deletion frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,7 +442,7 @@ export function GroupsPage() {
alignItems={'flex-start'}
>
<Table
// The teacher can see the available students
// The teacher can see the available students
// on the left side of the screen.
// They are displayed in a table with a sticky header.
aria-label={'studentTable'}
Expand Down
11 changes: 9 additions & 2 deletions frontend/frontend/src/pages/mainPage/ArchivedView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,12 @@ interface CourseCardProps {
pinCourse: (courseId: number) => void
}

export function ArchivedView({ isStudent, archivedCourses, pinnedCourses, pinCourse }: CourseCardProps) {
export function ArchivedView({
isStudent,
archivedCourses,
pinnedCourses,
pinCourse,
}: CourseCardProps) {
return (
<>
<Stack
Expand Down Expand Up @@ -39,7 +44,9 @@ export function ArchivedView({ isStudent, archivedCourses, pinnedCourses, pinCou
courseId={course.vak_id.toString()}
archived={true}
isStudent={isStudent}
pinned={pinnedCourses.includes(course.vak_id)}
pinned={pinnedCourses.includes(
course.vak_id
)}
pinEvent={() => pinCourse(course.vak_id)}
/>
)
Expand Down
12 changes: 10 additions & 2 deletions frontend/frontend/src/pages/mainPage/CoursesView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,13 @@ interface CourseCardProps {
pinCourse: (courseId: number) => void
}

export function CoursesView({ isStudent, activecourses, pinnedCourses, archiveCourse, pinCourse }: CourseCardProps) {
export function CoursesView({
isStudent,
activecourses,
pinnedCourses,
archiveCourse,
pinCourse,
}: CourseCardProps) {
const navigate = useNavigate()

return (
Expand Down Expand Up @@ -45,7 +51,9 @@ export function CoursesView({ isStudent, activecourses, pinnedCourses, archiveCo
courseId={course.vak_id.toString()}
archived={false}
isStudent={isStudent}
archiveEvent={() => archiveCourse(course.vak_id)}
archiveEvent={() =>
archiveCourse(course.vak_id)
}
pinned={pinnedCourses.includes(course.vak_id)}
pinEvent={() => pinCourse(course.vak_id)}
/>
Expand Down
Loading
Loading