Components - revaturelabs/revoverflow-frontend GitHub Wiki
Main Component
The main component contains the router defining the URL paths and their corresponding components to be rendered per path.
- http://localhost:3000/ renders the login component
- http://localhost:3000/feed renders the feed container component
- http://localhost:3000/forum renders the forum container component
- http://localhost:3000/question renders the rich text editor component
Navbar Component
The navbar component includes an appbar and a drawer that appears on the left side of the browser UI. The navbar and drawer currently possess the following functionalities:
- Points Display
- log Out
- Drawer open and close
- Navigation links
Login Component
Currently the login component takes an RSS user's email and password as input and does a history push to /feed after returning the following items:
- JSON Web Token
- Admin Designation
- User Email
- User First Name
- User Last Name
- User Points
- User Profile Picture
- User RSS Account Id
- User Id
Breadcrumb Bar Component
The Breadcrumb Bar Component sits below the navbar on all current pages and displays the current path beyond http://localhost:3000/ as a link to itself.
Feed Components
1. Feed Container Component-
The feed is made up of tabs that set the "view" state of the feed. Depending on the view state the feed will be populated with questions or answers retrieved by one of four remotes. The
2. Feed Box Component-
The feed box item contains the mapped information of each question or answer retrieved depending on the tab clicked. Each box is displayed in the feed container in an iterative fashion displaying pertinent information as it relates to the specific question or answer within a single box. Upon clicking a box a series of endpoints requests, item settings in local storage, and redux actions are dispatched in order to set the current data needed to interact with a forum that pertains to particular question and its answers. This component acts as a consistently reinterpreted window framing allowing users to peer into a dynamically rendered forum.
Forum Components
1. Forum Container Component-
The forum container acts similarly to the feed container except that it dynamically renders three different sub-components based on the question or answer clicked from the feed and therefore changing the data retrieved by remotes, placed in local storage, and persisted into the redux store. The Forum container will load the proper data for its following three sub-components:
- Forum Question Component
- Forum Answer Component
- Forum Accepted Answer Component
2. Forum Question Component-
The forum question component is the box that appears at the top of the forum component displaying the question of interest depending on what box was clicked from the feed container and therefore what information was stored in local storage and the redux store. The forum question also displays the answer and confirm button. When the answer button is clicked it renders the answer box between the question and all answers so that users may submit a new answer belonging to that question of interest. The confirm button is rendered for users who are admin and only appears when an accepted answer has been chosen for a question of interest.
3. Forum Answer Component-
The forum answer component, much like the feed box component, maps all answers that belong to a question of interest and displays them in an iterative fashion under the question of interest. This component also displays a check mark that can be clicked by a user in selecting an accepted answer for a question of interest. Once an answer is chosen and the choice is immediately confirmed within a modal, a request will be sent to the server updating the question entity by changing its accepted answer Id. After this that particular answer will be populated into the accepted answer forum component and no check marks will respond to click events in that question of interest's forum. If the question of interest has an accepted answer Id the answer with that same Id will not be displayed here.
4. Forum Accepted Answer Component-
The forum accepted answer component renders the accepted answer belonging to a question of interest if the question entity stored in the database has an accepted answer Id. It will always be rendered above the other answers for a particular question of interest and displays with a green check mark indicating it is the accepted answer.