Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-24T04:11:23Z

Syepuri: /* Endpoints and Test Scenarios */

__TOC__

==Expertiza==
[http://expertiza.ncsu.edu/ 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.

==Introduction==
We're refactoring the grades_controller.rb in Expertiza, enhancing its codebase to adhere to DRY and design principles, improving readability, and reducing redundancy. Our focus includes thorough rswag testing of the grades_controller method and demonstrating Swagger UI integration.

==Problem Statement==
The reimplementation project entails:
#<b>Refactoring Grades Controller:</b> Enhancing code clarity, optimizing loops, and adding comments for unclear lines of code to improve maintainability and readability.
#<b>Removing Redundant Methods:</b> Identifying and eliminating unused methods in the controller to reduce complexity and streamline functionality.
#<b>CRUD Operations:</b> Implementing CRUD operations (Create, Read, Update, Delete) in the controller for efficient data management.
#<b>Adherence to DRY Principle:</b> Ensuring that the reimplementation follows the Don't Repeat Yourself (DRY) principle to avoid duplication and improve code efficiency.
#<b>Testing with RSwag:</b> Writing comprehensive tests using RSwag for each controller method to ensure functionality and integration with Swagger UI, followed by a video demonstration showcasing the Swagger UI integration and functionality of the reimplemented controller.

== Class UML Diagram ==

[[File:Oss4_uml.png|800px|UML Diagram]]

==Plan for Reimplementation of GradesController==

====Code Clarity:====

Existing methods such as <code>view</code>, <code>view_my_scores</code>, and <code>view_team</code> will undergo refinement to improve clarity and readability. This includes adding inline comments within complex methods to provide better understanding. Additionally, loops within <code>make_chart</code> will be streamlined for improved performance, while conditional statements within <code>action_allowed?</code> will be simplified for easier comprehension.

====Authorization Logic:====

Authorization logic within controller actions will be refined to simplify the process and improve error handling. This involves extracting authorization concerns into separate methods like <code>student_privileges_allowed?</code>, <code>ta_privileges_allowed?</code>, etc. Furthermore, error messages within <code>action_allowed?</code> will be enhanced to provide clearer feedback to users in case of access denial.

====View Method Optimization:====

In view methods like <code>view</code>, <code>view_my_scores</code>, and <code>view_team</code>, efforts will be made to streamline code and reduce dependencies. This includes optimizing database queries to improve performance and removing redundant code to enhance maintainability.

====Edit and Update Actions:====

Edit and update actions such as <code>edit</code> and <code>update</code> will be enhanced to adhere to RESTful conventions. Specifically, parameter handling will be simplified to ensure consistency and robust error handling will be implemented to gracefully handle invalid input.

====Chart Generation Optimization:====

Chart generation methods will be optimized to improve efficiency and scalability. This includes implementing caching mechanisms for precomputed data within <code>make_chart</code> to enhance responsiveness. Additionally, exploration of client-side rendering using JavaScript libraries like Chart.js will be considered to further improve performance.

====Self-Review Logic Enhancement:====

Self-review logic within <code>self_review_finished?</code> will undergo validation to ensure accuracy and effectiveness. This includes refining edge cases where self-review completion may not be accurately detected and enhancing user guidance for a smoother experience.

====Redirection Logic Improvement:====

Redirection logic within <code>redirect_when_disallowed</code> will be improved to simplify and consolidate redirection processes. This involves enhancing error handling to provide clearer feedback to users and optimizing redirection logic to minimize unnecessary redirects.

====Comprehensive Testing with RSwag:====

Comprehensive testing with RSwag will be conducted to validate API endpoints and ensure thorough test coverage. This includes writing tests for each controller method, covering both positive and negative test cases, and integrating automated testing into the CI pipeline for consistency and reliability.

==Reimplementation of GradesController ==

=== Implementation of APIs ===

In the context of the project "E2443. Reimplement grades_controller" for the Expertiza platform, the modifications made to the routes.rb file for the GradesController are intended to streamline and enhance the existing functionality related to grading. These routing configurations play a critical role in structuring how grade-related requests are processed and responded to within the application.

The specific routes added under the grades resource leverage a nested structure to facilitate clear and organized handling of various grade-related actions, ensuring that each action pertains directly to individual grade entities identified by :id, being the participant ID.

====Breakdown of Routes====

*View Team (:id/view_team) - This endpoint retrieves detailed information about the team associated with a specific assignment participant. It is crucial for scenarios where assessments or grades are team-based. The API fetches the participant's team and provides comprehensive details, including the team members and their contributions to assignments. This functionality supports collaborative assessments and enhances transparency in team-based grading.
<code>
def view_team
participant = AssignmentParticipant.find(params[:id])
assignment = participant.assignment
team = participant.team
questionnaires = assignment.questionnaires
questions = retrieve_questions(questionnaires, assignment.id)
pscore = participant_scores(participant, questions)
render json: { participant:, assignment:, team:, questions:, pscore:}
end

Working in Postman:

[[File:View_team_grade.jpeg|1000px]]

</code>
*View Grade Details (:id/view) - This endpoint allows for viewing all relevant details of an assignment for a particular participant. It aggregates data such as related questionnaires, questions, and scores, providing a holistic view of the grading criteria and results. This function is particularly valuable for providing a comprehensive breakdown of scores across different review rounds, assisting in a deeper understanding of how grades were allocated.
<code>
def view
assignment = Assignment.find(params[:id])
questionnaires = assignment.questionnaires
if assignment.num_review_rounds > 1
questions = retrieve_questions questionnaires, assignment.id
else
questions = {}
questionnaires.each do |questionnaire|
questions[questionnaire.symbol] = questionnaire.questions
end
end
scores = review_grades(assignment, questions)
num_reviewers_assigned_scores = scores[:teams].length
averages = vector(scores)
avg_of_avg = mean(averages)
render json: { scores:, averages:, avg_of_avg:, num_reviewers_assigned_scores: }
end
</code>

Working in Postman:

[[File:View_grade.jpeg|1000px]]

*View Scores (:id/view_scores) - This API endpoint is designed to show scores for a specific assignment participant. It provides detailed insights into how participants are performing in the ongoing assignments and the various stages of assignment completion. This is essential for tracking academic progress and identifying areas where students may need additional support or recognition.
<code>
def view_scores
participant = AssignmentParticipant.find(params[:id])
assignment = participant.assignment
# questionnaires = assignment.questionnaires
# questions = retrieve_questions questionnaires, assignment.id
# pscore = participant_scores(participant, questions)
topic_id = SignedUpTeam.topic_id(participant.assignment.id, participant.user_id)
stage = assignment.current_stage(topic_id)

render json: { participant: }
end
</code>

Working in Postman:

[[File:View_scores.jpeg|1000px]]

*Update Grade (:id/update) - This endpoint enables updating the grade for a participant. It accepts a new grade value and updates the participant’s record if the new grade differs from the existing one. This API is crucial for situations where grades need to be revised or corrected, ensuring that grading remains dynamic and reflective of actual student performance and any subsequent reviews or reassessments.
<code>
def update
participant = AssignmentParticipant.find(params[:id])
total_score = params[:total_score]
unless format('%.2f', total_score) == params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for #{participant.user.name}."
else
"A score of #{params[:participant][:grade]}% has been saved for #{participant.user.name}."
end
end
render json: { message: message}
end
</code>

Working in Postman:

[[File:Update_grade.jpeg|1000px]]

*Show Grade (:id) - This endpoint provides a detailed view of a participant's assignment by fetching and displaying all relevant information such as the assignment details, participant info, related questions, and scores. This function is a vital read operation that allows instructors and students to access complete information on a participant's performance in a specific assignment.
<code>
def show
participant = AssignmentParticipant.find(params[:id])
assignment = participant.assignment
questions = list_questions(assignment)
scores = participant_scores(participant, questions)

render json: { participant:, assignment:, questions:, scores: }
end
</code>

Working in Postman:

[[File:Show_grade.jpeg|1000px]]

*Action Allowed (:id/action_allowed) - This endpoint checks if a particular action is allowed for the current user, based on the user’s role and the specific action they intend to perform (like viewing scores). It ensures that operations are conducted within established permissions, enhancing security and role-based access control within the application. This is critical for maintaining the integrity of the grading process and ensuring that only authorized actions are executed.
<code>
def action_allowed
case params[:action]
when 'view_scores'
if current_user_has_student_privileges? &&
are_needed_authorizations_present?(params[:id], 'reader', 'reviewer') &&
self_review_finished?
render json: { allowed: true }
else
render json: { allowed: false, error: 'Unauthorized' }, status: :forbidden
end
when 'view_team'
if current_user_is_a? 'Student'
participant = AssignmentParticipant.find_by(id: params[:id])
if participant && current_user_is_assignment_participant?(participant.assignment.id)
render json: { allowed: true }
else
render json: { allowed: false, error: 'Unauthorized' }, status: :forbidden
end
else
render json: { allowed: true }
end
else
if current_user_has_ta_privileges?
render json: { allowed: true }
else
render json: { allowed: false, error: 'Unauthorized' }, status: :forbidden
end
end
end
</code>

Working in Postman:

[[File:Action_allowed_grade.jpeg|1000px]]

*Save Grade and Comment (:id/save_grade_and_comment_for_submission) - This API allows for the saving of grades and comments for a specific submission. It is designed to capture both quantitative and qualitative feedback, storing this information securely and making it accessible for review. This endpoint is particularly important for providing feedback that is integral to educational environments, fostering a constructive and informative feedback loop.
<code>
def save_grade_and_comment_for_submission
participant = AssignmentParticipant.find(params[:id])
@team = participant.team
@team.grade_for_submission = params[:grade]
@team.comment_for_submission = params[:comment]
begin
@team.save!
render json: { success: "Grade \'#{params[:grade]}\' and comment \'#{params[:comment]}\' for submission successfully saved." }
rescue StandardError => e
render json: { error: e.message }, status: :unprocessable_entity
end
end
</code>

Working in Postman:

[[File:Save_grade_and_comment.jpeg|1000px]]

These routes collectively support the essential CRUD operations needed for managing grades within the Expertiza system. By carefully defining these routes, the project ensures that grade management is handled in a structured and efficient manner, thereby reducing redundancy and enhancing the overall system architecture. This reimplementation fosters better scalability and easier maintenance, adhering to improved software design principles and practices.

=== Implementation of Spec file ===
The specification file for the Grades API provides comprehensive testing scenarios for various endpoints within the Api::V1::GradesController. This document is crafted using RSpec, a popular testing framework for Ruby applications, and employs the Swagger tool to describe and document the API endpoints. The focus is on ensuring that the controller behaves as expected across different use cases, adhering to both functional and non-functional requirements. Here is a detailed explanation of the test cases outlined in the specification:

====Testing Framework and Tools====
*RSpec is utilized for writing and executing the test cases, providing a DSL (Domain-Specific Language) that is readable and expressive.
*Swagger helps in documenting the API, which not only serves for testing but also acts as a live documentation for developers and users of the API.
====Endpoints and Test Scenarios====
*GET /api/v1/grades/{id}/view - This endpoint tests the functionality to view detailed grade information for a specific ID.The test ensures that upon receiving a valid ID, the system returns a 200 status code indicating a successful operation.
*GET /api/v1/grades/{id}/view_team - Tests the ability to retrieve team details associated with a specific grade.A 200 status code response is expected when valid data is provided, confirming the correct retrieval of team information.
*GET /api/v1/grades/{id}/view_scores - Focuses on viewing scores for a specific grade.The test confirms that the endpoint returns a 200 status when executed with a correct ID, displaying the scores accurately.
*PUT /api/v1/grades/{id}/update - Tests the grade update functionality. This endpoint expects a JSON body with grade details.Two scenarios are tested: successful grade update (200 status) and failure due to missing required attributes (422 status), ensuring robust error handling and data validation.
*GET /api/v1/grades/{id} - Simple retrieval of grade details. The test verifies that the endpoint fetches and returns the correct grade information, indicated by a 200 success status.
*GET /api/v1/grades/{id}/action_allowed - Checks if a certain action is permissible for a given grade ID. It tests for both allowed (200 status) and not allowed scenarios (403 status), important for validating access control mechanisms.
*POST /api/v1/grades/{id}/save_grade_and_comment_for_submission - This test ensures that grades and comments can be successfully saved for a submission. The parameters are passed via query strings, and the test checks for a successful save operation (200 status).

====Importance of These Tests====
The specified tests are essential for maintaining the integrity and reliability of the Grades API. They ensure that:

*The API responds correctly under various conditions.
*Data integrity is maintained with correct inputs and handling of incorrect or partial inputs.
*Security and access control measures are effective, particularly in verifying user permissions.
This meticulous testing setup reflects a commitment to quality and robustness in the software development lifecycle, crucial for applications like Expertiza that are used in educational settings. These tests contribute directly to the project's aim of enhancing maintainability, readability, and adherence to the DRY principle within the grades_controller.

===Swagger File Implementation===
The Swagger file uses YAML format to describe the HTTP routes, parameters, and responses for the API. Each path is clearly defined with required parameters and expected responses, facilitating automatic documentation generation and client code generation.

====GET /grades/{id}/view_team====
Summary: Retrieve team details associated with a specific grade.

Response 200: Indicates successful retrieval of the team details.
Parameter: id (integer, required) - the unique identifier for a grade.
====GET /grades/{id}/view====
Summary: Fetch comprehensive details about a specific grade.

Response 200: Successful operation, returning complete grade details.
====GET /grades/{id}/view_scores====
Summary: Obtain scoring details for a specific grade.

Response 200: Successful retrieval of score data.
====PUT /grades/{id}/update====
Summary: Update details of a specific grade.

Response 200: Confirmation of successful update.
====GET /grades/{id}====
Summary: Access detailed information about a specific grade.

Response 200: Successful operation, showing detailed grade data.
====GET /grades/{id}/action_allowed====
Summary: Check permissions for performing certain actions on a grade.

Response 200: Successful verification of allowed actions.
====POST /grades/{id}/save_grade_and_comment_for_submission====
Summary: Save a grade along with a comment for a specific submission.

Response 200: Successfully saved the grade and comment.

====Importance and Usage====
*Standardization and Documentation: Swagger files like this one help in standardizing API practices across development teams, providing a consistent and predictable interface. It ensures that all team members, including backend and frontend developers, understand the API’s functionality and constraints without diving into the codebase.
*Client SDK Generation: Tools such as Swagger Codegen can utilize this file to automatically generate client libraries in various programming languages, which can accelerate development and integration efforts.
*Interactive API Documentation: Swagger UI can render this file into interactive API documentation that allows developers to perform live API calls for testing purposes, greatly enhancing the developer experience and easing troubleshooting and testing.
The careful organization and detailed descriptions in the Swagger file are critical for maintaining the robustness and reliability of the API, aligning with best practices in API design and documentation. This approach supports the project's goal to improve maintainability and readability of the grades_controller, ensuring that the API is both accessible and functional.

=== Implementation of Helper Files ===

The recently implemented helper modules—AssignmentHelper, AuthorizationHelper, GradesHelper, PenaltyHelper, and StudentTaskHelper—serve as foundational components that augment the functionality of the Expertiza system. Each module encapsulates specific, reusable logic that interfaces with various aspects of the system, promoting a modular, maintainable, and DRY codebase. Here’s a comprehensive breakdown of each helper module:

====AssignmentHelper====
This module provides utility functions tailored to manage and manipulate course and assignment data:

*course_options: Generates a list of courses available to the user based on their role, such as teaching assistants seeing only their courses, while administrators can view all courses.
*questionnaire_options: Filters questionnaires based on visibility and association with the instructor, allowing users to select questionnaires relevant to their role.
*review_strategy_options and due_date: These functions assist in setting up review strategies for assignments and managing due dates respectively, essential for assignment creation and editing.
====AuthorizationHelper====
Focused on security, this module determines the access level of users within the system:

*current_user_has_..._privileges? methods check the user’s role against required privileges, ensuring actions are permitted before proceeding.
*current_user_is_assignment_participant? and similar methods validate user participation in specific contexts, crucial for enforcing role-based actions within assignments.
====GradesHelper====
This module aids in the handling and display of grades and related functionalities:

*accordion_title and score_vector: These functions manage the display of structured data, such as grouping related responses under a common header in the UI.
*vector and mean: Utilized for statistical calculations to derive insights from grade data, supporting detailed analytical features like average scores.
====PenaltyHelper====
Manages the calculation of penalties based on assignment deadlines and submission timelines:

*calculate_penalty and its associated methods (calculate_submission_penalty, calculate_review_penalty, etc.) assess penalties for late submissions and incomplete reviews, ensuring students are graded fairly based on timeliness and compliance with deadlines.
====StudentTaskHelper====
Enhances the student interaction with tasks and reviews:

*get_review_grade_info and get_awarded_badges: Provide visual feedback and recognition for students’ efforts, which are crucial for motivation and engagement.
*check_reviewable_topics and unsubmitted_self_review?: These functions check for reviewable topics and monitor the submission status of self-reviews, critical for maintaining the integrity and progression of peer reviews.

====Integration and Impact====
The integration of these helper modules significantly enhances the system's robustness by segregating responsibilities into distinct, manageable components. This approach not only simplifies the main application logic but also enhances code readability and maintenance—core aims of the project. By refining the backend architecture through these helpers, the system can more easily adapt to new requirements and facilitate smoother updates and enhancements.

Incorporating these modules into the Expertiza platform effectively addresses key project objectives, including adherence to DRY principles, improved maintainability, and ensuring a scalable architecture that can handle the evolving needs of educational environments. These improvements directly contribute to a more stable, efficient, and user-friendly grading system.

===Implementation of Migration files===
These migration files represent changes to the database schema in a Ruby on Rails application using ActiveRecord. Let's go through each migration file and explain its purpose:

*CreateDeadlineTypes: This migration creates a table called deadline_types with a name column. It also inserts some initial data into this table.
*CreateLatePolicies: This migration creates a table called late_policies with columns for penalty period, penalty per unit, whether the penalty is expressed as a percentage, and maximum penalty. It also inserts initial data into this table and adds an index on the penalty_period_in_minutes column.
*CreateDueDates: This migration creates a table called due_dates with columns for due date, deadline type ID, assignment ID, late policy ID, and flags for submission, review, resubmission, rereview, and review of review permissions. It adds foreign key constraints to reference other tables and indexes on various columns.
*ChangeAssignmentIdInDueDatesTableToParentId: This migration renames the assignment_id column in the due_dates table to parent_id and removes the foreign key constraint on it. This seems to be part of a restructuring where assignment_id is renamed to parent_id in several tables.
*CreateTeams: This migration creates a table called teams with a name column and an assignment_id column, which references the assignments table. It adds a foreign key constraint on the assignment_id column.
*ChangeAssignmentIdInParticipantsTableToParentId: This migration renames the assignment_id column in the participants table to parent_id and removes the foreign key constraint on it.
*ChangeAssignmentIdInTeamsTableToParentId: This migration renames the assignment_id column in the teams table to parent_id and removes the foreign key constraint on it.
*AddUsedInRoundToAssignmentQuestionnaires: This migration adds a column called used_in_round to the assignment_questionnaires table.
*UpdateParticipants: This migration adds columns for grade, comments_to_student, and private_instructor_comments to the participants table.
*CreateTeamsUsers: This migration creates a join table called teams_users to establish a many-to-many relationship between teams and users. It adds foreign key constraints for both team_id and user_id.

=== Use of Design and Dry Principles===
In the provided GradesController code, several design principles and DRY (Don't Repeat Yourself) principles have been applied to ensure a clean and maintainable codebase. Let's break down the implementation and discuss how these principles are reflected:

====Modularization and Inclusion of Concerns====
The controller includes several modules like Scoring, PenaltyHelper, StudentTaskHelper, AssignmentHelper, GradesHelper, and AuthorizationHelper. This modularization helps in organizing related functionalities into separate files, promoting better code organization and reusability.
Each module encapsulates related methods and concerns, promoting separation of concerns and making the codebase more modular.
====Single Responsibility Principle (SRP)====
Methods within the controller have clear and specific responsibilities. For example, view, view_scores, view_team, edit, show, update, and save_grade_and_comment_for_submission methods handle specific actions related to grading, viewing, and updating grades.
This adherence to SRP makes the code easier to understand, test, and maintain as each method focuses on a single task.
====Conditional Handling with Case Statements====
The action_allowed method utilizes a case statement to handle different actions based on the parameters received. This approach makes the code more readable and maintainable compared to using multiple nested if-else statements.
Each case in the statement handles a specific action, improving code organization and readability.
====Code Reuse and DRY Principle====
Common functionalities are abstracted into helper modules (GradesHelper, PenaltyHelper, etc.) and included where needed. For example, methods like participant_scores, calculate_penalty, retrieve_questions, etc., are reused across different controller actions.
By extracting shared functionalities into helper modules, the code adheres to the DRY principle, reducing redundancy and promoting code reuse.
====Comments and Documentation====
The code includes comments explaining the purpose of methods, API endpoints, and complex logic. Comments are used judiciously to provide clarity where necessary.
While comments are helpful, they should ideally focus on explaining why certain decisions were made or complex logic was implemented rather than simply restating what the code does.
====Private Methods for Encapsulation====
Private methods like set_assignment, list_questions, and self_review_finished? encapsulate internal implementation details and are not accessible outside the controller. This encapsulation hides complexity and promotes cleaner interfaces.
====Error Handling====
Error handling is implemented using rescue_from for ActiveRecord::RecordNotFound and StandardError. This ensures graceful handling of exceptions and provides meaningful error responses to clients.
Overall, the GradesController demonstrates good adherence to design principles like SRP, modularity, DRY, encapsulation, and error handling. The code is well-structured, readable, and follows best practices for building maintainable Rails applications.

==Resources==
Pull Request : https://github.com/expertiza/reimplementation-back-end/pull/97

Demonstration : https://drive.google.com/drive/folders/1bfh348t-zbcLZ-VlpTCAGRtoSgVimTnU?usp=sharing

==Team==
=====Mentor=====
*Kashika Malick

=====Members=====
*Sravya Yepuri (syepuri@ncsu.edu)
*Hasini Chenchala (hchench@ncsu.edu)
*Chirag Hegde (chegde@ncsu.edu)

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-24T04:10:30Z

Syepuri: /* Reimplementation of GradesController */

__TOC__

==Expertiza==
[http://expertiza.ncsu.edu/ 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.

==Introduction==
We're refactoring the grades_controller.rb in Expertiza, enhancing its codebase to adhere to DRY and design principles, improving readability, and reducing redundancy. Our focus includes thorough rswag testing of the grades_controller method and demonstrating Swagger UI integration.

==Problem Statement==
The reimplementation project entails:
#<b>Refactoring Grades Controller:</b> Enhancing code clarity, optimizing loops, and adding comments for unclear lines of code to improve maintainability and readability.
#<b>Removing Redundant Methods:</b> Identifying and eliminating unused methods in the controller to reduce complexity and streamline functionality.
#<b>CRUD Operations:</b> Implementing CRUD operations (Create, Read, Update, Delete) in the controller for efficient data management.
#<b>Adherence to DRY Principle:</b> Ensuring that the reimplementation follows the Don't Repeat Yourself (DRY) principle to avoid duplication and improve code efficiency.
#<b>Testing with RSwag:</b> Writing comprehensive tests using RSwag for each controller method to ensure functionality and integration with Swagger UI, followed by a video demonstration showcasing the Swagger UI integration and functionality of the reimplemented controller.

== Class UML Diagram ==

[[File:Oss4_uml.png|800px|UML Diagram]]

==Plan for Reimplementation of GradesController==

====Code Clarity:====

Existing methods such as <code>view</code>, <code>view_my_scores</code>, and <code>view_team</code> will undergo refinement to improve clarity and readability. This includes adding inline comments within complex methods to provide better understanding. Additionally, loops within <code>make_chart</code> will be streamlined for improved performance, while conditional statements within <code>action_allowed?</code> will be simplified for easier comprehension.

====Authorization Logic:====

Authorization logic within controller actions will be refined to simplify the process and improve error handling. This involves extracting authorization concerns into separate methods like <code>student_privileges_allowed?</code>, <code>ta_privileges_allowed?</code>, etc. Furthermore, error messages within <code>action_allowed?</code> will be enhanced to provide clearer feedback to users in case of access denial.

====View Method Optimization:====

In view methods like <code>view</code>, <code>view_my_scores</code>, and <code>view_team</code>, efforts will be made to streamline code and reduce dependencies. This includes optimizing database queries to improve performance and removing redundant code to enhance maintainability.

====Edit and Update Actions:====

Edit and update actions such as <code>edit</code> and <code>update</code> will be enhanced to adhere to RESTful conventions. Specifically, parameter handling will be simplified to ensure consistency and robust error handling will be implemented to gracefully handle invalid input.

====Chart Generation Optimization:====

Chart generation methods will be optimized to improve efficiency and scalability. This includes implementing caching mechanisms for precomputed data within <code>make_chart</code> to enhance responsiveness. Additionally, exploration of client-side rendering using JavaScript libraries like Chart.js will be considered to further improve performance.

====Self-Review Logic Enhancement:====

Self-review logic within <code>self_review_finished?</code> will undergo validation to ensure accuracy and effectiveness. This includes refining edge cases where self-review completion may not be accurately detected and enhancing user guidance for a smoother experience.

====Redirection Logic Improvement:====

Redirection logic within <code>redirect_when_disallowed</code> will be improved to simplify and consolidate redirection processes. This involves enhancing error handling to provide clearer feedback to users and optimizing redirection logic to minimize unnecessary redirects.

====Comprehensive Testing with RSwag:====

Comprehensive testing with RSwag will be conducted to validate API endpoints and ensure thorough test coverage. This includes writing tests for each controller method, covering both positive and negative test cases, and integrating automated testing into the CI pipeline for consistency and reliability.

==Reimplementation of GradesController ==

=== Implementation of APIs ===

In the context of the project "E2443. Reimplement grades_controller" for the Expertiza platform, the modifications made to the routes.rb file for the GradesController are intended to streamline and enhance the existing functionality related to grading. These routing configurations play a critical role in structuring how grade-related requests are processed and responded to within the application.

The specific routes added under the grades resource leverage a nested structure to facilitate clear and organized handling of various grade-related actions, ensuring that each action pertains directly to individual grade entities identified by :id, being the participant ID.

====Breakdown of Routes====

*View Team (:id/view_team) - This endpoint retrieves detailed information about the team associated with a specific assignment participant. It is crucial for scenarios where assessments or grades are team-based. The API fetches the participant's team and provides comprehensive details, including the team members and their contributions to assignments. This functionality supports collaborative assessments and enhances transparency in team-based grading.
<code>
def view_team
participant = AssignmentParticipant.find(params[:id])
assignment = participant.assignment
team = participant.team
questionnaires = assignment.questionnaires
questions = retrieve_questions(questionnaires, assignment.id)
pscore = participant_scores(participant, questions)
render json: { participant:, assignment:, team:, questions:, pscore:}
end

Working in Postman:

[[File:View_team_grade.jpeg|1000px]]

</code>
*View Grade Details (:id/view) - This endpoint allows for viewing all relevant details of an assignment for a particular participant. It aggregates data such as related questionnaires, questions, and scores, providing a holistic view of the grading criteria and results. This function is particularly valuable for providing a comprehensive breakdown of scores across different review rounds, assisting in a deeper understanding of how grades were allocated.
<code>
def view
assignment = Assignment.find(params[:id])
questionnaires = assignment.questionnaires
if assignment.num_review_rounds > 1
questions = retrieve_questions questionnaires, assignment.id
else
questions = {}
questionnaires.each do |questionnaire|
questions[questionnaire.symbol] = questionnaire.questions
end
end
scores = review_grades(assignment, questions)
num_reviewers_assigned_scores = scores[:teams].length
averages = vector(scores)
avg_of_avg = mean(averages)
render json: { scores:, averages:, avg_of_avg:, num_reviewers_assigned_scores: }
end
</code>

Working in Postman:

[[File:View_grade.jpeg|1000px]]

*View Scores (:id/view_scores) - This API endpoint is designed to show scores for a specific assignment participant. It provides detailed insights into how participants are performing in the ongoing assignments and the various stages of assignment completion. This is essential for tracking academic progress and identifying areas where students may need additional support or recognition.
<code>
def view_scores
participant = AssignmentParticipant.find(params[:id])
assignment = participant.assignment
# questionnaires = assignment.questionnaires
# questions = retrieve_questions questionnaires, assignment.id
# pscore = participant_scores(participant, questions)
topic_id = SignedUpTeam.topic_id(participant.assignment.id, participant.user_id)
stage = assignment.current_stage(topic_id)

render json: { participant: }
end
</code>

Working in Postman:

[[File:View_scores.jpeg|1000px]]

*Update Grade (:id/update) - This endpoint enables updating the grade for a participant. It accepts a new grade value and updates the participant’s record if the new grade differs from the existing one. This API is crucial for situations where grades need to be revised or corrected, ensuring that grading remains dynamic and reflective of actual student performance and any subsequent reviews or reassessments.
<code>
def update
participant = AssignmentParticipant.find(params[:id])
total_score = params[:total_score]
unless format('%.2f', total_score) == params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for #{participant.user.name}."
else
"A score of #{params[:participant][:grade]}% has been saved for #{participant.user.name}."
end
end
render json: { message: message}
end
</code>

Working in Postman:

[[File:Update_grade.jpeg|1000px]]

*Show Grade (:id) - This endpoint provides a detailed view of a participant's assignment by fetching and displaying all relevant information such as the assignment details, participant info, related questions, and scores. This function is a vital read operation that allows instructors and students to access complete information on a participant's performance in a specific assignment.
<code>
def show
participant = AssignmentParticipant.find(params[:id])
assignment = participant.assignment
questions = list_questions(assignment)
scores = participant_scores(participant, questions)

render json: { participant:, assignment:, questions:, scores: }
end
</code>

Working in Postman:

[[File:Show_grade.jpeg|1000px]]

*Action Allowed (:id/action_allowed) - This endpoint checks if a particular action is allowed for the current user, based on the user’s role and the specific action they intend to perform (like viewing scores). It ensures that operations are conducted within established permissions, enhancing security and role-based access control within the application. This is critical for maintaining the integrity of the grading process and ensuring that only authorized actions are executed.
<code>
def action_allowed
case params[:action]
when 'view_scores'
if current_user_has_student_privileges? &&
are_needed_authorizations_present?(params[:id], 'reader', 'reviewer') &&
self_review_finished?
render json: { allowed: true }
else
render json: { allowed: false, error: 'Unauthorized' }, status: :forbidden
end
when 'view_team'
if current_user_is_a? 'Student'
participant = AssignmentParticipant.find_by(id: params[:id])
if participant && current_user_is_assignment_participant?(participant.assignment.id)
render json: { allowed: true }
else
render json: { allowed: false, error: 'Unauthorized' }, status: :forbidden
end
else
render json: { allowed: true }
end
else
if current_user_has_ta_privileges?
render json: { allowed: true }
else
render json: { allowed: false, error: 'Unauthorized' }, status: :forbidden
end
end
end
</code>

Working in Postman:

[[File:Action_allowed_grade.jpeg|1000px]]

*Save Grade and Comment (:id/save_grade_and_comment_for_submission) - This API allows for the saving of grades and comments for a specific submission. It is designed to capture both quantitative and qualitative feedback, storing this information securely and making it accessible for review. This endpoint is particularly important for providing feedback that is integral to educational environments, fostering a constructive and informative feedback loop.
<code>
def save_grade_and_comment_for_submission
participant = AssignmentParticipant.find(params[:id])
@team = participant.team
@team.grade_for_submission = params[:grade]
@team.comment_for_submission = params[:comment]
begin
@team.save!
render json: { success: "Grade \'#{params[:grade]}\' and comment \'#{params[:comment]}\' for submission successfully saved." }
rescue StandardError => e
render json: { error: e.message }, status: :unprocessable_entity
end
end
</code>

Working in Postman:

[[File:Save_grade_and_comment.jpeg|1000px]]

These routes collectively support the essential CRUD operations needed for managing grades within the Expertiza system. By carefully defining these routes, the project ensures that grade management is handled in a structured and efficient manner, thereby reducing redundancy and enhancing the overall system architecture. This reimplementation fosters better scalability and easier maintenance, adhering to improved software design principles and practices.

=== Implementation of Spec file ===
The specification file for the Grades API provides comprehensive testing scenarios for various endpoints within the Api::V1::GradesController. This document is crafted using RSpec, a popular testing framework for Ruby applications, and employs the Swagger tool to describe and document the API endpoints. The focus is on ensuring that the controller behaves as expected across different use cases, adhering to both functional and non-functional requirements. Here is a detailed explanation of the test cases outlined in the specification:

====Testing Framework and Tools====
*RSpec is utilized for writing and executing the test cases, providing a DSL (Domain-Specific Language) that is readable and expressive.
*Swagger helps in documenting the API, which not only serves for testing but also acts as a live documentation for developers and users of the API.
====Endpoints and Test Scenarios====
*GET /api/v1/grades/{id}/view - This endpoint tests the functionality to view detailed grade information for a specific ID.The test ensures that upon receiving a valid ID, the system returns a 200 status code indicating a successful operation.
*GET /api/v1/grades/{id}/view_team - Tests the ability to retrieve team details associated with a specific grade.A 200 status code response is expected when valid data is provided, confirming the correct retrieval of team information.
*GET /api/v1/grades/{id}/view_scores - Focuses on viewing scores for a specific grade.The test confirms that the endpoint returns a 200 status when executed with a correct ID, displaying the scores accurately.
*PUT /api/v1/grades/{id}/update - Tests the grade update functionality. This endpoint expects a JSON body with grade details.Two scenarios are tested: successful grade update (200 status) and failure due to missing required attributes (422 status), ensuring robust error handling and data validation.
*GET /api/v1/grades/{id} - Simple retrieval of grade details. The test verifies that the endpoint fetches and returns the correct grade information, indicated by a 200 success status.
*GET /api/v1/grades/{id}/action_allowed - Checks if a certain action is permissible for a given grade ID. It tests for both allowed (200 status) and not allowed scenarios (403 status), important for validating access control mechanisms.
*PUT /api/v1/grades/{id}/save_grade_and_comment_for_submission - This test ensures that grades and comments can be successfully saved for a submission. The parameters are passed via query strings, and the test checks for a successful save operation (200 status).

====Importance of These Tests====
The specified tests are essential for maintaining the integrity and reliability of the Grades API. They ensure that:

*The API responds correctly under various conditions.
*Data integrity is maintained with correct inputs and handling of incorrect or partial inputs.
*Security and access control measures are effective, particularly in verifying user permissions.
This meticulous testing setup reflects a commitment to quality and robustness in the software development lifecycle, crucial for applications like Expertiza that are used in educational settings. These tests contribute directly to the project's aim of enhancing maintainability, readability, and adherence to the DRY principle within the grades_controller.

===Swagger File Implementation===
The Swagger file uses YAML format to describe the HTTP routes, parameters, and responses for the API. Each path is clearly defined with required parameters and expected responses, facilitating automatic documentation generation and client code generation.

====GET /grades/{id}/view_team====
Summary: Retrieve team details associated with a specific grade.

Response 200: Indicates successful retrieval of the team details.
Parameter: id (integer, required) - the unique identifier for a grade.
====GET /grades/{id}/view====
Summary: Fetch comprehensive details about a specific grade.

Response 200: Successful operation, returning complete grade details.
====GET /grades/{id}/view_scores====
Summary: Obtain scoring details for a specific grade.

Response 200: Successful retrieval of score data.
====PUT /grades/{id}/update====
Summary: Update details of a specific grade.

Response 200: Confirmation of successful update.
====GET /grades/{id}====
Summary: Access detailed information about a specific grade.

Response 200: Successful operation, showing detailed grade data.
====GET /grades/{id}/action_allowed====
Summary: Check permissions for performing certain actions on a grade.

Response 200: Successful verification of allowed actions.
====POST /grades/{id}/save_grade_and_comment_for_submission====
Summary: Save a grade along with a comment for a specific submission.

Response 200: Successfully saved the grade and comment.

====Importance and Usage====
*Standardization and Documentation: Swagger files like this one help in standardizing API practices across development teams, providing a consistent and predictable interface. It ensures that all team members, including backend and frontend developers, understand the API’s functionality and constraints without diving into the codebase.
*Client SDK Generation: Tools such as Swagger Codegen can utilize this file to automatically generate client libraries in various programming languages, which can accelerate development and integration efforts.
*Interactive API Documentation: Swagger UI can render this file into interactive API documentation that allows developers to perform live API calls for testing purposes, greatly enhancing the developer experience and easing troubleshooting and testing.
The careful organization and detailed descriptions in the Swagger file are critical for maintaining the robustness and reliability of the API, aligning with best practices in API design and documentation. This approach supports the project's goal to improve maintainability and readability of the grades_controller, ensuring that the API is both accessible and functional.

=== Implementation of Helper Files ===

The recently implemented helper modules—AssignmentHelper, AuthorizationHelper, GradesHelper, PenaltyHelper, and StudentTaskHelper—serve as foundational components that augment the functionality of the Expertiza system. Each module encapsulates specific, reusable logic that interfaces with various aspects of the system, promoting a modular, maintainable, and DRY codebase. Here’s a comprehensive breakdown of each helper module:

====AssignmentHelper====
This module provides utility functions tailored to manage and manipulate course and assignment data:

*course_options: Generates a list of courses available to the user based on their role, such as teaching assistants seeing only their courses, while administrators can view all courses.
*questionnaire_options: Filters questionnaires based on visibility and association with the instructor, allowing users to select questionnaires relevant to their role.
*review_strategy_options and due_date: These functions assist in setting up review strategies for assignments and managing due dates respectively, essential for assignment creation and editing.
====AuthorizationHelper====
Focused on security, this module determines the access level of users within the system:

*current_user_has_..._privileges? methods check the user’s role against required privileges, ensuring actions are permitted before proceeding.
*current_user_is_assignment_participant? and similar methods validate user participation in specific contexts, crucial for enforcing role-based actions within assignments.
====GradesHelper====
This module aids in the handling and display of grades and related functionalities:

*accordion_title and score_vector: These functions manage the display of structured data, such as grouping related responses under a common header in the UI.
*vector and mean: Utilized for statistical calculations to derive insights from grade data, supporting detailed analytical features like average scores.
====PenaltyHelper====
Manages the calculation of penalties based on assignment deadlines and submission timelines:

*calculate_penalty and its associated methods (calculate_submission_penalty, calculate_review_penalty, etc.) assess penalties for late submissions and incomplete reviews, ensuring students are graded fairly based on timeliness and compliance with deadlines.
====StudentTaskHelper====
Enhances the student interaction with tasks and reviews:

*get_review_grade_info and get_awarded_badges: Provide visual feedback and recognition for students’ efforts, which are crucial for motivation and engagement.
*check_reviewable_topics and unsubmitted_self_review?: These functions check for reviewable topics and monitor the submission status of self-reviews, critical for maintaining the integrity and progression of peer reviews.

====Integration and Impact====
The integration of these helper modules significantly enhances the system's robustness by segregating responsibilities into distinct, manageable components. This approach not only simplifies the main application logic but also enhances code readability and maintenance—core aims of the project. By refining the backend architecture through these helpers, the system can more easily adapt to new requirements and facilitate smoother updates and enhancements.

Incorporating these modules into the Expertiza platform effectively addresses key project objectives, including adherence to DRY principles, improved maintainability, and ensuring a scalable architecture that can handle the evolving needs of educational environments. These improvements directly contribute to a more stable, efficient, and user-friendly grading system.

===Implementation of Migration files===
These migration files represent changes to the database schema in a Ruby on Rails application using ActiveRecord. Let's go through each migration file and explain its purpose:

*CreateDeadlineTypes: This migration creates a table called deadline_types with a name column. It also inserts some initial data into this table.
*CreateLatePolicies: This migration creates a table called late_policies with columns for penalty period, penalty per unit, whether the penalty is expressed as a percentage, and maximum penalty. It also inserts initial data into this table and adds an index on the penalty_period_in_minutes column.
*CreateDueDates: This migration creates a table called due_dates with columns for due date, deadline type ID, assignment ID, late policy ID, and flags for submission, review, resubmission, rereview, and review of review permissions. It adds foreign key constraints to reference other tables and indexes on various columns.
*ChangeAssignmentIdInDueDatesTableToParentId: This migration renames the assignment_id column in the due_dates table to parent_id and removes the foreign key constraint on it. This seems to be part of a restructuring where assignment_id is renamed to parent_id in several tables.
*CreateTeams: This migration creates a table called teams with a name column and an assignment_id column, which references the assignments table. It adds a foreign key constraint on the assignment_id column.
*ChangeAssignmentIdInParticipantsTableToParentId: This migration renames the assignment_id column in the participants table to parent_id and removes the foreign key constraint on it.
*ChangeAssignmentIdInTeamsTableToParentId: This migration renames the assignment_id column in the teams table to parent_id and removes the foreign key constraint on it.
*AddUsedInRoundToAssignmentQuestionnaires: This migration adds a column called used_in_round to the assignment_questionnaires table.
*UpdateParticipants: This migration adds columns for grade, comments_to_student, and private_instructor_comments to the participants table.
*CreateTeamsUsers: This migration creates a join table called teams_users to establish a many-to-many relationship between teams and users. It adds foreign key constraints for both team_id and user_id.

=== Use of Design and Dry Principles===
In the provided GradesController code, several design principles and DRY (Don't Repeat Yourself) principles have been applied to ensure a clean and maintainable codebase. Let's break down the implementation and discuss how these principles are reflected:

====Modularization and Inclusion of Concerns====
The controller includes several modules like Scoring, PenaltyHelper, StudentTaskHelper, AssignmentHelper, GradesHelper, and AuthorizationHelper. This modularization helps in organizing related functionalities into separate files, promoting better code organization and reusability.
Each module encapsulates related methods and concerns, promoting separation of concerns and making the codebase more modular.
====Single Responsibility Principle (SRP)====
Methods within the controller have clear and specific responsibilities. For example, view, view_scores, view_team, edit, show, update, and save_grade_and_comment_for_submission methods handle specific actions related to grading, viewing, and updating grades.
This adherence to SRP makes the code easier to understand, test, and maintain as each method focuses on a single task.
====Conditional Handling with Case Statements====
The action_allowed method utilizes a case statement to handle different actions based on the parameters received. This approach makes the code more readable and maintainable compared to using multiple nested if-else statements.
Each case in the statement handles a specific action, improving code organization and readability.
====Code Reuse and DRY Principle====
Common functionalities are abstracted into helper modules (GradesHelper, PenaltyHelper, etc.) and included where needed. For example, methods like participant_scores, calculate_penalty, retrieve_questions, etc., are reused across different controller actions.
By extracting shared functionalities into helper modules, the code adheres to the DRY principle, reducing redundancy and promoting code reuse.
====Comments and Documentation====
The code includes comments explaining the purpose of methods, API endpoints, and complex logic. Comments are used judiciously to provide clarity where necessary.
While comments are helpful, they should ideally focus on explaining why certain decisions were made or complex logic was implemented rather than simply restating what the code does.
====Private Methods for Encapsulation====
Private methods like set_assignment, list_questions, and self_review_finished? encapsulate internal implementation details and are not accessible outside the controller. This encapsulation hides complexity and promotes cleaner interfaces.
====Error Handling====
Error handling is implemented using rescue_from for ActiveRecord::RecordNotFound and StandardError. This ensures graceful handling of exceptions and provides meaningful error responses to clients.
Overall, the GradesController demonstrates good adherence to design principles like SRP, modularity, DRY, encapsulation, and error handling. The code is well-structured, readable, and follows best practices for building maintainable Rails applications.

==Resources==
Pull Request : https://github.com/expertiza/reimplementation-back-end/pull/97

Demonstration : https://drive.google.com/drive/folders/1bfh348t-zbcLZ-VlpTCAGRtoSgVimTnU?usp=sharing

==Team==
=====Mentor=====
*Kashika Malick

=====Members=====
*Sravya Yepuri (syepuri@ncsu.edu)
*Hasini Chenchala (hchench@ncsu.edu)
*Chirag Hegde (chegde@ncsu.edu)

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-24T04:08:23Z

Syepuri: Added postman working images

__TOC__

==Expertiza==
[http://expertiza.ncsu.edu/ 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.

==Introduction==
We're refactoring the grades_controller.rb in Expertiza, enhancing its codebase to adhere to DRY and design principles, improving readability, and reducing redundancy. Our focus includes thorough rswag testing of the grades_controller method and demonstrating Swagger UI integration.

==Problem Statement==
The reimplementation project entails:
#<b>Refactoring Grades Controller:</b> Enhancing code clarity, optimizing loops, and adding comments for unclear lines of code to improve maintainability and readability.
#<b>Removing Redundant Methods:</b> Identifying and eliminating unused methods in the controller to reduce complexity and streamline functionality.
#<b>CRUD Operations:</b> Implementing CRUD operations (Create, Read, Update, Delete) in the controller for efficient data management.
#<b>Adherence to DRY Principle:</b> Ensuring that the reimplementation follows the Don't Repeat Yourself (DRY) principle to avoid duplication and improve code efficiency.
#<b>Testing with RSwag:</b> Writing comprehensive tests using RSwag for each controller method to ensure functionality and integration with Swagger UI, followed by a video demonstration showcasing the Swagger UI integration and functionality of the reimplemented controller.

== Class UML Diagram ==

[[File:Oss4_uml.png|800px|UML Diagram]]

==Plan for Reimplementation of GradesController==

====Code Clarity:====

Existing methods such as <code>view</code>, <code>view_my_scores</code>, and <code>view_team</code> will undergo refinement to improve clarity and readability. This includes adding inline comments within complex methods to provide better understanding. Additionally, loops within <code>make_chart</code> will be streamlined for improved performance, while conditional statements within <code>action_allowed?</code> will be simplified for easier comprehension.

====Authorization Logic:====

Authorization logic within controller actions will be refined to simplify the process and improve error handling. This involves extracting authorization concerns into separate methods like <code>student_privileges_allowed?</code>, <code>ta_privileges_allowed?</code>, etc. Furthermore, error messages within <code>action_allowed?</code> will be enhanced to provide clearer feedback to users in case of access denial.

====View Method Optimization:====

In view methods like <code>view</code>, <code>view_my_scores</code>, and <code>view_team</code>, efforts will be made to streamline code and reduce dependencies. This includes optimizing database queries to improve performance and removing redundant code to enhance maintainability.

====Edit and Update Actions:====

Edit and update actions such as <code>edit</code> and <code>update</code> will be enhanced to adhere to RESTful conventions. Specifically, parameter handling will be simplified to ensure consistency and robust error handling will be implemented to gracefully handle invalid input.

====Chart Generation Optimization:====

Chart generation methods will be optimized to improve efficiency and scalability. This includes implementing caching mechanisms for precomputed data within <code>make_chart</code> to enhance responsiveness. Additionally, exploration of client-side rendering using JavaScript libraries like Chart.js will be considered to further improve performance.

====Self-Review Logic Enhancement:====

Self-review logic within <code>self_review_finished?</code> will undergo validation to ensure accuracy and effectiveness. This includes refining edge cases where self-review completion may not be accurately detected and enhancing user guidance for a smoother experience.

====Redirection Logic Improvement:====

Redirection logic within <code>redirect_when_disallowed</code> will be improved to simplify and consolidate redirection processes. This involves enhancing error handling to provide clearer feedback to users and optimizing redirection logic to minimize unnecessary redirects.

====Comprehensive Testing with RSwag:====

Comprehensive testing with RSwag will be conducted to validate API endpoints and ensure thorough test coverage. This includes writing tests for each controller method, covering both positive and negative test cases, and integrating automated testing into the CI pipeline for consistency and reliability.

==Reimplementation of GradesController ==

=== Implementation of APIs ===

In the context of the project "E2443. Reimplement grades_controller" for the Expertiza platform, the modifications made to the routes.rb file for the GradesController are intended to streamline and enhance the existing functionality related to grading. These routing configurations play a critical role in structuring how grade-related requests are processed and responded to within the application.

The specific routes added under the grades resource leverage a nested structure to facilitate clear and organized handling of various grade-related actions, ensuring that each action pertains directly to individual grade entities identified by :id, being the participant ID.

====Breakdown of Routes====

*View Team (:id/view_team) - This endpoint retrieves detailed information about the team associated with a specific assignment participant. It is crucial for scenarios where assessments or grades are team-based. The API fetches the participant's team and provides comprehensive details, including the team members and their contributions to assignments. This functionality supports collaborative assessments and enhances transparency in team-based grading.
<code>
def view_team
participant = AssignmentParticipant.find(params[:id])
assignment = participant.assignment
team = participant.team
questionnaires = assignment.questionnaires
questions = retrieve_questions(questionnaires, assignment.id)
pscore = participant_scores(participant, questions)
render json: { participant:, assignment:, team:, questions:, pscore:}
end

Working in Postman:

[[File:View_team_grade.png|1000px]]

</code>
*View Grade Details (:id/view) - This endpoint allows for viewing all relevant details of an assignment for a particular participant. It aggregates data such as related questionnaires, questions, and scores, providing a holistic view of the grading criteria and results. This function is particularly valuable for providing a comprehensive breakdown of scores across different review rounds, assisting in a deeper understanding of how grades were allocated.
<code>
def view
assignment = Assignment.find(params[:id])
questionnaires = assignment.questionnaires
if assignment.num_review_rounds > 1
questions = retrieve_questions questionnaires, assignment.id
else
questions = {}
questionnaires.each do |questionnaire|
questions[questionnaire.symbol] = questionnaire.questions
end
end
scores = review_grades(assignment, questions)
num_reviewers_assigned_scores = scores[:teams].length
averages = vector(scores)
avg_of_avg = mean(averages)
render json: { scores:, averages:, avg_of_avg:, num_reviewers_assigned_scores: }
end
</code>

Working in Postman:

[[File:View_grade.png|1000px]]

*View Scores (:id/view_scores) - This API endpoint is designed to show scores for a specific assignment participant. It provides detailed insights into how participants are performing in the ongoing assignments and the various stages of assignment completion. This is essential for tracking academic progress and identifying areas where students may need additional support or recognition.
<code>
def view_scores
participant = AssignmentParticipant.find(params[:id])
assignment = participant.assignment
# questionnaires = assignment.questionnaires
# questions = retrieve_questions questionnaires, assignment.id
# pscore = participant_scores(participant, questions)
topic_id = SignedUpTeam.topic_id(participant.assignment.id, participant.user_id)
stage = assignment.current_stage(topic_id)

render json: { participant: }
end
</code>

Working in Postman:

[[File:View_scores.png|1000px]]

*Update Grade (:id/update) - This endpoint enables updating the grade for a participant. It accepts a new grade value and updates the participant’s record if the new grade differs from the existing one. This API is crucial for situations where grades need to be revised or corrected, ensuring that grading remains dynamic and reflective of actual student performance and any subsequent reviews or reassessments.
<code>
def update
participant = AssignmentParticipant.find(params[:id])
total_score = params[:total_score]
unless format('%.2f', total_score) == params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for #{participant.user.name}."
else
"A score of #{params[:participant][:grade]}% has been saved for #{participant.user.name}."
end
end
render json: { message: message}
end
</code>

Working in Postman:

[[File:Update_grade.png|1000px]]

*Show Grade (:id) - This endpoint provides a detailed view of a participant's assignment by fetching and displaying all relevant information such as the assignment details, participant info, related questions, and scores. This function is a vital read operation that allows instructors and students to access complete information on a participant's performance in a specific assignment.
<code>
def show
participant = AssignmentParticipant.find(params[:id])
assignment = participant.assignment
questions = list_questions(assignment)
scores = participant_scores(participant, questions)

render json: { participant:, assignment:, questions:, scores: }
end
</code>

Working in Postman:

[[File:Show_grade.png|1000px]]

*Action Allowed (:id/action_allowed) - This endpoint checks if a particular action is allowed for the current user, based on the user’s role and the specific action they intend to perform (like viewing scores). It ensures that operations are conducted within established permissions, enhancing security and role-based access control within the application. This is critical for maintaining the integrity of the grading process and ensuring that only authorized actions are executed.
<code>
def action_allowed
case params[:action]
when 'view_scores'
if current_user_has_student_privileges? &&
are_needed_authorizations_present?(params[:id], 'reader', 'reviewer') &&
self_review_finished?
render json: { allowed: true }
else
render json: { allowed: false, error: 'Unauthorized' }, status: :forbidden
end
when 'view_team'
if current_user_is_a? 'Student'
participant = AssignmentParticipant.find_by(id: params[:id])
if participant && current_user_is_assignment_participant?(participant.assignment.id)
render json: { allowed: true }
else
render json: { allowed: false, error: 'Unauthorized' }, status: :forbidden
end
else
render json: { allowed: true }
end
else
if current_user_has_ta_privileges?
render json: { allowed: true }
else
render json: { allowed: false, error: 'Unauthorized' }, status: :forbidden
end
end
end
</code>

Working in Postman:

[[File:Action_allowed_grade.png|1000px]]

*Save Grade and Comment (:id/save_grade_and_comment_for_submission) - This API allows for the saving of grades and comments for a specific submission. It is designed to capture both quantitative and qualitative feedback, storing this information securely and making it accessible for review. This endpoint is particularly important for providing feedback that is integral to educational environments, fostering a constructive and informative feedback loop.
<code>
def save_grade_and_comment_for_submission
participant = AssignmentParticipant.find(params[:id])
@team = participant.team
@team.grade_for_submission = params[:grade]
@team.comment_for_submission = params[:comment]
begin
@team.save!
render json: { success: "Grade \'#{params[:grade]}\' and comment \'#{params[:comment]}\' for submission successfully saved." }
rescue StandardError => e
render json: { error: e.message }, status: :unprocessable_entity
end
end
</code>

Working in Postman:

[[File:Save_grade_and_comment.png|1000px]]

These routes collectively support the essential CRUD operations needed for managing grades within the Expertiza system. By carefully defining these routes, the project ensures that grade management is handled in a structured and efficient manner, thereby reducing redundancy and enhancing the overall system architecture. This reimplementation fosters better scalability and easier maintenance, adhering to improved software design principles and practices.

=== Implementation of Spec file ===
The specification file for the Grades API provides comprehensive testing scenarios for various endpoints within the Api::V1::GradesController. This document is crafted using RSpec, a popular testing framework for Ruby applications, and employs the Swagger tool to describe and document the API endpoints. The focus is on ensuring that the controller behaves as expected across different use cases, adhering to both functional and non-functional requirements. Here is a detailed explanation of the test cases outlined in the specification:

====Testing Framework and Tools====
*RSpec is utilized for writing and executing the test cases, providing a DSL (Domain-Specific Language) that is readable and expressive.
*Swagger helps in documenting the API, which not only serves for testing but also acts as a live documentation for developers and users of the API.
====Endpoints and Test Scenarios====
*GET /api/v1/grades/{id}/view - This endpoint tests the functionality to view detailed grade information for a specific ID.The test ensures that upon receiving a valid ID, the system returns a 200 status code indicating a successful operation.
*GET /api/v1/grades/{id}/view_team - Tests the ability to retrieve team details associated with a specific grade.A 200 status code response is expected when valid data is provided, confirming the correct retrieval of team information.
*GET /api/v1/grades/{id}/view_scores - Focuses on viewing scores for a specific grade.The test confirms that the endpoint returns a 200 status when executed with a correct ID, displaying the scores accurately.
*PUT /api/v1/grades/{id}/update - Tests the grade update functionality. This endpoint expects a JSON body with grade details.Two scenarios are tested: successful grade update (200 status) and failure due to missing required attributes (422 status), ensuring robust error handling and data validation.
*GET /api/v1/grades/{id} - Simple retrieval of grade details. The test verifies that the endpoint fetches and returns the correct grade information, indicated by a 200 success status.
*GET /api/v1/grades/{id}/action_allowed - Checks if a certain action is permissible for a given grade ID. It tests for both allowed (200 status) and not allowed scenarios (403 status), important for validating access control mechanisms.
*PUT /api/v1/grades/{id}/save_grade_and_comment_for_submission - This test ensures that grades and comments can be successfully saved for a submission. The parameters are passed via query strings, and the test checks for a successful save operation (200 status).

====Importance of These Tests====
The specified tests are essential for maintaining the integrity and reliability of the Grades API. They ensure that:

*The API responds correctly under various conditions.
*Data integrity is maintained with correct inputs and handling of incorrect or partial inputs.
*Security and access control measures are effective, particularly in verifying user permissions.
This meticulous testing setup reflects a commitment to quality and robustness in the software development lifecycle, crucial for applications like Expertiza that are used in educational settings. These tests contribute directly to the project's aim of enhancing maintainability, readability, and adherence to the DRY principle within the grades_controller.

===Swagger File Implementation===
The Swagger file uses YAML format to describe the HTTP routes, parameters, and responses for the API. Each path is clearly defined with required parameters and expected responses, facilitating automatic documentation generation and client code generation.

====GET /grades/{id}/view_team====
Summary: Retrieve team details associated with a specific grade.

Response 200: Indicates successful retrieval of the team details.
Parameter: id (integer, required) - the unique identifier for a grade.
====GET /grades/{id}/view====
Summary: Fetch comprehensive details about a specific grade.

Response 200: Successful operation, returning complete grade details.
====GET /grades/{id}/view_scores====
Summary: Obtain scoring details for a specific grade.

Response 200: Successful retrieval of score data.
====PUT /grades/{id}/update====
Summary: Update details of a specific grade.

Response 200: Confirmation of successful update.
====GET /grades/{id}====
Summary: Access detailed information about a specific grade.

Response 200: Successful operation, showing detailed grade data.
====GET /grades/{id}/action_allowed====
Summary: Check permissions for performing certain actions on a grade.

Response 200: Successful verification of allowed actions.
====POST /grades/{id}/save_grade_and_comment_for_submission====
Summary: Save a grade along with a comment for a specific submission.

Response 200: Successfully saved the grade and comment.

====Importance and Usage====
*Standardization and Documentation: Swagger files like this one help in standardizing API practices across development teams, providing a consistent and predictable interface. It ensures that all team members, including backend and frontend developers, understand the API’s functionality and constraints without diving into the codebase.
*Client SDK Generation: Tools such as Swagger Codegen can utilize this file to automatically generate client libraries in various programming languages, which can accelerate development and integration efforts.
*Interactive API Documentation: Swagger UI can render this file into interactive API documentation that allows developers to perform live API calls for testing purposes, greatly enhancing the developer experience and easing troubleshooting and testing.
The careful organization and detailed descriptions in the Swagger file are critical for maintaining the robustness and reliability of the API, aligning with best practices in API design and documentation. This approach supports the project's goal to improve maintainability and readability of the grades_controller, ensuring that the API is both accessible and functional.

=== Implementation of Helper Files ===

The recently implemented helper modules—AssignmentHelper, AuthorizationHelper, GradesHelper, PenaltyHelper, and StudentTaskHelper—serve as foundational components that augment the functionality of the Expertiza system. Each module encapsulates specific, reusable logic that interfaces with various aspects of the system, promoting a modular, maintainable, and DRY codebase. Here’s a comprehensive breakdown of each helper module:

====AssignmentHelper====
This module provides utility functions tailored to manage and manipulate course and assignment data:

*course_options: Generates a list of courses available to the user based on their role, such as teaching assistants seeing only their courses, while administrators can view all courses.
*questionnaire_options: Filters questionnaires based on visibility and association with the instructor, allowing users to select questionnaires relevant to their role.
*review_strategy_options and due_date: These functions assist in setting up review strategies for assignments and managing due dates respectively, essential for assignment creation and editing.
====AuthorizationHelper====
Focused on security, this module determines the access level of users within the system:

*current_user_has_..._privileges? methods check the user’s role against required privileges, ensuring actions are permitted before proceeding.
*current_user_is_assignment_participant? and similar methods validate user participation in specific contexts, crucial for enforcing role-based actions within assignments.
====GradesHelper====
This module aids in the handling and display of grades and related functionalities:

*accordion_title and score_vector: These functions manage the display of structured data, such as grouping related responses under a common header in the UI.
*vector and mean: Utilized for statistical calculations to derive insights from grade data, supporting detailed analytical features like average scores.
====PenaltyHelper====
Manages the calculation of penalties based on assignment deadlines and submission timelines:

*calculate_penalty and its associated methods (calculate_submission_penalty, calculate_review_penalty, etc.) assess penalties for late submissions and incomplete reviews, ensuring students are graded fairly based on timeliness and compliance with deadlines.
====StudentTaskHelper====
Enhances the student interaction with tasks and reviews:

*get_review_grade_info and get_awarded_badges: Provide visual feedback and recognition for students’ efforts, which are crucial for motivation and engagement.
*check_reviewable_topics and unsubmitted_self_review?: These functions check for reviewable topics and monitor the submission status of self-reviews, critical for maintaining the integrity and progression of peer reviews.

====Integration and Impact====
The integration of these helper modules significantly enhances the system's robustness by segregating responsibilities into distinct, manageable components. This approach not only simplifies the main application logic but also enhances code readability and maintenance—core aims of the project. By refining the backend architecture through these helpers, the system can more easily adapt to new requirements and facilitate smoother updates and enhancements.

Incorporating these modules into the Expertiza platform effectively addresses key project objectives, including adherence to DRY principles, improved maintainability, and ensuring a scalable architecture that can handle the evolving needs of educational environments. These improvements directly contribute to a more stable, efficient, and user-friendly grading system.

===Implementation of Migration files===
These migration files represent changes to the database schema in a Ruby on Rails application using ActiveRecord. Let's go through each migration file and explain its purpose:

*CreateDeadlineTypes: This migration creates a table called deadline_types with a name column. It also inserts some initial data into this table.
*CreateLatePolicies: This migration creates a table called late_policies with columns for penalty period, penalty per unit, whether the penalty is expressed as a percentage, and maximum penalty. It also inserts initial data into this table and adds an index on the penalty_period_in_minutes column.
*CreateDueDates: This migration creates a table called due_dates with columns for due date, deadline type ID, assignment ID, late policy ID, and flags for submission, review, resubmission, rereview, and review of review permissions. It adds foreign key constraints to reference other tables and indexes on various columns.
*ChangeAssignmentIdInDueDatesTableToParentId: This migration renames the assignment_id column in the due_dates table to parent_id and removes the foreign key constraint on it. This seems to be part of a restructuring where assignment_id is renamed to parent_id in several tables.
*CreateTeams: This migration creates a table called teams with a name column and an assignment_id column, which references the assignments table. It adds a foreign key constraint on the assignment_id column.
*ChangeAssignmentIdInParticipantsTableToParentId: This migration renames the assignment_id column in the participants table to parent_id and removes the foreign key constraint on it.
*ChangeAssignmentIdInTeamsTableToParentId: This migration renames the assignment_id column in the teams table to parent_id and removes the foreign key constraint on it.
*AddUsedInRoundToAssignmentQuestionnaires: This migration adds a column called used_in_round to the assignment_questionnaires table.
*UpdateParticipants: This migration adds columns for grade, comments_to_student, and private_instructor_comments to the participants table.
*CreateTeamsUsers: This migration creates a join table called teams_users to establish a many-to-many relationship between teams and users. It adds foreign key constraints for both team_id and user_id.

=== Use of Design and Dry Principles===
In the provided GradesController code, several design principles and DRY (Don't Repeat Yourself) principles have been applied to ensure a clean and maintainable codebase. Let's break down the implementation and discuss how these principles are reflected:

====Modularization and Inclusion of Concerns====
The controller includes several modules like Scoring, PenaltyHelper, StudentTaskHelper, AssignmentHelper, GradesHelper, and AuthorizationHelper. This modularization helps in organizing related functionalities into separate files, promoting better code organization and reusability.
Each module encapsulates related methods and concerns, promoting separation of concerns and making the codebase more modular.
====Single Responsibility Principle (SRP)====
Methods within the controller have clear and specific responsibilities. For example, view, view_scores, view_team, edit, show, update, and save_grade_and_comment_for_submission methods handle specific actions related to grading, viewing, and updating grades.
This adherence to SRP makes the code easier to understand, test, and maintain as each method focuses on a single task.
====Conditional Handling with Case Statements====
The action_allowed method utilizes a case statement to handle different actions based on the parameters received. This approach makes the code more readable and maintainable compared to using multiple nested if-else statements.
Each case in the statement handles a specific action, improving code organization and readability.
====Code Reuse and DRY Principle====
Common functionalities are abstracted into helper modules (GradesHelper, PenaltyHelper, etc.) and included where needed. For example, methods like participant_scores, calculate_penalty, retrieve_questions, etc., are reused across different controller actions.
By extracting shared functionalities into helper modules, the code adheres to the DRY principle, reducing redundancy and promoting code reuse.
====Comments and Documentation====
The code includes comments explaining the purpose of methods, API endpoints, and complex logic. Comments are used judiciously to provide clarity where necessary.
While comments are helpful, they should ideally focus on explaining why certain decisions were made or complex logic was implemented rather than simply restating what the code does.
====Private Methods for Encapsulation====
Private methods like set_assignment, list_questions, and self_review_finished? encapsulate internal implementation details and are not accessible outside the controller. This encapsulation hides complexity and promotes cleaner interfaces.
====Error Handling====
Error handling is implemented using rescue_from for ActiveRecord::RecordNotFound and StandardError. This ensures graceful handling of exceptions and provides meaningful error responses to clients.
Overall, the GradesController demonstrates good adherence to design principles like SRP, modularity, DRY, encapsulation, and error handling. The code is well-structured, readable, and follows best practices for building maintainable Rails applications.

==Resources==
Pull Request : https://github.com/expertiza/reimplementation-back-end/pull/97

Demonstration : https://drive.google.com/drive/folders/1bfh348t-zbcLZ-VlpTCAGRtoSgVimTnU?usp=sharing

==Team==
=====Mentor=====
*Kashika Malick

=====Members=====
*Sravya Yepuri (syepuri@ncsu.edu)
*Hasini Chenchala (hchench@ncsu.edu)
*Chirag Hegde (chegde@ncsu.edu)

File:View team grade.jpeg

2024-04-24T04:03:45Z

Syepuri:

File:View scores.jpeg

2024-04-24T04:03:06Z

Syepuri:

File:View grade.jpeg

2024-04-24T04:02:48Z

Syepuri:

File:Update grade.jpeg

2024-04-24T04:02:35Z

Syepuri:

File:Show grade.jpeg

2024-04-24T04:02:10Z

Syepuri:

File:Action allowed grade.jpeg

2024-04-24T04:01:55Z

Syepuri:

File:Save grade and comment.jpeg

2024-04-24T04:01:24Z

Syepuri:

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-24T03:11:40Z

Syepuri: /* Breakdown of Routes */

__TOC__

==Expertiza==
[http://expertiza.ncsu.edu/ 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.

==Introduction==
We're refactoring the grades_controller.rb in Expertiza, enhancing its codebase to adhere to DRY and design principles, improving readability, and reducing redundancy. Our focus includes thorough rswag testing of the grades_controller method and demonstrating Swagger UI integration.

==Problem Statement==
The reimplementation project entails:
#<b>Refactoring Grades Controller:</b> Enhancing code clarity, optimizing loops, and adding comments for unclear lines of code to improve maintainability and readability.
#<b>Removing Redundant Methods:</b> Identifying and eliminating unused methods in the controller to reduce complexity and streamline functionality.
#<b>CRUD Operations:</b> Implementing CRUD operations (Create, Read, Update, Delete) in the controller for efficient data management.
#<b>Adherence to DRY Principle:</b> Ensuring that the reimplementation follows the Don't Repeat Yourself (DRY) principle to avoid duplication and improve code efficiency.
#<b>Testing with RSwag:</b> Writing comprehensive tests using RSwag for each controller method to ensure functionality and integration with Swagger UI, followed by a video demonstration showcasing the Swagger UI integration and functionality of the reimplemented controller.

== Class UML Diagram ==

[[File:Oss4_uml.png|800px|UML Diagram]]

==Plan for Reimplementation of GradesController==

====Code Clarity:====

Existing methods such as <code>view</code>, <code>view_my_scores</code>, and <code>view_team</code> will undergo refinement to improve clarity and readability. This includes adding inline comments within complex methods to provide better understanding. Additionally, loops within <code>make_chart</code> will be streamlined for improved performance, while conditional statements within <code>action_allowed?</code> will be simplified for easier comprehension.

====Authorization Logic:====

Authorization logic within controller actions will be refined to simplify the process and improve error handling. This involves extracting authorization concerns into separate methods like <code>student_privileges_allowed?</code>, <code>ta_privileges_allowed?</code>, etc. Furthermore, error messages within <code>action_allowed?</code> will be enhanced to provide clearer feedback to users in case of access denial.

====View Method Optimization:====

In view methods like <code>view</code>, <code>view_my_scores</code>, and <code>view_team</code>, efforts will be made to streamline code and reduce dependencies. This includes optimizing database queries to improve performance and removing redundant code to enhance maintainability.

====Edit and Update Actions:====

Edit and update actions such as <code>edit</code> and <code>update</code> will be enhanced to adhere to RESTful conventions. Specifically, parameter handling will be simplified to ensure consistency and robust error handling will be implemented to gracefully handle invalid input.

====Chart Generation Optimization:====

Chart generation methods will be optimized to improve efficiency and scalability. This includes implementing caching mechanisms for precomputed data within <code>make_chart</code> to enhance responsiveness. Additionally, exploration of client-side rendering using JavaScript libraries like Chart.js will be considered to further improve performance.

====Self-Review Logic Enhancement:====

Self-review logic within <code>self_review_finished?</code> will undergo validation to ensure accuracy and effectiveness. This includes refining edge cases where self-review completion may not be accurately detected and enhancing user guidance for a smoother experience.

====Redirection Logic Improvement:====

Redirection logic within <code>redirect_when_disallowed</code> will be improved to simplify and consolidate redirection processes. This involves enhancing error handling to provide clearer feedback to users and optimizing redirection logic to minimize unnecessary redirects.

====Comprehensive Testing with RSwag:====

Comprehensive testing with RSwag will be conducted to validate API endpoints and ensure thorough test coverage. This includes writing tests for each controller method, covering both positive and negative test cases, and integrating automated testing into the CI pipeline for consistency and reliability.

==Reimplementation of GradesController ==

=== Implementation of APIs ===

In the context of the project "E2443. Reimplement grades_controller" for the Expertiza platform, the modifications made to the routes.rb file for the GradesController are intended to streamline and enhance the existing functionality related to grading. These routing configurations play a critical role in structuring how grade-related requests are processed and responded to within the application.

The specific routes added under the grades resource leverage a nested structure to facilitate clear and organized handling of various grade-related actions, ensuring that each action pertains directly to individual grade entities identified by :id, being the participant ID.

====Breakdown of Routes====

*View Team (:id/view_team) - This endpoint retrieves detailed information about the team associated with a specific assignment participant. It is crucial for scenarios where assessments or grades are team-based. The API fetches the participant's team and provides comprehensive details, including the team members and their contributions to assignments. This functionality supports collaborative assessments and enhances transparency in team-based grading.

<code>
def view_team
participant = AssignmentParticipant.find(params[:id])
assignment = participant.assignment
team = participant.team
questionnaires = assignment.questionnaires
questions = retrieve_questions(questionnaires, assignment.id)
pscore = participant_scores(participant, questions)

render json: { participant:, assignment:, team:, questions:, pscore:}
end
</code>

*View Grade Details (:id/view) - This endpoint allows for viewing all relevant details of an assignment for a particular participant. It aggregates data such as related questionnaires, questions, and scores, providing a holistic view of the grading criteria and results. This function is particularly valuable for providing a comprehensive breakdown of scores across different review rounds, assisting in a deeper understanding of how grades were allocated.

<code>
def view
assignment = Assignment.find(params[:id])
questionnaires = assignment.questionnaires
if assignment.num_review_rounds > 1
questions = retrieve_questions questionnaires, assignment.id
else
questions = {}
questionnaires.each do |questionnaire|
questions[questionnaire.symbol] = questionnaire.questions
end
end
scores = review_grades(assignment, questions)
num_reviewers_assigned_scores = scores[:teams].length
averages = vector(scores)
avg_of_avg = mean(averages)
render json: { scores:, averages:, avg_of_avg:, num_reviewers_assigned_scores: }
end
</code>

*View Scores (:id/view_scores) - This API endpoint is designed to show scores for a specific assignment participant. It provides detailed insights into how participants are performing in the ongoing assignments and the various stages of assignment completion. This is essential for tracking academic progress and identifying areas where students may need additional support or recognition.

<code>
def view_scores
participant = AssignmentParticipant.find(params[:id])
assignment = participant.assignment
# questionnaires = assignment.questionnaires
# questions = retrieve_questions questionnaires, assignment.id
# pscore = participant_scores(participant, questions)
topic_id = SignedUpTeam.topic_id(participant.assignment.id, participant.user_id)
stage = assignment.current_stage(topic_id)

render json: { participant: }
end
</code>

*Update Grade (:id/update) - This endpoint enables updating the grade for a participant. It accepts a new grade value and updates the participant’s record if the new grade differs from the existing one. This API is crucial for situations where grades need to be revised or corrected, ensuring that grading remains dynamic and reflective of actual student performance and any subsequent reviews or reassessments.

<code>
</code>

*Show Grade (:id) - This endpoint provides a detailed view of a participant's assignment by fetching and displaying all relevant information such as the assignment details, participant info, related questions, and scores. This function is a vital read operation that allows instructors and students to access complete information on a participant's performance in a specific assignment.

<code>
</code>

*Action Allowed (:id/action_allowed) - This endpoint checks if a particular action is allowed for the current user, based on the user’s role and the specific action they intend to perform (like viewing scores). It ensures that operations are conducted within established permissions, enhancing security and role-based access control within the application. This is critical for maintaining the integrity of the grading process and ensuring that only authorized actions are executed.

<code>
</code>

*Save Grade and Comment (:id/save_grade_and_comment_for_submission) - This API allows for the saving of grades and comments for a specific submission. It is designed to capture both quantitative and qualitative feedback, storing this information securely and making it accessible for review. This endpoint is particularly important for providing feedback that is integral to educational environments, fostering a constructive and informative feedback loop.

<code>
</code>

These routes collectively support the essential CRUD operations needed for managing grades within the Expertiza system. By carefully defining these routes, the project ensures that grade management is handled in a structured and efficient manner, thereby reducing redundancy and enhancing the overall system architecture. This reimplementation fosters better scalability and easier maintenance, adhering to improved software design principles and practices.

=== Implementation of Spec file ===
The specification file for the Grades API provides comprehensive testing scenarios for various endpoints within the Api::V1::GradesController. This document is crafted using RSpec, a popular testing framework for Ruby applications, and employs the Swagger tool to describe and document the API endpoints. The focus is on ensuring that the controller behaves as expected across different use cases, adhering to both functional and non-functional requirements. Here is a detailed explanation of the test cases outlined in the specification:

====Testing Framework and Tools====
*RSpec is utilized for writing and executing the test cases, providing a DSL (Domain-Specific Language) that is readable and expressive.
*Swagger helps in documenting the API, which not only serves for testing but also acts as a live documentation for developers and users of the API.
====Endpoints and Test Scenarios====
*GET /api/v1/grades/{id}/view - This endpoint tests the functionality to view detailed grade information for a specific ID.The test ensures that upon receiving a valid ID, the system returns a 200 status code indicating a successful operation.
*GET /api/v1/grades/{id}/view_team - Tests the ability to retrieve team details associated with a specific grade.A 200 status code response is expected when valid data is provided, confirming the correct retrieval of team information.
*GET /api/v1/grades/{id}/view_scores - Focuses on viewing scores for a specific grade.The test confirms that the endpoint returns a 200 status when executed with a correct ID, displaying the scores accurately.
*PUT /api/v1/grades/{id}/update - Tests the grade update functionality. This endpoint expects a JSON body with grade details.Two scenarios are tested: successful grade update (200 status) and failure due to missing required attributes (422 status), ensuring robust error handling and data validation.
*GET /api/v1/grades/{id} - Simple retrieval of grade details. The test verifies that the endpoint fetches and returns the correct grade information, indicated by a 200 success status.
*GET /api/v1/grades/{id}/action_allowed - Checks if a certain action is permissible for a given grade ID. It tests for both allowed (200 status) and not allowed scenarios (403 status), important for validating access control mechanisms.
*PUT /api/v1/grades/{id}/save_grade_and_comment_for_submission - This test ensures that grades and comments can be successfully saved for a submission. The parameters are passed via query strings, and the test checks for a successful save operation (200 status).

====Importance of These Tests====
The specified tests are essential for maintaining the integrity and reliability of the Grades API. They ensure that:

*The API responds correctly under various conditions.
*Data integrity is maintained with correct inputs and handling of incorrect or partial inputs.
*Security and access control measures are effective, particularly in verifying user permissions.
This meticulous testing setup reflects a commitment to quality and robustness in the software development lifecycle, crucial for applications like Expertiza that are used in educational settings. These tests contribute directly to the project's aim of enhancing maintainability, readability, and adherence to the DRY principle within the grades_controller.

===Swagger File Implementation===
The Swagger file uses YAML format to describe the HTTP routes, parameters, and responses for the API. Each path is clearly defined with required parameters and expected responses, facilitating automatic documentation generation and client code generation.

====GET /grades/{id}/view_team====
Summary: Retrieve team details associated with a specific grade.

Response 200: Indicates successful retrieval of the team details.
Parameter: id (integer, required) - the unique identifier for a grade.
====GET /grades/{id}/view====
Summary: Fetch comprehensive details about a specific grade.

Response 200: Successful operation, returning complete grade details.
====GET /grades/{id}/view_scores====
Summary: Obtain scoring details for a specific grade.

Response 200: Successful retrieval of score data.
====PUT /grades/{id}/update====
Summary: Update details of a specific grade.

Response 200: Confirmation of successful update.
====GET /grades/{id}====
Summary: Access detailed information about a specific grade.

Response 200: Successful operation, showing detailed grade data.
====GET /grades/{id}/action_allowed====
Summary: Check permissions for performing certain actions on a grade.

Response 200: Successful verification of allowed actions.
====POST /grades/{id}/save_grade_and_comment_for_submission====
Summary: Save a grade along with a comment for a specific submission.

Response 200: Successfully saved the grade and comment.

====Importance and Usage====
*Standardization and Documentation: Swagger files like this one help in standardizing API practices across development teams, providing a consistent and predictable interface. It ensures that all team members, including backend and frontend developers, understand the API’s functionality and constraints without diving into the codebase.
*Client SDK Generation: Tools such as Swagger Codegen can utilize this file to automatically generate client libraries in various programming languages, which can accelerate development and integration efforts.
*Interactive API Documentation: Swagger UI can render this file into interactive API documentation that allows developers to perform live API calls for testing purposes, greatly enhancing the developer experience and easing troubleshooting and testing.
The careful organization and detailed descriptions in the Swagger file are critical for maintaining the robustness and reliability of the API, aligning with best practices in API design and documentation. This approach supports the project's goal to improve maintainability and readability of the grades_controller, ensuring that the API is both accessible and functional.

=== Implementation of Helper Files ===

The recently implemented helper modules—AssignmentHelper, AuthorizationHelper, GradesHelper, PenaltyHelper, and StudentTaskHelper—serve as foundational components that augment the functionality of the Expertiza system. Each module encapsulates specific, reusable logic that interfaces with various aspects of the system, promoting a modular, maintainable, and DRY codebase. Here’s a comprehensive breakdown of each helper module:

====AssignmentHelper====
This module provides utility functions tailored to manage and manipulate course and assignment data:

*course_options: Generates a list of courses available to the user based on their role, such as teaching assistants seeing only their courses, while administrators can view all courses.
*questionnaire_options: Filters questionnaires based on visibility and association with the instructor, allowing users to select questionnaires relevant to their role.
*review_strategy_options and due_date: These functions assist in setting up review strategies for assignments and managing due dates respectively, essential for assignment creation and editing.
====AuthorizationHelper====
Focused on security, this module determines the access level of users within the system:

*current_user_has_..._privileges? methods check the user’s role against required privileges, ensuring actions are permitted before proceeding.
*current_user_is_assignment_participant? and similar methods validate user participation in specific contexts, crucial for enforcing role-based actions within assignments.
====GradesHelper====
This module aids in the handling and display of grades and related functionalities:

*accordion_title and score_vector: These functions manage the display of structured data, such as grouping related responses under a common header in the UI.
*vector and mean: Utilized for statistical calculations to derive insights from grade data, supporting detailed analytical features like average scores.
====PenaltyHelper====
Manages the calculation of penalties based on assignment deadlines and submission timelines:

*calculate_penalty and its associated methods (calculate_submission_penalty, calculate_review_penalty, etc.) assess penalties for late submissions and incomplete reviews, ensuring students are graded fairly based on timeliness and compliance with deadlines.
====StudentTaskHelper====
Enhances the student interaction with tasks and reviews:

*get_review_grade_info and get_awarded_badges: Provide visual feedback and recognition for students’ efforts, which are crucial for motivation and engagement.
*check_reviewable_topics and unsubmitted_self_review?: These functions check for reviewable topics and monitor the submission status of self-reviews, critical for maintaining the integrity and progression of peer reviews.

====Integration and Impact====
The integration of these helper modules significantly enhances the system's robustness by segregating responsibilities into distinct, manageable components. This approach not only simplifies the main application logic but also enhances code readability and maintenance—core aims of the project. By refining the backend architecture through these helpers, the system can more easily adapt to new requirements and facilitate smoother updates and enhancements.

Incorporating these modules into the Expertiza platform effectively addresses key project objectives, including adherence to DRY principles, improved maintainability, and ensuring a scalable architecture that can handle the evolving needs of educational environments. These improvements directly contribute to a more stable, efficient, and user-friendly grading system.

===Implementation of Migration files===
These migration files represent changes to the database schema in a Ruby on Rails application using ActiveRecord. Let's go through each migration file and explain its purpose:

*CreateDeadlineTypes: This migration creates a table called deadline_types with a name column. It also inserts some initial data into this table.
*CreateLatePolicies: This migration creates a table called late_policies with columns for penalty period, penalty per unit, whether the penalty is expressed as a percentage, and maximum penalty. It also inserts initial data into this table and adds an index on the penalty_period_in_minutes column.
*CreateDueDates: This migration creates a table called due_dates with columns for due date, deadline type ID, assignment ID, late policy ID, and flags for submission, review, resubmission, rereview, and review of review permissions. It adds foreign key constraints to reference other tables and indexes on various columns.
*ChangeAssignmentIdInDueDatesTableToParentId: This migration renames the assignment_id column in the due_dates table to parent_id and removes the foreign key constraint on it. This seems to be part of a restructuring where assignment_id is renamed to parent_id in several tables.
*CreateTeams: This migration creates a table called teams with a name column and an assignment_id column, which references the assignments table. It adds a foreign key constraint on the assignment_id column.
*ChangeAssignmentIdInParticipantsTableToParentId: This migration renames the assignment_id column in the participants table to parent_id and removes the foreign key constraint on it.
*ChangeAssignmentIdInTeamsTableToParentId: This migration renames the assignment_id column in the teams table to parent_id and removes the foreign key constraint on it.
*AddUsedInRoundToAssignmentQuestionnaires: This migration adds a column called used_in_round to the assignment_questionnaires table.
*UpdateParticipants: This migration adds columns for grade, comments_to_student, and private_instructor_comments to the participants table.
*CreateTeamsUsers: This migration creates a join table called teams_users to establish a many-to-many relationship between teams and users. It adds foreign key constraints for both team_id and user_id.

=== Use of Design and Dry Principles===
In the provided GradesController code, several design principles and DRY (Don't Repeat Yourself) principles have been applied to ensure a clean and maintainable codebase. Let's break down the implementation and discuss how these principles are reflected:

====Modularization and Inclusion of Concerns====
The controller includes several modules like Scoring, PenaltyHelper, StudentTaskHelper, AssignmentHelper, GradesHelper, and AuthorizationHelper. This modularization helps in organizing related functionalities into separate files, promoting better code organization and reusability.
Each module encapsulates related methods and concerns, promoting separation of concerns and making the codebase more modular.
====Single Responsibility Principle (SRP)====
Methods within the controller have clear and specific responsibilities. For example, view, view_scores, view_team, edit, show, update, and save_grade_and_comment_for_submission methods handle specific actions related to grading, viewing, and updating grades.
This adherence to SRP makes the code easier to understand, test, and maintain as each method focuses on a single task.
====Conditional Handling with Case Statements====
The action_allowed method utilizes a case statement to handle different actions based on the parameters received. This approach makes the code more readable and maintainable compared to using multiple nested if-else statements.
Each case in the statement handles a specific action, improving code organization and readability.
====Code Reuse and DRY Principle====
Common functionalities are abstracted into helper modules (GradesHelper, PenaltyHelper, etc.) and included where needed. For example, methods like participant_scores, calculate_penalty, retrieve_questions, etc., are reused across different controller actions.
By extracting shared functionalities into helper modules, the code adheres to the DRY principle, reducing redundancy and promoting code reuse.
====Comments and Documentation====
The code includes comments explaining the purpose of methods, API endpoints, and complex logic. Comments are used judiciously to provide clarity where necessary.
While comments are helpful, they should ideally focus on explaining why certain decisions were made or complex logic was implemented rather than simply restating what the code does.
====Private Methods for Encapsulation====
Private methods like set_assignment, list_questions, and self_review_finished? encapsulate internal implementation details and are not accessible outside the controller. This encapsulation hides complexity and promotes cleaner interfaces.
====Error Handling====
Error handling is implemented using rescue_from for ActiveRecord::RecordNotFound and StandardError. This ensures graceful handling of exceptions and provides meaningful error responses to clients.
Overall, the GradesController demonstrates good adherence to design principles like SRP, modularity, DRY, encapsulation, and error handling. The code is well-structured, readable, and follows best practices for building maintainable Rails applications.

== Design Principles ==

==== Single Responsibility Principle (SRP): ====
*Each action in the GradesController will be responsible for a specific task related to managing grades.
*Actions will be refactored to separate concerns such as data retrieval, computation, and view rendering.
*For example, the `view` action will focus solely on retrieving grading data and rendering the grading report.

==== Don't Repeat Yourself (DRY) Principle: ====
*Code duplication in the GradesController will be eliminated by extracting common functionality into helper methods or modules.
*Repetitive logic, such as retrieving questions or calculating penalties, will be refactored to promote code reusability and maintainability.

==== Encapsulation: ====
*Data and behavior within the GradesController will be encapsulated within appropriate methods and classes to minimize dependencies.
*Access to instance variables and controller actions will be limited, promoting encapsulation and separation of concerns.

==== Dependency Inversion Principle (DIP): ====
*The GradesController will depend on abstractions, interfaces, or higher-level modules instead of concrete implementations.
*Dependency injection or inversion of control will be used to decouple the controller from specific database or service implementations.

=== Testing with RSwag: ===

==== Integration Testing: ====
*Integration tests using RSwag will be written to verify the behavior of each controller action, including `view`, `view_my_scores`, and `view_team`.
*CRUD operations (Create, Read, Update, Delete) will be tested to ensure proper data management and interaction with the database.

==== Swagger UI Integration: ====
*RSwag will be integrated with Swagger UI to provide a user-friendly interface for interacting with API endpoints.
*Swagger UI will accurately reflect the API documentation and allow users to test endpoints interactively.

==== Parameter Validation: ====
*Endpoint parameters, such as assignment IDs and participant IDs, will be tested with various input values to ensure proper handling and error reporting.
*Input parameters such as IDs, query parameters, and request bodies will be validated to ensure data integrity.

==== Error Handling: ====
*Error handling scenarios, including validation errors, resource not found, unauthorized access, and server errors, will be tested.
*Error responses will contain appropriate status codes, error messages, and error details as per the API contract.

==== Security Testing: ====
*API endpoints will be assessed for vulnerabilities such as SQL injection, cross-site scripting (XSS), and sensitive data exposure.
*Authentication and authorization mechanisms will be evaluated for effectiveness to ensure secure access to grading functionalities.

==== Performance Testing: ====
*Performance of API endpoints under various load conditions will be evaluated using tools like JMeter or Gatling.
*Response times, throughput, and resource utilization will be measured to identify performance bottlenecks and optimize critical paths.

==== Documentation Verification: ====
*API documentation generated by RSwag will be validated to accurately reflect implemented endpoints, parameters, and responses.
*Documentation will be kept up-to-date and aligned with the behavior of API endpoints.

By following these design principles and testing strategies, the reimplementation of the GradesController will result in a well-designed, maintainable, and thoroughly tested component, meeting project requirements effectively.

== Initial Attempt in re-implementation ==

The initial implementation of the grades_controller in the API namespace enhances the code structure, readability, and maintainability through a series of thoughtful improvements. These changes align with the principles of modularity, reusability, and clarity, ensuring the controller's effectiveness in handling grading-related tasks within the application.

One significant improvement is the organization of controller actions, each serving a specific purpose and adhering to RESTful conventions. Actions such as `view`, `view_my_scores`, `view_team`, `edit`, `update`, and `save_grade_and_comment_for_submission` are clearly defined and encapsulate distinct functionalities. This structured approach enhances code readability and makes it easier to understand the controller's responsibilities at a glance.
<code>
def view
@assignment = Assignment.find(params[:id])
@scores = review_grades(@assignment, retrieve_questions(@assignment.questionnaires, @assignment.id))
render json: grading_report_data(@assignment, @scores)
end

def view_my_scores
@questions = retrieve_questions(@participant.assignment.questionnaires, @participant.assignment.id)
@pscore = participant_scores(@participant, @questions)
make_chart
@summary = prepare_feedback_summary
render json: my_scores_data
end

def view_team
@assignment = @participant.assignment
@team = @participant.team
@team_id = @team.id
@questions = retrieve_questions(@assignment.questionnaires, @assignment.id)
@pscore = participant_scores(@participant, @questions)
@penalties = calculate_penalty(@participant.id)
@vmlist = populate_view_models
@current_role_name = current_role_name
render json: team_view_data
end

def edit
@questions = list_questions(@participant.assignment)
@scores = participant_scores(@participant, @questions)
render json: edit_data
end

def update
if @participant.update(participant_params)
render json: @participant
else
render json: @participant.errors, status: :unprocessable_entity
end
end

def save_grade_and_comment_for_submission
if @participant.team.update(grade_for_submission: params[:grade_for_submission], comment_for_submission: params[:comment_for_submission])
render json: { success: true }
else
render json: { success: false, errors: @participant.team.errors.full_messages }, status: :unprocessable_entity
end
end
</code>
Furthermore, the controller leverages `before_action` callbacks to set the participant before executing certain actions, reducing redundancy and promoting DRY (Don't Repeat Yourself) principles.

<code>
class GradesController < ApplicationController
before_action :set_participant, only: [:view_my_scores, :view_team, :edit, :update, :save_grade_and_comment_for_submission]
</code>
By defining the `set_participant` method as a callback for actions that require participant data, the controller avoids repetitive code and ensures consistency in handling participant-related tasks across different actions.
<code>
def set_participant
@participant = AssignmentParticipant.find(params[:id])
end
</code>
The use of private helper methods encapsulates logic that is specific to each action, promoting code reuse and modularity. These methods, such as `grading_report_data`, `my_scores_data`, `team_view_data`, `edit_data`, `prepare_feedback_summary`, and `populate_view_models`, encapsulate data preparation and processing tasks, keeping the controller actions focused and concise.
<code>
def grading_report_data(assignment, scores)
{
assignment: assignment,
scores: scores,
num_reviewers_assigned_scores: scores[:teams].length,
average_chart: bar_chart(vector(scores)),
avg_of_avg: mean(vector(scores)),
penalties: penalties(assignment.id),
show_reputation: false
}
end

def my_scores_data
{
participant: @participant,
questions: @questions,
pscore: @pscore,
summary: @summary,
avg_scores_by_round: @summary.avg_scores_by_round,
avg_scores_by_criterion: @summary.avg_scores_by_criterion
}
end

def team_view_data
{
participant: @participant,
assignment: @assignment,
team: @team,
team_id: @team_id,
questions: @questions,
pscore: @pscore,
penalties: @penalties,
vmlist: @vmlist,
current_role_name: @current_role_name
}
end

def edit_data
{
participant: @participant,
questions: @questions,
scores: @scores
}
end

def prepare_feedback_summary
summary_ws_url = WEBSERVICE_CONFIG['summary_webservice_url']
sum = SummaryHelper::Summary.new.summarize_reviews_by_reviewee(@questions, @participant.assignment, @team_id, summary_ws_url, session)
sum.summary
end

def populate_view_models
vmlist = []
counter_for_same_rubric = 0
if @assignment.vary_by_topic?
topic_id = SignedUpTeam.topic_id_by_team_id(@team_id)
topic_specific_questionnaire = AssignmentQuestionnaire.where(assignment_id: @assignment.id, topic_id: topic_id).first.questionnaire
vmlist << populate_view_model(topic_specific_questionnaire)
end
@assignment.questionnaires.each do |questionnaire|
@round = nil
next if @assignment.vary_by_topic? && questionnaire.type == 'ReviewQuestionnaire'

if @assignment.varying_rubrics_by_round? && questionnaire.type == 'ReviewQuestionnaire'
questionnaires = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id)
if questionnaires.count > 1
@round = questionnaires[counter_for_same_rubric].used_in_round
counter_for_same_rubric += 1
else
@round = questionnaires[0].used_in_round
counter_for_same_rubric = 0
end
end
vmlist << populate_view_model(questionnaire)
end
vmlist
end
</code>
Additionally, the controller follows strong parameter conventions by using the `participant_params` method to permit specific attributes for participant updates. This helps mitigate security risks associated with mass assignment vulnerabilities and ensures that only permitted attributes can be modified through API requests.
<code>
def participant_params
params.require(:participant).permit(:grade, :other_params)
end
</code>

==Team==
=====Mentor=====
*Kashika Malick

=====Members=====
*Sravya Yepuri (syepuri@ncsu.edu)
*Hasini Chenchala (hchench@ncsu.edu)
*Chirag Hegde (chegde@ncsu.edu)

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-09T02:31:30Z

Syepuri: /* Initial Attempt in re-implementation */

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-09T02:30:59Z

Syepuri: /* Initial Attempt in re-implementation */

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-09T02:30:01Z

Syepuri: /* Initial Attempt in re-implementation */

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-09T02:29:39Z

Syepuri: /* Initial Attempt in re-implementation */

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-09T02:28:05Z

Syepuri: Added initial implementation details

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-09T01:07:11Z

Syepuri: /* Code Clarity: */

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-08T18:44:39Z

Syepuri: /* Plan for Reimplementation of GradesController */

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-08T17:33:13Z

Syepuri:

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-07T20:00:44Z

Syepuri: Added Design Principles to be followed

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-07T19:54:54Z

Syepuri: /* Plan for Reimplementation of GradesController */

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-07T19:54:14Z

Syepuri: /* Plan for Reimplementation of GradesController */

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-07T19:50:55Z

Syepuri: /* Plan for Reimplementation of GradesController */

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-07T19:49:29Z

Syepuri: Added future plan

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-07T17:34:04Z

Syepuri: /* Introduction */

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-07T17:33:33Z

Syepuri: Added team

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-07T16:54:55Z

Syepuri: Added table of contents

CSC/ECE 517 Spring 2024 - E2443 Reimplement grades controller

2024-04-07T16:54:21Z

Syepuri: Initial content about E2443

==Expertiza==
[http://expertiza.ncsu.edu/ 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.

==Introduction==
We're refactoring the `grades_controller.rb` in Expertiza, enhancing its codebase to adhere to DRY and design principles, improving readability, and reducing redundancy. Our focus includes thorough rswag testing of the grades_controller method and demonstrating Swagger UI integration.

==Problem Statement==
The reimplementation project entails:
#<b>Refactoring Grades Controller:</b> Enhancing code clarity, optimizing loops, and adding comments for unclear lines of code to improve maintainability and readability.
#<b>Removing Redundant Methods:</b> Identifying and eliminating unused methods in the controller to reduce complexity and streamline functionality.
#<b>CRUD Operations:</b> Implementing CRUD operations (Create, Read, Update, Delete) in the controller for efficient data management.
#<b>Adherence to DRY Principle:</b> Ensuring that the reimplementation follows the Don't Repeat Yourself (DRY) principle to avoid duplication and improve code efficiency.
#<b>Testing with RSwag:</b> Writing comprehensive tests using RSwag for each controller method to ensure functionality and integration with Swagger UI, followed by a video demonstration showcasing the Swagger UI integration and functionality of the reimplemented controller.

CSC/ECE 517 Spring 2024

2024-04-07T16:53:17Z

Syepuri: Added E2443 Reimplement grades_controller

* [[CSC/ECE 517 Spring 2024 - E2401 Implementing and testing import & export controllers]]
* [[CSC/ECE 517 Spring 2024 - E2405 Refactor review_mapping_helper.rb]]
* [[CSC/ECE 517 Spring 2024 - E2407 Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS]]
* [[CSC/ECE 517 Spring 2024 - E2429 Reimplement student_task list]]
* [[CSC/ECE 517 Spring 2024 - E2430 Reimplement student_task view]]
* [[CSC/ECE 517 Spring 2024 - E2410. View for Results of Bidding ]]
* [[CSC/ECE 517 Spring 2024 - E2414 Grading Audit Trail]]
* [[CSC/ECE 517 Spring 2024 - NTNX-1 : Extend NDB Operator to Support Postgres HA]]
* [[CSC/ECE 517 Spring 2024 - ‬NTNX-2‬‭ : Snapshot Functionality for provisioned databases]]
* [[CSC/ECE 517 Spring 2024 - E2411 : Fix "Back" link on “New Late Policy” page]]
* [[CSC/ECE 517 Spring 2024 - E2416. Reimplement the Question hierarchy]]
* [[CSC/ECE 517 Spring 2024 - E2420. Reimplement student_quizzes_controller]]
* [[CSC/ECE 517 Spring 2024 - E2424. Reimplement the Bookmarks Controller]]
* [[CSC/ECE 517 Spring 2024 - E2426. Create a UI for Assignment Edit page "Etc" tab in ReactJS]]
* [[CSC/ECE 517 Spring 2024 - E2417. Reimplement submitted content controller.rb]]
* [[CSC/ECE 517 Spring 2024 - E2425. Create a Courses user interface in ReactJS]]
* [[CSC/ECE 517 Spring 2024 - E2431. Reimplement grades/view_team]]
* [[CSC/ECE 517 Spring 2024 - E2404 Refactor student teams functionality]]
* [[CSC/ECE 517 Spring 2024 - E2406 Refactor review_mapping_helper.rb]]
* [[CSC/ECE 517 Spring 2024 - E2403 Mentor-Meeting Management]]
* [[CSC/ECE 517 Spring 2024 - E2421. Reimplement impersonating users (within impersonate controller.rb)]]
* [[CSC/ECE 517 Spring 2024 - E2413. Testing - Answer Tagging]]
* [[CSC/ECE 517 Spring 2024 - E2412. Testing for hamer.rb]]
* [[CSC/ECE 517 Spring 2024 - E2427. UI for questionnaire.rb]]
* [[CSC/ECE 517 Spring 2024 - E2419. Reimplement duties controller.rb and badges controller.rb]]
* [[CSC/ECE 517 Spring 2024 - E2432. UI for Participants.rb]]
* [[CSC/ECE 517 Spring 2024 - G2402 Implement REST client, REST API, and Graphql API endpoint for repositories]]
* [[CSC/ECE 517 Spring 2024 - G2400 DevOp for GitHub Miner app]]
* [[CSC/ECE 517 Spring 2024 - E2439 Testing for view_translation_substitutor.rb]]
* [[CSC/ECE 517 Spring 2024 - E2443 Reimplement grades_controller]]

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-26T01:16:55Z

Syepuri: /* Peer Review Information */

__TOC__

== Expertiza Background ==
[http://expertiza.ncsu.edu/ 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.

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/utils/interfaces.ts here], with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx DeadlineUtil.tsx file]. Here's a simplified version of the code:

<pre>
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;
};

</pre>

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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx same file]. Here is the dummy deadlines data provided below
<pre>
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",
},
];
</pre>

Sample data has been added to the assignments table for the purpose of testing. Only essential information necessary for display has been included, resulting in a subset of the available columns being populated. Specifically, two rows of sample data have been entered. The provided sample data can be found below.

<pre>
[
{
"id": 4,
"name": "program5",
"directory_path": null,
"submitter_count": null,
"course_id": 1,
"instructor_id": 1,
"private": null,
"num_reviews": null,
"num_review_of_reviews": null,
"num_review_of_reviewers": null,
"reviews_visible_to_all": null,
"num_reviewers": null,
"spec_location": null,
"max_team_size": null,
"staggered_deadline": null,
"allow_suggestions": 15,
"days_between_submissions": null,
"review_assignment_strategy": null,
"max_reviews_per_submission": null,
"review_topic_threshold": null,
"copy_flag": null,
"rounds_of_reviews": null,
"microtask": null,
"require_quiz": null,
"num_quiz_questions": null,
"is_coding_assignment": null,
"is_intelligent": null,
"calculate_penalty": null,
"late_policy_id": null,
"is_penalty_calculated": null,
"max_bids": null,
"show_teammate_reviews": null,
"availability_flag": null,
"use_bookmark": null,
"can_review_same_topic": null,
"can_choose_topic_to_review": null,
"is_calibrated": null,
"is_selfreview_enabled": 1,
"reputation_algorithm": null,
"is_anonymous": null,
"num_reviews_required": null,
"num_metareviews_required": null,
"num_metareviews_allowed": null,
"num_reviews_allowed": null,
"simicheck": null,
"simicheck_threshold": null,
"is_answer_tagging_allowed": null,
"has_badge": null,
"allow_selecting_additional_reviews_after_1st_round": null,
"sample_assignment_id": null,
"created_at": "2024-03-17 06:01:33.396814",
"updated_at": "2024-03-17 06:01:33.396814"
},
{
"id": 5,
"name": "program6",
"directory_path": null,
"submitter_count": null,
"course_id": 1,
"instructor_id": 1,
"private": null,
"num_reviews": null,
"num_review_of_reviews": null,
"num_review_of_reviewers": null,
"reviews_visible_to_all": null,
"num_reviewers": null,
"spec_location": "http://example.com/assignment_spec",
"max_team_size": 3,
"staggered_deadline": null,
"allow_suggestions": 15,
"days_between_submissions": 15,
"review_assignment_strategy": null,
"max_reviews_per_submission": null,
"review_topic_threshold": null,
"copy_flag": null,
"rounds_of_reviews": null,
"microtask": null,
"require_quiz": 1,
"num_quiz_questions": null,
"is_coding_assignment": null,
"is_intelligent": null,
"calculate_penalty": null,
"late_policy_id": null,
"is_penalty_calculated": null,
"max_bids": null,
"show_teammate_reviews": null,
"availability_flag": null,
"use_bookmark": null,
"can_review_same_topic": null,
"can_choose_topic_to_review": null,
"is_calibrated": null,
"is_selfreview_enabled": null,
"reputation_algorithm": null,
"is_anonymous": null,
"num_reviews_required": null,
"num_metareviews_required": null,
"num_metareviews_allowed": null,
"num_reviews_allowed": null,
"simicheck": null,
"simicheck_threshold": null,
"is_answer_tagging_allowed": null,
"has_badge": null,
"allow_selecting_additional_reviews_after_1st_round": null,
"sample_assignment_id": null,
"created_at": "2024-03-17 06:01:33.396814",
"updated_at": "2024-03-17 06:01:33.396814"
}
]
</pre>

== 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.

=== Design Principles ===
In adherence to software design principles, the codebase upholds the Single Responsibility Principle (SRP), emphasizing that each component or function should serve a singular purpose to minimize the need for changes. Additionally, the concept of Separation of Concerns is applied, whereby the logic is segmented into smaller, more manageable functions to enhance maintainability. Dependency Injection is implemented, ensuring that dependencies such as assignments and authorization are passed as arguments rather than accessed directly. Notably, specific functions like checkShowWork, checkReviewAvailability, and checkReviewableTopics from the StudentTaskView file are extracted to improve readability and testability, while the renderDeadline function enhances code readability and maintainability by handling deadline rendering tasks.

=== Student Task Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTasks/StudentTask.tsx 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, according to the dummy data added to the assignments database, but this step should be eliminated once the ID can be fetched directly from the database.

This mock webpage was designed to display assignment details, and clicking on a specific assignment will redirect users to its corresponding task view page.

[[File:studenttask.png|1000px]]

=== Student Task View Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskView.tsx 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.

<pre>
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
</pre>

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. Each deadline displayed in the scrollbar turns red once it has passed, enhancing assignment tracking and progress monitoring. The "Your Work" link remains active only when the next deadline is for submitting the assignment; otherwise, it becomes inactive for reviewing assignments.

<pre>
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>
);
}
};
</pre>

On the other hand, the [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/LazyStudentTaskView.tsx LazyStudentTaskView.tsx] file introduces the React functional component named `LazyLoadedStudentTaskView`. This component is designed to implement lazy loading functionality for the student task view component, allowing for deferred loading of content until it's required, thus enhancing the performance of the application.

The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskViewStyle.ts 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.

The following depicts the current student task view page for a specific assignment in Expertiza, followed by the student task view page presented for the reimplementation project.

</br>
Expertiza Student Task View:</br>

[[File:Studenttaskview_expertiza.png|1000px]]

</br>
Current implementation of Student Task view:</br>

[[File:Studenttaskview.png|1000px]]

=== Lazy Loading ===

====Implementing Lazy Loading for Enhanced Performance====
In order to enhance website responsiveness and optimize performance, a strategic approach involves the utilization of lazy loading for components. This technique defers the loading of specific components until they are actually required by the client, thereby reducing initial load times and conserving network bandwidth.

====Background====
React applications, by default, bundle all JavaScript files, leading to larger initial payloads sent to the client. As the application scales, this can result in prolonged load times and unnecessary data transfer for components that may not be immediately needed. Lazy loading addresses this challenge by postponing the loading of components until they are essential for rendering.
For more information on code splitting and lazy loading in React, refer to the official documentation: https://legacy.reactjs.org/docs/code-splitting.html

====Implementation====
Lazy loading in React can be implemented using the lazy function along with Suspense to asynchronously load components. This approach ensures that components are fetched from the server only when they are first rendered, thereby enhancing performance and minimizing the initial load size.

This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
<pre>const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));</pre>

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.
<pre>
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
</pre>

