Expertiza_Wiki - User contributions [en]

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

2023-04-30T23:15:00Z

Mtatigo: /* 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 - The course 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.

2. Card Component 
* Card.js - The "Card" React component renders a card with course information and an option to show/hide the assignments list, including icons for actions that can be taken on the courses and assignments.
* CardHeader.js - The "CardHeader" React component renders a Bootstrap card header with clickable columns that can be sorted based on columnKeys prop and the onSortClick function.
* CardList.js - The "CardList" React component renders a list of Card components displaying course information, with sorting and filtering functionality.

== 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 - The view of courses list on expertiza. ===

[[File:Course-View.png | 1200px]]

=== Ascending Sort of Courses - Sorting the courses based on the course name in Ascending order. ===

[[File:Asc-sort-courses.png |1200px]]

=== Descending Sort of Courses - Sorting the courses based on the course name in Descending order. ===

[[File:Des-sort-courses.png |1200px]]

=== Global Search for Courses - The search results based on the Eng===

[[File:Search-courses.png | 1200px]]

=== Assignments Under Courses - The view of the assignments list under course on UI. ===

[[File:Assignments-View.png |1200px]]

=== Ascending Sort of Assignments - Sorting the assignments based on the assignment name in Ascending order. ===

[[File:Asc-sort-Assignments.png |1200px]]

=== Descending Sort of Assignments - Sorting the assignments based on the assignment name in Descending order. ===

[[File:Des-sort-Assignments.png |1200px]]

=== Global Search for Assignments - The search results based on the 2022-01-3===

[[File:Search-assignments.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

Deployment link: http://152.7.177.191:3000/

Youtube link: https://youtu.be/ZAZkJBvP_M4

File:Search-courses.png

2023-04-30T23:09:23Z

Mtatigo:

File:Search-assignments.png

2023-04-30T23:09:00Z

Mtatigo:

File:Des-sort-courses.png

2023-04-30T23:08:44Z

Mtatigo:

File:Des-sort-Assignments.png

2023-04-30T23:08:23Z

Mtatigo:

File:Asc-sort-courses.png

2023-04-30T23:08:03Z

Mtatigo:

File:Asc-sort-Assignments.png

2023-04-30T23:07:45Z

Mtatigo:

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

2023-04-30T23:03:31Z

Mtatigo: /* Assignments Under Courses - The view of the assignments list of that course on 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 - The course 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.

2. Card Component 
* Card.js - The "Card" React component renders a card with course information and an option to show/hide the assignments list, including icons for actions that can be taken on the courses and assignments.
* CardHeader.js - The "CardHeader" React component renders a Bootstrap card header with clickable columns that can be sorted based on columnKeys prop and the onSortClick function.
* CardList.js - The "CardList" React component renders a list of Card components displaying course information, with sorting and filtering functionality.

== 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 - The view of courses list on expertiza. ===

[[File:Course-View.png | 1200px]]

=== Assignments Under Courses - The view of the assignments list under course on UI. ===

[[File:Assignments-View.png |1200px]]

=== Ascending Sort of Courses - Sorting the courses based on the course name in Ascending order. ===

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

=== Descending Sort of Course - Sorting the courses based on the course name in Descending order. ===

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

=== Global Search - The search results based on the unvie===

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

Deployment link: http://152.7.177.191:3000/

Youtube link: https://youtu.be/ZAZkJBvP_M4

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

2023-04-30T23:03:06Z

Mtatigo: /* Assignments Under Courses - The view of the assignments list of that course on 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 - The course 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.

2. Card Component 
* Card.js - The "Card" React component renders a card with course information and an option to show/hide the assignments list, including icons for actions that can be taken on the courses and assignments.
* CardHeader.js - The "CardHeader" React component renders a Bootstrap card header with clickable columns that can be sorted based on columnKeys prop and the onSortClick function.
* CardList.js - The "CardList" React component renders a list of Card components displaying course information, with sorting and filtering functionality.

== 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 - The view of courses list on expertiza. ===

[[File:Course-View.png | 1200px]]

=== Assignments Under Courses - The view of the assignments list of that course on UI. ===

[[File:Assignments-View.png |1200px]]

=== Ascending Sort of Courses - Sorting the courses based on the course name in Ascending order. ===

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

=== Descending Sort of Course - Sorting the courses based on the course name in Descending order. ===

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

=== Global Search - The search results based on the unvie===

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

Deployment link: http://152.7.177.191:3000/

Youtube link: https://youtu.be/ZAZkJBvP_M4

File:Assignments-View.png

2023-04-30T23:02:04Z

Mtatigo:

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

2023-04-30T23:00:39Z

Mtatigo: /* 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 - The course 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.

2. Card Component 
* Card.js - The "Card" React component renders a card with course information and an option to show/hide the assignments list, including icons for actions that can be taken on the courses and assignments.
* CardHeader.js - The "CardHeader" React component renders a Bootstrap card header with clickable columns that can be sorted based on columnKeys prop and the onSortClick function.
* CardList.js - The "CardList" React component renders a list of Card components displaying course information, with sorting and filtering functionality.

== 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 - The view of courses list on expertiza. ===

[[File:Course-View.png | 1200px]]

=== Assignments Under Courses - The view of the assignments list of that course on UI. ===

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

=== Ascending Sort of Courses - Sorting the courses based on the course name in Ascending order. ===

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

=== Descending Sort of Course - Sorting the courses based on the course name in Descending order. ===

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

=== Global Search - The search results based on the unvie===

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

Deployment link: http://152.7.177.191:3000/

Youtube link: https://youtu.be/ZAZkJBvP_M4

File:Course-View.png

2023-04-30T22:59:34Z

Mtatigo:

File:Course-List-View.png

2023-04-30T22:57:33Z

Mtatigo: Mtatigo uploaded a new version of File:Course-List-View.png

File:Course-List-View.png

2023-04-30T22:55:50Z

Mtatigo: Mtatigo uploaded a new version of File:Course-List-View.png

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

2023-04-30T22:53:59Z

Mtatigo: /* Courses Page - The view of courses list on expertiza. */

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

