bodyshop/admin/src/components/admin-root/admin-root.component.jsx

import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
import { ApolloLink } from "apollo-boost";
import { setContext } from "apollo-link-context";
import { HttpLink } from "apollo-link-http";
import apolloLogger from "apollo-link-logger";
import buildHasuraProvider from "ra-data-hasura-graphql";
import React, { Component } from "react";
import {
  Admin,
  EditGuesser,
  ListGuesser,
  Resource,
  ShowGuesser,
} from "react-admin";
import { FaFileInvoiceDollar } from "react-icons/fa";
import CircularProgress from "@material-ui/core/CircularProgress";
import { auth } from "../../firebase/admin-firebase-utils";
import authProvider from "../auth-provider/auth-provider";
import JoblinesCreate from "../joblines/joblines.create";
import JoblinesEdit from "../joblines/joblines.edit";
import JoblinesList from "../joblines/joblines.list";
import JoblinesShow from "../joblines/joblines.show";
import JobsCreate from "../jobs/jobs.create";
import JobsEdit from "../jobs/jobs.edit";
import JobsList from "../jobs/jobs.list";
import JobsShow from "../jobs/jobs.show";

const httpLink = new HttpLink({
  uri: process.env.REACT_APP_GRAPHQL_ENDPOINT,
  headers: {
    "x-hasura-admin-secret": `Dev-BodyShopApp!`,
    // 'Authorization': `Bearer xxxx`,
  },
});

const authLink = setContext((_, { headers }) => {
  return (
    auth.currentUser &&
    auth.currentUser.getIdToken().then((token) => {
      if (token) {
        return {
          headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : "",
          },
        };
      } else {
        return { headers };
      }
    })
  );
});

const middlewares = [];
if (process.env.NODE_ENV === "development") {
  middlewares.push(apolloLogger);
}

middlewares.push(authLink.concat(httpLink));

const client = new ApolloClient({
  link: ApolloLink.from(middlewares),
  cache: new InMemoryCache(),
});

// const client = new ApolloClient({
//   uri: process.env.REACT_APP_GRAPHQL_ENDPOINT,
//   cache: new InMemoryCache(),
//   headers: {
//     "x-hasura-admin-secret": `Dev-BodyShopApp!`,
//     // 'Authorization': `Bearer xxxx`,
//   },
// });

class AdminRoot extends Component {
  constructor() {
    super();
    this.state = { dataProvider: null };
  }
  componentDidMount() {
    buildHasuraProvider({
      client,
    }).then((dataProvider) => this.setState({ dataProvider }));
  }

  render() {
    const { dataProvider } = this.state;

    if (!dataProvider) {
      return (
        <div>
          <CircularProgress />
        </div>
      );
    }

    return (
      <ApolloProvider client={client}>
        <Admin dataProvider={dataProvider} authProvider={authProvider}>
          <Resource
            icon={FaFileInvoiceDollar}
            name="jobs"
            list={JobsList}
            edit={JobsEdit}
            create={JobsCreate}
            show={JobsShow}
          />
          <Resource
            name="joblines"
            list={JoblinesList}
            edit={JoblinesEdit}
            create={JoblinesCreate}
            show={JoblinesShow}
          />
          <Resource
            name="bodyshops"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="owners"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="vehicles"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="appointments"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="available_jobs"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="cccontracts"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="conversations"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="counters"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="courtesycars"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="csi"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="csiquestions"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="documents"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="employees"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="invoicelines"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="invoices"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="job_conversations"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="masterdata"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="messages"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="notes"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="parts_order_lines"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="parts_orders"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="payments"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="scoreboard"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="templates"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="timetickets"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="users"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
          <Resource
            name="vendors"
            list={ListGuesser}
            edit={EditGuesser}
            show={ShowGuesser}
          />
        </Admin>
      </ApolloProvider>
    );
  }
}

export default AdminRoot;