gistfile1.txt

import React from "react";
import { ApolloProvider } from "@apollo/react-hooks";
import ApolloClient from "apollo-boost";
import { InMemoryCache, NormalizedCacheObject } from "apollo-cache-inmemory";
import { CachePersistor } from "apollo-cache-persist";
import localforage from "localforage";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { PersistentStorage, PersistedData } from "apollo-cache-persist/types";
import {
    CssBaseline,
    ThemeProvider,
    createMuiTheme,
    StylesProvider
} from "@material-ui/core";
import { deepOrange } from "@material-ui/core/colors";

import { CustomerListScreen } from "./components/customers/CustomerListScreen";
import { CustomerEditScreen } from "./components/customers/CustomerEditScreen";
import { SubscriptionWizardScreen } from "./components/subscriptions/wizard/SubscriptionWizardScreen";
import { SubscriptionListScreen } from "./components/subscriptions/SubscriptionListScreen";
import { Shell } from "./components/shared/Shell";

import { create } from "jss";
import { jssPreset } from "@material-ui/core/styles";

import { useStyles } from "./components/shared/styles";

const jss = create({
    ...jssPreset(),
    insertionPoint: "jss-insertion-point"
});

export const SCHEMA_VERSION = "1";
export const SCHEMA_VERSION_KEY = "press-manager-client/schema-version";
export const DATA_KEY = "press-manager-client/data";

const appTheme = createMuiTheme({
    palette: {
        primary: deepOrange
    }
});

const store = localforage.createInstance({
    name: "press_manager_client_local_store",
    version: 1,
    storeName: "local_data",
    description:
        "Press manager local store, may contain unsychronized data, do not delete"
});

const initialCacheData = {
    localSubscriptions: []
};

const initApp = async () => {
    const cache = new InMemoryCache({
        dataIdFromObject: object => object.id
    });

    const persistor = new CachePersistor({
        cache,
        key: DATA_KEY,
        storage: store as PersistentStorage<
            PersistedData<NormalizedCacheObject>
        >,
        debug: true
    });

    const currentVersion = await store.getItem(SCHEMA_VERSION_KEY);

    if (currentVersion === SCHEMA_VERSION) {
        console.log("Restoring cache...");
        await persistor.restore();
    } else {
        console.warn(
            `WARNING : CACHE VERSIONS DIFFER (in-memory:${currentVersion} app:${SCHEMA_VERSION}) -- PURGING CACHE`
        );
        await persistor.purge();
        await store.setItem(SCHEMA_VERSION_KEY, SCHEMA_VERSION);
    }

    const { REACT_APP_API_HOST, REACT_APP_API_GQL_PATH } = process.env;

    if (!REACT_APP_API_HOST)
        throw new Error("REACT_APP_API_HOST env var missing");

    if (!REACT_APP_API_GQL_PATH)
        throw new Error("REACT_APP_API_GQL_PATH env var missing");

    const client = new ApolloClient({
        uri: "https://preprod.api.contactizy.fr/api/graphql",
        cache
    });

    client.writeData({
        data: initialCacheData
    });

    client.onResetStore(async () =>
        cache.writeData({ data: initialCacheData })
    );

    return client;
};

const App: React.FC = () => {
    const [client, setClient] = React.useState<ApolloClient<any> | undefined>(
        undefined
    );
    const styles = useStyles();

    React.useEffect(() => {
        const init = async () => {
            const client = await initApp();
            setClient(client);
        };

        init();
    }, []);

    if (client === undefined)
        return <div>Initialisation de l'application...</div>;

    return (
        <StylesProvider jss={jss}>
            <ThemeProvider theme={appTheme}>
                <div className={styles.root}>
                    <CssBaseline />
                    <ApolloProvider client={client}>
                        <BrowserRouter>
                            <Shell>
                                <Switch>
                                    <Route exact path="/customers/big">
                                        <CustomerListScreen type="big" />
                                    </Route>
                                    <Route exact path="/customers/small">
                                        <CustomerListScreen type="small" />
                                    </Route>
                                    <Route exact path="/customers/:customerID">
                                        <CustomerEditScreen />
                                    </Route>
                                    <Route exact path="/subscriptions">
                                        <SubscriptionListScreen />
                                    </Route>
                                    <Route exact path="/subscriptions">
                                        <SubscriptionListScreen />
                                    </Route>
                                    <Route path="/subscriptions/:subscriptionID/:step?">
                                        <SubscriptionWizardScreen />
                                    </Route>
                                </Switch>
                            </Shell>
                        </BrowserRouter>
                    </ApolloProvider>
                </div>
            </ThemeProvider>
        </StylesProvider>
    );
};

export default App;