2. Card Component 
* Card.js - The "Card" React component renders a card with course information and an option to show/hide the assignments list, including icons for actions that can be taken on the courses and assignments.
* CardHeader.js - The "CardHeader" React component renders a Bootstrap card header with clickable columns that can be sorted based on columnKeys prop and the onSortClick function.
* CardList.js - The "CardList" React component renders a list of Card components displaying course information, with sorting and filtering functionality.

== 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 - The view of courses list on expertiza. ===

[[File:Course-List-View.png | 1150px]]

=== Assignments Under Courses - The view of the assignments list of that course on UI. ===

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

=== Ascending Sort of Courses - Sorting the courses based on the course name in Ascending order. ===

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

=== Descending Sort of Course - Sorting the courses based on the course name in Descending order. ===

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

=== Global Search - The search results based on the unvie===

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

Deployment link: http://152.7.177.191:3000/

Youtube link: https://youtu.be/ZAZkJBvP_M4

File:Course-List-View.png

2023-04-30T22:51:38Z

Mtatigo:

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

2023-04-30T22:43:01Z

Mtatigo: /* About */

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

2. Card Component 
* Card.js - The "Card" React component renders a card with course information and an option to show/hide the assignments list, including icons for actions that can be taken on the courses and assignments.
* CardHeader.js - The "CardHeader" React component renders a Bootstrap card header with clickable columns that can be sorted based on columnKeys prop and the onSortClick function.
* CardList.js - The "CardList" React component renders a list of Card components displaying course information, with sorting and filtering functionality.

== 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 - The view of courses list on expertiza. ===

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

=== Assignments Under Courses - The view of the assignments list of that course on UI. ===

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

=== Ascending Sort of Courses - Sorting the courses based on the course name in Ascending order. ===

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

=== Descending Sort of Course - Sorting the courses based on the course name in Descending order. ===

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

=== Global Search - The search results based on the unvie===

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

Deployment link: http://152.7.177.191:3000/

Youtube link: https://youtu.be/ZAZkJBvP_M4

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

2023-04-30T21:44:45Z

