Obojobo
Obojobo copied to clipboard
Created new admin interface
WIP Fixes #2010
A little sneak peek at the new admin interface:
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 fromadmin-actions.js
and injects them onadmin.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 insideadmin-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 asaddUserPermission
,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:
-
admin.jsx
(the actual React component) executes a function that was injected byadmin-hoc.js
- These functions injected by admin-hoc.js are gotten from
admin-actions.js
-
admin-actions.js
in turn call the routes onapi.js
-
api.js
uses the respectiveAdminInterface
functions depending on the command executed (e.g. give user x permission a).