The LazyStudentTaskView component is dynamically imported using the React.lazy function, which asynchronously loads the component when it is first rendered. Within the Suspense component, a fallback UI is provided to display a loading message while the component is being loaded asynchronously.

Lazy loading of components provides a powerful strategy to enhance website responsiveness and optimize overall performance by deferring the loading of non-essential components until they are required. By adopting lazy loading, React applications can achieve expedited initial load times and streamline network bandwidth utilization.

== Scope for future improvement ==

=== Database Integration ===
In the current implementation, test data was utilized to populate the tables. However, accessing data from the SQL server hosted on the backend via API endpoints is necessary. This integration would enable dynamic retrieval of data, ensuring that the application reflects the most up-to-date information. Additionally, there might be a need to modify existing tables by adding or removing columns to align with any updates or changes in the table structure.

=== Search and Filter Functionality ===
Implementing search and filter functionality enables users to swiftly locate specific tables or records within the database. Intuitive features like keyword search, criteria-based filtering, and instant suggestions optimize user experience, while persistent filters and clear error handling ensure seamless navigation and efficient retrieval of relevant information.

== Peer Review Information ==
For those who wish to access the Expertiza application linked to this assignment, the login details are provided below:

Admin credentials: Username -> admin, Password -> password123

The expertiza application can be accessed by running the front end and back end simultaneously on your local laptop. The instructions on how to run the application is on the respective repositories.

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br>
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation. </br>
https://github.com/users/Shravsssss/projects/1