Mtatigo: /* 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 - The course 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.
2. Card Component 
* Card.js - The "Card" React component renders a card with course information and an option to show/hide the assignments list, including icons for actions that can be taken on the courses and assignments.
* CardHeader.js - The "CardHeader" React component renders a Bootstrap card header with clickable columns that can be sorted based on columnKeys prop and the onSortClick function.
* CardList.js - The "CardList" React component renders a list of Card components displaying course information, with sorting and filtering functionality.

== 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 - The view of courses list on expertiza. ===

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

=== Assignments Under Courses - The view of the assignments list of that course on UI. ===

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

=== Ascending Sort of Courses - Sorting the courses based on the course name in Ascending order. ===

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

=== Descending Sort of Course - Sorting the courses based on the course name in Descending order. ===

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

=== Global Search - The search results based on the unvie===

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

Deployment link: http://152.7.177.191:3000/

Youtube link: https://youtu.be/ZAZkJBvP_M4

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

2023-04-30T21:41:57Z

Mtatigo: /* 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 - The course 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.
2. Card Component 
* Card.js - The "Card" React component renders a card with course information and an option to show/hide the assignments list, including icons for actions that can be taken on the courses and assignments.
* CardHeader.js - The "CardHeader" React component renders a Bootstrap card header with clickable columns that can be sorted based on columnKeys prop and the onSortClick function.
* CardList.js - The "CardList" React component renders a list of Card components displaying course information, with sorting and filtering functionality.

== 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 - The view of courses list on expertiza. ===

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

=== Assignments Under Courses - The view of the assignments list of that course on UI. ===

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

=== Ascending Sort of Courses - Sorting the courses based on the in Ascending order. ===

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

=== Descending Sort of Course - Sorting the courses based on the in Ascending order. ===

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

=== Global Search - The search results based on the ===

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

Deployment link: http://152.7.177.191:3000/

Youtube link: https://youtu.be/ZAZkJBvP_M4

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

2023-04-30T21:31:50Z

Mtatigo:

==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 - The course 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.
2. Card Component 
* Card.js - The "Card" React component renders a card with course information and an option to show/hide the assignments list, including icons for actions that can be taken on the courses and assignments.
* CardHeader.js - The "CardHeader" React component renders a Bootstrap card header with clickable columns that can be sorted based on columnKeys prop and the onSortClick function.
* CardList.js - The "CardList" React component renders a list of Card components displaying course information, with sorting and filtering functionality.

== 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 === - The view of courses list on expertiza.

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

=== Assignments Under Courses === - The view of the assignments list of that course on UI.

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

=== Ascending Sort of Courses === - Sorting the courses based on the in Ascending order.

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

=== Descending Sort of Course === - Sorting the courses based on the in Ascending order.

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

=== Global Search === - The search results based on the

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

Deployment link: http://152.7.177.191:3000/

Youtube link: https://youtu.be/ZAZkJBvP_M4

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

2023-04-25T01:32:02Z

Mtatigo: /* 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 | 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

Deployment link: http://152.7.177.191:3000/

Youtube link: https://youtu.be/ZAZkJBvP_M4

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

2023-04-24T22:58:28Z

Mtatigo: /* Card */

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

2023-04-24T22:47:15Z

Mtatigo: /* Design */

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

2023-04-24T22:44:38Z

Mtatigo: /* About */

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

2023-04-13T01:30:28Z

Mtatigo: /* Design */

File:Assignments-list.png

2023-04-13T01:28:33Z

Mtatigo:

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

2023-04-13T01:28:06Z

Mtatigo: /* Design */

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

2023-04-13T01:27:11Z

Mtatigo: /* Design */

File:Courses-list.png

2023-04-13T01:25:37Z

Mtatigo:

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

2023-04-13T01:24:44Z

Mtatigo: /* Design */

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

2023-04-13T01:18:45Z

Mtatigo: /* Assignment.js */

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

2023-04-13T01:17:12Z

Mtatigo: /* Course.js (Manage Courses) */

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

2023-04-13T01:15:27Z

Mtatigo: /* Test Plan */

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

2023-04-08T01:07:36Z

Mtatigo:

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

2023-04-08T01:02:12Z

Mtatigo: /* Database */

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

2023-04-08T01:00:08Z

Mtatigo: /* card */

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

2023-04-08T00:59:26Z

Mtatigo: /* Assignment.js */

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

2023-04-08T00:57:15Z

Mtatigo: /* Expertiza */

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

2023-04-08T00:53:48Z

Mtatigo: Blanked the page

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

2023-04-08T00:52:42Z

Mtatigo: Created page with "==Expertiza== Expertiza is a Ruby on Rails based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later..."

==Expertiza==
Expertiza is a 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 to be implemented. They are:

1.course.js 
2.assignments.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.

=== Assignment.js ===

This page serves as the primary interface for Assignments to manage assignment-related information. From this page, users can check the deadline for assignment, can create a new Assignment.

=== card ===

This will be reusable component for both courses and assignments to display the courses and assignments in the UI with respective actions.

== Database ==

Currently in the reimplementation_front_end Github repo do not have database. So, we have to generate dummy data in the JSON file. We will be using this file to populate information on the UI.

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

==References==

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

2023-04-07T19:33:28Z

Mtatigo:

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

2023-04-05T03:23:32Z

Mtatigo: Created page with "==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 assi..."

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

== Proposed Solution ==

==References==

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

2023-03-27T19:50:38Z

Mtatigo: /* Design Pattern */

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

2023-03-27T19:47:37Z

Mtatigo:

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

2023-03-22T04:03:19Z

Mtatigo: /* Testing From UI */

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

2023-03-22T03:43:29Z

Mtatigo:

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

2023-03-20T05:20:40Z

Mtatigo: /* Bookmarks Controller */

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

2023-03-20T01:45:55Z

Mtatigo:

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

2023-03-20T01:45:05Z

Mtatigo:

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

2023-03-20T01:27:13Z

Mtatigo: /* Test Plan */