Introduzione

Modello

Componenti

Servizi

Layout

CLI

Risorse

API

Contenitore dell’Applicazione

Il componente Root si occupa di fornire un contesto (ovvero uno stato globale) all’applicativo amministrativo.

import { Root as AdminRoot, ModelsRepository } from 'flamingo-admin';
import { User, Post, Comment } from './models';

// Necessario per inizializzare i modelli
const models = new ModelsRepository([ User, Post, Comment ]);

class MyAdminApp extends React.Component {
  render() {
    return (
      <AdminRoot repository={models}>
        <h1>Pannello di Amministrazione</h1>
        ...
      </AdminRoot>
    );
  }
}
Caution Il componente Root deve sempre essere posizionato come parent di tutti gli altri componenti utilizzati nell’applicativo.

Proprietà

  • * repository ModelsRepository

    L’istanza di ModelsRepository contenente i modelli. E' un campo obbligatorio e deve essere inizializzato, ad esempio:

    new ModelsRepository([User, Post, Comment])

  • client Client

    L’implementazione di un Client, adatto alle API a cui Flamingo deve collegarsi. Di default viene inizializzato a un nuovo JsonApiClient, ovvero:

    new JsonApiClient({ baseUrl: '/api' })

    E' possibile modificare l’URL, o utilizzare un client completamente personalizzato, istanziandolo e passandolo al <Root />

    const apiClient = new JsonApiClient({ baseUrl: '/api/v1' });
// ...
<AdminRoot client={apiClient}>{/* ... */}</AdminRoot>

    Per la personalizzazione del Client vedere la pagina Client.

    Nome Errato

    Il JsonApiClient al momento è chiamato StandardClient nel codice, ma deve essere sostituito.

  • baseUrl string

    L’URL dal quale verrà servita l’applicazione. Viene utilizzato per la configurazione di base di react-router.

    Di default l’URL del pannello di amministrazione è /backend

  • loginUrl string

    L’URL relativo al baseUrl dove verrà servita l’interfaccia di Login. Serve alla libreria per gestire automaticamente i redirect.

    Se hai montato la pagina di Login all’URL standard ovvero /login, puoi omettere questo campo.

Integrazione manuale con Redux & React-Router

Tip

Questa parte è necessaria esclusivamente se si vuole utilizzare Redux nel proprio progetto, oppure se si vuole utilizzare un <*Router> diverso dal <BroswerRouter> di React Router.

Se non sai cos’è Redux e vuoi andare subito al sodo, puoi saltare la lettura e rinviarla ad un secondo momento.

In ogni caso, è possibile rimandare questa operazione fino al momento in cui non è necessaria.

Di default, l’integrazione con Redux è gestita automaticamente da flamingo-admin, dunque non è necessario installarlo manualmente.

In caso di applicativi più complessi, è possibile specificare uno store esterno e disabilitare la creazione automatica del <Provider> e dello Store. In questo caso è necessario seguire i seguenti passaggi:

  1. Utilizzare il componente SimpleRoot al posto di Root, ed effettuare manualmente il wrap nel Provider e del Router:

    import { SimpleRoot as AdminSimpleRoot } from 'flamingo-admin';

export class MyReduxAdminApp extends React.Component {
  render() {
    /**
     * In questo caso lo store `myStore` deve essere inizializzato manualmente
     */
    return (
      <BrowserRouter>
        <Provider store={myStore}>
          <AdminSimpleRoot repository={...}>
            ...
          </AdminSimpleRoot>
        </Provider>
      </BrowserRouter>
    );
  }
}

  2. Aggiungere la chiave auth nei propri reducers dello store, ad esempio:

    import { authReducer } from 'flamingo-admin';

const rootReducer = combineReducers({
  auth: authReducer,
  // ...
});

const myStore = createStore(rootReducer);
// ...

Dettagli

Il componente Root fornisce a tutti i componenti inferiori un contesto di esecuzione. Questo è implementato mediante:

  • L’utilizzo delle API del Context di React

  • La gestione di uno store di Redux

  • L’inizializzazione del <BrowserRouter> di React Router