These changes can be viewed in this [https://github.com/expertiza/reimplementation-front-end/pull/46 Pull Request].

== Team ==

Mentor:

Kashika Malick (kmalick@ncsu.edu)

Students:

Sravya Yepuri (syepuri@ncsu.edu)

Hasini Chenchala (hchench@ncsu.edu)

Chirag Hegde (chegde@ncsu.edu)

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:51:39Z

Syepuri: /* Student Task View Page */

__TOC__

== Expertiza Background ==
[http://expertiza.ncsu.edu/ 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.

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/utils/interfaces.ts here], with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx DeadlineUtil.tsx file]. Here's a simplified version of the code:

<pre>
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;
};

</pre>

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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx same file]. Here is the dummy deadlines data provided below
<pre>
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",
},
];
</pre>

Sample data has been added to the assignments table for the purpose of testing. Only essential information necessary for display has been included, resulting in a subset of the available columns being populated. Specifically, two rows of sample data have been entered. The provided sample data can be found below.

<pre>
[
{
"id": 4,
"name": "program5",
"directory_path": null,
"submitter_count": null,
"course_id": 1,
"instructor_id": 1,
"private": null,
"num_reviews": null,
"num_review_of_reviews": null,
"num_review_of_reviewers": null,
"reviews_visible_to_all": null,
"num_reviewers": null,
"spec_location": null,
"max_team_size": null,
"staggered_deadline": null,
"allow_suggestions": 15,
"days_between_submissions": null,
"review_assignment_strategy": null,
"max_reviews_per_submission": null,
"review_topic_threshold": null,
"copy_flag": null,
"rounds_of_reviews": null,
"microtask": null,
"require_quiz": null,
"num_quiz_questions": null,
"is_coding_assignment": null,
"is_intelligent": null,
"calculate_penalty": null,
"late_policy_id": null,
"is_penalty_calculated": null,
"max_bids": null,
"show_teammate_reviews": null,
"availability_flag": null,
"use_bookmark": null,
"can_review_same_topic": null,
"can_choose_topic_to_review": null,
"is_calibrated": null,
"is_selfreview_enabled": 1,
"reputation_algorithm": null,
"is_anonymous": null,
"num_reviews_required": null,
"num_metareviews_required": null,
"num_metareviews_allowed": null,
"num_reviews_allowed": null,
"simicheck": null,
"simicheck_threshold": null,
"is_answer_tagging_allowed": null,
"has_badge": null,
"allow_selecting_additional_reviews_after_1st_round": null,
"sample_assignment_id": null,
"created_at": "2024-03-17 06:01:33.396814",
"updated_at": "2024-03-17 06:01:33.396814"
},
{
"id": 5,
"name": "program6",
"directory_path": null,
"submitter_count": null,
"course_id": 1,
"instructor_id": 1,
"private": null,
"num_reviews": null,
"num_review_of_reviews": null,
"num_review_of_reviewers": null,
"reviews_visible_to_all": null,
"num_reviewers": null,
"spec_location": "http://example.com/assignment_spec",
"max_team_size": 3,
"staggered_deadline": null,
"allow_suggestions": 15,
"days_between_submissions": 15,
"review_assignment_strategy": null,
"max_reviews_per_submission": null,
"review_topic_threshold": null,
"copy_flag": null,
"rounds_of_reviews": null,
"microtask": null,
"require_quiz": 1,
"num_quiz_questions": null,
"is_coding_assignment": null,
"is_intelligent": null,
"calculate_penalty": null,
"late_policy_id": null,
"is_penalty_calculated": null,
"max_bids": null,
"show_teammate_reviews": null,
"availability_flag": null,
"use_bookmark": null,
"can_review_same_topic": null,
"can_choose_topic_to_review": null,
"is_calibrated": null,
"is_selfreview_enabled": null,
"reputation_algorithm": null,
"is_anonymous": null,
"num_reviews_required": null,
"num_metareviews_required": null,
"num_metareviews_allowed": null,
"num_reviews_allowed": null,
"simicheck": null,
"simicheck_threshold": null,
"is_answer_tagging_allowed": null,
"has_badge": null,
"allow_selecting_additional_reviews_after_1st_round": null,
"sample_assignment_id": null,
"created_at": "2024-03-17 06:01:33.396814",
"updated_at": "2024-03-17 06:01:33.396814"
}
]
</pre>

