a5d8cfff78
* fix: removing unnecessary CSS classes and files The .discussion-app-card and .features-table classes aren’t actually used - that means the AppList.scss file and pages-and-resources/index.scss above it can both be deleted. * refactor: moving AppList components into app-list sub-directory. * refactor: moving ConfigFormContainer and children into app-config-form sub-directory * refactor: Renaming ConfigFormContainer to AppConfigForm Makes it consistent with app-list/AppList. * refactor: providing discussions path to sub-components via a context This will be used in subsequent commits as we move functionality out of DiscussionsSettings. * fix: change step two label to “Settings” The mockups changed the label, which is great, since we’re aiming to remove the need for selectedAppId to be in DiscussionsSettings. This is one step toward that. This has the side effect of making app.name no longer necessary, which is great, since the app no longer contains its own name string. * refactor: adding replacement data layer for app-list and app-config-form This code is a replacement for the slice, thunks, and api in /discussions/data. It’s an “expand” commit that adds the new implementation. The next commit will use it, and the last will remove the old implementation. Those files in /discussions/data contained API functions, thunks, and reducer state for two separate components (app-list and app-config-form) that don’t actually share any code. Turns out they’re perfectly separable, and more understandable apart. This new code isn’t used yet. * refactor: add a context to provide a formRef to AppConfigForm components This is an intermediary commit - it’ll likely fail linting since the whitespace is a bit off. It’s also not doing anything yet - a subsequent commit will make use of this code (the provider and new ApplyButton component) Today the DiscussionsSettings component needs to be responsible for form submission because it owns the “Apply” button that a user clicks to submit the form. It declares a “formRef” which is passed into the form and attached to the form DOM element, and then the “Apply” button can call formRef.current.submit() to submit the form from DiscussionsSettings, even though the form itself is declared way down in a sub-module. This is awkward, and forces this top level component to be smarter than it should be, and to know too much about its children. An alternate pattern is to create a context provider (AppConfigFormProvider) which owns the formRef and is part of the sub-module. Then create an AppConfigFormApplyButton component that knows how to pull that formRef out of the context and call submit on it. This way, DiscussionsSettings doesn’t know anything about form submission, and we can move all that code into the app-config-form sub-module that should know about it. Win! Again, this commit just adds the code and inserts the provider into DiscussionsSettings - it doesn’t use it all yet. * refactor: create AppListNextButton that knows how to move to step two of the Stepper Like the previous commit, this will enable us to factor code out of DiscussionsSettings and into a sub-module where it is a more natural fit. This AppListNextButton makes use of the `selectedAppId` we’ll be adding to our new app-list reducer in order to know which app has been selected in the list. It can then use that to change the URL route. In contrast to the previous commit, we use redux here instead of a context. We used context for the formRef because we try to keep complex data types like that out of redux, and also because formRef is not _state_, but just an implementation detail of how we needed to wire everything up in a React app. selectedAppId, on the other hand, is state, and so belongs in redux more naturally. * refactor: cutting over to using the new discussions reducers This commit will break everything, since the React components haven’t been updated to use the new reducer shape yet. Subsequent commits will convert app-list and app-config-form over. * refactor: remove app-list logic from DiscussionsSettings This is a ‘contract’ commit which removes functionality from DiscussionsSettings and adds it to AppList. A word of warning that I tried my best to separate this refactor from that of AppConfigForm, but this commit may not be perfect. The original problem was that the two sub-modules were unnecessarily intertwined, making use of some shared variables when they didn’t need to (such as selectedAppId), so I can’t fully get app-list working without touching app-config-form as well… so this particular commit probably has logical errors and won’t build properly. Taken together with the next commit for app-config-form, though, they move a significant amount of logic out of DiscussionsSettings and into the sub-modules and isolate them from each other. You’ll see here that handleSelectApp and handleStartConfig move into the app-list sub-module. The former goes into AppList, the latter was committed to AppListNextButton in a prior commit. Once those two are gone, a bunch of other code in DiscussionsSettings starts falling away. selectedAppId is still necessary since the config form handlers are using it, but we’ll see that disappear in the next commit. * refactor: move app-config-form logic out of DiscussionsSettings This is the last major commit. It removes a handleApply and handleSubmit from DiscussionsSettings and then cleans up the various variables and imports which are no longer necessary. handleApply moved into AppConfigFormApplyButton in a prior commit, and handleSubmit has moved into AppConfigForm itself. Now DiscussionsSettings doesn’t know anything about forms or submission, we’ve successfully moved all that code down into sub-modules. This commit also makes use of AppConfigFormApplyButton. * refactor: remove old discussions reducers, thunks, and APIs These three files are now obsolete and have been replaced by a new set of reducers in app-list and app-config-form, specific to those sub-modules specific functions. This has the side effect of simplifying the naming of the state variables and making it easier to reason which variables are for what sub-module. Prior to this refactor, there were several logical bugs where we were using a confusing combination of “selectedAppId” in local state, “displayedAppId” and “activeAppId” in redux, along with displayedAppConfigId, and it wasn’t quite clear what was for which part of the app, and mis-use was causing some loading and state errors as users navigated around. The “status” variable in this reducer was also problematic, as we have two separate async requests we’re trying to track the status of - fetchApps and fetchAppConfig. The app was getting confused about what was loaded and what was still loading, which actually caused an infinite loop for me before choosing to refactor (state changes from the two requests were invalidating the state of the other, toggling back and forth between LOADED and LOADING) * refactor: moving authoring.discussions.heading fix into the right messages file
|Build Status| |Codecov| |license| frontend-app-course-authoring ============================= Please tag `@edx/teaching-and-learning <https://github.com/orgs/edx/teams/teaching-and-learning>`_ on any PRs or issues. Thanks. Prerequisite ------------ `Devstack <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/installation/index.html>`_. If you start Devstack with ``make dev.up.studio`` that should give you everything you need as a companion to this frontend. Installation and Startup ------------------------ 1. Clone the repo: ``git clone https://github.com/edx/frontend-app-course-authoring.git`` 2. Install npm dependencies: ``cd frontend-app-course-authoring && npm install`` 3. Start the dev server: ``npm start`` The dev server is running at `http://localhost:2001 <http://localhost:2001>`_. If your devstack includes the default Demo course, you can visit the following URLs to see content: - `Proctored Exam Settings <http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/proctored-exam-settings>`_ - `Pages and Resources <http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/pages-and-resources>`_ (work in progress) Production Build ---------------- The production build is created with ``npm run build``. .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-app-course-authoring.svg?branch=master :target: https://travis-ci.com/edx/frontend-app-course-authoring .. |Codecov| image:: https://codecov.io/gh/edx/frontend-app-course-authoring/branch/master/graph/badge.svg :target: https://codecov.io/gh/edx/frontend-app-course-authoring .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-course-authoring.svg :target: @edx/frontend-app-course-authoring