Expertiza_Wiki - User contributions [en]

Student Task View

2019-09-26T06:45:05Z

Spoudwa: /* Redux */

== Introduction ==

This is the page you land on after you click on any of the tasks listed in the StudentTaskList view. Essentially, this is a page that helps you manage a particular task. It has a timeline with all the deadlines, links to pages for submissions, managing your team for that task, etc.

== Rails ==

The controller responsible for serving requests for this particular component can be found here https://github.com/ashwinrisbood/expertiza/blob/master/app/controllers/api/v1/student_task_controller.rb
The request is handled by the view action found in the code above. This action should return a json to the front-end with all the task related information of the the participant. The json that is rendered by this particular action is as below,

[[File:ViewJson.PNG]]

== Redux ==

The redux action making HTTP axios request to the Rails action specified above can be found under https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/StudentTaskView.js. This action makes a POST request as id as the parameter. The data received from the API is then passed on to the reducers to make changes to the state. The action is as follows,

[[File:OnLoadAction.PNG]]

There are multiple actions that are dispatched that make changes to different attributes of the state. The reducer code for this component can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/reducers/StudentTaskView.js.

== React ==

All React components can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/reducers/StudentTaskView.js. The onLoad redux action is mapped to the component's props and is dispatched whenever the component mounts.

Student Task View

2019-09-26T06:26:52Z

Spoudwa: /* Redux */

Student Task View

2019-09-26T06:08:50Z

Spoudwa: /* Redux */

Student Task View

2019-09-26T06:07:22Z

Spoudwa: /* Redux */

File:OnLoadAction.PNG

2019-09-26T06:06:51Z

Spoudwa:

Student Task View

2019-09-26T06:06:03Z

Spoudwa: /* Redux */

Student Task View

2019-09-26T00:04:35Z

Spoudwa: /* Rails */

File:ViewJson.PNG

2019-09-25T23:31:44Z

Spoudwa: uploaded a new version of "File:ViewJson.PNG"

Student Task View

2019-09-25T23:28:20Z

Spoudwa: /* Rails */

File:ViewJson.PNG

2019-09-25T23:27:54Z

Spoudwa:

Student Task View

2019-09-25T23:17:09Z

Spoudwa: /* Rails */

Student Task View

2019-09-25T23:11:18Z

Spoudwa: /* Introduction */

Student Task View

2019-09-25T22:54:22Z

Spoudwa: /* Introduction */

== Introduction ==

This is the page you land on after you click on any of the tasks listed in the StudentTaskList view. Essentially, this page shows a timeline for a task and shows you your progress according to the timeline. It also has links to pages that help you manage your team, submit your work, etc.

Student Task View

2019-09-25T22:50:24Z

Spoudwa: /* Introduction */

== Introduction ==

This is the page you land on after you click on any of the tasks listed in the StudentTaskList view. Essentially, this is what the page looks like,

[[File:TaskView.PNG]]

File:TaskView.PNG

2019-09-25T22:49:48Z

Spoudwa:

Student Task View

2019-09-25T22:49:14Z

Spoudwa: Created page with "== Introduction == This is the page you land on after you click on any of the tasks listed in the StudentTaskList view. Essentially, this is what the page looks like,"

== Introduction ==

This is the page you land on after you click on any of the tasks listed in the StudentTaskList view. Essentially, this is what the page looks like,

Front-End/Back-End

2019-09-25T22:39:04Z

Spoudwa:

* [[Architecture and setup]]

* [[Login Component]]

* [[Student Tasks Component]]

* [[Profile Component]]

* [[Student Task View]]

Profile Component

2019-09-05T08:14:41Z

Spoudwa: /* Rails */

== Rails ==

The code for the new Profile controller can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/Profile.js. The controller has an index and an update action for the corresponding get and put HTTP requests. When the profile component loads in react, axios call is made to the index action in the back-end for fetching the profile of the student who has logged in.

[[File:ProfileIndex.PNG]]

The update action is as follows,

[[File:ProfileUpdate.PNG]]

== Redux ==

The redux actions for the Profile component can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/Profile.js. To fetch the current profile of the user axios get request is made to the Profile controller. The response is then passed on to the reducer to make changes to the state of the application. If any updates are made to the profile, the changes are passed on to the back-end using HTTP put request. Following is the code for both these actions,

[[File:fetchProfile.PNG]]

[[File:editProfile.PNG]]

The reducer for this component can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/reducers/Profile.js.

Profile Component

2019-09-05T08:03:47Z

Spoudwa: /* Redux */

== Rails ==

The code for the new Profile controller can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/Profile.js. The controller has an index and update actions for the corresponding get and put HTTP requests. When the profile component loads in react, axios call is made to the index action in the back-end for fetching the profile of the student who has logged in.

[[File:ProfileIndex.PNG]]

The update action is as follows,

[[File:ProfileUpdate.PNG]]