== 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.

=== Design Principles ===
In adherence to software design principles, the codebase upholds the Single Responsibility Principle (SRP), emphasizing that each component or function should serve a singular purpose to minimize the need for changes. Additionally, the concept of Separation of Concerns is applied, whereby the logic is segmented into smaller, more manageable functions to enhance maintainability. Dependency Injection is implemented, ensuring that dependencies such as assignments and authorization are passed as arguments rather than accessed directly. Notably, specific functions like checkShowWork, checkReviewAvailability, and checkReviewableTopics from the StudentTaskView file are extracted to improve readability and testability, while the renderDeadline function enhances code readability and maintainability by handling deadline rendering tasks.

=== Student Task Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTasks/StudentTask.tsx 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, according to the dummy data added to the assignments database, but this step should be eliminated once the ID can be fetched directly from the database.

This mock webpage was designed to display assignment details, and clicking on a specific assignment will redirect users to its corresponding task view page.

[[File:studenttask.png|1000px]]

=== Student Task View Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskView.tsx 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.

<pre>
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
</pre>

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. Each deadline displayed in the scrollbar turns red once it has passed, enhancing assignment tracking and progress monitoring. The "Your Work" link remains active only when the next deadline is for submitting the assignment; otherwise, it becomes inactive for reviewing assignments.

