# "Airframe Admin" (React)

{% hint style="info" %}
**"Airframe Admin" - jQuery/HTML Version Details**

* Live Preview: [http://dashboards.webkom.co/jquery/airframe](http://dashboards.webkom.co/react/airframe)
* Live Docs: <https://webkom.gitbook.io/spin/v/airframe/airframe-react/documentation-react>
* Created: 12 Sep. 2019
* By: Tomasz Owczarczyk
* Email: <tomasz.owczarczyk@me.com>
  {% endhint %}

This Airframe project is a typical Webpack based React app, [React Router](https://reacttraining.com/react-router/web/guides/quick-start) also included together with customised [Reacstrap](https://reactstrap.github.io). This project has all of it's few dependencies up to date and it will be updated on a regular basis. This project doesn't support SSR. If you need it - use the [NextJs](https://github.com/zeit/next.js/) based version.

### Initial Configuration:

You need to have [NodeJs](https://nodejs.org/en/) (>= 10.0.0) installed on your local machine, before attempting to run a dev environment.

1. Extract contents of the package to your local machine.
2. Using the Terminal navigate to the extracted contents.
3. Run `npm install`.

Make sure you have a file called `.npmrc` in the extracted directory. Those files are typically hidden in Unix based systems.

### Development

To start the development environment type `npm start` in the console. This will start a development server with hot reloading enabled.

### Production

To create a production build type `npm run build:prod`. After the process is complete you can copy the output from the `/dist/` directory. The output files are minified and ready to be used in a production environment.

## Build Customization

You can customize the build to suit your specific needs by adjusting the [Webpack](https://webpack.js.org) configuration files. Those files can be found in the `/build` directory. For more details checkout the documentation of WebPack.

### Project Details

Some points of interest about the project project structure:

* `app/components` - custom React components should go here
* `app/styles` - styles added here won't be treated as CSS Modules, so any global classes or library styles should go here
* `app/layout` - the `AppLayout` component can be found here which hosts page contents within itself; additional sidebars and navbars should be placed in `./components/` subdir.
* `app/colors.js` - exports an object with all of the defined colors by the Dashboard. Useful for styling JS based components - for example charts.
* `app/routes` - PageComponents should be defined here, and imported via `index.js`. More details on that later.

### Defining Routes

Route components should be placed in separate directories inside the `/routes/` directory. Next you should open `/routes/index.js` file and attach the component. You can do this in two diffrent ways:

### **Static Imports**

Pages imported statically will be loaded eagerly on PageLoad with all of the other content. There will be no additional loads when navigating to such pages **BUT** the initial app load time will also be longer. To add a statically imported page it should be done like this:

```jsx
// Import the default component
import SomePage from './SomePage';
// ...
export const RoutedContent = () => {
    return (
        <Switch>
            { /* ... */ }
            { /* Define the route for a specific path */ }
            <Route path="/some-page" exact component={SomePage} />
            { /* ... */ }
        </Switch>
    );
}
```

### **Dynamic Imports**

Dynamically imported pages will only be loaded when they are needed. This will decrease the size of the initial page load and make the App load faster. You can use `React.Suspense` to achieve this. Example:

```jsx
// Create a Lazy Loaded Page Component Import
const SomeAsyncPage = React.lazy(() => import('./SomeAsyncPage'));
// ...
export const RoutedContent = () => {
    return (
        <Switch>
            { /* ... */ }
            { /*
                Define the route and wrap the component in a React.Suspense loader.
                The fallback prop might contain a component which will be displayed
                when the page is loading.
            */ }
            <Route path="/some-async-page">
                <React.Suspense fallback={ <PageLoader /> }>
                    <SomeAsyncPage />
                </React.Suspense>
            </Route>
        </Switch>
    );
}
```

### **Route specific Navbars and Sidebars**

Sometimes you might want to display additional content in the Navbar or the Sidebar. To do this you should define a customized Navbar/Sidebar component and attach it to a particular route. Example:

```jsx
import { SidebarAlternative } from './../layout/SidebarAlternative';
import { NavbarAlternative } from './../layout/NavbarAlternative';
// ...
export const RoutedNavbars  = () => (
    <Switch>
        { /* Other Navbars: */}
        <Route
            component={ NavbarAlternative }
            path="/some-custom-navbar-route"
        />
        { /* Default Navbar: */}
        <Route
            component={ DefaultNavbar }
        />
    </Switch>  
);

export const RoutedSidebars = () => (
    <Switch>
        { /* Other Sidebars: */}
        <Route
            component={ SidebarAlternative }
            path="/some-custom-sidebar-route"
        />
        { /* Default Sidebar: */}
        <Route
            component={ DefaultSidebar }
        />
    </Switch>
);
```

### Theming

You can set the color scheme for the sidebar and navbar by providing `initialStyle` and `initialColor` to the `<ThemeProvider>` component which should be wrapping the `<Layout>` component.

Possible `initialStyle` values:

* light
* dark
* color

Possible `initialColor` values:

* primary
* success
* info
* warning
* danger
* indigo
* purple
* pink
* yellow

### Programatic Theme Changing

You can change the color scheme on runtime by using the `ThemeConsumer` from the components. Example:

```jsx
// ...
import { ThemeContext } from './../components';
// ...
const ThemeSwitcher = () => (
    <ThemeConsumer>
        ({ onChangeTheme }) => (
            <React.Fragment>
                <Button onClick={() => onThemeChange({ style: 'light' })}>
                    Switch to Light
                </Button>
                <Button onClick={() => onThemeChange({ style: 'dark' })}>
                    Switch to Dark
                </Button>
            </React.Fragment>
        )
    </ThemeConsumer>
);
```

Options provided by the `ThemeConsumer`:  ***style** - current theme style* **color** - current theme color *\*onChangeTheme({ style?, color? })* - allows to change the theme

## **Sources and Credits**

All of the listed dependencies are being kept **up to date**.

* *ag-grid 21.X.X*
* *bootstrap 4.X.X*
* *font-awesome 4.7.0*
* *holderjs 2.9.X*
* *lodash 4.X.X*
* *moment 2.X.X*
* *react 16.X.X*
* *react-beautiful-dnd 11.0.4*
* *react-big-calendar 0.22.X*
* *react-bootstrap-table-next 3.1.4*
* *react-bootstrap-typeahead 4.X.X*
* *react-datepicker 2.7.0*
* *react-dropzone 10.X.X*
* *react-grid-layout 0.16.X*
* *react-helmet 5.X.X*
* *react-hot-loader 4.11.X*
* *react-image-crop 8.0.2*
* *react-quill 1.X.X*
* *react-router 5.X.X*
* *react-text-mask 5.X.X*
* *react-toastify 5.X.X*
* *react-toggle 4.X.X*
* *reactstrap 8.X.X*
* *reacharts 1.X.X*
* *text-mask-addons 3.X.X*