== Redux ==

The redux actions for the Profile component can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/Profile.js. To fetch the current profile of the user axios get request is made to the Profile controller. The response is then passed on to the reducer to make changes to the state of the application. If any updates are made to the profile, the changes are passed on to the back-end using HTTP put request. Following is the code for both these actions,

[[File:fetchProfile.PNG]]

[[File:editProfile.PNG]]

The reducer for this component can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/reducers/Profile.js.

Profile Component

2019-09-05T08:01:08Z

Spoudwa: /* Redux */

== Rails ==

The code for the new Profile controller can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/Profile.js. The controller has an index and update actions for the corresponding get and put HTTP requests. When the profile component loads in react, axios call is made to the index action in the back-end for fetching the profile of the student who has logged in.

[[File:ProfileIndex.PNG]]

The update action is as follows,

[[File:ProfileUpdate.PNG]]

== Redux ==

The redux actions for the Profile component can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/Profile.js. To fetch the current profile of the user axios get request is made to the Profile controller. The response is then passed on to the reducer to make changes to the state of the application. If any updates are made to the profile, the changes are passed on to the back-end using HTTP put request. Following is the code for both these actions,

[[File:fetchProfile.PNG]]

[[File:editProfile.PNG]]

File:EditProfile.PNG

2019-09-05T08:00:26Z

Spoudwa:

File:FetchProfile.PNG

2019-09-05T08:00:15Z

Spoudwa:

Profile Component

2019-09-05T07:55:03Z

Spoudwa: /* Redux */

== Rails ==

The code for the new Profile controller can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/Profile.js. The controller has an index and update actions for the corresponding get and put HTTP requests. When the profile component loads in react, axios call is made to the index action in the back-end for fetching the profile of the student who has logged in.

[[File:ProfileIndex.PNG]]

The update action is as follows,

[[File:ProfileUpdate.PNG]]

== Redux ==

The redux actions for the Profile component can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/Profile.js. To fetch the current profile of the user axios get request is made to the Profile controller. The response is then passed on to the reducer to make changes to the state of the application. If any updates are made to the profile, the changes are passed on to the back-end using HTTP put request. Following is the code for both these actions,

Profile Component

2019-09-05T07:54:23Z

Spoudwa: /* Rails */

== Rails ==

The code for the new Profile controller can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/Profile.js. The controller has an index and update actions for the corresponding get and put HTTP requests. When the profile component loads in react, axios call is made to the index action in the back-end for fetching the profile of the student who has logged in.

[[File:ProfileIndex.PNG]]

The update action is as follows,

[[File:ProfileUpdate.PNG]]

== Redux ==

The redux axtions for the Profile component can be found here expertiza/client/src/redux/actions/Profile.js. To fetch the current profile of the user axios get request is made to the Profile controller. The response is then passed on to the reducer to make changes to the state of the application. If any updates are made to the profile, the changes are passed on to the back-end using HTTP put request. Following is the code for both these actions,

Profile Component

2019-09-05T06:37:29Z

Spoudwa: /* Rails */

File:ProfileUpdate.PNG

2019-09-05T06:36:51Z

Spoudwa:

Profile Component

2019-09-05T06:36:36Z

Spoudwa: /* Rails */

Profile Component

2019-09-05T06:09:32Z

Spoudwa: /* Rails */

File:ProfileIndex.PNG

2019-09-05T06:09:05Z

Spoudwa:

Profile Component

2019-09-05T05:40:23Z

Spoudwa: /* Rails */

Profile Component

2019-09-05T05:38:10Z

Spoudwa: Created page with "== Rails == The code for the new Profile controller can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/Profile.js."

== Rails ==

The code for the new Profile controller can be found here https://github.com/ashwinrisbood/expertiza/blob/master/client/src/redux/actions/Profile.js.

Front-End/Back-End

2019-09-05T05:29:41Z

Spoudwa:

* [[Architecture and setup]]

* [[Login Component]]

* [[Student Tasks Component]]

* [[Profile Component]]

Student Tasks Component

2019-08-21T20:24:26Z

Spoudwa: /* Introduction */

== Introduction ==

After a student logs into Expertiza, the page that a student lands up on is the student tasks list, which as the name suggests lists the tasks the student has. The controller we are concerned with for procuring a list of such tasks is the student_task_controller.rb, which has a method called list which will provide us with a JSON object listing all the tasks.

== Rails ==

The logic from the original student_task_controller.rb controller and expertiza/app/views/student_task/list.html.erb view is replicated to our new API only controller. The list method in our new controller api/v1/student_task_controller.rb renders a JSON which consists of things shown in the picture below,

[[File:Student_task_list.PNG]]

The JSON contents student_task_to_json, tasks_to_json and revisions_to_json are composed of the following things,

[[File:Student_task_to_json.PNG]]

[[File:Tasks_to_json.PNG]]

