1 of 4

Frontend file-restructuring

Project moves on and different components/views gets developed on weekly basis.

​

Clear structure of file-system.

  • Developers know where to implement.
    • Easier to break-out functionality to avoid code degradation.
  • Developers can find imports easy.

​

Otherwise.

  • Architecture degradation can accelerate over time.
  • Harder to find imports and certain files.
  • Functionality may be implemented “twice”.

​

2 of 4

Interaction-panel views

Improve user experience by improving usability and so far it has two options.

​

Remove the view.

  • Applied to every card added.
  • Only works/displayed in “edit-mode”.
  • Easy to use, natural placement of closing function.
  • Removed by filtering out the view by id.

​

Tooltip for view.

  • Applied to every card added.
  • All views have their own “tip”.
  • Always displayed.

3 of 4

React Grid Layout

Team 1 - Erik Karlsson

Implementation of React Grid Layout, supported by earlier research and their library’s Github documentation.

​

Gridlayout (issue#189/pull-request#210).

  • Initial version used to experiment with the library and available features.
  • Gridlayout with hardcoded starting positions.
  • Grid items stored in an array containing coordinate, ID and size attributes.
  • Views rendered by specifying grid item ID and the view component inside div elements.

4 of 4

Add & Remove views

Team 1 - Erik Karlsson

Natural step after implementation of gridlayout to improve useability, add and remove view methods.

​

Add view (issue#215/pull-request#282).

  • Grid now use “useState”.
    • Used to update view positions as well as new views added to grid.
    • Triggers react to re-render when layout change.
  • Takes the view component as parameter and adds it to the array.
  • Updates the layout by setting the layout state.
  • The array is iterated inside React Grid layout component, which renders the views.

​

Remove the view (issue#285/pull-request#359).

  • Applied to every view added.
  • Only works/displayed in “edit-mode”.
  • Easy to use, natural placement of closing function.
  • Removed by filtering out the view by id.