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

From Expertiza_Wiki
Jump to navigation Jump to search

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

  • It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.
  • 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.
  • React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too.
  • 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.
  • It ensures readability and makes maintainability easier.
  • It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.

Current Implementation

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.

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

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

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

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

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

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

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

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
  1. Go to Manage > Courses.
  2. It should list the courses with necessary information like created date, instructor and updated date and actions.
  3. And also show sort and search option on the UI.
  4. Click on course, it should list the assignments under that course.
  • Sort on Course Page
  1. Go to Manage > Courses.
  2. Click on any header of courses.( 1 click for ascending and 2 clicks for descending)
  3. Courses will be listed in that sorting order.
  • Search on Course Page
  1. Go to Manage > Courses.
  2. In search bar type any string you want to search.
  3. It should list the courses that match with given search name.
  • Assignments
  1. Go to Manage > Courses.
  2. Click on any course.
  3. Assignments under the course will be listed.
  • Sort on Assignment
  1. Go to Manage > Courses.
  2. Click on any course.
  3. Assignments under the course will be listed.
  4. Click on any header of the assignment.( 1 click for ascending and 2 clicks for descending)
  5. Assignment will be listed in that sorting order.
  • Search on Course Page
  1. Go to Manage > Courses.
  2. Click on any course.
  3. Assignments under the course will be listed.
  4. In search bar type any string you want to search.
  5. 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

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2023_-_E2333:_Implement_Course_Component_with_React&oldid=150309"