This is the code for the Modulus web app, which you can view at http://app.modulusplatform.site/
We have a separate repository for the landing page: http://modulusplatform.site/
You can view that code at https://github.com/epicdragon44/moduluswebsite.
https://app.lucidchart.com/documents/view/12e9a358-6152-4630-9d61-8f33eee10b23/0_0
Function
function codeToName(classcode) This function takes Converts the class code passed into the function into the actual English name of the course
Input: classcode
Output: String
Function
function isUserBlocked(username, activeCourse) Determines whether the user is blocked from the activeCourse
Input: username activeCourse
Output: boolean
Function
function getPublicCourses(firebase) Gets all the current public courses from Firebase
Input: firebase
Output: Array of JSON Objects each one being a Course
Component
class MainPanel extends React.Component The entire right half of the screen, which can change its display depending on whether we want to show the contents of the course, with all the modules; or the screen that lets us enroll in a course; or the screen that lets us create a course.
Input: firebase activeCourse modules removeCourse addVarkClicks email instantOpen isMobile changeActiveCourse showTour description instantOpen
Output: JSXElement
Contains: codeToName getPublicCourses codeToName VarkProfile VarkProfile codeToName Select Select VarkProfile ModuleItem ModuleItem AddModuleItem ModuleItem ModuleItem ModuleItem VarkProfile VarkProfile SectionBreak SectionBreak EditCourseDescription SectionBreak SectionBreak SectionBreak SectionBreak
Component
class Container extends React.Component The main container for everything on the screen, that also stores most global data in its state.
Input: name firebase varkClicks courses email isMobile updateCourses
Output: JSXElement
Contains: MainPanel AddCoursePanel CreateCoursePanel PublicCourse BrowseCourseItem AddCourseItem CreateCourseItem ReallySmallBreak isUserBlocked CourseListItem CourseListItem ReallySmallBreak isUserBlocked CourseListItem
Component
class ModuleContentItem extends React.Component A course item, that, when clicked, displays one of the course contents.
Input: updateMap varkStatus instantOpen name vark internal addVarkClicks teacherMode moduleTitle activeCourse modules firebase evenodd isMobile
Output: JSXElement
Contains: MyModal RenameItem DeleteItem EditItem
Component
function ModuleItem(props) Displays an entire module, including all of its content items.
Input: isMobile instantOpen name contents vark internals active username addVarkClicks varkMode teacherMode activeCourse modules firebase showVark varkStatus
Output: JSXElement
Contains: ModuleContentItem RenameModule DeleteModule ModuleContentItem
Component
function PublicCourse(props) The entire view for browsing public courses
Input: addCourse firebase
Output: JSXElement
Contains: getPublicCourses getPublicCourses PublicCourse Select
Component
class MyModal extends React.Component Displays a popup dialog.
Input: cancelFunc (optional) contentType itemName firebase text modules activeCourse moduleTitle internal vark onRequestClose teacherMode addItemMode (optional) varkStatus
Output: JSXElement
Contains: Select Select Select
Component
class CreateForm extends React.Component The form that allows you to create a class.
Input: passState courses createCourse
Output: JSXElement
Contains: Select Select Select
Component
function CourseListItem(props) This component renders a single course button in the sidebar that, when clicked, changes the main panel to display that course.
Input: name active changeActiveCourse id (optional)
Output: JSXElement
Contains: codeToName
Component
class AddModuleContentItemItem extends React.Component A button that allows the user (assumedly a teacher) to add an item to the module.
Input: moduleTitle activeCourse modules firebase varkStatus
Output: JSXElement
Contains: MyModal
Component
class SelectSubject extends React.PureComponent Allows the user to select a subject for their course
Input: passState
Output: JSXElement
Contains: Select
Component
function CreateCoursePanel(props) The mainpanel view that allows you to create a class.
Input: passState currentCourses createCourse
Output: JSXElement
Contains: CreateForm
Component
function AddCoursePanel(props) The mainpanel view that allows you to add a class.
Input: currentCourses addCourse
Output: JSXElement
Contains: NameForm
Component
class Home extends React.Component Renders and returns a Container, and initializes it with proper defaults.
Input: firebase
Output: JSXElement
Contains: Container
Component
function BrowseCourseItem(props) Displays a single button in the sidebar, that, when clicked, changes the main panel to allow you to enroll in a course
Input: browseCourseMode
Output: JSXElement
Component
function AddCourseItem(props) Displays a single button in the sidebar, that, when clicked, changes the main panel to allow you to enroll in a course
Input: addCourseMode isMobile
Output: JSXElement
Component
function CreateCourseItem(props) Displays a single button in the sidebar, that, when clicked, changes the main panel to allow you to create a course
Input: createCourseMode
Output: JSXElement
Component
function ReallySmallBreak(props) Displays a break for the sidebar that lets us put headers within it
Input: text
Output: JSXElement
Component
class RenameModule extends React.Component Inline button that, when clicked, allows the user to rename a module.
Input: internal moduleTitle modules firebase activeCourse
Output: JSXElement
Component
class DeleteModule extends React.Component Inline button that, when clicked, allows the user to delete a module.
Input: internal moduleTitle modules firebase activeCourse
Output: JSXElement
Component
class RenameItem extends React.Component Inline button that, when clicked, allows the user to rename an item.
Input: internal moduleTitle activeCourse modules itemName vark firebase
Output: JSXElement
Component
class DeleteItem extends React.Component Inline button that, when clicked, allows the user to delete an item.
Input: internal moduleTitle activeCourse modules itemName vark firebase
Output: JSXElement
Component
class EditItem extends React.Component Inline button that, when clicked, allows the user to edit an item.
Input: openModal
Output: JSXElement
Component
class AddModuleItem extends React.Component A button that allows the user (assumedly a teacher) to add a module to the course.
Input: internal activeCourse modules firebase changeActiveCourse
Output: JSXElement
Component
function EditCourseDescription(props) Renders an edit course panel inside the course tab for teachers
Input: activeCourse handleSubmit courseDescription
Output: JSXElement
Component
function VarkProfile(props) Displays the entire VARK Profile.
Input: Vcnt Acnt Rcnt Kcnt
Output: JSXElement
Component
class Select extends React.PureComponent Allows the user to filter which VARK-type of items to display.
Input: passState default
Output: JSXElement
Component
function SectionBreak() A simple element that renders a break across the Mainpanel page
Input: None
Output: JSXElement
Component
class NameForm extends React.Component The form that allows you to enroll in a class.
Input: courses addCourse
Output: JSXElement
Component
class SearchSelect extends React.PureComponent A dropdown component that allows the user to search by a certain filter while browsing public courses
Input: passState
Output: JSXElement