<pre>
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>
);
}
};
</pre>

On the other hand, the [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/LazyStudentTaskView.tsx LazyStudentTaskView.tsx] file introduces the React functional component named `LazyLoadedStudentTaskView`. This component is designed to implement lazy loading functionality for the student task view component, allowing for deferred loading of content until it's required, thus enhancing the performance of the application.

The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskViewStyle.ts 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.

The following depicts the current student task view page for a specific assignment in Expertiza, followed by the student task view page presented for the reimplementation project.

</br>
Expertiza Student Task View:</br>

[[File:Studenttaskview_expertiza.png|1000px]]

</br>
Current implementation of Student Task view:</br>

[[File:Studenttaskview.png|1000px]]

=== Lazy Loading ===

====Implementing Lazy Loading for Enhanced Performance====
In order to enhance website responsiveness and optimize performance, a strategic approach involves the utilization of lazy loading for components. This technique defers the loading of specific components until they are actually required by the client, thereby reducing initial load times and conserving network bandwidth.

====Background====
React applications, by default, bundle all JavaScript files, leading to larger initial payloads sent to the client. As the application scales, this can result in prolonged load times and unnecessary data transfer for components that may not be immediately needed. Lazy loading addresses this challenge by postponing the loading of components until they are essential for rendering.
For more information on code splitting and lazy loading in React, refer to the official documentation: https://legacy.reactjs.org/docs/code-splitting.html

