Building Block View Frontend#

The frontend of the application is built using React and incorporates several libraries and frameworks for state management, communication with the backend, styling, internationalization, and additional features.

Level 1#

graph TD A[Redux] -->|Manages state| B((App)) B -->|Renders| C[TopicsPage] B -->|Renders| D[ExercisesPage] B -->|Renders| E[ExercisePage] B -->|Renders| F[StatsPage]

Responsibility#

Subsystem

Description

Redux

Manages the application’s state, including user information, exercise data

TopicsPage

Displays a list of topics available for SQL practicing

ExercisesPage

Lists exercises for a selected topic

ExercisePage

Displays a specific exercise and provides the SQL editor for query composition

StatsPage

Provides anonymous statistics and insights on student activity and engagement

Notes#

  • All pages require the necessary Redux store setup and reducer configurations to work correctly.

  • All pages use Redux to manage the application state.

  • All pages assume the existence of other components and dependencies mentioned in the imports section.

  • The SPA is developed with a React Router for the ability to reload and overall better navigation.

  • The application supports internationalization using the react-i18next library.

  • Localization is defined in static/locale/{LANG}/common.json.

  • The styling of the component relies on the makeStyles function from tss-react/mui.

  • All pages and components use the DarkModeContext for the dark mode.

  • Error management is done via a ErrorContext in the root which displays error for a time.

  • The navigation bar is rendered on all pages with options to choose language, theme, …

Level 2#

TopicsPage#

graph TB TopicsPage[TopicsPage] IF{ } TopicsPage ---> Logo[Logo] TopicsPage ---> SearchBar[SearchBar] TopicsPage --showResults--> IF IF --true--> Results[Results] IF --false--> Topics[Topics]

Description#

The TopicPage component represents the topic page of the application. It allows users to view and interact with various topics.

Component Structure#

  • State Hooks

    • error: string | null: Represents the error message state.

    • transSwitch: boolean: Represents the transition switch state for animation effects.

    • showResult: boolean: Represents the state to determine whether to show the search results or the topic list.

  • Redux State

    • topic: Represents the Redux state for topics.

    • filter: Represents the Redux state for filter options.

    • search: Represents the Redux state for search results.

  • Dispatch Functions

    • dispatch: Represents the dispatch function from the Redux store.

  • Effect Hooks

    • Fetching Data: When the component mounts, it dispatches the fetchTopics, fetchTopicOverviews, and fetchFilterOpts actions to fetch the necessary data from the server. If showResult is false, the component fetches search results by dispatching the fetchResults action with the selected filter options.

  • Callback Hooks

    • showResultHandler: Handles the logic for showing or hiding the search results.

    • topicClickHandler: Handles the logic when a topic is clicked and navigates to the respective topic page.

  • Memoization Hooks

    • userTopics: Memoizes the filtered topic.topicOverviews array based on the available topics.

  • Misc.

    • history: Represents the history object from React Router for navigation.

    • classes: Represents the CSS classes generated by the makeStyles function from tss-react/mui.

Rendered Components#

  • AnimatedDiv: Wraps the main content with animation effects.

  • Logo: Displays the logo image using the img HTML tag.

  • SearchBar: Renders the search bar component for filtering topics / exercises and passes the necessary props to the SearchBar component.

  • Results: Conditionally rendered using the If component when more than 0 selected options. Maps through the search.results array and renders the Results component for each result.

  • Topic: Maps through the userTopics array and renders the Topic component for each topic

Notes#

  • If the SearchBar is used the TopicsPage transforms into a ‘ResultsPage’ allowing the user to easily select the wanted exercises

  • When a user clicks on an exercise from this view the data model is being installed.

ExercisesPage#

graph TB ExercisesPage[ExercisesPage] ExercisesPage --> TopicTitle[TopicTitle] ExercisesPage --> ExerciseButtons[ExerciseButtons]

Description#

The ExercisesPage component represents the exercises page of the application. It allows users to view and interact with exercises related to a specific topic. The data model is installed by clicking on an exercise.

Component Structure#

  • State Hooks

    • transSwitch: boolean: Represents the transition switch state for animation effects.

    • error: string | null: Represents the error message state.

    • favouriteExercises: Favourite[] | undefined: Represents the state for favourite exercises.

  • Redux State

    • exercises: Represents the Redux state for exercises.

    • userExercises: Represents the Redux state for user exercises.

    • topic: Represents the Redux state for the selected topic.

    • favourite: Represents the Redux state for favourite exercises.

  • Dispatch Functions

    • dispatch: Represents the dispatch function from the Redux store.

  • Effect Hooks

    • Setup Database: Checks or installs the exercise database by calling the apiExec function with the appropriate parameters. Sets the error state if the database check or installation fails.

    • Fetching Data: When the component mounts, it dispatches the fetchExercises, fetchUserExercises, fetchTopic, and fetchFavourites actions to fetch the necessary data from the server.

  • Callback Hooks

    • buttonClickHandler: Handles the logic when an exercise button is clicked and navigates to the respective exercise page.

    • getExerciseState: Retrieves the state of an exercise based on the user’s progress.

  • Misc.

    • history: Represents the history object from React Router for navigation.

    • classes: Represents the CSS classes generated by the makeStyles function from tss-react/mui.

    • t: Represents the translation function generated by the useTranslation hook from react-i18next.

    • topicId: Represents the topic ID obtained from the URL parameters using the useParams hook from React Router.

