Adding of generic appointments to calendar.

client/src/pages/manage/manage.page.container.jsx

@@ -1,20 +1,28 @@
+import { notification } from "antd";
 import React, { useEffect } from "react";
-import ManagePage from "./manage.page";
 import { useQuery } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { setBodyshop } from "../../redux/user/user.actions";
-import { connect } from "react-redux";
-import { notification } from "antd";
-import { useTranslation } from "react-i18next";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import ManagePage from "./manage.page";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
+});
 
 const mapDispatchToProps = dispatch => ({
   setBodyshop: bs => dispatch(setBodyshop(bs))
 });
 
 export default connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps
-)(function ManagePageContainer({ match, setBodyshop }) {
+)(function ManagePageContainer({ match, setBodyshop, bodyshop }) {
   const { error, data } = useQuery(QUERY_BODYSHOP, {
     fetchPolicy: "network-only"
   });
@@ -30,5 +38,7 @@ export default connect(
     };
   }, [data, setBodyshop]);
 
+  //TODO Translate later.
+  if (!bodyshop) return <LoadingSpinner message="Loading bodyshop data." />;
   return <ManagePage match={match} />;
 });