Coding Standards for Frontend Codebase

Comments and Documentation

Comments and documentation are essential for your code to be understood by other collaborators, which will also help you refresh memory when you look back on your own code.

For the frontend codebase of CourseOcean, we have the following comments rules:

All React components must have a docstring explaining what this component is and
- What should be passed into props
- Example
```
function Wiki(props) {
    // Wiki component to hold the course summary and course forum
}
```
All React components must have prop type checking via prop-types library
- tutorial
All action must have a docstring explaining what the action is about
All reducer must have a docstring explaining what the action is about

Adding New Application

To add a new application, for now, create the application folder structure similar in the next section. In addition, please utilize the redux/toolkit for concise code, you can refer to the example application course to see how the things are done.

Project structure

src/
|   course/
|   |   components/
|   |   |   Notebooks.js
|   |   |   Search.jss
|   |   |   ...
|   |   |   WikiNotebook.ks
|   |   action.js
|   |   reducer.js
|   |   index.js
|   application1/
|   |   [components/]: folder to hold components react js files
|   |   action.js: entry file for redux action related to this application
|   |   reducer.js: entry file for redux reducer function related to this application
|   |   index.ks: entry file for the application
|   application2/

Note

As Feb. 1, since the restructure is not completely finished, you will need to add the reducer to root reducer in the reducer/index.js file manually, in which you will find examples on how to do that.

Linting

All frontend js code must pass the linting option specified in the current .eslintrc.js.

By pass we mean:

No Error
As few warning as possiblle

A separate CI action will be setup to test against the linter option and will reject any commit not satisfying the given linting options.

Using linter

If you are using VsCode, please install the extension ESLint, which after installation will automatically setup linting for you.

Linting Rules

// eslint-disable-next-line no-undef
module.exports = {
  "env": {
    "browser": true,
    "es2021": true,
  },
  "extends": [
    "plugin:react/recommended",
    "eslint:recommended",
  ],
  "parser": "babel-eslint",
  "plugins": [
    "react",
  ],
  "rules": {
    // enable additional rules
    "indent": ["warn", 2,],
    "linebreak-style": ["warn", "unix",],
    "quotes": ["warn", "double",],
    "semi": ["warn", "always",],
    "no-unused-vars": "warn",
    "react/prop-types": "warn",

    // override default options for rules from base configurations
    "comma-dangle": ["off", "always",],
    "no-cond-assign": ["warn", "always",],

    // disable rules from base configurations
    "no-console": "off",
  },
};

PikaCourse / homiehomie