Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses

2023-12-12T21:31:32Z

Athorve:

== Expertiza ==
Expertiza, an open-source learning management system, is built on the Ruby on Rails framework. It provides functionality for creating assignments, tests, assignment teams, and courses, alongside an array of other features. Notably, it incorporates a robust system for facilitating peer reviews and feedback within teams and groups. The primary emphasis in this project is on the frontend React Components, specifically those related to User, Institution, and Roles. The project aims to implement a fully functional user interface for these components utilizing React.

== ToDo ==
In this project, the front end of the courses page needs to be reimplemented using React with Typescript. The main page will display a table with all the course listings. This page will only be visible to admins of the application. Admins will be able to add new courses, edit existing courses, and delete courses from the list. Along with this, the admins will have the feature to manage the TAs associated with the courses. The admins can view who are the TAs associated with which course. Furthermore, the admin can add or remove TAs associated with courses.

== Design Patterns ==
Design patterns help in maintaining large code bases and reusability of code. In this section, we are mentioning the different design patterns that we used in the project while re-implementing the front end for expertiza.
#'''Composite Design Pattern''', since we are going to create our Course component by nesting and composing the Table, Modal, and other components together.
#'''DRY Principle''', because one of the major advantages of using React. We are able to reuse components that already exist, like the Table, and Modal components.
#'''Provider Pattern'''. React provides the Context API using which we can pass props down the component chain without explicitly passing it down. Thus using the provider pattern.
#'''Observer Pattern''', is leveraged using the Context API provided by React along with hooks like ''useEffect'' and ''useState''.
#'''HOC Pattern'''. HOC refers to the higher-order component which is a function that takes in a component and returns a component. We will be using this to add routing for the new pages that will be created.
#'''Mediator Pattern''', is used since the data that comes from the backend is different from how it is required in the frontend. So we use the mediator pattern to change the data in a way we require.

== Components ==
Components are the basic building blocks in React. This section specifies the different components that we created for the project.
#'''Courses Page''': This is the main page that displays all the courses. It should use the Table component for listing the courses.
#'''Course Row''': A component that represents a single course. It should have buttons for editing, deleting, managing TAs, and copying courses.
#'''Create/Edit Course Form''': A form for creating a new course or editing an existing one. This form should have fields for all relevant course details.
#'''TA Management Modal''': A modal that opens up when the 'Manage TAs' button is clicked. It should list all TAs for the selected course and provide options to add or remove TAs.
#'''Add TA Form''': A form in the TA Management Modal for adding a new TA to the course.
#'''TA Row''': A component that represents a single TA within the TA Management Modal. It should have a remove button to remove the TA from the course.
#'''Copy Course Modal/Form''': A modal or form that allows users to duplicate an existing course.

== Test Scenarios ==
Testing in the application can be performed by using Libraries like ''Jest'' and ''Enzyme''. Testing can be automated by using CI/CD pipelines to execute whenever there are new changes to the code, so as to follow test-driven development. We can test for the following features.

#'''List Courses''': Verify that all existing courses are listed in a table. Check if the course details listed make sense and are not overloaded with unnecessary information.
#'''Create Course''': Use the "create new course" button and fill in all the required fields. Verify that the course is created successfully and is listed in the course table.
#'''Edit Course''': Select a course from the list and click on the "edit" button. Change some details and save. Verify that the changes are reflected in the course list.
#'''Delete Course''': Select a course from the list and click on the "delete" button. Verify that the course is removed from the course list.
#'''Manage TA''': Click on the "manage TA" button for a course. Add a TA and verify that the TA is added successfully. Remove a TA and verify that the TA is removed successfully.
#'''Copy Course''': Select a course and use the "copy course" functionality. Verify that a new course is created with the same details as the original course, except for a unique course ID.
#'''User Interface Validation''': Check if the UI theme is consistent with the rest of the application. Verify that the page is responsive and works well on different screen sizes. Check if all buttons and links work as expected.

==Files Modified==
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/App.tsx src/App.tsx]
App.tsx contains all the routing-related information of the application. Since for courses we needed to build a new URL route the changes that were made were to include a protected route (since only users with the privilege of TA or higher could access it) for the courses page, along with the page to create a new course, update an existing course, manage TAs, and add a new TA. Since for other functionalities like the Delete and Copy course, the URL does not change therefore we do not need to specify that in this file. We reused premade components for routes (DRY Principle) and for nested routes, we nested the components themselves therefore larger component was made of smaller components (Composite Pattern). The Protected Route component itself uses the HOC pattern and we leveraged that to implement route protection (user cannot change URLs to access pages).
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/layout/Header.tsx src/layout/Header.tsx]
Header.tsx contains all the information that is displayed on the header of the application. Since we needed to add a way for users to access the courses page, we added one more entry to the Header component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/utils/interfaces.ts src/utils/interfaces.ts]
Since typescript is a typesafe language whenever we declare a variable we can specify the type of the variable. The interfaces.ts file contains many different types which are composed of primitive types. We created four interfaces, which are ICourseResponse (type for the course data received as a response), ICourseRequest (type for the course data sent to the backend), ITAResponse (type for the TA data received as a response), ITARequest (type for the TA data sent to the backend). We use the composite pattern while creating a new type.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/utils/util.ts src/utils/util.ts]
util.ts contains utility functions that can be used all across the application. So in the util.ts file, we had a function to get the privilege level/ID from the user type like whether the user is a Student, a TA, etc. We implemented a function to get the user type given the privilege level/ID. We needed to implement this feature since the privilege levels stored in the backend are different from how it is defined in the frontend. This uses the mediator design pattern.