[[File:Revisions_to_json.PNG]]

== Redux ==

The redux actions for StudentTaskList component can be found in client/src/redux/actions/StudentTaskList.js. Here axios call is made to the student_task_controller's list action. The response that is received is passed on to the appropriate reducers for making changes to the state. Following is the code for how the request is made and what is done with the received response.

[[File:student_task_list_redux_action.PNG]]

The reducer for the same can be found under expertiza/client/src/redux/reducers/StudentTaskList.js. The response that is received from the back-end has the following data which is present as different data structures depending upon how the json was formulated in the back-end,

<ul>
<li>studentsTeamedWith</li>
<li>studentTasks</li>
<li>teamCourse</li>
<li>tasks_not_started</li>
<li>taskRevisions</li>
<li>hasTopics</li>
<li>hasBadges</li>
</ul>

In the reducer, depending upon the action, which is determined by the response data received, following changes are appended to the state of the client application,

[[File:student_task_list_reducer.PNG]]

== React ==

The state data is passed to studentList react component as props from the main component. This is the code you will find in the main component,

[[File:routeToList.PNG]]

In the StudentList React component, which is found under client/src/components/studentList/StudentList.js, the props received are mapped to the component state and the page is populated accordingly.

Student Tasks Component

2019-08-21T07:22:32Z

Spoudwa: /* React */

== Introduction ==

After a student logs into Expertiza, the page that the student lands up on is the student tasks list, which as the name suggests lists the tasks the student has. The controller we are concerned with for procuring a list of such tasks is the student_task_controller.rb, which has a method called list which will provide us with a JSON object listing all the tasks.

== Rails ==

The logic from the original student_task_controller.rb controller and expertiza/app/views/student_task/list.html.erb view is replicated to our new API only controller. The list method in our new controller api/v1/student_task_controller.rb renders a JSON which consists of things shown in the picture below,

[[File:Student_task_list.PNG]]

The JSON contents student_task_to_json, tasks_to_json and revisions_to_json are composed of the following things,

[[File:Student_task_to_json.PNG]]

[[File:Tasks_to_json.PNG]]

[[File:Revisions_to_json.PNG]]

== Redux ==

The redux actions for StudentTaskList component can be found in client/src/redux/actions/StudentTaskList.js. Here axios call is made to the student_task_controller's list action. The response that is received is passed on to the appropriate reducers for making changes to the state. Following is the code for how the request is made and what is done with the received response.

[[File:student_task_list_redux_action.PNG]]

The reducer for the same can be found under expertiza/client/src/redux/reducers/StudentTaskList.js. The response that is received from the back-end has the following data which is present as different data structures depending upon how the json was formulated in the back-end,

<ul>
<li>studentsTeamedWith</li>
<li>studentTasks</li>
<li>teamCourse</li>
<li>tasks_not_started</li>
<li>taskRevisions</li>
<li>hasTopics</li>
<li>hasBadges</li>
</ul>

In the reducer, depending upon the action, which is determined by the response data received, following changes are appended to the state of the client application,

[[File:student_task_list_reducer.PNG]]

== React ==

The state data is passed to studentList react component as props from the main component. This is the code you will find in the main component,

[[File:routeToList.PNG]]

In the StudentList React component, which is found under client/src/components/studentList/StudentList.js, the props received are mapped to the component state and the page is populated accordingly.

Student Tasks Component

2019-08-21T07:18:55Z

Spoudwa: /* React */

File:RouteToList.PNG

2019-08-21T07:18:13Z

Spoudwa:

Student Tasks Component

2019-08-21T07:17:45Z

Spoudwa: /* React */

Student Tasks Component

2019-08-21T06:32:17Z

Spoudwa: /* Redux */

File:Student task list reducer.PNG

2019-08-21T06:31:44Z

Spoudwa:

Student Tasks Component

2019-08-21T06:31:10Z

Spoudwa: /* Redux */

Student Tasks Component

2019-08-21T06:27:17Z

Spoudwa: /* Redux */

Student Tasks Component

2019-08-21T06:25:36Z

Spoudwa: /* Redux */

Student Tasks Component

2019-08-21T06:24:09Z

Spoudwa: /* Redux */

Student Tasks Component

2019-08-21T06:23:36Z

Spoudwa: /* Redux */

Student Tasks Component

2019-08-21T06:12:38Z

Spoudwa: /* Redux */

File:Student task list redux action.PNG

2019-08-21T06:12:03Z

Spoudwa:

Student Tasks Component

2019-08-21T06:11:13Z

Spoudwa: /* Redux */

Student Tasks Component

2019-08-21T06:10:49Z

Spoudwa: /* Redux */

Student Tasks Component

2019-08-05T07:40:05Z

Spoudwa: /* Redux */

Student Tasks Component

2019-08-05T06:11:17Z

Spoudwa: /* Rails */