====Implementation====
Lazy loading in React can be implemented using the lazy function along with Suspense to asynchronously load components. This approach ensures that components are fetched from the server only when they are first rendered, thereby enhancing performance and minimizing the initial load size.

This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
<pre>const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));</pre>

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.
<pre>
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
</pre>

The LazyStudentTaskView component is dynamically imported using the React.lazy function, which asynchronously loads the component when it is first rendered. Within the Suspense component, a fallback UI is provided to display a loading message while the component is being loaded asynchronously.

Lazy loading of components provides a powerful strategy to enhance website responsiveness and optimize overall performance by deferring the loading of non-essential components until they are required. By adopting lazy loading, React applications can achieve expedited initial load times and streamline network bandwidth utilization.

== Scope for future improvement ==

=== Database Integration ===
In the current implementation, test data was utilized to populate the tables. However, accessing data from the SQL server hosted on the backend via API endpoints is necessary. This integration would enable dynamic retrieval of data, ensuring that the application reflects the most up-to-date information. Additionally, there might be a need to modify existing tables by adding or removing columns to align with any updates or changes in the table structure.

=== Search and Filter Functionality ===
Implementing search and filter functionality enables users to swiftly locate specific tables or records within the database. Intuitive features like keyword search, criteria-based filtering, and instant suggestions optimize user experience, while persistent filters and clear error handling ensure seamless navigation and efficient retrieval of relevant information.

== Peer Review Information ==
For those who wish to access the Expertiza application linked to this assignment, the login details are provided below:

Admin credentials: Username -> admin, Password -> password123

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br>
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation. </br>
https://github.com/users/Shravsssss/projects/1

These changes can be viewed in this [https://github.com/expertiza/reimplementation-front-end/pull/46 Pull Request].

== Team ==

Mentor:

Kashika Malick (kmalick@ncsu.edu)

Students:

Sravya Yepuri (syepuri@ncsu.edu)

Hasini Chenchala (hchench@ncsu.edu)

Chirag Hegde (chegde@ncsu.edu)

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:41:20Z

Syepuri: /* Design Principles */

__TOC__

== Expertiza Background ==
[http://expertiza.ncsu.edu/ 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.

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/utils/interfaces.ts here], with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx DeadlineUtil.tsx file]. Here's a simplified version of the code:

<pre>
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;
};

</pre>

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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx same file]. Here is the dummy deadlines data provided below
<pre>
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",
},
];
</pre>

Sample data has been added to the assignments table for the purpose of testing. Only essential information necessary for display has been included, resulting in a subset of the available columns being populated. Specifically, two rows of sample data have been entered. The provided sample data can be found below.

