From 834492182ede6e01f31afe39bfe8cd940ed58f96 Mon Sep 17 00:00:00 2001 From: Simon Rozsival Date: Wed, 23 Nov 2016 19:12:35 +0100 Subject: [PATCH] Updated Web application (markdown) --- Web-application.md | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/Web-application.md b/Web-application.md index 29e2486..78dc782 100644 --- a/Web-application.md +++ b/Web-application.md @@ -38,30 +38,50 @@ The implementation of *WebApp* is split across more than a hundred small compone As was mentioned earlier in the text, there is over a hundred components in the whole application and most of them are very simple. Some of the most important and widely used components and described in the following paragraphs. -#### PageContent +#### App + +[App](https://github.com/ReCodEx/web-app/blob/master/src/containers/App/App.js) container is meant to be the root of the *react-router* tree. It checks whether a user is logged in and loads his profile and settings from the API. App container also handles access token refreshing. + +#### LayoutContainer + +[LayoutContainer](https://github.com/ReCodEx/web-app/blob/master/src/containers/LayoutContainer/LayoutContainer.js) handles the dependency injection of the localized links based on the current language stated in the URL. It also controls the state of the sidebar - collapsing and showing the sidebar. + +##### Layout, Header, Sidebar @todo +#### PageContent + +The [PageContent](https://github.com/ReCodEx/web-app/blob/master/src/components/PageContent/PageContent.js) component holds the main content of a page with the common structure for all pages - *title*, *description*, *breadcrumbs*, *content*. The component passes the title and description to the [Helmet](https://github.com/nfl/react-helmet) library which reflects these into the `` section of the HTML document. + #### ResourceRenderer [ResourceRenderer](https://github.com/ReCodEx/web-app/blob/master/src/components/ResourceRenderer/ResourceRenderer.js) component is given a *resource* managed by the *resourceManager* as a *prop* and displays different content based on the state of the given *resource* - still loading, loading failed, fully loaded. Passing content for the *loading* and *failed* states though *props* is optional; however, the content for the *loaded* state is required and must be passed as a child to the `ResourceManager`. +Multiple resources can be passed as an array to the component and it will wait in the *loading* state until some of the resources are still loading. If one of the resources fails to load the component will switch to the *failed* state. When all the files are fully loaded then the component displays the content for the *loaded* state. + +It is worth mentioning that the component is completely stateless and "switching of the states" is the effect of several renderings of the component over time. + #### `Page` -@todo +[Page](https://github.com/ReCodEx/web-app/blob/master/src/components/Page/Page.js) combines the two previously described components, since they are often used together for displaying a page content which is dependant on a resource. #### Bootstrap and AdminLTE theme The UI of the application is built using the stylesheets from the [Bootstrap framework](http://getbootstrap.com/) from Twitter and the [AdminLTE](https://almsaeedstudio.com/) theme from Abdullah Almsaeed. None of the JavaScript plugins from these libraries is used. -A package [react-bootstrap](https://react-bootstrap.github.io/) is used. Components sepcific to the *AdminLTE* theme are implemented and stored in the `src/components/AdminLTE` folder and its subfolders. +A package [react-bootstrap](https://react-bootstrap.github.io/) is used. Components specific to the *AdminLTE* theme are implemented and stored in the `src/components/AdminLTE` folder and its subfolders. #### Forms @todo +### Localization + +@todo + ## Installation Web application requires [NodeJS](https://nodejs.org/en/) server as its runtime environment. This runtime is needed for executing JavaScript code on server and sending the pre-render parts of pages to clients, so the final rendering in browsers is a lot quicker and the page is accessible to search engines for indexing.