Rendered Components#

  • AnimatedDiv: Wraps the main content with animation effects.

  • Title: Renders the title component for the selected topic.

  • ExerciseButton: Renders the exercise button component for each exercise.

ExercisePage#

graph TB TopicsPage[TopicsPage] TopicsPage ---> HorizontalScrollingMenu[HorizontalScrollingMenu] TopicsPage ---> QuestionBox[QuestionBox] TopicsPage ---> CustomAllotment[CustomAllotment] CustomAllotment ---> CodeMirror CustomAllotment ---> QueryTable CustomAllotment --visible==true---> SolutionTable TopicsPage --showDatamodel==true---> Datamodel[Datamodel]

Description#

The ExercisesPage component represents the exercise page of the application.

Component Structure#

  • State Hooks

    • isToastVisible: boolean: Visibility of a toast message.

    • inputQuery: string: Value of an input query.

    • tableCont: Result: Result data of a table.

    • allotmentState: AllotmentState | undefined: State of an allotment, which can have values from the AllotmentState enum.

    • solutionTablecont: Result: Result data of a solution table.

    • disableToolbarButtons: boolean: State of disabling/enabling toolbar buttons.

    • feedback: string | null: Feedback message.

    • isFeedbackPos: boolean | undefinend: The positive/negative status of feedback.

    • showDataModel: boolean: Visibility of a data model.

    • marked: boolean: Marked status of an exercise.

  • Redux State

    • selectedTopic: Represents the Redux state for selected topic.

    • userExercise: Represents the Redux state for user exercises.

    • exercise: Represents the Redux state for selected exercise.

    • favourites: Represents the Redux state for favorite exercises.

  • Dispatch Functions

    • dispatch: Represents the dispatch function from the Redux store.

  • Effect Hooks

    • Setup Database: Checks or installs the exercise database by calling the apiExec function with the appropriate parameters. Sets the error state if the database check or installation fails.

    • Fetching Data: When the component mounts or when any of the dependencies (handleAllotmentStates, dispatch, topicId, exerciseId, marked) change. It dispatches several actions to fetch exercise-related data from the server using Redux. The fetchExercise, fetchUserExercise, fetchUserExercises, fetchTopic and fetchFavourites are asynchronous actions that fetch data for the current exercise, user exercise, user exercises for the current topic, the topic itself, and the favorite exercises, respectively. Finally, it calls the handleAllotmentStates function with the AllotmentState.NEW state.

    • Disabling toolbar: This effect is triggered when the userExercise.selectedUserExercise changes. It updates the disableToolbarButtons state to false and sets the inputQuery state based on the buffer_save value of selectedUserExercise. If buffer_save is undefined, it sets inputQuery to an empty string.

    • Fetching favourites: This effect is triggered when the exerciseId, favourites, or topicId changes. It finds a favorite exercise in the favourites array that matches the current topicId and exerciseId. If a matching exercise is found, it sets the marked state to true, indicating that the exercise is marked as a favorite; otherwise, it sets marked to false.

    • Showing datamodel: This effect is triggered when the showDataModel state changes. If showDataModel is true, it sets a timeout to scroll the page smoothly to the ref element’s current position. The scroll behavior is set to “smooth.”

  • Callback Hooks

    • handleAllotmentStates: This function handles the state transition for the allotmentState variable. It takes an allotmentStateTo parameter and updates the allotmentState based on the specified state.

    • commentString: This function takes a text parameter and adds comments to each line of the text. It splits the text into lines, adds a comment prefix (”–”) to each line, and then joins the lines back into a single commented text.

    • executeDataModelHandler: This function toggles the display of the data model. It updates the showDataModel state variable to toggle the visibility of the data model.

    • patchUserExercise: This async function updates the user exercise in the database. It sends a PATCH request to the API with the updated buffer_save value for the exercise.

    • handleListSolution: This async function retrieves and displays the solution for the exercise. It sends a GET request to the API to fetch the exercise solution and updates the inputQuery state variable with the solution content.

    • solutionClickHandler: This async function handles the logic when the solution button is clicked. It executes the query specified in the inputQuery state variable, fetches the solution result from the API, and updates the tableCont and solutionTableCont state variables accordingly.

    • showToast: This function displays a toast message with feedback. It takes a correct parameter (indicating whether the feedback is positive or negative) and sets the isToastVisible, isFeedbackPos, and feedback state variables accordingly.

    • checkAnswerClickHandler: This async function handles the logic when the check answer button is clicked. It executes the query specified in the inputQuery state variable, checks the answer correctness with the API, and updates the tableCont, solutionTableCont, and allotmentState state variables accordingly.

    • executeQueryClickHandler: This async function handles the logic when the execute query button is clicked. It executes the query specified in the inputQuery state variable, fetches the query result from the API, and updates the tableCont and allotmentState state variables accordingly.

    • handleResetDataBase: This async function resets the exercise database and updates the user exercise in the database. It sends a PATCH request to update the user exercise and a POST request to reset the exercise database. It updates the tableCont state variable with the reset result and sets the allotmentState state variable to “reset”.

    • toggleFavourite: This async function toggles the favorite status of the exercise. It sends a PATCH request to the API to update the favorite status of the exercise and updates the marked state variable accordingly.

    • showCorrectToast: This callback function displays a toast notification with feedback based on whether the answer is correct or not. It takes a correct parameter (indicating the correctness of the answer) and an optional message parameter. It sets the isToastVisible, isFeedbackPos, and feedback state variables accordingly.

  • Misc.

    • classes: Represents the CSS classes generated by the makeStyles function from tss-react/mui.

    • t: Represents the translation function generated by the useTranslation hook from react-i18next.

    • topicId: Represents the topic ID obtained from the URL parameters using the useParams hook from React Router.

    • exerciseId: Represents the exercise ID obtained from the URL parameters using the useParams hook from React Router.