<pre>
[
{
"id": 4,
"name": "program5",
"directory_path": null,
"submitter_count": null,
"course_id": 1,
"instructor_id": 1,
"private": null,
"num_reviews": null,
"num_review_of_reviews": null,
"num_review_of_reviewers": null,
"reviews_visible_to_all": null,
"num_reviewers": null,
"spec_location": null,
"max_team_size": null,
"staggered_deadline": null,
"allow_suggestions": 15,
"days_between_submissions": null,
"review_assignment_strategy": null,
"max_reviews_per_submission": null,
"review_topic_threshold": null,
"copy_flag": null,
"rounds_of_reviews": null,
"microtask": null,
"require_quiz": null,
"num_quiz_questions": null,
"is_coding_assignment": null,
"is_intelligent": null,
"calculate_penalty": null,
"late_policy_id": null,
"is_penalty_calculated": null,
"max_bids": null,
"show_teammate_reviews": null,
"availability_flag": null,
"use_bookmark": null,
"can_review_same_topic": null,
"can_choose_topic_to_review": null,
"is_calibrated": null,
"is_selfreview_enabled": 1,
"reputation_algorithm": null,
"is_anonymous": null,
"num_reviews_required": null,
"num_metareviews_required": null,
"num_metareviews_allowed": null,
"num_reviews_allowed": null,
"simicheck": null,
"simicheck_threshold": null,
"is_answer_tagging_allowed": null,
"has_badge": null,
"allow_selecting_additional_reviews_after_1st_round": null,
"sample_assignment_id": null,
"created_at": "2024-03-17 06:01:33.396814",
"updated_at": "2024-03-17 06:01:33.396814"
},
{
"id": 5,
"name": "program6",
"directory_path": null,
"submitter_count": null,
"course_id": 1,
"instructor_id": 1,
"private": null,
"num_reviews": null,
"num_review_of_reviews": null,
"num_review_of_reviewers": null,
"reviews_visible_to_all": null,
"num_reviewers": null,
"spec_location": "http://example.com/assignment_spec",
"max_team_size": 3,
"staggered_deadline": null,
"allow_suggestions": 15,
"days_between_submissions": 15,
"review_assignment_strategy": null,
"max_reviews_per_submission": null,
"review_topic_threshold": null,
"copy_flag": null,
"rounds_of_reviews": null,
"microtask": null,
"require_quiz": 1,
"num_quiz_questions": null,
"is_coding_assignment": null,
"is_intelligent": null,
"calculate_penalty": null,
"late_policy_id": null,
"is_penalty_calculated": null,
"max_bids": null,
"show_teammate_reviews": null,
"availability_flag": null,
"use_bookmark": null,
"can_review_same_topic": null,
"can_choose_topic_to_review": null,
"is_calibrated": null,
"is_selfreview_enabled": null,
"reputation_algorithm": null,
"is_anonymous": null,
"num_reviews_required": null,
"num_metareviews_required": null,
"num_metareviews_allowed": null,
"num_reviews_allowed": null,
"simicheck": null,
"simicheck_threshold": null,
"is_answer_tagging_allowed": null,
"has_badge": null,
"allow_selecting_additional_reviews_after_1st_round": null,
"sample_assignment_id": null,
"created_at": "2024-03-17 06:01:33.396814",
"updated_at": "2024-03-17 06:01:33.396814"
}
]
</pre>

== 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.

=== Design Principles ===
In adherence to software design principles, the codebase upholds the Single Responsibility Principle (SRP), emphasizing that each component or function should serve a singular purpose to minimize the need for changes. Additionally, the concept of Separation of Concerns is applied, whereby the logic is segmented into smaller, more manageable functions to enhance maintainability. Dependency Injection is implemented, ensuring that dependencies such as assignments and authorization are passed as arguments rather than accessed directly. Notably, specific functions like checkShowWork, checkReviewAvailability, and checkReviewableTopics from the StudentTaskView file are extracted to improve readability and testability, while the renderDeadline function enhances code readability and maintainability by handling deadline rendering tasks.

=== Student Task Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTasks/StudentTask.tsx 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, according to the dummy data added to the assignments database, but this step should be eliminated once the ID can be fetched directly from the database.

This mock webpage was designed to display assignment details, and clicking on a specific assignment will redirect users to its corresponding task view page.

[[File:studenttask.png|1000px]]

=== Student Task View Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskView.tsx 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.

<pre>
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
</pre>

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.

<pre>
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>
);
}
};
</pre>

On the other hand, the [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/LazyStudentTaskView.tsx LazyStudentTaskView.tsx] file introduces the React functional component named `LazyLoadedStudentTaskView`. This component is designed to implement lazy loading functionality for the student task view component, allowing for deferred loading of content until it's required, thus enhancing the performance of the application.

The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskViewStyle.ts 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.

The following depicts the current student task view page for a specific assignment in Expertiza, followed by the student task view page presented for the reimplementation project.

</br>
Expertiza Student Task View:</br>

[[File:Studenttaskview_expertiza.png|1000px]]

</br>
Current implementation of Student Task view:</br>

[[File:Studenttaskview.png|1000px]]

=== Lazy Loading ===

====Implementing Lazy Loading for Enhanced Performance====
In order to enhance website responsiveness and optimize performance, a strategic approach involves the utilization of lazy loading for components. This technique defers the loading of specific components until they are actually required by the client, thereby reducing initial load times and conserving network bandwidth.

====Background====
React applications, by default, bundle all JavaScript files, leading to larger initial payloads sent to the client. As the application scales, this can result in prolonged load times and unnecessary data transfer for components that may not be immediately needed. Lazy loading addresses this challenge by postponing the loading of components until they are essential for rendering.
For more information on code splitting and lazy loading in React, refer to the official documentation: https://legacy.reactjs.org/docs/code-splitting.html

====Implementation====
Lazy loading in React can be implemented using the lazy function along with Suspense to asynchronously load components. This approach ensures that components are fetched from the server only when they are first rendered, thereby enhancing performance and minimizing the initial load size.

This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
<pre>const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));</pre>

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.
<pre>
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
</pre>

The LazyStudentTaskView component is dynamically imported using the React.lazy function, which asynchronously loads the component when it is first rendered. Within the Suspense component, a fallback UI is provided to display a loading message while the component is being loaded asynchronously.

Lazy loading of components provides a powerful strategy to enhance website responsiveness and optimize overall performance by deferring the loading of non-essential components until they are required. By adopting lazy loading, React applications can achieve expedited initial load times and streamline network bandwidth utilization.

== Scope for future improvement ==

=== Database Integration ===
In the current implementation, test data was utilized to populate the tables. However, accessing data from the SQL server hosted on the backend via API endpoints is necessary. This integration would enable dynamic retrieval of data, ensuring that the application reflects the most up-to-date information. Additionally, there might be a need to modify existing tables by adding or removing columns to align with any updates or changes in the table structure.

=== Search and Filter Functionality ===
Implementing search and filter functionality enables users to swiftly locate specific tables or records within the database. Intuitive features like keyword search, criteria-based filtering, and instant suggestions optimize user experience, while persistent filters and clear error handling ensure seamless navigation and efficient retrieval of relevant information.

== Peer Review Information ==
For those who wish to access the Expertiza application linked to this assignment, the login details are provided below:

Admin credentials: Username -> admin, Password -> password123

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br>
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation. </br>
https://github.com/users/Shravsssss/projects/1

These changes can be viewed in this [https://github.com/expertiza/reimplementation-front-end/pull/46 Pull Request].

== Team ==

Mentor:

Kashika Malick (kmalick@ncsu.edu)

Students:

Sravya Yepuri (syepuri@ncsu.edu)

Hasini Chenchala (hchench@ncsu.edu)

Chirag Hegde (chegde@ncsu.edu)

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:40:44Z

Syepuri: Added design principles

__TOC__

== Expertiza Background ==
[http://expertiza.ncsu.edu/ 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.

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/utils/interfaces.ts here], with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx DeadlineUtil.tsx file]. Here's a simplified version of the code:

<pre>
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;
};

</pre>

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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx same file]. Here is the dummy deadlines data provided below
<pre>
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",
},
];
</pre>

Sample data has been added to the assignments table for the purpose of testing. Only essential information necessary for display has been included, resulting in a subset of the available columns being populated. Specifically, two rows of sample data have been entered. The provided sample data can be found below.

<pre>
[
{
"id": 4,
"name": "program5",
"directory_path": null,
"submitter_count": null,
"course_id": 1,
"instructor_id": 1,
"private": null,
"num_reviews": null,
"num_review_of_reviews": null,
"num_review_of_reviewers": null,
"reviews_visible_to_all": null,
"num_reviewers": null,
"spec_location": null,
"max_team_size": null,
"staggered_deadline": null,
"allow_suggestions": 15,
"days_between_submissions": null,
"review_assignment_strategy": null,
"max_reviews_per_submission": null,
"review_topic_threshold": null,
"copy_flag": null,
"rounds_of_reviews": null,
"microtask": null,
"require_quiz": null,
"num_quiz_questions": null,
"is_coding_assignment": null,
"is_intelligent": null,
"calculate_penalty": null,
"late_policy_id": null,
"is_penalty_calculated": null,
"max_bids": null,
"show_teammate_reviews": null,
"availability_flag": null,
"use_bookmark": null,
"can_review_same_topic": null,
"can_choose_topic_to_review": null,
"is_calibrated": null,
"is_selfreview_enabled": 1,
"reputation_algorithm": null,
"is_anonymous": null,
"num_reviews_required": null,
"num_metareviews_required": null,
"num_metareviews_allowed": null,
"num_reviews_allowed": null,
"simicheck": null,
"simicheck_threshold": null,
"is_answer_tagging_allowed": null,
"has_badge": null,
"allow_selecting_additional_reviews_after_1st_round": null,
"sample_assignment_id": null,
"created_at": "2024-03-17 06:01:33.396814",
"updated_at": "2024-03-17 06:01:33.396814"
},
{
"id": 5,
"name": "program6",
"directory_path": null,
"submitter_count": null,
"course_id": 1,
"instructor_id": 1,
"private": null,
"num_reviews": null,
"num_review_of_reviews": null,
"num_review_of_reviewers": null,
"reviews_visible_to_all": null,
"num_reviewers": null,
"spec_location": "http://example.com/assignment_spec",
"max_team_size": 3,
"staggered_deadline": null,
"allow_suggestions": 15,
"days_between_submissions": 15,
"review_assignment_strategy": null,
"max_reviews_per_submission": null,
"review_topic_threshold": null,
"copy_flag": null,
"rounds_of_reviews": null,
"microtask": null,
"require_quiz": 1,
"num_quiz_questions": null,
"is_coding_assignment": null,
"is_intelligent": null,
"calculate_penalty": null,
"late_policy_id": null,
"is_penalty_calculated": null,
"max_bids": null,
"show_teammate_reviews": null,
"availability_flag": null,
"use_bookmark": null,
"can_review_same_topic": null,
"can_choose_topic_to_review": null,
"is_calibrated": null,
"is_selfreview_enabled": null,
"reputation_algorithm": null,
"is_anonymous": null,
"num_reviews_required": null,
"num_metareviews_required": null,
"num_metareviews_allowed": null,
"num_reviews_allowed": null,
"simicheck": null,
"simicheck_threshold": null,
"is_answer_tagging_allowed": null,
"has_badge": null,
"allow_selecting_additional_reviews_after_1st_round": null,
"sample_assignment_id": null,
"created_at": "2024-03-17 06:01:33.396814",
"updated_at": "2024-03-17 06:01:33.396814"
}
]
</pre>

== 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.

=== Design Principles ===
In adherence to software design principles, the codebase upholds the Single Responsibility Principle (SRP), emphasizing that each component or function should serve a singular purpose to minimize the need for changes. Additionally, the concept of Separation of Concerns is applied, whereby the logic is segmented into smaller, more manageable functions to enhance maintainability. Dependency Injection is implemented, ensuring that dependencies such as assignments and authorization are passed as arguments rather than accessed directly. Notably, specific functions like checkShowWork, checkReviewAvailability, and checkReviewableTopics are extracted to improve readability and testability, while the renderDeadline function enhances code readability and maintainability by handling deadline rendering tasks.

=== Student Task Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTasks/StudentTask.tsx 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, according to the dummy data added to the assignments database, but this step should be eliminated once the ID can be fetched directly from the database.

This mock webpage was designed to display assignment details, and clicking on a specific assignment will redirect users to its corresponding task view page.

[[File:studenttask.png|1000px]]

=== Student Task View Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskView.tsx 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.

<pre>
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
</pre>

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.

<pre>
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>
);
}
};
</pre>

On the other hand, the [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/LazyStudentTaskView.tsx LazyStudentTaskView.tsx] file introduces the React functional component named `LazyLoadedStudentTaskView`. This component is designed to implement lazy loading functionality for the student task view component, allowing for deferred loading of content until it's required, thus enhancing the performance of the application.

The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskViewStyle.ts 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.

The following depicts the current student task view page for a specific assignment in Expertiza, followed by the student task view page presented for the reimplementation project.

</br>
Expertiza Student Task View:</br>

[[File:Studenttaskview_expertiza.png|1000px]]

</br>
Current implementation of Student Task view:</br>

[[File:Studenttaskview.png|1000px]]

=== Lazy Loading ===

====Implementing Lazy Loading for Enhanced Performance====
In order to enhance website responsiveness and optimize performance, a strategic approach involves the utilization of lazy loading for components. This technique defers the loading of specific components until they are actually required by the client, thereby reducing initial load times and conserving network bandwidth.

====Background====
React applications, by default, bundle all JavaScript files, leading to larger initial payloads sent to the client. As the application scales, this can result in prolonged load times and unnecessary data transfer for components that may not be immediately needed. Lazy loading addresses this challenge by postponing the loading of components until they are essential for rendering.
For more information on code splitting and lazy loading in React, refer to the official documentation: https://legacy.reactjs.org/docs/code-splitting.html

====Implementation====
Lazy loading in React can be implemented using the lazy function along with Suspense to asynchronously load components. This approach ensures that components are fetched from the server only when they are first rendered, thereby enhancing performance and minimizing the initial load size.

This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
<pre>const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));</pre>

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.
<pre>
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
</pre>

The LazyStudentTaskView component is dynamically imported using the React.lazy function, which asynchronously loads the component when it is first rendered. Within the Suspense component, a fallback UI is provided to display a loading message while the component is being loaded asynchronously.

Lazy loading of components provides a powerful strategy to enhance website responsiveness and optimize overall performance by deferring the loading of non-essential components until they are required. By adopting lazy loading, React applications can achieve expedited initial load times and streamline network bandwidth utilization.

== Scope for future improvement ==

=== Database Integration ===
In the current implementation, test data was utilized to populate the tables. However, accessing data from the SQL server hosted on the backend via API endpoints is necessary. This integration would enable dynamic retrieval of data, ensuring that the application reflects the most up-to-date information. Additionally, there might be a need to modify existing tables by adding or removing columns to align with any updates or changes in the table structure.

=== Search and Filter Functionality ===
Implementing search and filter functionality enables users to swiftly locate specific tables or records within the database. Intuitive features like keyword search, criteria-based filtering, and instant suggestions optimize user experience, while persistent filters and clear error handling ensure seamless navigation and efficient retrieval of relevant information.

== Peer Review Information ==
For those who wish to access the Expertiza application linked to this assignment, the login details are provided below:

Admin credentials: Username -> admin, Password -> password123

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br>
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation. </br>
https://github.com/users/Shravsssss/projects/1

These changes can be viewed in this [https://github.com/expertiza/reimplementation-front-end/pull/46 Pull Request].

== Team ==

Mentor:

Kashika Malick (kmalick@ncsu.edu)

Students:

Sravya Yepuri (syepuri@ncsu.edu)

Hasini Chenchala (hchench@ncsu.edu)

Chirag Hegde (chegde@ncsu.edu)

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:38:05Z

Syepuri: /* Sample Data Used */

__TOC__

== Expertiza Background ==
[http://expertiza.ncsu.edu/ 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.

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/utils/interfaces.ts here], with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx DeadlineUtil.tsx file]. Here's a simplified version of the code:

<pre>
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;
};

</pre>

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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx same file]. Here is the dummy deadlines data provided below
<pre>
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",
},
];
</pre>

Sample data has been added to the assignments table for the purpose of testing. Only essential information necessary for display has been included, resulting in a subset of the available columns being populated. Specifically, two rows of sample data have been entered. The provided sample data can be found below.

<pre>
[
{
"id": 4,
"name": "program5",
"directory_path": null,
"submitter_count": null,
"course_id": 1,
"instructor_id": 1,
"private": null,
"num_reviews": null,
"num_review_of_reviews": null,
"num_review_of_reviewers": null,
"reviews_visible_to_all": null,
"num_reviewers": null,
"spec_location": null,
"max_team_size": null,
"staggered_deadline": null,
"allow_suggestions": 15,
"days_between_submissions": null,
"review_assignment_strategy": null,
"max_reviews_per_submission": null,
"review_topic_threshold": null,
"copy_flag": null,
"rounds_of_reviews": null,
"microtask": null,
"require_quiz": null,
"num_quiz_questions": null,
"is_coding_assignment": null,
"is_intelligent": null,
"calculate_penalty": null,
"late_policy_id": null,
"is_penalty_calculated": null,
"max_bids": null,
"show_teammate_reviews": null,
"availability_flag": null,
"use_bookmark": null,
"can_review_same_topic": null,
"can_choose_topic_to_review": null,
"is_calibrated": null,
"is_selfreview_enabled": 1,
"reputation_algorithm": null,
"is_anonymous": null,
"num_reviews_required": null,
"num_metareviews_required": null,
"num_metareviews_allowed": null,
"num_reviews_allowed": null,
"simicheck": null,
"simicheck_threshold": null,
"is_answer_tagging_allowed": null,
"has_badge": null,
"allow_selecting_additional_reviews_after_1st_round": null,
"sample_assignment_id": null,
"created_at": "2024-03-17 06:01:33.396814",
"updated_at": "2024-03-17 06:01:33.396814"
},
{
"id": 5,
"name": "program6",
"directory_path": null,
"submitter_count": null,
"course_id": 1,
"instructor_id": 1,
"private": null,
"num_reviews": null,
"num_review_of_reviews": null,
"num_review_of_reviewers": null,
"reviews_visible_to_all": null,
"num_reviewers": null,
"spec_location": "http://example.com/assignment_spec",
"max_team_size": 3,
"staggered_deadline": null,
"allow_suggestions": 15,
"days_between_submissions": 15,
"review_assignment_strategy": null,
"max_reviews_per_submission": null,
"review_topic_threshold": null,
"copy_flag": null,
"rounds_of_reviews": null,
"microtask": null,
"require_quiz": 1,
"num_quiz_questions": null,
"is_coding_assignment": null,
"is_intelligent": null,
"calculate_penalty": null,
"late_policy_id": null,
"is_penalty_calculated": null,
"max_bids": null,
"show_teammate_reviews": null,
"availability_flag": null,
"use_bookmark": null,
"can_review_same_topic": null,
"can_choose_topic_to_review": null,
"is_calibrated": null,
"is_selfreview_enabled": null,
"reputation_algorithm": null,
"is_anonymous": null,
"num_reviews_required": null,
"num_metareviews_required": null,
"num_metareviews_allowed": null,
"num_reviews_allowed": null,
"simicheck": null,
"simicheck_threshold": null,
"is_answer_tagging_allowed": null,
"has_badge": null,
"allow_selecting_additional_reviews_after_1st_round": null,
"sample_assignment_id": null,
"created_at": "2024-03-17 06:01:33.396814",
"updated_at": "2024-03-17 06:01:33.396814"
}
]
</pre>

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTasks/StudentTask.tsx 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, according to the dummy data added to the assignments database, but this step should be eliminated once the ID can be fetched directly from the database.

This mock webpage was designed to display assignment details, and clicking on a specific assignment will redirect users to its corresponding task view page.

[[File:studenttask.png|1000px]]

=== Student Task View Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskView.tsx 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.

<pre>
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
</pre>

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.

<pre>
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>
);
}
};
</pre>

On the other hand, the [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/LazyStudentTaskView.tsx LazyStudentTaskView.tsx] file introduces the React functional component named `LazyLoadedStudentTaskView`. This component is designed to implement lazy loading functionality for the student task view component, allowing for deferred loading of content until it's required, thus enhancing the performance of the application.

The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskViewStyle.ts 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.

The following depicts the current student task view page for a specific assignment in Expertiza, followed by the student task view page presented for the reimplementation project.

</br>
Expertiza Student Task View:</br>

[[File:Studenttaskview_expertiza.png|1000px]]

</br>
Current implementation of Student Task view:</br>

[[File:Studenttaskview.png|1000px]]

=== Lazy Loading ===

====Implementing Lazy Loading for Enhanced Performance====
In order to enhance website responsiveness and optimize performance, a strategic approach involves the utilization of lazy loading for components. This technique defers the loading of specific components until they are actually required by the client, thereby reducing initial load times and conserving network bandwidth.

