pendulum-chain / portal

The Pendulum/Amplitude portal UI
GNU General Public License v3.0
1 stars 1 forks source link

Unify overall file structure and code #463

Open ebma opened 1 month ago

ebma commented 1 month ago

Context

In #326 we identified the need for some refactorings because we are having duplicate components with different stylings. Besides that, the code style diverged as the development of the Nabla UI happened in parallel to the development of the core portal features.

We should clean this up and unify the components and structure again.

Guidelines

Functional components

Do we want to declare functional components as function MyCompenent(props: Props) or as const MyComponent = (props:Props) => ()? At the moment we have a mixture of both notations.

Folder structure

The ideal folder structure is roughly as follows:

src
  - assets 
  - components
  - hooks
  - helpers
  - pages
  - services

We should remove the folders models, shared, config, and constants and move the contained files somewhere else. We should add a new folder contexts and move all the useContext components inside.

We need to agree on where to put components. Currently, some components live in src/components and some live in src/pages/xxx. This isn't very clear because it is unclear when and where a component is created. Two options: 1) We move all the components out of the src/pages/xxx paths and into the components folder. The files in pages should only import components to display them, not define them. 2) We move all the page-specific/non-reusable components into the respective pages directory.

Component file structure

Each component should live in a separate file. (Components that are tightly coupled can live in the same file). Component file names should be in Pascal case. When a component has a related styles.css file or test, it should live in an extra directory as follows:

MyComponent
 - styles.css
 - index.tsx
 - index.test.tsx

If neither a styles.css nor test file is relevant for the component, it doesn't need to live in a separate directory and can just be called MyComponent.tsx.

TODO

ebma commented 1 month ago

@Sharqiewicz I started fleshing the description of this ticket out a bit more. Do you have thoughts/suggestions on how we should structure the code, what to refactor/align, etc?