==Files Created==
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/Course.tsx src/pages/Courses/Course.tsx]
Course.tsx page is the index page that is displayed when the user hits the /courses route. This page reuses many components that were premade such as the Table, and Row components that already exist in the code. Also, we use components from third-party libraries like react-bootstrap, and react-icons. When the component loads we make an API call to the backend to fetch all the course-related information. We pass all this data to the table component, along with the different columns that need to be present in the table. There are also other components like Delete and Copy course which are used to delete or copy a course respectively. We use the composite pattern while building the component, and the useEffect hook uses the observer pattern on the array of values that it is provided with.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseColumns.tsx src/pages/Courses/CourseColumns.tsx]
CourseColumns.tsx is not a page that is directly displayed to the user. It is a component that is used to build the larger Course component. Course Columns just specify the columns that need to be displayed along with the attributes of the column itself. We use the HOC pattern when defining the functionality that each column needs to possess.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseCopy.tsx src/pages/Courses/CourseCopy.tsx]
CourseCopy.tsx is also a component that is used to build the larger Course Component. This component displays a confirmation modal to the user when the user clicks on the Copy Course button. When the user copies a course we hit the copy course API provided in the backend. The result of this is displayed when the user refreshes the page and fetches the updated data from the backend. We use the Provider Pattern in this component as we provide the course ID from the Course component to the Course Copy component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseDelete.tsx src/pages/Courses/CourseDelete.tsx]
CourseDelete.tsx is a component almost completely similar to the Course Copy component. The only difference is the backend API that we hit when we delete a course. It follows all the same design patterns as the Course Copy component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseEditor.tsx src/pages/Courses/CourseEditor.tsx]
CourseEditor.tsx is one of the major components. It displays a form for the user to either create a new course or edit an existing course. Whether the user is editing a course or creating a new course depends on how the user reached that page. The URL also specifies whether the user is creating a new course or editing an existing course. This component itself is made up of many smaller components (Composite Pattern). It also uses form validation by leveraging Yup, a third-party library (HOC Pattern). While editing the form the component is provided with the course ID from the course component (Provider Pattern). We also use the useEffect hook to check whether when the user submits the form the operation was successful or not. The useEffect hook observes whether changes were made to specific variables and if the variables have changed then only the hook function executes (Observer Pattern).
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseUtil.ts src/pages/Courses/CourseUtil.ts]
CourseUtil.ts file does not export any React components, it provides many useful functions that are used in other components. Functions to fetch and modify data, implement validations, and transform incoming data.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TA.tsx src/pages/TA/TA.tsx]
This is the main page for managing Teaching Assistants (TAs). It should utilize the Table component for listing all TAs. Each row in the table represents a TA with buttons for editing, deleting, and possibly additional actions.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TADelete.tsx src/pages/TA/TADelete.tsx]
Similar to the CourseDelete component, TADelete handles the UI and logic for deleting a TA. It interacts with the backend through a specific API for deleting TAs.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TAEditor.tsx src/pages/TA/TAEditor.tsx]
This component is crucial for managing or editing TAs. It contains a form with fields for relevant TA details and validation. Depending on the URL or other parameters, it should know whether it is in "create" or "edit" mode.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TAUtil.ts src/pages/TA/TAUtil.ts]
Like CourseUtil.ts, this file might contain utility functions specific to TAs. These include functions for fetching and modifying TA data, validation functions, and any transformations needed.

==Results==
*Courses Page. This is what is displayed when no courses exist in the Database
[[File:Courses_Page.png|700px]]
*Add New Course. The user needs to select the Institution, select the instructor, and fill in the details like course name, directory, information, and whether the course is private.
[[File:Create_Course.png|700px]]
*Courses Page. The information displayed regarding a specific course.
[[File:Courses_Page_2.png|700px]]
*Update Existing Course. The user cannot update the Institution, the instructor, or the course name, only the directory, information, and whether the course is private.
[[File:Update_Course.png|700px]]
*Delete Existing Course. The user is prompted before deleting a course.
[[File:Delete_Course.png|700px]]
*Copy Existing Course. The user is prompted before copying a course.
[[File:Copy_Course.png|700px]]
*Courses Page. The page displays the result of copying a course.
[[File:Courses_Page_3.png|700px]]
*Manage TAs. According to the problem statement, we need to display a Modal which would contain the information regarding all the TAs of the course.
[[File:Manage_TAs.png|700px]]
*Add TAs. The logged-in user only needs to add the username of the user they want to add as the TA for the course.
[[File:Add_TA.png|700px]]

