Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2023 - E2333: Implement Course Component with React

2023-04-25T00:03:19Z

Kkarnat: /* Our Implementation */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on a different projects and assignments and submit their work. They can also review other students' submissions.

==About==

The aim of Program 4 is to create a UI for course.rb using React and create card component for reusability. There are 2 main views we have implemented. They are:

1.course.js 
2. Card Component 
* Card.js
* CardHeader.js
* CardList.js

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG | 1200px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses and assignments in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding using Bootstrap.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== Course.js (Manage Courses) ===

This page serves as the primary interface for Courses to manage course-related information. From this page, users can access other pages such as create Courses, update Courses, and delete Courses. We will be adding the course component, and when click on courses, it will list all courses along with the actions. And search and sort functionality will be implemented.

The Courses component renders the CardList component with the courses and columnKeys props passed to it. The CardList component then maps over the courses array and displays a card for each course. The card displays the course data in a table with the columns defined in the columnKeys array.

Overall, this component displays a table of courses with their details, including institution, creation and update dates, and assignments. It is a simple example of how React components can be used to display dynamic data in a user-friendly way.

=== Card ===

This will be reusable component for both courses and assignments to display the courses and assignments in the UI with respective actions. The card component contains Card, CardHeader, CardList.

==== Card.js ====
This is a React component named "Card", which renders a card with information about a course. It takes a "course" object as a prop, which contains information about the course and an array of "assignments".

The component uses the "useState" hook to manage the state of whether the assignments list should be shown or not. When the card is clicked, the "toggleAssignments" function is called, which toggles the value of "showAssignments" to show or hide the assignments list.

The component then renders the course information using a mapping function over the keys of the "course" object, excluding the "assignments" and "Id" keys. Each value is displayed in a div with a "card-text" class. At the end, a set of icons is displayed representing various actions that can be taken on the course.

If "showAssignments" is true, the component renders a "CardList" component passing the "assignments" array and a set of keys to define the columns of the table.

Overall, this component renders a card that displays course information and provides the ability to show or hide a list of assignments. It also includes icons that represent various actions that can be taken on the course.

