andreweinkoetz / high5-learning-frontend Goto Github PK

As you can see the upper boxes are wider than the exercise boxes

Line Chart to display number of submissions per date on extra paper.

I found this library suitable for this task:
https://www.npmjs.com/package/react-linechart#isdate

Taken from description of exercise 3:

The web application is considered to be finished if it supports at least four distinct use cases which are specific to your business model. Furthermore, in addition to those use cases, your web application has to:

• provide basic error handling and user notifications

Currently we do not notify the user in an appropriate way. Sometimes we just log the error or call alert() - this is not user-friendly and not informative. I suggest that we build upon the error component that was introduced by @HmG248 a new more generic component that is called when one of the service calls fails. Here is an example:

Component: ClassListView
Method: componentWillMount
Service call: UserService

ClassService.getClassesOfUser().then((data) => {
            this.setState({
                classes: [...data],
                loading: false
            });
        }).catch((e) => {
            console.error(e);
        });

Suggestion:

1. Add error to state:

error : {
                fired: false,
                errorCode: 0,
                errorMsg: ''
            },

2. If error occured, setState in catch-block

ClassService.getClassesOfUser().then((data) => {
            this.setState({
                classes: [...data],
                loading: false
            });
        }).catch((e) => {
            this.setState({error: {fired: true, errorCode: e.Code, errorMsg: e.Msg}});
        });

3. Check the error state make the generic ErrorComponent visible:

<ErrorComponent
                    visible={this.state.error.fired}
                    error={this.state.error}
                    closeDialog={()=>{this.setState(
                        {error:
                                {
                                    fired:false,
                                    errorCode:0,
                                    errorMsg:''
                                }
                        })
                    }}
                />

4. The error component can use the error object to display an informative message to the user:
   

Create a modal dialog for a user's first login with all getting-started tips

Just 4 fun if we have time left

Routes have to be created for each separate component to be rendered. In order to achieve separation between authenticated users and visitors, we have to check if the jwt is set. Additionally, we have to check if the current user is a teacher or a student.

Here I would like to discuss with you how the ExerciseChoices Component with the wrapped ExerciseFrame Component should look like.

The homework component is responsible for displaying a single homework in a class, as a class contains many homework, also a wrapping list component is needed.

Background color --> maybe border coloring
More modern design

Create a service class to communicate with REST backend. Using HttpService is mandatory

Please use for all possible errors the "notification" component instead of logging it:

;-)

remove imports and components from react-md and replace them with the material-ui design templates and components

Student shall have an overview if he/she has submitted the homework already.

Design: Icons

We should not render all modals instantly but only when the modal is called.

Like:

const modal = this.state.visible ? <Modal /> : null;

render() {
   return (
      {modal}
   );
}

Registering to a class (as a student) works fine, clicking on the gotoclass url link directly from myclasses creates an endless loop of redirecting to each other.

I think this is because we are already member of the class, so we get redirected to myclasses somehow.

Create a service class to communicate with REST backend. Using HttpService is mandatory

@ALL please fix the warnings in your components - additionally please remove your console.log statements before committing as it makes it very hard to differentiate between your logging statements and your own.

Especially for warnings like Line136: Please make sure to use '===' and if it's not working check out why instead of simply using the non-strict variant '=='.

A view is needed to display the list of exercises representing the homework itself.

New component for "my Profile" needed

User should be only able to update his/her password.
The username shall be displayed but not changeable.

Another lessons learned here. The view components are required to display the content e.g. a list of classes. Generally, this will not require any additional wrapper, but in the case of using async REST calls, the reply of the server will not arrive before rendering the content. Therefore, a second component is needed to wrap the content in order to show some sort of "loading screen" message until the data arrives from the server.

We use the type of the currently logged in user to decide wether or not we show the cancel and submit button. This is achieved by saving the type of the user in state - although the type of the current user can be easily identified by calling UserService.isTeacher(), which simply checks the token instead of calling the backend.

Like notifications in apps (iOS-style)

In the component ClassDetailView the field "assignedClass" is not set.
Do we need this, as it is not required by the HomeworkModel.

And extend success

At the moment the component HomeworkDetailView has a lot of functionality:
(doing homework/ display of one homework/ display of statistics)

• student/doing homework: student sees the exercise list and can do the exercises

• student/homework submitted: after submission the student should not be able to fill out again and should see the submitted solution

• teacher/homework: teacher can see all statistics and individual ones

Do you think it is a good idea to split the HomeworkDetailView in a StatisticsView (teacher and student) and a HomeworkDetailView (only student doing homework)?

This code snipplet will be used literally everywhere. I think a small js function providing this functionality would be good to support seperation by concern. At least, I will provide the code to copy paste it everywhere to do this check.

Just 4 fun if we have any time left

Our Team: using our photos to provide more content down here.
What we offer: either small icons for every list item or other little features to make this section more unique.

Do we have any global solution to switch the port of the frontend yet?

I have switched the backend now to port 3010 (see backend config.js). This means the problem is now solved, but still, just wondering if we have found any global solution for the frontend?

After selecting a specific class, the user will be redirected to the detail page of the class. Here a list of homework is displayed using different stylings depending on the user type

The username should be an email address instead of a nickname. An email is always by nature unique and makes it easier for the teacher to find its students on our platform.

Validate input for registration!

As mentioned in the backend project issue 11, we will have to specify several design/usage aspects regarding our REST API. Concerning the frontend please use this issue to discuss all problems, wishes, changes etc.

A Landing Page with Login / Register Buttons / Components.

Taken from exercise 3:

The web application is considered to be finished if it supports at least four distinct use cases which are specific to your business model. Furthermore, in addition to those use cases, your web application has to:

• provide read and write access to your model, i.e., you have to implement the CRUD methods (Create, Read, Update, Delete) for at least one of your model classes

Currently we do not implement any Update or Delete method in our project.
This issue is for discussing the model we use as well as who is responsible for it.

Exercise component to be displayed within a list (like in homework).