Coding Standard

[frinzekt]

Import Order

it is important to have an order of import for code readability

I propose the order with alphabetical order enforced:

Frontend

1. React + Redux + Functionality Imports
2. Own Components Import
3. Utilities Import
4. Material Kit import
5. Material Ui Import
6. Icons
7. Styles Import (both Material UI usestyles, style imports and style definition)

Eg.

// This is reordered of administrator/index.js

import { useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { services } from "store/feathersClient"

// Own Components
import UserModal from "components/administrator/UserModal"
import CreateUserModal from "components/administrator/CreateUserModal"

// Helper
import { getAvailablePermissionsOfUser, roleIcons } from "utils"

// Material Kit
import Card from "components/MaterialKit/Card/Card.js";
import CardBody from "components/MaterialKit/Card/CardBody.js";
import CardHeader from "components/MaterialKit/Card/CardHeader.js";
import Button from "components/MaterialKit/CustomButtons/Button.js";
import Grid from "components/MaterialKit/Grid/GridContainer.js";
import GridItem from "components/MaterialKit/Grid/GridItem.js";

// Material UI
import Tooltip from "@material-ui/core/Tooltip";

// Icons
import Placeholder from "@material-ui/icons/Mood";

//Styles
import { makeStyles } from "@material-ui/core/styles";
import styles from "assets/jss/nextjs-material-kit/pages/landingPage";
const useStyles = makeStyles(styles);

Backend ?? (not yet sure):

1. Npm Imports
2. Project imports

Note: Each number list will be separated by a space on import

[frinzekt]

This does not need to be strictly enforced for now, because we are in a rush, however keep this thing in mind

[frinzekt]

For maintainability I have to do a code review from develop to master merge

[frinzekt]

Are you aware of this @MouseAndKeyboard ?

[frinzekt]

For now, no action will be taken except being aware that this exist.

In stage 2, we have to go through all the files and reorder this

[frinzekt]

I think one thing that this also needs are the ground rules that we set

[MouseAndKeyboard]

Only seen this now.
Will keep in mind for future.

[frinzekt]

@MouseAndKeyboard see changes

[frinzekt]

I think there is something more with this issue aside from the imports... also the name of the component... I remember I had a bad practice to copy paste certain things from one components to another that I forgot to rename the function (didn't really matter as much in terms of functionality because of export default ... but it should be something that we should address)