*The feature for deleting a TA for a course has been implemented but the backend is not properly implemented (comments regarding these are mentioned in the code), so no screenshot for it :(

*The feature to Update TA information is redundant so was not implemented.

==Future Work==
All the functionalities that were mentioned in the problem statement have been implemented. A few changes need to be made which are already mentioned in the project code. Just need to follow the ToDo tag and you can find the changes required.
Also, our project 3 was on Adding Course and Assignment Participants, in this project we have mentioned in the code how to integrate the work from the previous project into the current project. Created a ToDo tag for the same.

==Team==
=====Mentor=====
* Renji Joseph Sabu (rsabu@ncsu.edu)

=====Members=====
* Atharva Thorve <athorve@ncsu.edu>
* Mrityunjay Joshi <mjoshi6@ncsu.edu>
* Divit Kalathil <dakalath@ncsu.edu>

==Pull Request==
https://github.com/expertiza/reimplementation-front-end/pull/23

==Youtube Video==
[https://www.youtube.com/watch?v=PUf7xAA9FoQ Project Demo]

CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses

2023-12-05T04:41:35Z

Athorve:

== Expertiza ==
Expertiza, an open-source learning management system, is built on the Ruby on Rails framework. It provides functionality for creating assignments, tests, assignment teams, and courses, alongside an array of other features. Notably, it incorporates a robust system for facilitating peer reviews and feedback within teams and groups. The primary emphasis in this project is on the frontend React Components, specifically those related to User, Institution, and Roles. The project aims to implement a fully functional user interface for these components utilizing React.

== ToDo ==
In this project, the front end of the courses page needs to be reimplemented using React with Typescript. The main page will display a table with all the course listings. This page will only be visible to admins of the application. Admins will be able to add new courses, edit existing courses, and delete courses from the list. Along with this, the admins will have the feature to manage the TAs associated with the courses. The admins can view who are the TAs associated with which course. Furthermore, the admin can add or remove TAs associated with courses.

== Design Patterns ==
#'''Composite Design Pattern''', since we are going to create our Course component by nesting and composing the Table, Modal, and other components together.
#'''DRY Principle''', because one of the major advantages of using React. We are able to reuse components that already exist, like the Table, and Modal components.
#'''Provider Pattern'''. React provides the Context API using which we can pass props down the component chain without explicitly passing it down. Thus using the provider pattern.
#'''Observer Pattern''', is leveraged using the Context API provided by React along with hooks like ''useEffect'' and ''useState''.
#'''HOC Pattern'''. HOC refers to the higher-order component which is a function that takes in a component and returns a component. We will be using this to add routing for the new pages that will be created.
#'''Mediator Pattern''', is used since the data that comes from the backend is different from how it is required in the frontend. So we use the mediator pattern to change the data in a way we require.

== Components ==
#'''Courses Page''': This is the main page that displays all the courses. It should use the Table component for listing the courses.
#'''Course Row''': A component that represents a single course. It should have buttons for editing, deleting, managing TAs, and copying courses.
#'''Create/Edit Course Form''': A form for creating a new course or editing an existing one. This form should have fields for all relevant course details.
#'''TA Management Modal''': A modal that opens up when the 'Manage TAs' button is clicked. It should list all TAs for the selected course and provide options to add or remove TAs.
#'''Add TA Form''': A form in the TA Management Modal for adding a new TA to the course.
#'''TA Row''': A component that represents a single TA within the TA Management Modal. It should have a remove button to remove the TA from the course.
#'''Copy Course Modal/Form''': A modal or form that allows users to duplicate an existing course.

== Test Scenarios ==
Testing in the application can be performed by using Libraries like ''Jest'' and ''Enzyme''. Testing can be automated by using CI/CD pipelines to execute whenever there are new changes to the code, so as to follow test-driven development. We can test for the following features.

#'''List Courses''': Verify that all existing courses are listed in a table. Check if the course details listed make sense and are not overloaded with unnecessary information.
#'''Create Course''': Use the "create new course" button and fill in all the required fields. Verify that the course is created successfully and is listed in the course table.
#'''Edit Course''': Select a course from the list and click on the "edit" button. Change some details and save. Verify that the changes are reflected in the course list.
#'''Delete Course''': Select a course from the list and click on the "delete" button. Verify that the course is removed from the course list.
#'''Manage TA''': Click on the "manage TA" button for a course. Add a TA and verify that the TA is added successfully. Remove a TA and verify that the TA is removed successfully.
#'''Copy Course''': Select a course and use the "copy course" functionality. Verify that a new course is created with the same details as the original course, except for a unique course ID.
#'''User Interface Validation''': Check if the UI theme is consistent with the rest of the application. Verify that the page is responsive and works well on different screen sizes. Check if all buttons and links work as expected.

==Files Modified==
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/App.tsx src/App.tsx]
App.tsx contains all the routing-related information of the application. Since for courses we needed to build a new URL route the changes that were made were to include a protected route (since only users with the privilege of TA or higher could access it) for the courses page, along with the page to create a new course, update an existing course, manage TAs, and add a new TA. Since for other functionalities like the Delete and Copy course, the URL does not change therefore we do not need to specify that in this file. We reused premade components for routes (DRY Principle) and for nested routes, we nested the components themselves therefore larger component was made of smaller components (Composite Pattern). The Protected Route component itself uses the HOC pattern and we leveraged that to implement route protection (user cannot change URLs to access pages).
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/layout/Header.tsx src/layout/Header.tsx]
Header.tsx contains all the information that is displayed on the header of the application. Since we needed to add a way for users to access the courses page, we added one more entry to the Header component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/Course.tsx src/pages/Courses/Course.tsx]
Course.tsx page is the index page that is displayed when the user hits the /courses route. This page reuses many components that were premade such as the Table, and Row components that already exist in the code. Also, we use components from third-party libraries like react-bootstrap, and react-icons. When the component loads we make an API call to the backend to fetch all the course-related information. We pass all this data to the table component, along with the different columns that need to be present in the table. There are also other components like Delete and Copy course which are used to delete or copy a course respectively. We use the composite pattern while building the component, and the useEffect hook uses the observer pattern on the array of values that it is provided with.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseColumns.tsx src/pages/Courses/CourseColumns.tsx]
CourseColumns.tsx is not a page that is directly displayed to the user. It is a component that is used to build the larger Course component. Course Columns just specify the columns that need to be displayed along with the attributes of the column itself. We use the HOC pattern when defining the functionality that each column needs to possess.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseCopy.tsx src/pages/Courses/CourseCopy.tsx]
CourseCopy.tsx is also a component that is used to build the larger Course Component. This component displays a confirmation modal to the user when the user clicks on the Copy Course button. When the user copies a course we hit the copy course API provided in the backend. The result of this is displayed when the user refreshes the page and fetches the updated data from the backend. We use the Provider Pattern in this component as we provide the course ID from the Course component to the Course Copy component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseDelete.tsx src/pages/Courses/CourseDelete.tsx]
CourseDelete.tsx is a component almost completely similar to the Course Copy component. The only difference is the backend API that we hit when we delete a course. It follows all the same design patterns as the Course Copy component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseEditor.tsx src/pages/Courses/CourseEditor.tsx]
CourseEditor.tsx is one of the major components. It displays a form for the user to either create a new course or edit an existing course. Whether the user is editing a course or creating a new course depends on how the user reached that page. The URL also specifies whether the user is creating a new course or editing an existing course. This component itself is made up of many smaller components (Composite Pattern). It also uses form validation by leveraging Yup, a third-party library (HOC Pattern). While editing the form the component is provided with the course ID from the course component (Provider Pattern). We also use the useEffect hook to check whether when the user submits the form the operation was successful or not. The useEffect hook observes whether changes were made to specific variables and if the variables have changed then only the hook function executes (Observer Pattern).
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseUtil.ts src/pages/Courses/CourseUtil.ts]
CourseUtil.ts file does not export any React components, it provides many useful functions that are used in other components. Functions to fetch and modify data, implement validations, and transform incoming data.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TA.tsx src/pages/TA/TA.tsx]
This is the main page for managing Teaching Assistants (TAs). It should utilize the Table component for listing all TAs. Each row in the table represents a TA with buttons for editing, deleting, and possibly additional actions.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TADelete.tsx src/pages/TA/TADelete.tsx]
Similar to the CourseDelete component, TADelete handles the UI and logic for deleting a TA. It interacts with the backend through a specific API for deleting TAs.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TAEditor.tsx src/pages/TA/TAEditor.tsx]
This component is crucial for managing or editing TAs. It contains a form with fields for relevant TA details and validation. Depending on the URL or other parameters, it should know whether it is in "create" or "edit" mode.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TAUtil.ts src/pages/TA/TAUtil.ts]
Like CourseUtil.ts, this file might contain utility functions specific to TAs. These include functions for fetching and modifying TA data, validation functions, and any transformations needed.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/utils/interfaces.ts src/utils/interfaces.ts]
Since typescript is a typesafe language whenever we declare a variable we can specify the type of the variable. The interfaces.ts file contains many different types which are composed of primitive types. We created four interfaces, which are ICourseResponse (type for the course data received as a response), ICourseRequest (type for the course data sent to the backend), ITAResponse (type for the TA data received as a response), ITARequest (type for the TA data sent to the backend). We use the composite pattern while creating a new type.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/utils/util.ts src/utils/util.ts]
util.ts contains utility functions that can be used all across the application. So in the util.ts file, we had a function to get the privilege level/ID from the user type like whether the user is a Student, a TA, etc. We implemented a function to get the user type given the privilege level/ID. We needed to implement this feature since the privilege levels stored in the backend are different from how it is defined in the frontend. This uses the mediator design pattern.