==== CardHeader.js ====
This code exports a React component called CardHeader that takes in two props: columnKeys and onSortClick. It uses the useState hook to keep track of the current sorted column and sort direction. The handleSortClick function is called when a column header is clicked, and it either calls the onSortClick prop (if it's passed in) or sets the sort column and direction state variables.

The returned JSX is a Bootstrap card header component with a row of columns that correspond to the columnKeys prop. Each column has a click handler that calls handleSortClick with the column's key as an argument. If the column is currently the sort column, an up or down arrow is displayed next to the column label based on the current sort direction.

==== CardList.js ====
This code is a React component called CardList. It takes in two props: courses and columnKeys. It renders a list of Card components that display information about courses. It also includes a search bar to filter the list of courses, and a CardHeader component that provides sorting functionality for the table columns.

The component uses the useState hook to manage the state of sortOrder and searchTerm. The sortedCourses array is initialized as a copy of the courses prop, and is then sorted based on the sortOrder and sortColumn state values. If sortColumn is not set, then the courses are not sorted. The filteredCourses array is generated by filtering sortedCourses based on whether any of the property values of each course object contain the searchTerm.

The handleSortClick function is called when the CardHeader is clicked, and it updates the sortColumn and sortOrder state values based on the current column being sorted. If the same column is clicked twice, the sortOrder is toggled between ascending and descending.

Finally, the CardList component renders a CardHeader component and a list of Card components. The CardHeader component is passed the columnKeys and handleSortClick function as props, while the Card component is passed a course object as a prop.

== Our Implementation ==

=== Courses Page ===

[[File:Courses1.PNG | 1200px]]

=== Assignments Under Courses ===

[[File:Courses_assignments.PNG |1200px]]

=== Ascending Sort of Courses ===

[[File:Asc_sort.PNG |1200px]]

=== Descending Sort of Course ===

[[File:Desc_order.PNG |1200px]]

=== Global Search ===

[[File:Search.PNG | 1200px]]

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we have to mock the databases.

*To create a mock database in the reimplementation_front_end GitHub repository, we need to create a JSON file.
*The first step is to generate mock data with a structure similar to that of the actual database. This can be done using tools like https://www.mockaroo.com/.
*The next step is to convert the generated data into a JSON file format.
*The JSON file is then saved for use in the React frontend.
*In the React component, we import the JSON file by assigning it to a variable.

== Testing Plan ==

===Testing From UI ===

* View Course Page
# Go to Manage > Courses.
# It should list the courses with necessary information like created date, instructor and updated date and actions.
# And also show sort and search option on the UI.
# Click on course, it should list the assignments under that course.

* Sort on Course Page
# Go to Manage > Courses.
# Click on any header of courses.( 1 click for ascending and 2 clicks for descending)
# Courses will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# In search bar type any string you want to search.
# It should list the courses that match with given search name.

* Assignments
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.

* Sort on Assignment
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# Click on any header of the assignment.( 1 click for ascending and 2 clicks for descending)
# Assignment will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# In search bar type any string you want to search.
# It should list the assignments that match with given search name.

=== Automated Testing ===

As the changes are only to the UI. There is no backend for this project as now. So, in the current scope we don't need add any test cases. And there are no existing test cases for this project.

==Team==
=====Mentor=====
* Ankur Mundra
* Kartiki Bhandakkar
=====Members=====
* Mithila Reddy Tatigotla, mtatigo
* Vineeth Dasi, vdasi
* Kalyan Karnati, kkarnat

==Relevant Links==

Github Repository: https://github.com/mithila-reddy/reimplementation-front-end

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

File:Search.PNG

2023-04-24T23:59:56Z

Kkarnat:

File:Desc order.PNG

2023-04-24T23:59:03Z

Kkarnat:

File:Asc sort.PNG

2023-04-24T23:58:39Z

Kkarnat:

File:Courses assignments.PNG

2023-04-24T23:57:23Z

Kkarnat:

CSC/ECE 517 Spring 2023 - E2333: Implement Course Component with React

2023-04-24T23:56:57Z

Kkarnat: /* Current Implementation */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on a different projects and assignments and submit their work. They can also review other students' submissions.

==About==

The aim of Program 4 is to create a UI for course.rb using React and create card component for reusability. There are 2 main views we have implemented. They are:

1.course.js 
2. Card Component 
* Card.js
* CardHeader.js
* CardList.js

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG | 1200px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses and assignments in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding using Bootstrap.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== Course.js (Manage Courses) ===

This page serves as the primary interface for Courses to manage course-related information. From this page, users can access other pages such as create Courses, update Courses, and delete Courses. We will be adding the course component, and when click on courses, it will list all courses along with the actions. And search and sort functionality will be implemented.

The Courses component renders the CardList component with the courses and columnKeys props passed to it. The CardList component then maps over the courses array and displays a card for each course. The card displays the course data in a table with the columns defined in the columnKeys array.

Overall, this component displays a table of courses with their details, including institution, creation and update dates, and assignments. It is a simple example of how React components can be used to display dynamic data in a user-friendly way.

=== Card ===

This will be reusable component for both courses and assignments to display the courses and assignments in the UI with respective actions. The card component contains Card, CardHeader, CardList.

==== Card.js ====
This is a React component named "Card", which renders a card with information about a course. It takes a "course" object as a prop, which contains information about the course and an array of "assignments".

The component uses the "useState" hook to manage the state of whether the assignments list should be shown or not. When the card is clicked, the "toggleAssignments" function is called, which toggles the value of "showAssignments" to show or hide the assignments list.

The component then renders the course information using a mapping function over the keys of the "course" object, excluding the "assignments" and "Id" keys. Each value is displayed in a div with a "card-text" class. At the end, a set of icons is displayed representing various actions that can be taken on the course.

If "showAssignments" is true, the component renders a "CardList" component passing the "assignments" array and a set of keys to define the columns of the table.

Overall, this component renders a card that displays course information and provides the ability to show or hide a list of assignments. It also includes icons that represent various actions that can be taken on the course.

==== CardHeader.js ====
This code exports a React component called CardHeader that takes in two props: columnKeys and onSortClick. It uses the useState hook to keep track of the current sorted column and sort direction. The handleSortClick function is called when a column header is clicked, and it either calls the onSortClick prop (if it's passed in) or sets the sort column and direction state variables.

The returned JSX is a Bootstrap card header component with a row of columns that correspond to the columnKeys prop. Each column has a click handler that calls handleSortClick with the column's key as an argument. If the column is currently the sort column, an up or down arrow is displayed next to the column label based on the current sort direction.

==== CardList.js ====
This code is a React component called CardList. It takes in two props: courses and columnKeys. It renders a list of Card components that display information about courses. It also includes a search bar to filter the list of courses, and a CardHeader component that provides sorting functionality for the table columns.

The component uses the useState hook to manage the state of sortOrder and searchTerm. The sortedCourses array is initialized as a copy of the courses prop, and is then sorted based on the sortOrder and sortColumn state values. If sortColumn is not set, then the courses are not sorted. The filteredCourses array is generated by filtering sortedCourses based on whether any of the property values of each course object contain the searchTerm.

The handleSortClick function is called when the CardHeader is clicked, and it updates the sortColumn and sortOrder state values based on the current column being sorted. If the same column is clicked twice, the sortOrder is toggled between ascending and descending.

Finally, the CardList component renders a CardHeader component and a list of Card components. The CardHeader component is passed the columnKeys and handleSortClick function as props, while the Card component is passed a course object as a prop.

== Our Implementation ==

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we have to mock the databases.

*To create a mock database in the reimplementation_front_end GitHub repository, we need to create a JSON file.
*The first step is to generate mock data with a structure similar to that of the actual database. This can be done using tools like https://www.mockaroo.com/.
*The next step is to convert the generated data into a JSON file format.
*The JSON file is then saved for use in the React frontend.
*In the React component, we import the JSON file by assigning it to a variable.

== Testing Plan ==

===Testing From UI ===

* View Course Page
# Go to Manage > Courses.
# It should list the courses with necessary information like created date, instructor and updated date and actions.
# And also show sort and search option on the UI.
# Click on course, it should list the assignments under that course.

* Sort on Course Page
# Go to Manage > Courses.
# Click on any header of courses.( 1 click for ascending and 2 clicks for descending)
# Courses will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# In search bar type any string you want to search.
# It should list the courses that match with given search name.

* Assignments
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.

* Sort on Assignment
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# Click on any header of the assignment.( 1 click for ascending and 2 clicks for descending)
# Assignment will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# In search bar type any string you want to search.
# It should list the assignments that match with given search name.

=== Automated Testing ===

As the changes are only to the UI. There is no backend for this project as now. So, in the current scope we don't need add any test cases. And there are no existing test cases for this project.

==Team==
=====Mentor=====
* Ankur Mundra
* Kartiki Bhandakkar
=====Members=====
* Mithila Reddy Tatigotla, mtatigo
* Vineeth Dasi, vdasi
* Kalyan Karnati, kkarnat

==Relevant Links==

Github Repository: https://github.com/mithila-reddy/reimplementation-front-end

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

File:Courses1.PNG

2023-04-24T23:52:07Z

Kkarnat:

CSC/ECE 517 Spring 2023 - E2333: Implement Course Component with React

2023-04-24T23:23:59Z

Kkarnat:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on a different projects and assignments and submit their work. They can also review other students' submissions.

==About==

The aim of Program 4 is to create a UI for course.rb using React and create card component for reusability. There are 2 main views we have implemented. They are:

1.course.js 
2. Card Component 
* Card.js
* CardHeader.js
* CardList.js

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses and assignments in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding using Bootstrap.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== Course.js (Manage Courses) ===

This page serves as the primary interface for Courses to manage course-related information. From this page, users can access other pages such as create Courses, update Courses, and delete Courses. We will be adding the course component, and when click on courses, it will list all courses along with the actions. And search and sort functionality will be implemented.

The Courses component renders the CardList component with the courses and columnKeys props passed to it. The CardList component then maps over the courses array and displays a card for each course. The card displays the course data in a table with the columns defined in the columnKeys array.

Overall, this component displays a table of courses with their details, including institution, creation and update dates, and assignments. It is a simple example of how React components can be used to display dynamic data in a user-friendly way.

=== Card ===

This will be reusable component for both courses and assignments to display the courses and assignments in the UI with respective actions. The card component contains Card, CardHeader, CardList.

==== Card.js ====
This is a React component named "Card", which renders a card with information about a course. It takes a "course" object as a prop, which contains information about the course and an array of "assignments".

The component uses the "useState" hook to manage the state of whether the assignments list should be shown or not. When the card is clicked, the "toggleAssignments" function is called, which toggles the value of "showAssignments" to show or hide the assignments list.

The component then renders the course information using a mapping function over the keys of the "course" object, excluding the "assignments" and "Id" keys. Each value is displayed in a div with a "card-text" class. At the end, a set of icons is displayed representing various actions that can be taken on the course.

If "showAssignments" is true, the component renders a "CardList" component passing the "assignments" array and a set of keys to define the columns of the table.

Overall, this component renders a card that displays course information and provides the ability to show or hide a list of assignments. It also includes icons that represent various actions that can be taken on the course.

==== CardHeader.js ====
This code exports a React component called CardHeader that takes in two props: columnKeys and onSortClick. It uses the useState hook to keep track of the current sorted column and sort direction. The handleSortClick function is called when a column header is clicked, and it either calls the onSortClick prop (if it's passed in) or sets the sort column and direction state variables.

The returned JSX is a Bootstrap card header component with a row of columns that correspond to the columnKeys prop. Each column has a click handler that calls handleSortClick with the column's key as an argument. If the column is currently the sort column, an up or down arrow is displayed next to the column label based on the current sort direction.

==== CardList.js ====
This code is a React component called CardList. It takes in two props: courses and columnKeys. It renders a list of Card components that display information about courses. It also includes a search bar to filter the list of courses, and a CardHeader component that provides sorting functionality for the table columns.

The component uses the useState hook to manage the state of sortOrder and searchTerm. The sortedCourses array is initialized as a copy of the courses prop, and is then sorted based on the sortOrder and sortColumn state values. If sortColumn is not set, then the courses are not sorted. The filteredCourses array is generated by filtering sortedCourses based on whether any of the property values of each course object contain the searchTerm.

The handleSortClick function is called when the CardHeader is clicked, and it updates the sortColumn and sortOrder state values based on the current column being sorted. If the same column is clicked twice, the sortOrder is toggled between ascending and descending.

Finally, the CardList component renders a CardHeader component and a list of Card components. The CardHeader component is passed the columnKeys and handleSortClick function as props, while the Card component is passed a course object as a prop.

== Our Implementation ==

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we have to mock the databases.

*To create a mock database in the reimplementation_front_end GitHub repository, we need to create a JSON file.
*The first step is to generate mock data with a structure similar to that of the actual database. This can be done using tools like https://www.mockaroo.com/.
*The next step is to convert the generated data into a JSON file format.
*The JSON file is then saved for use in the React frontend.
*In the React component, we import the JSON file by assigning it to a variable.

== Testing Plan ==

===Testing From UI ===

* View Course Page
# Go to Manage > Courses.
# It should list the courses with necessary information like created date, instructor and updated date and actions.
# And also show sort and search option on the UI.
# Click on course, it should list the assignments under that course.

* Sort on Course Page
# Go to Manage > Courses.
# Click on any header of courses.( 1 click for ascending and 2 clicks for descending)
# Courses will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# In search bar type any string you want to search.
# It should list the courses that match with given search name.

* Assignments
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.

* Sort on Assignment
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# Click on any header of the assignment.( 1 click for ascending and 2 clicks for descending)
# Assignment will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# In search bar type any string you want to search.
# It should list the assignments that match with given search name.

=== Automated Testing ===

As the changes are only to the UI. There is no backend for this project as now. So, in the current scope we don't need add any test cases. And there are no existing test cases for this project.

==Team==
=====Mentor=====
* Ankur Mundra
* Kartiki Bhandakkar
=====Members=====
* Mithila Reddy Tatigotla, mtatigo
* Vineeth Dasi, vdasi
* Kalyan Karnati, kkarnat

==Relevant Links==

Github Repository: https://github.com/mithila-reddy/reimplementation-front-end

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

CSC/ECE 517 Spring 2023 - E2333: Implement Course Component with React

2023-04-24T23:23:06Z

Kkarnat: /* Relevant Links */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on a different projects and assignments and submit their work. They can also review other students' submissions.

==About==

The aim of Program 4 is to create a UI for course.rb using React and create card component for reusability. There are 2 main views we have implemented. They are:

1.course.js 
2. Card Component 
* Card.js
* CardHeader.js
* CardList.js

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses and assignments in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding using Bootstrap.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== Course.js (Manage Courses) ===

This page serves as the primary interface for Courses to manage course-related information. From this page, users can access other pages such as create Courses, update Courses, and delete Courses. We will be adding the course component, and when click on courses, it will list all courses along with the actions. And search and sort functionality will be implemented.

The Courses component renders the CardList component with the courses and columnKeys props passed to it. The CardList component then maps over the courses array and displays a card for each course. The card displays the course data in a table with the columns defined in the columnKeys array.

Overall, this component displays a table of courses with their details, including institution, creation and update dates, and assignments. It is a simple example of how React components can be used to display dynamic data in a user-friendly way.

=== Card ===

This will be reusable component for both courses and assignments to display the courses and assignments in the UI with respective actions. The card component contains Card, CardHeader, CardList.

==== Card.js ====
This is a React component named "Card", which renders a card with information about a course. It takes a "course" object as a prop, which contains information about the course and an array of "assignments".

The component uses the "useState" hook to manage the state of whether the assignments list should be shown or not. When the card is clicked, the "toggleAssignments" function is called, which toggles the value of "showAssignments" to show or hide the assignments list.

The component then renders the course information using a mapping function over the keys of the "course" object, excluding the "assignments" and "Id" keys. Each value is displayed in a div with a "card-text" class. At the end, a set of icons is displayed representing various actions that can be taken on the course.

If "showAssignments" is true, the component renders a "CardList" component passing the "assignments" array and a set of keys to define the columns of the table.

Overall, this component renders a card that displays course information and provides the ability to show or hide a list of assignments. It also includes icons that represent various actions that can be taken on the course.

==== CardHeader.js ====
This code exports a React component called CardHeader that takes in two props: columnKeys and onSortClick. It uses the useState hook to keep track of the current sorted column and sort direction. The handleSortClick function is called when a column header is clicked, and it either calls the onSortClick prop (if it's passed in) or sets the sort column and direction state variables.

The returned JSX is a Bootstrap card header component with a row of columns that correspond to the columnKeys prop. Each column has a click handler that calls handleSortClick with the column's key as an argument. If the column is currently the sort column, an up or down arrow is displayed next to the column label based on the current sort direction.

==== CardList.js ====
This code is a React component called CardList. It takes in two props: courses and columnKeys. It renders a list of Card components that display information about courses. It also includes a search bar to filter the list of courses, and a CardHeader component that provides sorting functionality for the table columns.

The component uses the useState hook to manage the state of sortOrder and searchTerm. The sortedCourses array is initialized as a copy of the courses prop, and is then sorted based on the sortOrder and sortColumn state values. If sortColumn is not set, then the courses are not sorted. The filteredCourses array is generated by filtering sortedCourses based on whether any of the property values of each course object contain the searchTerm.

The handleSortClick function is called when the CardHeader is clicked, and it updates the sortColumn and sortOrder state values based on the current column being sorted. If the same column is clicked twice, the sortOrder is toggled between ascending and descending.

Finally, the CardList component renders a CardHeader component and a list of Card components. The CardHeader component is passed the columnKeys and handleSortClick function as props, while the Card component is passed a course object as a prop.

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we have to mock the databases.

*To create a mock database in the reimplementation_front_end GitHub repository, we need to create a JSON file.
*The first step is to generate mock data with a structure similar to that of the actual database. This can be done using tools like https://www.mockaroo.com/.
*The next step is to convert the generated data into a JSON file format.
*The JSON file is then saved for use in the React frontend.
*In the React component, we import the JSON file by assigning it to a variable.

== Testing Plan ==

===Testing From UI ===

* View Course Page
# Go to Manage > Courses.
# It should list the courses with necessary information like created date, instructor and updated date and actions.
# And also show sort and search option on the UI.
# Click on course, it should list the assignments under that course.

* Sort on Course Page
# Go to Manage > Courses.
# Click on any header of courses.( 1 click for ascending and 2 clicks for descending)
# Courses will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# In search bar type any string you want to search.
# It should list the courses that match with given search name.

* Assignments
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.

* Sort on Assignment
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# Click on any header of the assignment.( 1 click for ascending and 2 clicks for descending)
# Assignment will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# In search bar type any string you want to search.
# It should list the assignments that match with given search name.

=== Automated Testing ===

As the changes are only to the UI. There is no backend for this project as now. So, in the current scope we don't need add any test cases. And there are no existing test cases for this project.

==Team==
=====Mentor=====
* Ankur Mundra
* Kartiki Bhandakkar
=====Members=====
* Mithila Reddy Tatigotla, mtatigo
* Vineeth Dasi, vdasi
* Kalyan Karnati, kkarnat

==Relevant Links==

Github Repository: https://github.com/mithila-reddy/reimplementation-front-end

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

CSC/ECE 517 Spring 2023 - E2333: Implement Course Component with React

2023-04-24T23:22:45Z

Kkarnat: /* Testing From UI */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on a different projects and assignments and submit their work. They can also review other students' submissions.

==About==

The aim of Program 4 is to create a UI for course.rb using React and create card component for reusability. There are 2 main views we have implemented. They are:

1.course.js 
2. Card Component 
* Card.js
* CardHeader.js
* CardList.js

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses and assignments in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding using Bootstrap.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== Course.js (Manage Courses) ===

This page serves as the primary interface for Courses to manage course-related information. From this page, users can access other pages such as create Courses, update Courses, and delete Courses. We will be adding the course component, and when click on courses, it will list all courses along with the actions. And search and sort functionality will be implemented.

The Courses component renders the CardList component with the courses and columnKeys props passed to it. The CardList component then maps over the courses array and displays a card for each course. The card displays the course data in a table with the columns defined in the columnKeys array.

Overall, this component displays a table of courses with their details, including institution, creation and update dates, and assignments. It is a simple example of how React components can be used to display dynamic data in a user-friendly way.

=== Card ===

This will be reusable component for both courses and assignments to display the courses and assignments in the UI with respective actions. The card component contains Card, CardHeader, CardList.

==== Card.js ====
This is a React component named "Card", which renders a card with information about a course. It takes a "course" object as a prop, which contains information about the course and an array of "assignments".

The component uses the "useState" hook to manage the state of whether the assignments list should be shown or not. When the card is clicked, the "toggleAssignments" function is called, which toggles the value of "showAssignments" to show or hide the assignments list.

The component then renders the course information using a mapping function over the keys of the "course" object, excluding the "assignments" and "Id" keys. Each value is displayed in a div with a "card-text" class. At the end, a set of icons is displayed representing various actions that can be taken on the course.

If "showAssignments" is true, the component renders a "CardList" component passing the "assignments" array and a set of keys to define the columns of the table.

Overall, this component renders a card that displays course information and provides the ability to show or hide a list of assignments. It also includes icons that represent various actions that can be taken on the course.

==== CardHeader.js ====
This code exports a React component called CardHeader that takes in two props: columnKeys and onSortClick. It uses the useState hook to keep track of the current sorted column and sort direction. The handleSortClick function is called when a column header is clicked, and it either calls the onSortClick prop (if it's passed in) or sets the sort column and direction state variables.

The returned JSX is a Bootstrap card header component with a row of columns that correspond to the columnKeys prop. Each column has a click handler that calls handleSortClick with the column's key as an argument. If the column is currently the sort column, an up or down arrow is displayed next to the column label based on the current sort direction.

==== CardList.js ====
This code is a React component called CardList. It takes in two props: courses and columnKeys. It renders a list of Card components that display information about courses. It also includes a search bar to filter the list of courses, and a CardHeader component that provides sorting functionality for the table columns.

The component uses the useState hook to manage the state of sortOrder and searchTerm. The sortedCourses array is initialized as a copy of the courses prop, and is then sorted based on the sortOrder and sortColumn state values. If sortColumn is not set, then the courses are not sorted. The filteredCourses array is generated by filtering sortedCourses based on whether any of the property values of each course object contain the searchTerm.

The handleSortClick function is called when the CardHeader is clicked, and it updates the sortColumn and sortOrder state values based on the current column being sorted. If the same column is clicked twice, the sortOrder is toggled between ascending and descending.

Finally, the CardList component renders a CardHeader component and a list of Card components. The CardHeader component is passed the columnKeys and handleSortClick function as props, while the Card component is passed a course object as a prop.

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we have to mock the databases.

*To create a mock database in the reimplementation_front_end GitHub repository, we need to create a JSON file.
*The first step is to generate mock data with a structure similar to that of the actual database. This can be done using tools like https://www.mockaroo.com/.
*The next step is to convert the generated data into a JSON file format.
*The JSON file is then saved for use in the React frontend.
*In the React component, we import the JSON file by assigning it to a variable.

== Testing Plan ==

===Testing From UI ===

* View Course Page
# Go to Manage > Courses.
# It should list the courses with necessary information like created date, instructor and updated date and actions.
# And also show sort and search option on the UI.
# Click on course, it should list the assignments under that course.

* Sort on Course Page
# Go to Manage > Courses.
# Click on any header of courses.( 1 click for ascending and 2 clicks for descending)
# Courses will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# In search bar type any string you want to search.
# It should list the courses that match with given search name.

* Assignments
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.

* Sort on Assignment
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# Click on any header of the assignment.( 1 click for ascending and 2 clicks for descending)
# Assignment will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# In search bar type any string you want to search.
# It should list the assignments that match with given search name.

=== Automated Testing ===

As the changes are only to the UI. There is no backend for this project as now. So, in the current scope we don't need add any test cases. And there are no existing test cases for this project.

==Team==
=====Mentor=====
* Ankur Mundra
* Kartiki Bhandakkar
=====Members=====
* Mithila Reddy Tatigotla, mtatigo
* Vineeth Dasi, vdasi
* Kalyan Karnati, kkarnat

==Relevant Links==

#Github Repository: https://github.com/mithila-reddy/reimplementation-front-end

#Pull Request: https://github.com/expertiza/reimplementation-front-end/pull/9

CSC/ECE 517 Spring 2023 - E2333: Implement Course Component with React

2023-04-24T23:22:21Z

Kkarnat: /* Relevant Links */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on a different projects and assignments and submit their work. They can also review other students' submissions.

==About==

The aim of Program 4 is to create a UI for course.rb using React and create card component for reusability. There are 2 main views we have implemented. They are:

1.course.js 
2. Card Component 
* Card.js
* CardHeader.js
* CardList.js

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses and assignments in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding using Bootstrap.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== Course.js (Manage Courses) ===

This page serves as the primary interface for Courses to manage course-related information. From this page, users can access other pages such as create Courses, update Courses, and delete Courses. We will be adding the course component, and when click on courses, it will list all courses along with the actions. And search and sort functionality will be implemented.

The Courses component renders the CardList component with the courses and columnKeys props passed to it. The CardList component then maps over the courses array and displays a card for each course. The card displays the course data in a table with the columns defined in the columnKeys array.

Overall, this component displays a table of courses with their details, including institution, creation and update dates, and assignments. It is a simple example of how React components can be used to display dynamic data in a user-friendly way.

=== Card ===

This will be reusable component for both courses and assignments to display the courses and assignments in the UI with respective actions. The card component contains Card, CardHeader, CardList.

==== Card.js ====
This is a React component named "Card", which renders a card with information about a course. It takes a "course" object as a prop, which contains information about the course and an array of "assignments".

The component uses the "useState" hook to manage the state of whether the assignments list should be shown or not. When the card is clicked, the "toggleAssignments" function is called, which toggles the value of "showAssignments" to show or hide the assignments list.

The component then renders the course information using a mapping function over the keys of the "course" object, excluding the "assignments" and "Id" keys. Each value is displayed in a div with a "card-text" class. At the end, a set of icons is displayed representing various actions that can be taken on the course.

If "showAssignments" is true, the component renders a "CardList" component passing the "assignments" array and a set of keys to define the columns of the table.

Overall, this component renders a card that displays course information and provides the ability to show or hide a list of assignments. It also includes icons that represent various actions that can be taken on the course.

==== CardHeader.js ====
This code exports a React component called CardHeader that takes in two props: columnKeys and onSortClick. It uses the useState hook to keep track of the current sorted column and sort direction. The handleSortClick function is called when a column header is clicked, and it either calls the onSortClick prop (if it's passed in) or sets the sort column and direction state variables.

The returned JSX is a Bootstrap card header component with a row of columns that correspond to the columnKeys prop. Each column has a click handler that calls handleSortClick with the column's key as an argument. If the column is currently the sort column, an up or down arrow is displayed next to the column label based on the current sort direction.

==== CardList.js ====
This code is a React component called CardList. It takes in two props: courses and columnKeys. It renders a list of Card components that display information about courses. It also includes a search bar to filter the list of courses, and a CardHeader component that provides sorting functionality for the table columns.

The component uses the useState hook to manage the state of sortOrder and searchTerm. The sortedCourses array is initialized as a copy of the courses prop, and is then sorted based on the sortOrder and sortColumn state values. If sortColumn is not set, then the courses are not sorted. The filteredCourses array is generated by filtering sortedCourses based on whether any of the property values of each course object contain the searchTerm.

The handleSortClick function is called when the CardHeader is clicked, and it updates the sortColumn and sortOrder state values based on the current column being sorted. If the same column is clicked twice, the sortOrder is toggled between ascending and descending.

Finally, the CardList component renders a CardHeader component and a list of Card components. The CardHeader component is passed the columnKeys and handleSortClick function as props, while the Card component is passed a course object as a prop.

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we have to mock the databases.

*To create a mock database in the reimplementation_front_end GitHub repository, we need to create a JSON file.
*The first step is to generate mock data with a structure similar to that of the actual database. This can be done using tools like https://www.mockaroo.com/.
*The next step is to convert the generated data into a JSON file format.
*The JSON file is then saved for use in the React frontend.
*In the React component, we import the JSON file by assigning it to a variable.

== Testing Plan ==

===Testing From UI ===

* View Course Page
# Go to Manage > Courses.
# It should list the courses with necessary information like created date, instructor and updated date and actions.
# And also show sort and search option on the UI.
# Click on course, it should list the assignments under that course.

* Sort on Course Page
# Go to Manage > Courses.
# Click on any header of courses.( 1 click for ascending and 2 clicks for descending)
# Courses will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# In search bar type any string you want to search.
# It should list the courses that match with given search name.

* Assignments
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.

* Sort on Assignment
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# Click on any header of the assignment.( 1 click for ascending and 2 clicks for descending)
# Assignment will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# In search bar type any string you want to search.
# It should list the assignments that match with given search name.

=== Automated Testing ===

As the changes are only to the UI. There is no backend for this project as now. So, in the current scope we don't need add any test cases. And there are no existing test cases for this project.

==Team==
=====Mentor=====
* Ankur Mundra
* Kartiki Bhandakkar
=====Members=====
* Mithila Reddy Tatigotla, mtatigo
* Vineeth Dasi, vdasi
* Kalyan Karnati, kkarnat

==Relevant Links==

#Github Repository: https://github.com/mithila-reddy/reimplementation-front-end

#Pull Request: https://github.com/expertiza/reimplementation-front-end/pull/9

CSC/ECE 517 Spring 2023 - E2333: Implement Course Component with React

2023-04-24T23:22:00Z

Kkarnat: /* Relevant Links */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on a different projects and assignments and submit their work. They can also review other students' submissions.

==About==

The aim of Program 4 is to create a UI for course.rb using React and create card component for reusability. There are 2 main views we have implemented. They are:

1.course.js 
2. Card Component 
* Card.js
* CardHeader.js
* CardList.js

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses and assignments in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding using Bootstrap.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== Course.js (Manage Courses) ===

This page serves as the primary interface for Courses to manage course-related information. From this page, users can access other pages such as create Courses, update Courses, and delete Courses. We will be adding the course component, and when click on courses, it will list all courses along with the actions. And search and sort functionality will be implemented.

The Courses component renders the CardList component with the courses and columnKeys props passed to it. The CardList component then maps over the courses array and displays a card for each course. The card displays the course data in a table with the columns defined in the columnKeys array.

Overall, this component displays a table of courses with their details, including institution, creation and update dates, and assignments. It is a simple example of how React components can be used to display dynamic data in a user-friendly way.

=== Card ===

This will be reusable component for both courses and assignments to display the courses and assignments in the UI with respective actions. The card component contains Card, CardHeader, CardList.

==== Card.js ====
This is a React component named "Card", which renders a card with information about a course. It takes a "course" object as a prop, which contains information about the course and an array of "assignments".

The component uses the "useState" hook to manage the state of whether the assignments list should be shown or not. When the card is clicked, the "toggleAssignments" function is called, which toggles the value of "showAssignments" to show or hide the assignments list.

The component then renders the course information using a mapping function over the keys of the "course" object, excluding the "assignments" and "Id" keys. Each value is displayed in a div with a "card-text" class. At the end, a set of icons is displayed representing various actions that can be taken on the course.

If "showAssignments" is true, the component renders a "CardList" component passing the "assignments" array and a set of keys to define the columns of the table.

Overall, this component renders a card that displays course information and provides the ability to show or hide a list of assignments. It also includes icons that represent various actions that can be taken on the course.

==== CardHeader.js ====
This code exports a React component called CardHeader that takes in two props: columnKeys and onSortClick. It uses the useState hook to keep track of the current sorted column and sort direction. The handleSortClick function is called when a column header is clicked, and it either calls the onSortClick prop (if it's passed in) or sets the sort column and direction state variables.

The returned JSX is a Bootstrap card header component with a row of columns that correspond to the columnKeys prop. Each column has a click handler that calls handleSortClick with the column's key as an argument. If the column is currently the sort column, an up or down arrow is displayed next to the column label based on the current sort direction.

==== CardList.js ====
This code is a React component called CardList. It takes in two props: courses and columnKeys. It renders a list of Card components that display information about courses. It also includes a search bar to filter the list of courses, and a CardHeader component that provides sorting functionality for the table columns.

The component uses the useState hook to manage the state of sortOrder and searchTerm. The sortedCourses array is initialized as a copy of the courses prop, and is then sorted based on the sortOrder and sortColumn state values. If sortColumn is not set, then the courses are not sorted. The filteredCourses array is generated by filtering sortedCourses based on whether any of the property values of each course object contain the searchTerm.

The handleSortClick function is called when the CardHeader is clicked, and it updates the sortColumn and sortOrder state values based on the current column being sorted. If the same column is clicked twice, the sortOrder is toggled between ascending and descending.

Finally, the CardList component renders a CardHeader component and a list of Card components. The CardHeader component is passed the columnKeys and handleSortClick function as props, while the Card component is passed a course object as a prop.

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we have to mock the databases.

*To create a mock database in the reimplementation_front_end GitHub repository, we need to create a JSON file.
*The first step is to generate mock data with a structure similar to that of the actual database. This can be done using tools like https://www.mockaroo.com/.
*The next step is to convert the generated data into a JSON file format.
*The JSON file is then saved for use in the React frontend.
*In the React component, we import the JSON file by assigning it to a variable.

== Testing Plan ==

===Testing From UI ===

* View Course Page
# Go to Manage > Courses.
# It should list the courses with necessary information like created date, instructor and updated date and actions.
# And also show sort and search option on the UI.
# Click on course, it should list the assignments under that course.

* Sort on Course Page
# Go to Manage > Courses.
# Click on any header of courses.( 1 click for ascending and 2 clicks for descending)
# Courses will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# In search bar type any string you want to search.
# It should list the courses that match with given search name.

* Assignments
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.

* Sort on Assignment
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# Click on any header of the assignment.( 1 click for ascending and 2 clicks for descending)
# Assignment will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# In search bar type any string you want to search.
# It should list the assignments that match with given search name.

=== Automated Testing ===

As the changes are only to the UI. There is no backend for this project as now. So, in the current scope we don't need add any test cases. And there are no existing test cases for this project.

==Team==
=====Mentor=====
* Ankur Mundra
* Kartiki Bhandakkar
=====Members=====
* Mithila Reddy Tatigotla, mtatigo
* Vineeth Dasi, vdasi
* Kalyan Karnati, kkarnat

==Relevant Links==

Github Repository: https://github.com/mithila-reddy/reimplementation-front-end
Pull Request: https://github.com/expertiza/reimplementation-front-end/pull/9

CSC/ECE 517 Spring 2023 - E2333: Implement Course Component with React

2023-04-24T23:21:15Z

Kkarnat: /* Testing From UI */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on a different projects and assignments and submit their work. They can also review other students' submissions.

==About==

The aim of Program 4 is to create a UI for course.rb using React and create card component for reusability. There are 2 main views we have implemented. They are:

1.course.js 
2. Card Component 
* Card.js
* CardHeader.js
* CardList.js

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses and assignments in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding using Bootstrap.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== Course.js (Manage Courses) ===

This page serves as the primary interface for Courses to manage course-related information. From this page, users can access other pages such as create Courses, update Courses, and delete Courses. We will be adding the course component, and when click on courses, it will list all courses along with the actions. And search and sort functionality will be implemented.

The Courses component renders the CardList component with the courses and columnKeys props passed to it. The CardList component then maps over the courses array and displays a card for each course. The card displays the course data in a table with the columns defined in the columnKeys array.

Overall, this component displays a table of courses with their details, including institution, creation and update dates, and assignments. It is a simple example of how React components can be used to display dynamic data in a user-friendly way.

=== Card ===

This will be reusable component for both courses and assignments to display the courses and assignments in the UI with respective actions. The card component contains Card, CardHeader, CardList.

==== Card.js ====
This is a React component named "Card", which renders a card with information about a course. It takes a "course" object as a prop, which contains information about the course and an array of "assignments".

The component uses the "useState" hook to manage the state of whether the assignments list should be shown or not. When the card is clicked, the "toggleAssignments" function is called, which toggles the value of "showAssignments" to show or hide the assignments list.

The component then renders the course information using a mapping function over the keys of the "course" object, excluding the "assignments" and "Id" keys. Each value is displayed in a div with a "card-text" class. At the end, a set of icons is displayed representing various actions that can be taken on the course.

If "showAssignments" is true, the component renders a "CardList" component passing the "assignments" array and a set of keys to define the columns of the table.

Overall, this component renders a card that displays course information and provides the ability to show or hide a list of assignments. It also includes icons that represent various actions that can be taken on the course.

==== CardHeader.js ====
This code exports a React component called CardHeader that takes in two props: columnKeys and onSortClick. It uses the useState hook to keep track of the current sorted column and sort direction. The handleSortClick function is called when a column header is clicked, and it either calls the onSortClick prop (if it's passed in) or sets the sort column and direction state variables.

The returned JSX is a Bootstrap card header component with a row of columns that correspond to the columnKeys prop. Each column has a click handler that calls handleSortClick with the column's key as an argument. If the column is currently the sort column, an up or down arrow is displayed next to the column label based on the current sort direction.

==== CardList.js ====
This code is a React component called CardList. It takes in two props: courses and columnKeys. It renders a list of Card components that display information about courses. It also includes a search bar to filter the list of courses, and a CardHeader component that provides sorting functionality for the table columns.

The component uses the useState hook to manage the state of sortOrder and searchTerm. The sortedCourses array is initialized as a copy of the courses prop, and is then sorted based on the sortOrder and sortColumn state values. If sortColumn is not set, then the courses are not sorted. The filteredCourses array is generated by filtering sortedCourses based on whether any of the property values of each course object contain the searchTerm.

The handleSortClick function is called when the CardHeader is clicked, and it updates the sortColumn and sortOrder state values based on the current column being sorted. If the same column is clicked twice, the sortOrder is toggled between ascending and descending.

Finally, the CardList component renders a CardHeader component and a list of Card components. The CardHeader component is passed the columnKeys and handleSortClick function as props, while the Card component is passed a course object as a prop.

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we have to mock the databases.

*To create a mock database in the reimplementation_front_end GitHub repository, we need to create a JSON file.
*The first step is to generate mock data with a structure similar to that of the actual database. This can be done using tools like https://www.mockaroo.com/.
*The next step is to convert the generated data into a JSON file format.
*The JSON file is then saved for use in the React frontend.
*In the React component, we import the JSON file by assigning it to a variable.

== Testing Plan ==

===Testing From UI ===

* View Course Page
# Go to Manage > Courses.
# It should list the courses with necessary information like created date, instructor and updated date and actions.
# And also show sort and search option on the UI.
# Click on course, it should list the assignments under that course.

* Sort on Course Page
# Go to Manage > Courses.
# Click on any header of courses.( 1 click for ascending and 2 clicks for descending)
# Courses will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# In search bar type any string you want to search.
# It should list the courses that match with given search name.

* Assignments
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.

* Sort on Assignment
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# Click on any header of the assignment.( 1 click for ascending and 2 clicks for descending)
# Assignment will be listed in that sorting order.

* Search on Course Page
# Go to Manage > Courses.
# Click on any course.
# Assignments under the course will be listed.
# In search bar type any string you want to search.
# It should list the assignments that match with given search name.

=== Automated Testing ===

As the changes are only to the UI. There is no backend for this project as now. So, in the current scope we don't need add any test cases. And there are no existing test cases for this project.

==Team==
=====Mentor=====
* Ankur Mundra
* Kartiki Bhandakkar
=====Members=====
* Mithila Reddy Tatigotla, mtatigo
* Vineeth Dasi, vdasi
* Kalyan Karnati, kkarnat

==Relevant Links==

Github Repository: https://github.com/mithila-reddy/reimplementation-front-end

CSC/ECE 517 Spring 2023 - E2333: Implement Course Component with React

2023-04-24T23:13:30Z

Kkarnat: /* Design */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on a different projects and assignments and submit their work. They can also review other students' submissions.

==About==

The aim of Program 4 is to create a UI for course.rb using React and create card component for reusability. There are 2 main views we have implemented. They are:

1.course.js 
2. Card Component 
* Card.js
* CardHeader.js
* CardList.js

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses and assignments in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding using Bootstrap.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== Course.js (Manage Courses) ===

This page serves as the primary interface for Courses to manage course-related information. From this page, users can access other pages such as create Courses, update Courses, and delete Courses. We will be adding the course component, and when click on courses, it will list all courses along with the actions. And search and sort functionality will be implemented.

The Courses component renders the CardList component with the courses and columnKeys props passed to it. The CardList component then maps over the courses array and displays a card for each course. The card displays the course data in a table with the columns defined in the columnKeys array.

Overall, this component displays a table of courses with their details, including institution, creation and update dates, and assignments. It is a simple example of how React components can be used to display dynamic data in a user-friendly way.

=== Card ===

This will be reusable component for both courses and assignments to display the courses and assignments in the UI with respective actions. The card component contains Card, CardHeader, CardList.

==== Card.js ====
This is a React component named "Card", which renders a card with information about a course. It takes a "course" object as a prop, which contains information about the course and an array of "assignments".

The component uses the "useState" hook to manage the state of whether the assignments list should be shown or not. When the card is clicked, the "toggleAssignments" function is called, which toggles the value of "showAssignments" to show or hide the assignments list.

The component then renders the course information using a mapping function over the keys of the "course" object, excluding the "assignments" and "Id" keys. Each value is displayed in a div with a "card-text" class. At the end, a set of icons is displayed representing various actions that can be taken on the course.

If "showAssignments" is true, the component renders a "CardList" component passing the "assignments" array and a set of keys to define the columns of the table.

Overall, this component renders a card that displays course information and provides the ability to show or hide a list of assignments. It also includes icons that represent various actions that can be taken on the course.

==== CardHeader.js ====
This code exports a React component called CardHeader that takes in two props: columnKeys and onSortClick. It uses the useState hook to keep track of the current sorted column and sort direction. The handleSortClick function is called when a column header is clicked, and it either calls the onSortClick prop (if it's passed in) or sets the sort column and direction state variables.

The returned JSX is a Bootstrap card header component with a row of columns that correspond to the columnKeys prop. Each column has a click handler that calls handleSortClick with the column's key as an argument. If the column is currently the sort column, an up or down arrow is displayed next to the column label based on the current sort direction.

==== CardList.js ====
This code is a React component called CardList. It takes in two props: courses and columnKeys. It renders a list of Card components that display information about courses. It also includes a search bar to filter the list of courses, and a CardHeader component that provides sorting functionality for the table columns.

The component uses the useState hook to manage the state of sortOrder and searchTerm. The sortedCourses array is initialized as a copy of the courses prop, and is then sorted based on the sortOrder and sortColumn state values. If sortColumn is not set, then the courses are not sorted. The filteredCourses array is generated by filtering sortedCourses based on whether any of the property values of each course object contain the searchTerm.

The handleSortClick function is called when the CardHeader is clicked, and it updates the sortColumn and sortOrder state values based on the current column being sorted. If the same column is clicked twice, the sortOrder is toggled between ascending and descending.

Finally, the CardList component renders a CardHeader component and a list of Card components. The CardHeader component is passed the columnKeys and handleSortClick function as props, while the Card component is passed a course object as a prop.

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we have to mock the databases.

*To create a mock database in the reimplementation_front_end GitHub repository, we need to create a JSON file.
*The first step is to generate mock data with a structure similar to that of the actual database. This can be done using tools like https://www.mockaroo.com/.
*The next step is to convert the generated data into a JSON file format.
*The JSON file is then saved for use in the React frontend.
*In the React component, we import the JSON file by assigning it to a variable.

== Testing Plan ==

===Testing From UI ===

* View Course Page
# Go to Manage > Courses.
# It should list the courses with necessary information like created date, instructor and updated date and actions.
# And also show sort and search option on the UI.
# Click on course, it should list the assignments under that course.

* Sort on Course Page
# Go to Manage > Courses.
# Click on sort dropdown and select the sorting order.
# Courses will be listed in that order.

* Search on Course Page
# Go to Manage > Courses.
# In search bar, give the name of the course to view.
# It should list the courses that match the course name with given search name.

=== Automated Testing ===

As the changes are only to the UI. There is no backend for this project as now. So, in the current scope we don't need add any test cases. And there are no existing test cases for this project.

==Team==
=====Mentor=====
* Ankur Mundra
* Kartiki Bhandakkar
=====Members=====
* Mithila Reddy Tatigotla, mtatigo
* Vineeth Dasi, vdasi
* Kalyan Karnati, kkarnat

==Relevant Links==

Github Repository: https://github.com/mithila-reddy/reimplementation-front-end

CSC/ECE 517 Spring 2023 - E2333: Implement Course Component with React

2023-04-24T23:04:02Z

Kkarnat: /* Design */

CSC/ECE 517 Spring 2023 - E2333: Implement Course Component with React

2023-04-24T22:55:07Z

Kkarnat: /* Database */

CSC/ECE 517 Sping 2023 - E2333: Implement Course Component with React

2023-04-07T17:22:56Z

Kkarnat: /* Design */

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

==About==

The aim of Program 4 is to create a UI for course.rb using React. There are totally 4 main views to be implemented. They are:

1.course.js 
2.createCourse.js 
3.updateCourse.js 
4.deleteCourse.js 

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add CSS styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== Course.js (Manage Courses) ===

This page serves as the primary interface for Courses to manage course-related information. From this page, users can access other pages such as create Courses, update Courses, and delete Courses.

=== createCourse.js ===

The user can create a new course by entering the username, first name, last name, email address, role, email preferences, and institution details in the pop-up window designed for creating courses.

=== updateCourse.rb ===

Users can modify the information of an already existing course on this page.

=== deleteCourse.rb ===

When the user clicks on the option to delete a course , a pop-up window will appear, prompting the course to confirm the action. If confirmed, the user will be permanently deleted from the records, but only if they are not associated elsewhere to any participants.

==References==

CSC/ECE 517 Sping 2023 - E2333: Implement Course Component with React

2023-04-07T17:20:15Z

Kkarnat: /* About */

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

==About==

The aim of Program 4 is to create a UI for course.rb using React. There are totally 4 main views to be implemented. They are:

1.course.js 
2.createCourse.js 
3.updateCourse.js 
4.deleteCourse.js 

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add CSS styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== participants.js (Manage participants) ===

This page serves as the primary interface for users to manage course-related information. From this page, users can access other pages such as create users, update users, and delete users.

=== createParticipants.js ===

The admin can create a new user by entering the username, first name, last name, email address, role, email preferences, and institution details in the pop-up window designed for creating users.

=== updateParticipants.rb ===

Admins can modify the information of an already existing user on this page.

=== deleteParticpants.rb ===

When the user clicks on the option to delete a user, a pop-up window will appear, prompting the user to confirm the action. If confirmed, the user will be permanently deleted from the records, but only if they are not associated elsewhere as a reviewer, reviewee for another assignment, or team member of a team.

==References==

CSC/ECE 517 Sping 2023 - E2333: Implement Course Component with React

2023-04-07T17:18:48Z

Kkarnat: /* About */

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

==About==

The aim of Program 4 is to create a UI for course.rb using React. There are totally 4 main views to be implemented. They are:

==== course.js ====
==== createCourse.js ====
==== updateCourse.js ====
==== deleteCourse.js ====

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add CSS styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== participants.js (Manage participants) ===

This page serves as the primary interface for users to manage course-related information. From this page, users can access other pages such as create users, update users, and delete users.

=== createParticipants.js ===

The admin can create a new user by entering the username, first name, last name, email address, role, email preferences, and institution details in the pop-up window designed for creating users.

=== updateParticipants.rb ===

Admins can modify the information of an already existing user on this page.

=== deleteParticpants.rb ===

When the user clicks on the option to delete a user, a pop-up window will appear, prompting the user to confirm the action. If confirmed, the user will be permanently deleted from the records, but only if they are not associated elsewhere as a reviewer, reviewee for another assignment, or team member of a team.

==References==

CSC/ECE 517 Sping 2023 - E2333: Implement Course Component with React

2023-04-07T17:16:18Z

Kkarnat:

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

==About==

The aim of Program 4 is to create a UI for course.rb using React. There are totally 4 main views to be implemented. They are:

1. course.js
2. createCourse.js
3. updateCourse.js
4. deleteCourse.js

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add CSS styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

== Design ==

=== participants.js (Manage participants) ===

This page serves as the primary interface for users to manage course-related information. From this page, users can access other pages such as create users, update users, and delete users.

=== createParticipants.js ===

The admin can create a new user by entering the username, first name, last name, email address, role, email preferences, and institution details in the pop-up window designed for creating users.

=== updateParticipants.rb ===

Admins can modify the information of an already existing user on this page.

=== deleteParticpants.rb ===

When the user clicks on the option to delete a user, a pop-up window will appear, prompting the user to confirm the action. If confirmed, the user will be permanently deleted from the records, but only if they are not associated elsewhere as a reviewer, reviewee for another assignment, or team member of a team.

==References==

CSC/ECE 517 Sping 2023 - E2333: Implement Course Component with React

2023-04-07T17:06:44Z

Kkarnat: /* Proposed Solution */

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current Implementation ==

[[File:Courses.PNG| 1000px]]

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

'''Limited styling options''': Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

'''Accessibility issues''': Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

'''Poor performance''': Large tables with many rows and columns can negatively impact page load times and performance.

'''Lack of flexibility''': Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.

== Proposed Solution ==

We propose implementing courses in card structure rather than tables. Implementing a card structure in ReactJS is a common requirement when building modern web applications. Here are the basic steps to implement a card structure in ReactJS:

1.Create a new React component for the card structure, which can be named Course.

2.In the Course component, define the HTML structure for the card using JSX. This will typically include a container div, an image, a title, a description, and any other elements you want to include in the card.

3.Add CSS styles to the Course component to control the appearance of the card, such as the background color, border radius, and padding.

4.Pass data to the Course component as props, which will be used to populate the content of the card.

5.Use the Course component in your React application by importing it and rendering it wherever it is needed.

==References==

CSC/ECE 517 Sping 2023 - E2333: Implement Course Component with React

2023-04-07T17:00:43Z

Kkarnat: /* Current Implementation */

File:Courses.PNG

2023-04-07T16:56:49Z

Kkarnat:

CSC/ECE 517 Sping 2023 - E2322: Refactor Questionnaire View to display Bookmark Rating

2023-03-23T03:22:03Z

Kkarnat: /* Members */

CSC/ECE 517 Sping 2023 - E2322: Refactor Questionnaire View to display Bookmark Rating

2023-03-23T03:21:43Z

Kkarnat: /* Questionnaire Node */

CSC/ECE 517 Sping 2023 - E2322: Refactor Questionnaire View to display Bookmark Rating

2023-03-23T03:21:01Z

Kkarnat: /* Automated Testing with RSpec */

File:Questionnaire node test.jpeg

2023-03-23T03:19:52Z

Kkarnat:

CSC/ECE 517 Sping 2023 - E2322: Refactor Questionnaire View to display Bookmark Rating

2023-03-23T03:18:49Z

Kkarnat: /* Refactoring */

CSC/ECE 517 Sping 2023 - E2322: Refactor Questionnaire View to display Bookmark Rating

2023-03-23T03:14:29Z

Kkarnat: /* Refactoring */

File:Questionnaire node.PNG

2023-03-23T03:01:18Z

Kkarnat: