Obojobo icon indicating copy to clipboard operation
Obojobo copied to clipboard

Created new admin interface

Open maufcost opened this issue 2 years ago • 1 comments

WIP Fixes #2010

maufcost avatar Jun 29 '22 17:06 maufcost

A little sneak peek at the new admin interface:

Screen Shot 2022-08-02 at 10 14 45

I believe this will pretty much be a project on its own wherein we will be adding more and more functionalities.

A quick documentation on some of the files involved in creating a new obo page (hopefully, if someone ever needs to create a new page, this will save them some time):

  • The stats and admin pages are inside obojobo-repository, so most probably, most new pages - if we ever need more - will be located there too.
  • obojobo-repository/shared/components: contains the actual React components - and their respective styles - representing the new page (e.g. admin.jsx or stats.jsx).
  • obojobo-repository/shared/actions: contains the Redux actions for a component/page (e.g. admin-actions.js contains the actions for the admin.jsx component/page). These actions are ways of abstracting API calls (removing those calls from being made directly inside a component - more about them below).
  • obojobo-repository/shared/components/*-hoc.js: *-hoc.js files are responsible for getting those Redux actions and injecting them on their respective components. So, for example, admin-hoc.js gets the admin actions from admin-actions.js and injects them on admin.jsx.
  • obojobo-repository/server/routes/api.js: contains the server routes that will be called by a certain suite of actions. For example, there are routes within .../api.js that will be called by actions inside admin-actions.js. Now, what do these routes do once they are called? They execute specific functions in models representing obo objects (e.g. admin_interface, collection, draft_summary, etc)
  • obojobo-repository/server/models/(...): As an example, I have created an AdminInterface model that will be responsible for having functions, such as addUserPermission, removeUserPermission, etc. Finally, these are the functions that will execute the SQL queries.

Overall, in the new admin page's context, the flow of information will go as:

  1. admin.jsx (the actual React component) executes a function that was injected by admin-hoc.js
  2. These functions injected by admin-hoc.js are gotten from admin-actions.js
  3. admin-actions.js in turn call the routes on api.js
  4. api.js uses the respective AdminInterface functions depending on the command executed (e.g. give user x permission a).

maufcost avatar Aug 02 '22 14:08 maufcost