Rendered Components#

  • Toast: When a exercise was done correctly or incorrectly this component tell the student.

  • Confetti Explosion: If all exercises of a topic are correct a confetti explosion is triggered.

  • HorizontalScrollingMenu: It is used to display a horizontal scrolling menu with all exercises of the selected topic.

  • AnimatedDiv: Wraps the main content with animation effects.

  • QuestionBox: It represents a question box component used for displaying the question of the current exercise.

  • CustomAllotment: It represents a responsive custom allotment component which renders three panes (editor+toolbar, query table, solution table).

  • Datamodel: Displays the datamodel image using the img HTML tag if the showDataModel state is true.

StatsPage#

graph TB StatsPage[StatsPage] IF{ } StatsPage ---> Title[Title] StatsPage ---> SearchBar[SearchBar] StatsPage --showResult--> IF IF --true--> StatsSearch[Stats search result] IF --false--> StatsTopic[Stats per topic]

Description#

The ExercisesPage component represents the statistic page of the application.

Component Structure#

  • State Hooks

    • error: string | null: Holds an error message if there is an error during data fetching.

    • user: Userdata | undefined: Stores user data.

    • userNum: number | undefined: Stores the user’s number.

    • stats: StatsInterface[] | undefined: Stores an array of exercise statistics.

    • showResult: boolean: Indicates whether to show the result or not.

  • Redux State

    • filter: Represents the Redux state for Prof`s filter options.

    • search: Represents the Redux state for Prof`s search results.

    • topics: Represents the Redux state for topics.

  • Dispatch Functions

    • dispatch: Represents the dispatch function from the Redux store.

  • Effect Hooks

    • Fetching data: When the component mounts or when any of the dependencies (dispatch, showResult, fetchStats) change. It dispatches several actions to fetch statistics-related data from the server using Redux. The fetchStats, fetchTopics and fetchFilterOpts are asynchronous actions that fetch data for the statistics, topics, and filter options if showResult is false.

    • Fetching search results: This effect is triggered when the dispatch or fileter.selOpts dependency changes. It dispatches the fetchProfResults action with the parameter filter.selOpts to fetch the search results.

  • Callback Hooks

    • showResultHandler: Handles the logic for showing or hiding the search results.

    • fetchStats: This async function fetches the statistics from the database. It sends a GET request to the API with.

  • Misc.

    • classes: Represents the CSS classes generated by the makeStyles function from tss-react/mui.

    • t: Represents the translation function generated by the useTranslation hook from react-i18next.

Rendered Components#

  • Title: Renders the title component with the course information.

  • SearchBar: Renders the search bar component for filtering topics / exercises and passes the necessary props to the SearchBar component.

  • Stats: Conditionally rendered using the If component when more than 0 selected options.

  • Stats: Conditionally rendered using the If component when there are no selected options. Maps through the stats array and renders the Stats component for each topic.