==Results==
*Courses Page. This is what is displayed when no courses exist in the Database
[[File:Courses_Page.png|700px]]
*Add New Course. The user needs to select the Institution, select the instructor, and fill in the details like course name, directory, information, and whether the course is private.
[[File:Create_Course.png|700px]]
*Courses Page. The information displayed regarding a specific course.
[[File:Courses_Page_2.png|700px]]
*Update Existing Course. The user cannot update the Institution, the instructor, or the course name, only the directory, information, and whether the course is private.
[[File:Update_Course.png|700px]]
*Delete Existing Course. The user is prompted before deleting a course.
[[File:Delete_Course.png|700px]]
*Copy Existing Course. The user is prompted before copying a course.
[[File:Copy_Course.png|700px]]
*Courses Page. The page displays the result of copying a course.
[[File:Courses_Page_3.png|700px]]
*Manage TAs. According to the problem statement, we need to display a Modal which would contain the information regarding all the TAs of the course.
[[File:Manage_TAs.png|700px]]
*Add TAs. The logged-in user only needs to add the username of the user they want to add as the TA for the course.
[[File:Add_TA.png|700px]]

*The feature for deleting a TA for a course has been implemented but the backend is not properly implemented (comments regarding these are mentioned in the code), so no screenshot for it :(

*The feature to Update TA information is redundant so was not implemented.

==Future Work==
All the functionalities that were mentioned in the problem statement have been implemented. A few changes need to be made which are already mentioned in the project code. Just need to follow the ToDo tag and you can find the changes required.
Also, our project 3 was on Adding Course and Assignment Participants, in this project we have mentioned in the code how to integrate the work from the previous project into the current project. Created a ToDo tag for the same.

==Team==
=====Mentor=====
* Renji Joseph Sabu (rsabu@ncsu.edu)

=====Members=====
* Atharva Thorve <athorve@ncsu.edu>
* Mrityunjay Joshi <mjoshi6@ncsu.edu>
* Divit Kalathil <dakalath@ncsu.edu>

==Pull Request==
https://github.com/expertiza/reimplementation-front-end/pull/23

==Youtube Video==
[https://www.youtube.com/watch?v=PUf7xAA9FoQ Project Demo]

CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses

2023-12-05T04:12:51Z

Athorve:

== Expertiza ==
Expertiza, an open-source learning management system, is built on the Ruby on Rails framework. It provides functionality for creating assignments, tests, assignment teams, and courses, alongside an array of other features. Notably, it incorporates a robust system for facilitating peer reviews and feedback within teams and groups. The primary emphasis in this project is on the frontend React Components, specifically those related to User, Institution, and Roles. The project aims to implement a fully functional user interface for these components utilizing React.

== ToDo ==
In this project, the front end of the courses page needs to be reimplemented using React with Typescript. The main page will display a table with all the course listings. This page will only be visible to admins of the application. Admins will be able to add new courses, edit existing courses, and delete courses from the list. Along with this, the admins will have the feature to manage the TAs associated with the courses. The admins can view who are the TAs associated with which course. Furthermore, the admin can add or remove TAs associated with courses.

== Design Patterns ==
#'''Composite Design Pattern''', since we are going to create our Course component by nesting and composing the Table, Modal, and other components together.
#'''DRY Principle''', because one of the major advantages of using React. We are able to reuse components that already exist, like the Table, and Modal components.
#'''Provider Pattern'''. React provides the Context API using which we can pass props down the component chain without explicitly passing it down. Thus using the provider pattern.
#'''Observer Pattern''', is leveraged using the Context API provided by React along with hooks like ''useEffect'' and ''useState''.
#'''HOC Pattern'''. HOC refers to the higher-order component which is a function that takes in a component and returns a component. We will be using this to add routing for the new pages that will be created.
#'''Mediator Pattern''', is used since the data that comes from the backend is different from how it is required in the frontend. So we use the mediator pattern to change the data in a way we require.

== Components ==
#'''Courses Page''': This is the main page that displays all the courses. It should use the Table component for listing the courses.
#'''Course Row''': A component that represents a single course. It should have buttons for editing, deleting, managing TAs, and copying courses.
#'''Create/Edit Course Form''': A form for creating a new course or editing an existing one. This form should have fields for all relevant course details.
#'''TA Management Modal''': A modal that opens up when the 'Manage TAs' button is clicked. It should list all TAs for the selected course and provide options to add or remove TAs.
#'''Add TA Form''': A form in the TA Management Modal for adding a new TA to the course.
#'''TA Row''': A component that represents a single TA within the TA Management Modal. It should have a remove button to remove the TA from the course.
#'''Copy Course Modal/Form''': A modal or form that allows users to duplicate an existing course.

== Test Scenarios ==
Testing in the application can be performed by using Libraries like ''Jest'' and ''Enzyme''. Testing can be automated by using CI/CD pipelines to execute whenever there are new changes to the code, so as to follow test-driven development. We can test for the following features.

#'''List Courses''': Verify that all existing courses are listed in a table. Check if the course details listed make sense and are not overloaded with unnecessary information.
#'''Create Course''': Use the "create new course" button and fill in all the required fields. Verify that the course is created successfully and is listed in the course table.
#'''Edit Course''': Select a course from the list and click on the "edit" button. Change some details and save. Verify that the changes are reflected in the course list.
#'''Delete Course''': Select a course from the list and click on the "delete" button. Verify that the course is removed from the course list.
#'''Manage TA''': Click on the "manage TA" button for a course. Add a TA and verify that the TA is added successfully. Remove a TA and verify that the TA is removed successfully.
#'''Copy Course''': Select a course and use the "copy course" functionality. Verify that a new course is created with the same details as the original course, except for a unique course ID.
#'''User Interface Validation''': Check if the UI theme is consistent with the rest of the application. Verify that the page is responsive and works well on different screen sizes. Check if all buttons and links work as expected.

==Files Modified==
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/App.tsx src/App.tsx]
App.tsx contains all the routing-related information of the application. Since for courses we needed to build a new URL route the changes that were made were to include a protected route (since only users with the privilege of TA or higher could access it) for the courses page, along with the page to create a new course, update an existing course, manage TAs, and add a new TA. Since for other functionalities like the Delete and Copy course, the URL does not change therefore we do not need to specify that in this file. We reused premade components for routes (DRY Principle) and for nested routes, we nested the components themselves therefore larger component was made of smaller components (Composite Pattern). The Protected Route component itself uses the HOC pattern and we leveraged that to implement route protection (user cannot change URLs to access pages).
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/layout/Header.tsx src/layout/Header.tsx]
Header.tsx contains all the information that is displayed on the header of the application. Since we needed to add a way for users to access the courses page, we added one more entry to the Header component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/Course.tsx src/pages/Courses/Course.tsx]
Course.tsx page is the index page that is displayed when the user hits the /courses route. This page reuses many components that were premade such as the Table, and Row components that already exist in the code. Also, we use components from third-party libraries like react-bootstrap, and react-icons. When the component loads we make an API call to the backend to fetch all the course-related information. We pass all this data to the table component, along with the different columns that need to be present in the table. There are also other components like Delete and Copy course which are used to delete or copy a course respectively. We use the composite pattern while building the component, and the useEffect hook uses the observer pattern on the array of values that it is provided with.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseColumns.tsx src/pages/Courses/CourseColumns.tsx]
CourseColumns.tsx is not a page that is directly displayed to the user. It is a component that is used to build the larger Course component. Course Columns just specify the columns that need to be displayed along with the attributes of the column itself. We use the HOC pattern when defining the functionality that each column needs to possess.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseCopy.tsx src/pages/Courses/CourseCopy.tsx]
CourseCopy.tsx is also a component that is used to build the larger Course Component. This component displays a confirmation modal to the user when the user clicks on the Copy Course button. When the user copies a course we hit the copy course API provided in the backend. The result of this is displayed when the user refreshes the page and fetches the updated data from the backend. We use the Provider Pattern in this component as we provide the course ID from the Course component to the Course Copy component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseDelete.tsx src/pages/Courses/CourseDelete.tsx]
CourseDelete.tsx is a component almost completely similar to the Course Copy component. The only difference is the backend API that we hit when we delete a course. It follows all the same design patterns as the Course Copy component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseEditor.tsx src/pages/Courses/CourseEditor.tsx]
CourseEditor.tsx is one of the major components. It displays a form for the user to either create a new course or edit an existing course. Whether the user is editing a course or creating a new course depends on how the user reached that page. The URL also specifies whether the user is creating a new course or editing an existing course. This component itself is made up of many smaller components (Composite Pattern). It also uses form validation by leveraging Yup, a third-party library (HOC Pattern). While editing the form the component is provided with the course ID from the course component (Provider Pattern). We also use the useEffect hook to check whether when the user submits the form the operation was successful or not. The useEffect hook observes whether changes were made to specific variables and if the variables have changed then only the hook function executes (Observer Pattern).
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseUtil.ts src/pages/Courses/CourseUtil.ts]
CourseUtil.ts file does not export any React components, it provides many useful functions that are used in other components. Functions to fetch and modify data, implement validations, and transform incoming data.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TA.tsx src/pages/TA/TA.tsx]
This is the main page for managing Teaching Assistants (TAs). It should utilize the Table component for listing all TAs. Each row in the table represents a TA with buttons for editing, deleting, and possibly additional actions.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TADelete.tsx src/pages/TA/TADelete.tsx]
Similar to the CourseDelete component, TADelete handles the UI and logic for deleting a TA. It interacts with the backend through a specific API for deleting TAs.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TAEditor.tsx src/pages/TA/TAEditor.tsx]
This component is crucial for managing or editing TAs. It contains a form with fields for relevant TA details and validation. Depending on the URL or other parameters, it should know whether it is in "create" or "edit" mode.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TAUtil.ts src/pages/TA/TAUtil.ts]
Like CourseUtil.ts, this file might contain utility functions specific to TAs. These include functions for fetching and modifying TA data, validation functions, and any transformations needed.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/utils/interfaces.ts src/utils/interfaces.ts]
Since typescript is a typesafe language whenever we declare a variable we can specify the type of the variable. The interfaces.ts file contains many different types which are composed of primitive types. We created four interfaces, which are ICourseResponse (type for the course data received as a response), ICourseRequest (type for the course data sent to the backend), ITAResponse (type for the TA data received as a response), ITARequest (type for the TA data sent to the backend). We use the composite pattern while creating a new type.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/utils/util.ts src/utils/util.ts]
util.ts contains utility functions that can be used all across the application. So in the util.ts file, we had a function to get the privilege level/ID from the user type like whether the user is a Student, a TA, etc. We implemented a function to get the user type given the privilege level/ID. We needed to implement this feature since the privilege levels stored in the backend are different from how it is defined in the frontend. This uses the mediator design pattern.

