Properties for the ButtonLink component.
Properties for the Link component.
Properties for the PasswordField component.
A wrapper used in a number of tests.
Outline:
Provides MockedProvider for testing graphQL calls.
Provides MemoryRouter and Route for cases where URL params are used.
Imported by components and pages to access the current state of the user, such as their login status and name.
Base authentication client.
Client to deal with apollo queries.
GraphQL mutation to approve a list of posts.
Properties that are common to both the lightTheme and darkTheme.
GraphQL query to change the name of a user.
GraphQL query to create a Community.
GraphQL query to create a post.
The properties for the dark theme of the application.
Sets fields and initial values for the UserContext.
GraphQL query to delete the post with the given id on the given host.
GraphQL mutation to delete a list of posts.
GraphQL query to edit a post.
GraphQL query to retrieve the IDs and hosts of the admins of the community the post is a part of.
GraphQL query to get the comments on a post.
GraphQL query to get the id and title of communities on a given host.
GraphQL query to get a post with a given ID on a given host.
GraphQL query to get the posts to a given community.
GraphQL query to get the posts from communities that a user is subscribed to.
GraphQL query to get the unapproved posts from communities that the user moderates.
GraphQL query to get the logged in user's information.
GraphQL query to get the posts made by a certain user.
The properties for the light theme of the application.
Authentication client for the password strategy.
GraphQL query to subscribe to a community.
GraphQL query to unsubscribe from a community.
The dropdown menu that is displayed when the user icon in the
Header is clicked.
Outline:
The 'Profile' button takes users to their profile page.
The 'Settings' button takes users to their account settings page.
The 'Logout' button logs the user out of the application.
Allows users to view and edit their account details.
Outline:
Users can edit their name, username and password.
Users can toggle between their account information (username, email and password) and their profile information (name).
Allows users to view their username, email and change their password.
Outline:
If password change is successful, the password is updated.
Otherwise, an error message is displayed.
Properties passed to the component. See AccountTabProps.
A reusable button for when making GraphQL mutations.
Outline
Button gets disabled when clicked.
Shows the CenteredLoader while loading.
Produces an error popup if there was an error
Formatted button to direct the user to different pages.
Outline:
Properties passed to the component. See ButtonLinkProps.
The loading spinner used when data is being retrieved e.g. during a GraphQL call.
Displays a comment to the user.
Outline:
The body of the comment is shown, along with a 'reply' button that opens a PostCreator.
The author or admin of the community the comment is a part of can edit or delete the comment through its PostHeader.
Properties passed to the component. See CommentProps.
Displays all the comments of a post, including any nested one.
Properties passed to the component. See CommentsProps.
Displays a list of communities on the user's host.
Outline:
HomePage of the application, giving users a
list of communities to visit.Allows users to join a group call with other community members.
Outline:
Users are displayed a 'Join' button.
Users are placed into a group call with other members after clicking the 'Join' button.
Users can mute themselves and other members in the call - useful for 1-on-1 or restricted group conversations.
Access to the user's microphone and camera is required.
Shows users the description of the community.
Outline:
Properties passed to the component. See CommunityDescriptionProps.
Allows users to see the posts that exist in a community, along with its description.
Outline:
Used to create a community.
Outline:
Users can click the 'plus' icon in the header of the application.
They can then enter a name, ID and description for the community.
On success, they are redirected to the new community page.
Otherwise they are shown an error message.
Allows users to create a post to a community.
Outline:
Verifies a user's email.
Outline:
On success, the user is redirected to the HomePage.
If they cannot be verified, an error message is displayed.
An formatted error message to be displayed to the user.
Outline:
Displays a message to the user indicating the problem.
Provides a 'Return Home' button, taking the user to their home page when clicked.
Properties passed to the component. See ErrorMessageProps.
The footer for the App.
Outline:
Clicking the 'Help' button takes the user to the user manual.
Clicking the 'Privacy Notice' button takes the user to the privacy policy.
Clicking the 'Source Code' button takes the user to the GitHub repository.
The header of the application.
Outline:
Properties passed to the component. See HeaderProps.
The user's home page.
Outline:
Shows posts from the communities that the user is subscribed to.
Shows a list of communities on the user's server.
Card containing a centred loader.
Displays the login form on the LoginPage.
Outline:
Prompts the user for their email and password.
On success, they are redirected to their HomePage, otherwise they are shown a error Popup.
Redirects the user to the PasswordResetRequestPage if they click the 'Forgotten Password?' button.
A template used for displaying the Unifed logo along with some page content.
This tends to be used for non-authenticated pages, where branding is important and page real-estate would not otherwise be utilised.
Properties passed to the component. See LogoTemplateProps.
Markdown text editor used to create/edit posts and comments.
Outline:
Users are shown the raw markdown that they have typed.
A toolbar at the top of the editor diplays icons that the user can click to insert the desired element e.g. a table or heading.
Properties passed to the component. See MarkdownEditorProps.
Used to display raw markdown as rendered HTML to the user.
This is used for comments and posts when they are displayed.
Properties passed to the component. See MarkdownViewerProps.
Presents moderation features for community administrators.
Outline:
Displays a '404 Page not Found' message if an invalid URL is entered.
A ButtonLink is diplayed for the user to return home.
Password input component.
Outline:
Properties passed to the component. See PasswordFieldProps.
Allows the user to reset their password.
Outline:
Users can enter a new password and then retype it to set it.
Upon successfully resetting their password, they are redirected to their HomePage.
Allows the user to reset their password by displaying the PasswordResetCard along with the Unifed logo.
Allows the user to be sent an email with a link to reset their password.
Outline:
Users enter their email and click the 'Send Email' button to be sent a reset token.
A success message is displayed.
Allows a user to request a reset password token by displaying the
PasswordResetRequestCard or to return to the LoginPage.
Displays the strength of a password.
Outline:
Strength can be any of: Very Weak, Weak, Good or Strong.
Displayed when user is registering an account and creating a password.
Properties passed to the component. See PasswordStrengthMeter.
Displays an error or warning to the user as a popover.
Outline:
Properties passed to the component. See PopupProps.
Displays a post.
Outline:
Shows the title and body of a post.
The author or admin of the community the post is in can edit or delete the post through its PostHeader.
Used to create posts.
Outline:
The MarkdownEditor is used to curate the content of the post.
Users can click the submit button to create the post or the cancel button to leave the creator.
Properties passed to the component. See PostCreatorProps.
Used to edit existing posts or comments.
Outline:
The MarkdownEditor is used to edit the post or comment.
The current content of the post or comment is displayed initially.
Properties passed to the component. See PostEditorProps.
Used to edit and create posts and comments.
Outline:
The MarkdownEditor is used to enter the content of the post or comment.
Provides a consistent, reusable component with submit and cancel buttons that can be used for comments and posts.
Properties passed to the component. See PostEditorBaseProps.
Used to display the user icon, title and actions that can be taken on a post or comment.
Outline:
The user's icon is displayed on the left of the header
The title of the post is displayed in the middle of the header. Nothing is displayed for the title of comments, as they do not have one.
Users who have made the post or administrators of the community the post is a part of can edit or delete the post by selecting the desired option from a dropdown.
Users from the same host who are not the author of the post have the option to report the post from the dropdown menu.
Properties passed to the component. See PostHeaderProps.
Displays a post, along with its author's information, and the comments on it.
Outline:
The Post component shows the post itself.
The Comments component shows the comments on the post, including nested ones.
The UserInfoCard component shows the author's information
(username, name and UserIcon).
Used to show a preview of a post
Outline:
Properties passed to the component. See PostPreviewProps.
Displays the privacy notice for the application.
Outline:
Allows users to change their name on the app.
Properties passed to the component. See ProfileTabProps.
Allows community administrators to approve or remove unapproved content on their communities
Outline:
Allows users to register an account on the application.
Outline:
Users can enter their email, a username and password to register.
They must check a box saying that they have read and agree to the privacy notice.
Upon successfully creating the account, they are redirected to their HomePage,
otherwise an error message is displayed.
Allows a user to register for the application.
Outline:
Displays the logo of the app.
Displays the RegistrationCard.
Allows the user to login if they already have an account by clicking the 'Already a user? Login' button.
The search bar used to search for communities.
Outline:
Users can type a host name into the search bar to display a dropdown of the communities on that host.
They can then click a community from the dropdown to be taken to the page of that community.
Allows users to subscribe to communities.
Outline:
The button reads 'Subscribe' if the user is not subscribed.
The button reads 'Unsubscribe' if the user is subscribed.
Properties passed to the component. See SubscribeButtonProps.
Displays the previews of posts from communities that the user is subscribed to.
Shows the icon of a user.
Outline:
Displays the first letter of the user's username in a circle.
This is used in posts to show the author's icon and in the header of the app to show the logged in user.
Properties passed to the component. See UserIconProps.
Displays the user's username, name and user icon in a card.
Properties passed to the component. See UserInfoCardProps.
Allows users to see the posts they have made and their information (username and name).
Wrapper for the application so that all components and pages can access the user information at any point.
This helps to prevent prop drilling.
Displays a welcome card to the user on their HomePage.
AccountsJS has some poorly designed configuration steps, which led to circular dependencies.
This function is used to lazily set the accountsClient, reference,
which is needed to add authentication tokens to each request.
Accounts client to be set.
Generated using TypeDoc
@unifed/frontend
This package contains the frontend code for the application. It is written with React, using GraphQL for communication with the backend.
The main two directories in this package are
componentsandpages.There are also tests (which can be run using
yarn test) to ensure that nothing has regressed.Components
This directory contains the different components that we have created for the application. They are used to break pages into smaller parts and improve code reusability.
In particular, these components are reused within various other components or pages.
Pages
This directory contains the different pages that users can access when they are on the application. Each page corresponds to a URL defined in the
Appcomponent. They make use of both components from thecomponentsdirectory and other local components stored with the page, which are only useful for that particular page.App
This is located in the components directory and is the main entry point for the frontend of the application (it is included by
index.ts, which bootstraps the application). It takes care of URL routing and manages the state of the application, such as whether the user is logged in and whether it is in dark mode.Documentation
Further developer documentation for this package is available here.