====Background====
React applications, by default, bundle all JavaScript files, leading to larger initial payloads sent to the client. As the application scales, this can result in prolonged load times and unnecessary data transfer for components that may not be immediately needed. Lazy loading addresses this challenge by postponing the loading of components until they are essential for rendering.
For more information on code splitting and lazy loading in React, refer to the official documentation: https://legacy.reactjs.org/docs/code-splitting.html

====Implementation====
Lazy loading in React can be implemented using the lazy function along with Suspense to asynchronously load components. This approach ensures that components are fetched from the server only when they are first rendered, thereby enhancing performance and minimizing the initial load size.

This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
<pre>const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));</pre>

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.
<pre>
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
</pre>

The LazyStudentTaskView component is dynamically imported using the React.lazy function, which asynchronously loads the component when it is first rendered. Within the Suspense component, a fallback UI is provided to display a loading message while the component is being loaded asynchronously.

Lazy loading of components provides a powerful strategy to enhance website responsiveness and optimize overall performance by deferring the loading of non-essential components until they are required. By adopting lazy loading, React applications can achieve expedited initial load times and streamline network bandwidth utilization.

== Scope for future improvement ==

=== Database Integration ===
In the current implementation, test data was utilized to populate the tables. However, accessing data from the SQL server hosted on the backend via API endpoints is necessary. This integration would enable dynamic retrieval of data, ensuring that the application reflects the most up-to-date information. Additionally, there might be a need to modify existing tables by adding or removing columns to align with any updates or changes in the table structure.

=== Search and Filter Functionality ===
Implementing search and filter functionality enables users to swiftly locate specific tables or records within the database. Intuitive features like keyword search, criteria-based filtering, and instant suggestions optimize user experience, while persistent filters and clear error handling ensure seamless navigation and efficient retrieval of relevant information.

== Peer Review Information ==
For those who wish to access the Expertiza application linked to this assignment, the login details are provided below:

Admin credentials: Username -> admin, Password -> password123

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br>
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation. </br>
https://github.com/users/Shravsssss/projects/1

These changes can be viewed in this [https://github.com/expertiza/reimplementation-front-end/pull/46 Pull Request].

== Team ==

Mentor:

Kashika Malick (kmalick@ncsu.edu)

Students:

Sravya Yepuri (syepuri@ncsu.edu)

Hasini Chenchala (hchench@ncsu.edu)

Chirag Hegde (chegde@ncsu.edu)

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:33:19Z

Syepuri: /* Peer Review Information */

__TOC__

== Expertiza Background ==
[http://expertiza.ncsu.edu/ 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.

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/utils/interfaces.ts here], with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx DeadlineUtil.tsx file]. Here's a simplified version of the code:

<pre>
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;
};

</pre>

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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx same file]. Here is the dummy deadlines data provided below
<pre>
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",
},
];
</pre>

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTasks/StudentTask.tsx 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, according to the dummy data added to the assignments database, but this step should be eliminated once the ID can be fetched directly from the database.

This mock webpage was designed to display assignment details, and clicking on a specific assignment will redirect users to its corresponding task view page.

[[File:studenttask.png|1000px]]

=== Student Task View Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskView.tsx 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.

<pre>
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
</pre>

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.

<pre>
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>
);
}
};
</pre>

On the other hand, the [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/LazyStudentTaskView.tsx LazyStudentTaskView.tsx] file introduces the React functional component named `LazyLoadedStudentTaskView`. This component is designed to implement lazy loading functionality for the student task view component, allowing for deferred loading of content until it's required, thus enhancing the performance of the application.

The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskViewStyle.ts 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.

The following depicts the current student task view page for a specific assignment in Expertiza, followed by the student task view page presented for the reimplementation project.

</br>
Expertiza Student Task View:</br>

[[File:Studenttaskview_expertiza.png|1000px]]

</br>
Current implementation of Student Task view:</br>

[[File:Studenttaskview.png|1000px]]

=== Lazy Loading ===

====Implementing Lazy Loading for Enhanced Performance====
In order to enhance website responsiveness and optimize performance, a strategic approach involves the utilization of lazy loading for components. This technique defers the loading of specific components until they are actually required by the client, thereby reducing initial load times and conserving network bandwidth.

====Background====
React applications, by default, bundle all JavaScript files, leading to larger initial payloads sent to the client. As the application scales, this can result in prolonged load times and unnecessary data transfer for components that may not be immediately needed. Lazy loading addresses this challenge by postponing the loading of components until they are essential for rendering.
For more information on code splitting and lazy loading in React, refer to the official documentation: https://legacy.reactjs.org/docs/code-splitting.html

====Implementation====
Lazy loading in React can be implemented using the lazy function along with Suspense to asynchronously load components. This approach ensures that components are fetched from the server only when they are first rendered, thereby enhancing performance and minimizing the initial load size.

This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
<pre>const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));</pre>

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.
<pre>
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
</pre>

The LazyStudentTaskView component is dynamically imported using the React.lazy function, which asynchronously loads the component when it is first rendered. Within the Suspense component, a fallback UI is provided to display a loading message while the component is being loaded asynchronously.

Lazy loading of components provides a powerful strategy to enhance website responsiveness and optimize overall performance by deferring the loading of non-essential components until they are required. By adopting lazy loading, React applications can achieve expedited initial load times and streamline network bandwidth utilization.

== Scope for future improvement ==

=== Database Integration ===
In the current implementation, test data was utilized to populate the tables. However, accessing data from the SQL server hosted on the backend via API endpoints is necessary. This integration would enable dynamic retrieval of data, ensuring that the application reflects the most up-to-date information. Additionally, there might be a need to modify existing tables by adding or removing columns to align with any updates or changes in the table structure.

=== Search and Filter Functionality ===
Implementing search and filter functionality enables users to swiftly locate specific tables or records within the database. Intuitive features like keyword search, criteria-based filtering, and instant suggestions optimize user experience, while persistent filters and clear error handling ensure seamless navigation and efficient retrieval of relevant information.

== Peer Review Information ==
For those who wish to access the Expertiza application linked to this assignment, the login details are provided below:

Admin credentials: Username -> admin, Password -> password123

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br>
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation. </br>
https://github.com/users/Shravsssss/projects/1

These changes can be viewed in this [https://github.com/expertiza/reimplementation-front-end/pull/46 Pull Request].

== Team ==

Mentor:

Kashika Malick (kmalick@ncsu.edu)

Students:

Sravya Yepuri (syepuri@ncsu.edu)

Hasini Chenchala (hchench@ncsu.edu)

Chirag Hegde (chegde@ncsu.edu)

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:32:57Z

Syepuri: /* Github repository */

__TOC__

== Expertiza Background ==
[http://expertiza.ncsu.edu/ 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.

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/utils/interfaces.ts here], with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx DeadlineUtil.tsx file]. Here's a simplified version of the code:

<pre>
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;
};

</pre>

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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx same file]. Here is the dummy deadlines data provided below
<pre>
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",
},
];
</pre>

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTasks/StudentTask.tsx 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, according to the dummy data added to the assignments database, but this step should be eliminated once the ID can be fetched directly from the database.

This mock webpage was designed to display assignment details, and clicking on a specific assignment will redirect users to its corresponding task view page.

[[File:studenttask.png|1000px]]

=== Student Task View Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskView.tsx 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.

<pre>
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
</pre>

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.

<pre>
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>
);
}
};
</pre>

On the other hand, the [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/LazyStudentTaskView.tsx LazyStudentTaskView.tsx] file introduces the React functional component named `LazyLoadedStudentTaskView`. This component is designed to implement lazy loading functionality for the student task view component, allowing for deferred loading of content until it's required, thus enhancing the performance of the application.

The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskViewStyle.ts 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.

The following depicts the current student task view page for a specific assignment in Expertiza, followed by the student task view page presented for the reimplementation project.

</br>
Expertiza Student Task View:</br>

[[File:Studenttaskview_expertiza.png|1000px]]

</br>
Current implementation of Student Task view:</br>

[[File:Studenttaskview.png|1000px]]

=== Lazy Loading ===

====Implementing Lazy Loading for Enhanced Performance====
In order to enhance website responsiveness and optimize performance, a strategic approach involves the utilization of lazy loading for components. This technique defers the loading of specific components until they are actually required by the client, thereby reducing initial load times and conserving network bandwidth.

====Background====
React applications, by default, bundle all JavaScript files, leading to larger initial payloads sent to the client. As the application scales, this can result in prolonged load times and unnecessary data transfer for components that may not be immediately needed. Lazy loading addresses this challenge by postponing the loading of components until they are essential for rendering.
For more information on code splitting and lazy loading in React, refer to the official documentation: https://legacy.reactjs.org/docs/code-splitting.html

====Implementation====
Lazy loading in React can be implemented using the lazy function along with Suspense to asynchronously load components. This approach ensures that components are fetched from the server only when they are first rendered, thereby enhancing performance and minimizing the initial load size.

This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
<pre>const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));</pre>

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.
<pre>
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
</pre>

The LazyStudentTaskView component is dynamically imported using the React.lazy function, which asynchronously loads the component when it is first rendered. Within the Suspense component, a fallback UI is provided to display a loading message while the component is being loaded asynchronously.

Lazy loading of components provides a powerful strategy to enhance website responsiveness and optimize overall performance by deferring the loading of non-essential components until they are required. By adopting lazy loading, React applications can achieve expedited initial load times and streamline network bandwidth utilization.

== Scope for future improvement ==

=== Database Integration ===
In the current implementation, test data was utilized to populate the tables. However, accessing data from the SQL server hosted on the backend via API endpoints is necessary. This integration would enable dynamic retrieval of data, ensuring that the application reflects the most up-to-date information. Additionally, there might be a need to modify existing tables by adding or removing columns to align with any updates or changes in the table structure.

=== Search and Filter Functionality ===
Implementing search and filter functionality enables users to swiftly locate specific tables or records within the database. Intuitive features like keyword search, criteria-based filtering, and instant suggestions optimize user experience, while persistent filters and clear error handling ensure seamless navigation and efficient retrieval of relevant information.

== 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

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br>
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation. </br>
https://github.com/users/Shravsssss/projects/1

These changes can be viewed in this [https://github.com/expertiza/reimplementation-front-end/pull/46 Pull Request].

== Team ==

Mentor:

Kashika Malick (kmalick@ncsu.edu)

Students:

Sravya Yepuri (syepuri@ncsu.edu)

Hasini Chenchala (hchench@ncsu.edu)

Chirag Hegde (chegde@ncsu.edu)

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:31:39Z

Syepuri: Added future scope and edited image sizes

__TOC__

== Expertiza Background ==
[http://expertiza.ncsu.edu/ 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.

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/utils/interfaces.ts here], with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx DeadlineUtil.tsx file]. Here's a simplified version of the code:

<pre>
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;
};

</pre>

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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx same file]. Here is the dummy deadlines data provided below
<pre>
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",
},
];
</pre>

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTasks/StudentTask.tsx 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, according to the dummy data added to the assignments database, but this step should be eliminated once the ID can be fetched directly from the database.

This mock webpage was designed to display assignment details, and clicking on a specific assignment will redirect users to its corresponding task view page.

[[File:studenttask.png|1000px]]

=== Student Task View Page ===
The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskView.tsx 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.

<pre>
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
</pre>

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.

<pre>
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>
);
}
};
</pre>

On the other hand, the [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/LazyStudentTaskView.tsx LazyStudentTaskView.tsx] file introduces the React functional component named `LazyLoadedStudentTaskView`. This component is designed to implement lazy loading functionality for the student task view component, allowing for deferred loading of content until it's required, thus enhancing the performance of the application.

The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskViewStyle.ts 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.

The following depicts the current student task view page for a specific assignment in Expertiza, followed by the student task view page presented for the reimplementation project.

</br>
Expertiza Student Task View:</br>

[[File:Studenttaskview_expertiza.png|1000px]]

</br>
Current implementation of Student Task view:</br>

[[File:Studenttaskview.png|1000px]]

=== Lazy Loading ===

====Implementing Lazy Loading for Enhanced Performance====
In order to enhance website responsiveness and optimize performance, a strategic approach involves the utilization of lazy loading for components. This technique defers the loading of specific components until they are actually required by the client, thereby reducing initial load times and conserving network bandwidth.

====Background====
React applications, by default, bundle all JavaScript files, leading to larger initial payloads sent to the client. As the application scales, this can result in prolonged load times and unnecessary data transfer for components that may not be immediately needed. Lazy loading addresses this challenge by postponing the loading of components until they are essential for rendering.
For more information on code splitting and lazy loading in React, refer to the official documentation: https://legacy.reactjs.org/docs/code-splitting.html

====Implementation====
Lazy loading in React can be implemented using the lazy function along with Suspense to asynchronously load components. This approach ensures that components are fetched from the server only when they are first rendered, thereby enhancing performance and minimizing the initial load size.

This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
<pre>const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));</pre>

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.
<pre>
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
</pre>

The LazyStudentTaskView component is dynamically imported using the React.lazy function, which asynchronously loads the component when it is first rendered. Within the Suspense component, a fallback UI is provided to display a loading message while the component is being loaded asynchronously.

Lazy loading of components provides a powerful strategy to enhance website responsiveness and optimize overall performance by deferring the loading of non-essential components until they are required. By adopting lazy loading, React applications can achieve expedited initial load times and streamline network bandwidth utilization.

== Scope for future improvement ==

=== Database Integration ===
In the current implementation, test data was utilized to populate the tables. However, accessing data from the SQL server hosted on the backend via API endpoints is necessary. This integration would enable dynamic retrieval of data, ensuring that the application reflects the most up-to-date information. Additionally, there might be a need to modify existing tables by adding or removing columns to align with any updates or changes in the table structure.

=== Search and Filter Functionality ===
Implementing search and filter functionality enables users to swiftly locate specific tables or records within the database. Intuitive features like keyword search, criteria-based filtering, and instant suggestions optimize user experience, while persistent filters and clear error handling ensure seamless navigation and efficient retrieval of relevant information.

== 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

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br>
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation. </br>
https://github.com/users/Shravsssss/projects/1

== Team ==

Mentor:

Kashika Malick (kmalick@ncsu.edu)

Students:

Sravya Yepuri (syepuri@ncsu.edu)

Hasini Chenchala (hchench@ncsu.edu)

Chirag Hegde (chegde@ncsu.edu)

File:Studenttaskview.png

2024-03-25T03:22:33Z

Syepuri:

File:Studenttaskview expertiza.png

2024-03-25T03:22:16Z

Syepuri:

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:21:32Z

Syepuri: Added Student Task View images

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:08:29Z

Syepuri: /* Student Task Page */

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:05:11Z

Syepuri: /* Student Task Page */

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:04:53Z

Syepuri: /* Student Task Page */

File:Studenttask.png

2024-03-25T03:02:47Z

Syepuri:

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T03:02:23Z

Syepuri: added student task image

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T02:55:54Z

Syepuri: Added team info and changed github repo location in wiki page

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T02:52:21Z

Syepuri: Added lazy loading implementation

__TOC__

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br>
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation. </br>
https://github.com/users/Shravsssss/projects/1

== Expertiza Background ==
[http://expertiza.ncsu.edu/ 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/utils/interfaces.ts here], with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx DeadlineUtil.tsx file]. Here's a simplified version of the code:

<pre>
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;
};

</pre>

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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx same file]. Here is the dummy deadlines data provided below
<pre>
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",
},
];
</pre>

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTasks/StudentTask.tsx 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskView.tsx 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.

<pre>
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
</pre>

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.

<pre>
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>
);
}
};
</pre>

On the other hand, the [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/LazyStudentTaskView.tsx LazyStudentTaskView.tsx] file introduces the React functional component named `LazyLoadedStudentTaskView`. This component is designed to implement lazy loading functionality for the student task view component, allowing for deferred loading of content until it's required, thus enhancing the performance of the application.

The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskViewStyle.ts 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.

=== Lazy Loading ===

====Implementing Lazy Loading for Enhanced Performance====
In order to enhance website responsiveness and optimize performance, a strategic approach involves the utilization of lazy loading for components. This technique defers the loading of specific components until they are actually required by the client, thereby reducing initial load times and conserving network bandwidth.

====Background====
React applications, by default, bundle all JavaScript files, leading to larger initial payloads sent to the client. As the application scales, this can result in prolonged load times and unnecessary data transfer for components that may not be immediately needed. Lazy loading addresses this challenge by postponing the loading of components until they are essential for rendering.
For more information on code splitting and lazy loading in React, refer to the official documentation: https://legacy.reactjs.org/docs/code-splitting.html

====Implementation====
Lazy loading in React can be implemented using the lazy function along with Suspense to asynchronously load components. This approach ensures that components are fetched from the server only when they are first rendered, thereby enhancing performance and minimizing the initial load size.

This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
<pre>const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));</pre>

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.
<pre>
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
</pre>

The LazyStudentTaskView component is dynamically imported using the React.lazy function, which asynchronously loads the component when it is first rendered. Within the Suspense component, a fallback UI is provided to display a loading message while the component is being loaded asynchronously.

Lazy loading of components provides a powerful strategy to enhance website responsiveness and optimize overall performance by deferring the loading of non-essential components until they are required. By adopting lazy loading, React applications can achieve expedited initial load times and streamline network bandwidth utilization.

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T02:47:05Z

Syepuri: /* Student Task Page */

__TOC__

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br>
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation. </br>
https://github.com/users/Shravsssss/projects/1

== Expertiza Background ==
[http://expertiza.ncsu.edu/ 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/utils/interfaces.ts here], with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx DeadlineUtil.tsx file]. Here's a simplified version of the code:

<pre>
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;
};

</pre>

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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx same file]. Here is the dummy deadlines data provided below
<pre>
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",
},
];
</pre>

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTasks/StudentTask.tsx 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskView.tsx 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.

<pre>
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
</pre>

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.

<pre>
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>
);
}
};
</pre>

On the other hand, the [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/LazyStudentTaskView.tsx LazyStudentTaskView.tsx] file includes a React functional component called `LazyLoadedStudentTaskView`. This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
<pre>const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));</pre>

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.
<pre>
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
</pre>

The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskViewStyle.ts 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.

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T02:46:19Z

Syepuri: Added student task view details

__TOC__

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br>
https://github.com/Shravsssss/reimplementation-front-end

These repositories are connected to the GitHub Project, which contains the necessary issues for project implementation. </br>
https://github.com/users/Shravsssss/projects/1

== Expertiza Background ==
[http://expertiza.ncsu.edu/ 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/utils/interfaces.ts here], with the code added at the end of the file.

To obtain the next upcoming deadline, code was added in the [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx DeadlineUtil.tsx file]. Here's a simplified version of the code:

<pre>
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;
};

</pre>

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 [https://github.com/Shravsssss/reimplementation-front-end/blob/TaskDetails/src/pages/StudentTaskViews/DeadlineUtil.tsx same file]. Here is the dummy deadlines data provided below
<pre>
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",
},
];
</pre>

== 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 [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskView.tsx 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.

<pre>
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
</pre>

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.

<pre>
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>
);
}
};
</pre>

On the other hand, the [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/LazyStudentTaskView.tsx LazyStudentTaskView.tsx] file includes a React functional component called `LazyLoadedStudentTaskView`. This component is responsible for lazy loading the `StudentTaskView` component to improve performance.
<pre>const LazyStudentTaskView = React.lazy(() => import('./StudentTaskView'));</pre>

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.
<pre>
<Suspense fallback={<div>Loading Student Task View...</div>}>
<LazyStudentTaskView />
</Suspense>
</pre>

The [https://github.com/Shravsssss/reimplementation-front-end/blob/main/src/pages/StudentTaskViews/StudentTaskViewStyle.ts 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.

CSC/ECE 517 Spring 2024 - E2430 Reimplement student task view

2024-03-25T02:29:38Z

Syepuri: /* Github repository */