==Results==
*Courses Page. This is what is displayed when no courses exist in the Database
[[File:Courses_Page.png|700px]]
*Add New Course. The user needs to select the Institution, select the instructor, and fill in the details like course name, directory, information, and whether the course is private.
[[File:Create_Course.png|700px]]
*Courses Page. The information displayed regarding a specific course.
[[File:Courses_Page_2.png|700px]]
*Update Existing Course. The user cannot update the Institution, the instructor, or the course name, only the directory, information, and whether the course is private.
[[File:Update_Course.png|700px]]
*Delete Existing Course. The user is prompted before deleting a course.
[[File:Delete_Course.png|700px]]
*Copy Existing Course. The user is prompted before copying a course.
[[File:Copy_Course.png|700px]]
*Courses Page. The page displays the result of copying a course.
[[File:Courses_Page_3.png|700px]]
*Manage TAs. According to the problem statement, we need to display a Modal which would contain the information regarding all the TAs of the course.
[[File:Manage_TAs.png|700px]]
*Add TAs. The logged-in user only needs to add the username of the user they want to add as the TA for the course.
[[File:Add_TA.png|700px]]

*The feature for deleting a TA for a course has been implemented but the backend is not properly implemented (comments regarding these are mentioned in the code), so no screenshot for it :(

*The feature to Update TA information is redundant so was not implemented.

==Future Work==
All the functionalities that were mentioned in the problem statement have been implemented. A few changes need to be made which are already mentioned in the project code. Just need to follow the ToDo tag and you can find the changes required.
Also, our project 3 was on Adding Course and Assignment Participants, in this project we have mentioned in the code how to integrate the work from the previous project into the current project. Created a ToDo tag for the same.

==Team==
=====Mentor=====
* Renji Joseph Sabu (rsabu@ncsu.edu)

=====Members=====
* Atharva Thorve <athorve@ncsu.edu>
* Mrityunjay Joshi <mjoshi6@ncsu.edu>
* Divit Kalathil <dakalath@ncsu.edu>

==Pull Request==
https://github.com/expertiza/reimplementation-front-end/pull/23

File:Add TA.png

2023-12-05T04:07:30Z

Athorve: Athorve uploaded a new version of File:Add TA.png

File:Add TA.png

2023-12-05T04:07:16Z

Athorve: Athorve uploaded a new version of File:Add TA.png

File:Add TA.png

2023-12-05T04:06:29Z

Athorve: Athorve uploaded a new version of File:Add TA.png

File:Add TA.png

2023-12-05T04:05:17Z

Athorve: Athorve uploaded a new version of File:Add TA.png

File:Courses Page 3.png

2023-12-05T04:03:57Z

Athorve: Athorve uploaded a new version of File:Courses Page 3.png

File:Courses Page 2.png

2023-12-05T04:03:29Z

Athorve: Athorve uploaded a new version of File:Courses Page 2.png

CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses

2023-12-04T15:39:48Z

Athorve: Added file based information

== Expertiza ==
Expertiza, an open-source learning management system, is built on the Ruby on Rails framework. It provides functionality for creating assignments, tests, assignment teams, and courses, alongside an array of other features. Notably, it incorporates a robust system for facilitating peer reviews and feedback within teams and groups. The primary emphasis in this project is on the frontend React Components, specifically those related to User, Institution, and Roles. The project aims to implement a fully functional user interface for these components utilizing React.

== ToDo ==
In this project, the front end of the courses page needs to be reimplemented using React with Typescript. The main page will display a table with all the course listings. This page will only be visible to admins of the application. Admins will be able to add new courses, edit existing courses, and delete courses from the list. Along with this, the admins will have the feature to manage the TAs associated with the courses. The admins can view who are the TAs associated with which course. Furthermore, the admin can add or remove TAs associated with courses.

== Design Patterns ==
#'''Composite Design Pattern''', since we are going to create our Course component by nesting and composing the Table, Modal, and other components together.
#'''DRY Principle''', because one of the major advantages of using React. We are able to reuse components that already exist, like the Table, and Modal components.
#'''Provider Pattern'''. React provides the Context API using which we can pass props down the component chain without explicitly passing it down. Thus using the provider pattern.
#'''Observer Pattern''', is leveraged using the Context API provided by React along with hooks like ''useEffect'' and ''useState''.
#'''HOC Pattern'''. HOC refers to the higher-order component which is a function that takes in a component and returns a component. We will be using this to add routing for the new pages that will be created.
#'''Mediator Pattern''', is used since the data that comes from the backend is different from how it is required in the frontend. So we use the mediator pattern to change the data in a way we require.

== Components ==
#'''Courses Page''': This is the main page that displays all the courses. It should use the Table component for listing the courses.
#'''Course Row''': A component that represents a single course. It should have buttons for editing, deleting, managing TAs, and copying courses.
#'''Create/Edit Course Form''': A form for creating a new course or editing an existing one. This form should have fields for all relevant course details.
#'''TA Management Modal''': A modal that opens up when the 'Manage TAs' button is clicked. It should list all TAs for the selected course and provide options to add or remove TAs.
#'''Add TA Form''': A form in the TA Management Modal for adding a new TA to the course.
#'''TA Row''': A component that represents a single TA within the TA Management Modal. It should have a remove button to remove the TA from the course.
#'''Copy Course Modal/Form''': A modal or form that allows users to duplicate an existing course.

== Test Scenarios ==
Testing in the application can be performed by using Libraries like ''Jest'' and ''Enzyme''. Testing can be automated by using CI/CD pipelines to execute whenever there are new changes to the code, so as to follow test-driven development. We can test for the following features.

#'''List Courses''': Verify that all existing courses are listed in a table. Check if the course details listed make sense and are not overloaded with unnecessary information.
#'''Create Course''': Use the "create new course" button and fill in all the required fields. Verify that the course is created successfully and is listed in the course table.
#'''Edit Course''': Select a course from the list and click on the "edit" button. Change some details and save. Verify that the changes are reflected in the course list.
#'''Delete Course''': Select a course from the list and click on the "delete" button. Verify that the course is removed from the course list.
#'''Manage TA''': Click on the "manage TA" button for a course. Add a TA and verify that the TA is added successfully. Remove a TA and verify that the TA is removed successfully.
#'''Copy Course''': Select a course and use the "copy course" functionality. Verify that a new course is created with the same details as the original course, except for a unique course ID.
#'''User Interface Validation''': Check if the UI theme is consistent with the rest of the application. Verify that the page is responsive and works well on different screen sizes. Check if all buttons and links work as expected.

==Files Modified==
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/App.tsx src/App.tsx]
App.tsx contains all the routing-related information of the application. Since for courses we needed to build a new URL route the changes that were made were to include a protected route (since only users with the privilege of TA or higher could access it) for the courses page, along with the page to create a new course, update an existing course, manage TAs, and add a new TA. Since for other functionalities like the Delete and Copy course, the URL does not change therefore we do not need to specify that in this file. We reused premade components for routes (DRY Principle) and for nested routes, we nested the components themselves therefore larger component was made of smaller components (Composite Pattern). The Protected Route component itself uses the HOC pattern and we leveraged that to implement route protection (user cannot change URLs to access pages).
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/layout/Header.tsx src/layout/Header.tsx]
Header.tsx contains all the information that is displayed on the header of the application. Since we needed to add a way for users to access the courses page, we added one more entry to the Header component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/Course.tsx src/pages/Courses/Course.tsx]
Course.tsx page is the index page that is displayed when the user hits the /courses route. This page reuses many components that were premade such as the Table, and Row components that already exist in the code. Also, we use components from third-party libraries like react-bootstrap, and react-icons. When the component loads we make an API call to the backend to fetch all the course-related information. We pass all this data to the table component, along with the different columns that need to be present in the table. There are also other components like Delete and Copy course which are used to delete or copy a course respectively. We use the composite pattern while building the component, and the useEffect hook uses the observer pattern on the array of values that it is provided with.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseColumns.tsx src/pages/Courses/CourseColumns.tsx]
CourseColumns.tsx is not a page that is directly displayed to the user. It is a component that is used to build the larger Course component. Course Columns just specify the columns that need to be displayed along with the attributes of the column itself. We use the HOC pattern when defining the functionality that each column needs to possess.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseCopy.tsx src/pages/Courses/CourseCopy.tsx]
CourseCopy.tsx is also a component that is used to build the larger Course Component. This component displays a confirmation modal to the user when the user clicks on the Copy Course button. When the user copies a course we hit the copy course API provided in the backend. The result of this is displayed when the user refreshes the page and fetches the updated data from the backend. We use the Provider Pattern in this component as we provide the course ID from the Course component to the Course Copy component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseDelete.tsx src/pages/Courses/CourseDelete.tsx]
CourseDelete.tsx is a component almost completely similar to the Course Copy component. The only difference is the backend API that we hit when we delete a course. It follows all the same design patterns as the Course Copy component.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseEditor.tsx src/pages/Courses/CourseEditor.tsx]
CourseEditor.tsx is one of the major components. It displays a form for the user to either create a new course or edit an existing course. Whether the user is editing a course or creating a new course depends on how the user reached that page. The URL also specifies whether the user is creating a new course or editing an existing course. This component itself is made up of many smaller components (Composite Pattern). It also uses form validation by leveraging Yup, a third-party library (HOC Pattern). While editing the form the component is provided with the course ID from the course component (Provider Pattern). We also use the useEffect hook to check whether when the user submits the form the operation was successful or not. The useEffect hook observes whether changes were made to specific variables and if the variables have changed then only the hook function executes (Observer Pattern).
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/Courses/CourseUtil.ts src/pages/Courses/CourseUtil.ts]
CourseUtil.ts file does not export any React components, it provides many useful functions that are used in other components. Functions to fetch and modify data, implement validations, and transform incoming data.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TA.tsx src/pages/TA/TA.tsx]
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TADelete.tsx src/pages/TA/TADelete.tsx]
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TAEditor.tsx src/pages/TA/TAEditor.tsx]
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/pages/TA/TAUtil.ts src/pages/TA/TAUtil.ts]
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/utils/interfaces.ts src/utils/interfaces.ts]
Since typescript is a typesafe language whenever we declare a variable we can specify the type of the variable. The interfaces.ts file contains many different types which are composed of primitive types. We created four interfaces, which are ICourseResponse (type for the course data received as a response), ICourseRequest (type for the course data sent to the backend), ITAResponse (type for the TA data received as a response), ITARequest (type for the TA data sent to the backend). We use the composite pattern while creating a new type.
* [https://github.com/Mrityunjay243/reimplementation-front-end/blob/main/src/utils/util.ts src/utils/util.ts]
util.ts contains utility functions that can be used all across the application. So in the util.ts file, we had a function to get the privilege level/ID from the user type like whether the user is a Student, a TA, etc. We implemented a function to get the user type given the privilege level/ID. We needed to implement this feature since the privilege levels stored in the backend are different from how it is defined in the frontend. This uses the mediator design pattern.

==Results==
*Courses Page. This is what is displayed when no courses exist in the Database
[[File:Courses_Page.png|700px]]
*Add New Course. The user needs to select the Institution, select the instructor, and fill in the details like course name, directory, information, and whether the course is private.
[[File:Create_Course.png|700px]]
*Courses Page. The information displayed regarding a specific course.
[[File:Courses_Page_2.png|700px]]
*Update Existing Course. The user cannot update the Institution, the instructor, or the course name, only the directory, information, and whether the course is private.
[[File:Update_Course.png|700px]]
*Delete Existing Course. The user is prompted before deleting a course.
[[File:Delete_Course.png|700px]]
*Copy Existing Course. The user is prompted before copying a course.
[[File:Copy_Course.png|700px]]
*Courses Page. The page displays the result of copying a course.
[[File:Courses_Page_3.png|700px]]
*Manage TAs. According to the problem statement, we need to display a Modal which would contain the information regarding all the TAs of the course.
[[File:Manage_TAs.png|700px]]
*Add TAs. The logged-in user only needs to add the username of the user they want to add as the TA for the course.
[[File:Add_TA.png|700px]]

*The feature for deleting a TA for a course has been implemented but the backend is not properly implemented (comments regarding these are mentioned in the code), so no screenshot for it :(

*Feature to Update TA information is redundant so was not implemented.

==Team==
=====Mentor=====
* Renji Joseph Sabu (rsabu@ncsu.edu)

=====Members=====
* Atharva Thorve <athorve@ncsu.edu>
* Mrityunjay Joshi <mjoshi6@ncsu.edu>
* Divit Kalathil <dakalath@ncsu.edu>

==Pull Request==
https://github.com/expertiza/reimplementation-front-end/pull/23

CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses

2023-12-04T04:34:03Z

Athorve: Added Screenshots

File:Add TA.png

2023-12-04T04:06:11Z

Athorve:

File:Manage TAs.png

2023-12-04T04:05:42Z

Athorve:

File:Courses Page 3.png

2023-12-04T04:05:09Z

Athorve:

File:Copy Course.png

2023-12-04T04:04:35Z

Athorve:

File:Delete Course.png

2023-12-04T04:04:02Z

Athorve:

File:Update Course.png

2023-12-04T04:03:28Z

Athorve:

File:Courses Page 2.png

2023-12-04T04:02:57Z

Athorve:

File:Create Course.png

2023-12-04T04:02:21Z

Athorve:

File:Courses Page.png

2023-12-04T04:01:44Z

Athorve:

CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses

2023-11-16T02:16:24Z

Athorve:

CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses

2023-11-15T02:46:25Z

Athorve: Created Page

CSC/ECE 517 Fall 2023

2023-11-15T02:11:46Z

Athorve: Added Topic

* [[CSC/ECE 517 Fall 2023 - E2350. Allow reviewers to bid on what to review]]
* [[CSC/ECE 517 Fall 2023 - E2351. Finish mentor management for assignments without topics]]
* [[CSC/ECE 517 Fall 2023 - E2352. Fix "Back" link on “New Late Policy” page]]
* [[CSC/ECE 517 Fall 2023 - E2353. Further refactoring and improvement of review mapping helper]]
* [[CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza]]
* [[CSC/ECE 517 Fall 2023 - E2356. Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2357. Refactor sign_up_sheet_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2358. Refactor student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2359. Refactor user_controller.rb, user.rb, and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2360. View for Results of Bidding]]
* [[CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2363. Create a UI for Assignment Edit page "Etc" tab in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2364. Create a UI for Course's & Assignment's "Add Participants" page]]
* [[CSC/ECE 517 Fall 2023 - E2365. Create a user interface for Questionnaire in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2366. Reimplement assignment model and assignment controller]]
* [[CSC/ECE 517 Fall 2023 - E2367. Reimplement participants_controller.rb, participants.rb and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2368. Reimplement of due_date.rb]]
* [[CSC/ECE 517 Fall 2023 - E2369. Reimplement duties controller.rb and badges controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2370. Reimplement join team requests controller]]
* [[CSC/ECE 517 Fall 2023 - E2371. Reimplement quiz_questionnaires_controller]]
* [[CSC/ECE 517 Fall 2023 - E2373. Reimplementation of teams controller]]
* [[CSC/ECE 517 Fall 2023 - E2374. Reimplement the Question hierarchy]]
* [[CSC/ECE 517 Fall 2023 - E2375. Reimplement Waitlists]]
* [[CSC/ECE 517 Fall 2023 - E2376. Reimplement student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2379. Reimplement authorization_helper.rb]]
* [[CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses]]
* [[CSC/ECE 517 Fall 2023 - E2382. Optimizing the LatePoliciesController]]
* [[CSC/ECE 517 Fall 2023 - E2383. Grading Audit Trail]]
* [[CSC/ECE 517 Fall 2023 - E2377. Reimplement impersonating users (functionality within impersonate_controller.rb)]]
* [[CSC/ECE 517 Fall 2023 - NTX-2 Observability and Debuggability]]
* [[CSC/ECE 517 Fall 2023 - NTX-4 Extend NDB Operator capabilities to support Postgres HA]]
* [[CSC/ECE 517 Fall 2023 - G2350. Add GitLab support for using GraphQL to query user metrics 1]]
* [[CSC/ECE 517 Fall 2023 - G2352. Add GitLab support for using GraphQL to query repository information]]

CSC/ECE 517 Fall 2023 - E2364. Create a UI for Course's & Assignment's "Add Participants" page

2023-10-30T18:55:59Z

Athorve:

==Problem Statement==
The project revolves around creating the "Add Participants" feature for assignments and courses. The main page shows all the participants for a specific assignment or course. Only admins can view this page. Admins can add new participants, edit existing participants, and delete participants added to the assignment or course.
More details of the problem statement can be found here: [https://github.com/expertiza/reimplementation-front-end/issues/14 Issue 14].

==Tasks Completed==
#Create a page to display all the participants:
#*Designed a dynamic table to display all the participants
#*Implemented Participant Component
#*Followed the component design pattern of the project.
#Feature to add new participants:
#*Designed a modal where admins can fill out the participant details
#*Implemented Add Participant Component
#*Followed the component design pattern of the project.
#Feature to edit existing participants:
#*Designed a modal where admins can edit the participant details
#*Implemented Edit Participant Component
#*Followed the component design pattern of the project.
#Feature to delete participants:
#*Designed a modal where admins get a confirmation box before deleting a participant.
#*Implemented Delete Participant Component
#*Followed the component design pattern of the project.
#Protected Routes:
#*Only people with permissions of TA or above level are allowed access to the page.
#*Implemented Route Protection mentioned in the project

==Component Details==
#Created participant component which needs two props.
##type: which contains either value "student_tasks" (for assignments) or "courses" (for courses).
##id: of the assignment or course.
#Created add/edit participant modal which is similar to the user add/edit modal
#Created delete participant modal.

==Files Created/Updated==
*reimplementation-front-end\src\App.tsx
*reimplementation-front-end\src\pages\Participants\Participant.tsx
*reimplementation-front-end\src\pages\Participants\participantColumns.tsx
*reimplementation-front-end\src\pages\Participants\ParticipantDelete.tsx
*reimplementation-front-end\src\pages\Participants\ParticipantEditor.tsx
*reimplementation-front-end\src\pages\Participants\participantUtil.ts
*reimplementation-front-end\src\utils\interfaces.ts

==Results==
*Manage Participants Page:
[[File:Manage_Participants.png|700px]]
*Add Participants Page:
[[File:Add_Participant.png|700px]]

==Team==
=====Mentor=====
* Renji Joseph Sabu (rsabu@ncsu.edu)

=====Members=====
* Atharva Thorve <athorve@ncsu.edu>
* Mrityunjay Joshi <mjoshi6@ncsu.edu>
* Divit Kalathil <dakalath@ncsu.edu>

==Pull Request==
*[https://github.com/expertiza/reimplementation-front-end/pull/17 https://github.com/expertiza/reimplementation-front-end/pull/17]

File:Add Participant.png

2023-10-30T18:45:46Z

Athorve: Page showing add participant modal

Page showing add participant modal

File:Manage Participants.png

2023-10-30T18:45:14Z

Athorve: Page showing participants

Page showing participants

CSC/ECE 517 Fall 2023 - E2364. Create a UI for Course's & Assignment's "Add Participants" page

2023-10-30T18:42:18Z

Athorve:

==Problem Statement==
The project revolves around creating the "Add Participants" feature for assignments and courses. The main page shows all the participants for a specific assignment or course. Only admins can view this page. Admins can add new participants, edit existing participants, and delete participants added to the assignment or course.
More details of the problem statement can be found here: [https://github.com/expertiza/reimplementation-front-end/issues/14 Issue 14].

==Tasks Completed==
#Create a page to display all the participants:
#*Designed a dynamic table to display all the participants
#*Implemented Participant Component
#*Followed the component design pattern of the project.
#Feature to add new participants:
#*Designed a modal where admins can fill out the participant details
#*Implemented Add Participant Component
#*Followed the component design pattern of the project.
#Feature to edit existing participants:
#*Designed a modal where admins can edit the participant details
#*Implemented Edit Participant Component
#*Followed the component design pattern of the project.
#Feature to delete participants:
#*Designed a modal where admins get a confirmation box before deleting a participant.
#*Implemented Delete Participant Component
#*Followed the component design pattern of the project.
#Protected Routes:
#*Only people with permissions of TA or above level are allowed access to the page.
#*Implemented Route Protection mentioned in the project

==Component Details==
Created participant component which needs two props.
#type: which contains either value "student_tasks" (for assignments) or "courses" (for courses).
#id: of the assignment or course.

These two values would be provided by the parent component implementing the Participants component.

==Files Created/Updated==
*reimplementation-front-end\src\App.tsx
*reimplementation-front-end\src\pages\Participants\Participant.tsx
*reimplementation-front-end\src\pages\Participants\participantColumns.tsx
*reimplementation-front-end\src\pages\Participants\ParticipantDelete.tsx
*reimplementation-front-end\src\pages\Participants\ParticipantEditor.tsx
*reimplementation-front-end\src\pages\Participants\participantUtil.ts
*reimplementation-front-end\src\utils\interfaces.ts

CSC/ECE 517 Fall 2023 - E2364. Create a UI for Course's & Assignment's "Add Participants" page

2023-10-30T18:26:33Z

Athorve: Created page with "==Problem Statement== The project revolves around creating the "Add Participants" feature for assignments and courses. The main page shows all the participants for a specific..."

CSC/ECE 517 Fall 2023

2023-10-30T17:16:41Z

Athorve: Added Topic

* [[CSC/ECE 517 Fall 2023 - E2358. Refactor student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2351. Finish mentor management for assignments without topics]]
* [[CSC/ECE 517 Fall 2023 - E2359. Refactor user_controller.rb, user.rb, and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2367. Reimplement participants_controller.rb, participants.rb and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza]]
* [[CSC/ECE 517 Fall 2023 - E2365. Create a user interface for Questionnaire in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2364. Create a UI for Course's & Assignment's "Add Participants" page]]