CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view
Github repository
Here are the links to the front-end and back-end reimplementations:
Front end:
https://github.com/Shravsssss/reimplementation-front-end
These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation.
https://github.com/users/Shravsssss/projects/1
Expertiza Background
Expertiza is an open-source web application built on Ruby on Rails that enables instructors to create customized assignments with topic lists for students to choose from. It facilitates team formation, allowing students to collaborate on assignments and projects. Expertiza supports peer review processes where students can provide feedback on each other's submissions across various document formats, including URLs and wiki pages. This freely available platform provides a flexible and comprehensive solution for managing assignments, teamwork, and peer evaluations.
Project Description
Enhance the student task view interface in Expertiza by re-implementing the front-end using React JS and TypeScript. The primary objectives are to improve responsiveness, and usability, provide real-time updates, and enhance the overall student experience.
This project will concentrate on the following features:
- Task Details Display: Show all the important information about assignments like name, due date, progress, review status, and any badges.
- Task Interaction: Make it easy for users to submit, request revisions, and see feedback. Let them move through different parts of the task easily.
- Timeline: Show a visual timeline with due dates and let users easily see where they are in the task.
- Lazy Loading: Make the page load faster by only loading what's needed, so users have a smoother experience.
Peer Review Information
For those who wish to access the Expertiza application linked to this assignment, the login details are provided below:
Instructor credentials: Username -> admin, Password -> password123
Sample Data Used
An interface called "Deadlines" was created in the "interfaces.ts" file of the repository. This interface was designed to structure information related to deadlines. The implementation can be viewed here, with the code added at the end of the file.
To obtain the next upcoming deadline, code was added in the DeadlineUtil.tsx file. Here's a simplified version of the code:
export const getNextDeadline = (): Deadline | null => {
const now = new Date();
// Filter the deadlines to get only the upcoming ones
const upcomingDeadlines = deadlines.filter(deadline => new Date(deadline.date) > now);
// Return the earliest upcoming deadline, or null if there are no upcoming deadlines
return upcomingDeadlines.length > 0 ? upcomingDeadlines[0] : null;
};
Moreover, dummy data for the deadlines was included, which is then displayed by the "Deadlines" component within the "StudentTaskView" component. This data serves testing purposes, and it's recommended that future team members delete this file if real data can be retrieved from the database. This data is also located in the same file. Here is the dummy deadlines data provided below
export const deadlines: Deadline[] = [
{
id: 1,
date: "2024-03-22",
description: "Submit Assignment Round 1",
},
{
id: 2,
date: "2024-03-27",
description: "Review Assignment Round 1",
},
{
id: 3,
date: "2024-04-04",
description: "Submit Assignment Round 2",
},
{
id: 4,
date: "2024-04-07",
description: "Review Assignment Round 2",
},
];
Files modified in current project
The App.tsx file was modified to incorporate the LazyLoadedStudentTaskViews component, housing the lazy-loaded content of the student task view component, and the StudentTasks component. Two directories named StudentTasks and StudentTaskViews were created inside the pages directory. Inside the StudentTasks folder, a dummy StudentTask.tsx file was added with placeholder code to redirect to the specific student task view.
Student Task Page
The StudentTask.tsx file contains a React component called `StudentTask`. This page can be viewed when `Assignments` is clicked from the header. This component generates a link to view a specific assignment. It uses the React Router DOM's `<Link>` component to create the link. Inside the link, it includes the assignment ID as a route parameter. When users click on the link, it takes them to the corresponding assignment view page. Currently, it's set up to show Assignment 5, but this step should be eliminated once the ID can be fetched directly from the database.
Student Task View Page
The StudentTaskView.tsx file contains a React component named `StudentTaskView`. This component is responsible for rendering the student task view, including assignment details, deadlines, and various interaction options based on user permissions. It imports necessary modules and functions from React and other custom utility files. Within the component, it fetches assignment data using the `useEffect` hook. This component can be found below.
useEffect(() => { // Fetch assignment data on component mount
const fetchAssignment = async () => {
try {
const assignmentData = await loadAssignment({ params: { id } });
setAssignment(assignmentData);
} catch (error) {
console.error('Error fetching assignment:', error);
}
};
fetchAssignment(); // Call fetchAssignment function
return () => {
// Cleanup code here
};
}, [id]); // Include ID in the dependency array to re-fetch assignment data when ID changes
The file also displays a loading message if data is not yet available. It then renders assignment details and buttons for submitting work or reviewing. The below component renders assignment details, interaction options, and deadlines. It uses conditional rendering to display buttons and options based on user permissions and deadlines. Deadlines are rendered using the map function to iterate over the list of deadlines and render each one using the renderDeadline function.
function renderDeadline(deadline: any, index: number) { // Render each deadline
return (
<li key={deadline.id} style={styles.li} className={isDeadlinePassed(deadline) ? 'li complete' : 'li'}>
<div style={styles.timestamp} className="timestamp">
<p>{deadline.date}</p>
</div>
<div style={styles.status} className="status">
<p style={styles.statusP}>
{deadline.id && checkShowLink(index, deadlines) ? ( // Conditionally render link based on deadline status
<a href={`controller: 'response', action: 'view', id: ${deadline.id}`} target="_blank">
{deadline.description}
</a>
) : (
deadline.description
)}
</p>
<div style={isDeadlinePassed(deadline) ? { ...styles.statusBefore, ...styles.completeStatusBefore } : styles.statusBefore}></div>
</div>
</li>
);
}
};
On the other hand, the LazyStudentTaskView.tsx file includes a React functional component called `LazyLoadedStudentTaskView`. This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));
It uses the React `Suspense` component to render a fallback UI while the `StudentTaskView` component is being loaded asynchronously. Inside the component, it fetches assignment data similarly to `StudentTaskView.tsx`, and renders the `LazyStudentTaskView` component within the `Suspense` component.
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
The StudentTaskViewStyle.ts file contains the styling definitions for the `StudentTaskView` component. It defines CSS styles using an object notation for various elements such as the timeline, list items, timestamps, and status indicators. These styles are applied to elements within the `StudentTaskView` component to ensure a consistent and visually appealing presentation of assignment details and deadlines.