Simplify WWW components with boundary component & destructuring assig…

…nment defaults

www/src/App.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import "semantic-ui-css/semantic.min.css";
 import "./App.css";
 import { XLayout, XPrivateRoute } from "./components/layout";
+import { XLoadingMessage } from "./components/messages";
 import { HTTP_URL } from "./config";
 import { Routes } from "./config/routes";
 import { XGraphProvider } from "./graphql";
@@ -37,6 +38,7 @@ type StatusResult = {
 
 const App = () => {
   const [userID, setUserID] = useState<string>(null);
+  const [loaded, setLoaded] = useState<boolean>(false);
   const [authenticated, setAuthenticated] = useState(false);
   const [activated, setActivated] = useState(false);
   const [admin, setAdmin] = useState(false);
@@ -46,6 +48,7 @@ const App = () => {
       resp =>
         resp.json().then(
           (data: StatusResult) => {
+            setLoaded(true);
             setUserID(data.userid ? String(data.userid) : null);
             setAuthenticated(data.is_authenticated || false);
             setActivated(data.is_activated || false);
@@ -59,6 +62,15 @@ const App = () => {
 
   useEffect(fetchUserInfo, []);
 
+  if (!loaded) {
+    return (
+      <XLoadingMessage
+        title="Paragon Loading"
+        msg="Initializing application status..."
+      />
+    );
+  }
+
   let authz = authenticated && (activated || admin);
 
   return (

www/src/components/layout/XBoundary.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { FunctionComponent } from "react";
+
+type BoundaryProps = {
+  show?: boolean;
+  boundary: React.ReactNode;
+};
+
+const XBoundary: FunctionComponent<BoundaryProps> = props => (
+  <React.Fragment>
+    {props.show ? props.children : props.boundary}
+  </React.Fragment>
+);
+
+export default XBoundary;

www/src/components/layout/index.ts

@@ -1,9 +1,10 @@
-import "./index.css";
+import './index.css';
 
-export { default as X404 } from "./X404";
-export { default as XCardGroup } from "./XCardGroup";
-export { default as XLayout } from "./XLayout";
-export { default as XPrivateRoute } from "./XPrivateRoute";
-export { default as XSidebar } from "./XSidebar";
-export { default as XToolbar } from "./XToolbar";
-export { default as XUnimplemented } from "./XUnimplemented";
+export {default as X404} from './X404';
+export {default as XBoundary} from './XBoundary';
+export {default as XCardGroup} from './XCardGroup';
+export {default as XLayout} from './XLayout';
+export {default as XPrivateRoute} from './XPrivateRoute';
+export {default as XSidebar} from './XSidebar';
+export {default as XToolbar} from './XToolbar';
+export {default as XUnimplemented} from './XUnimplemented';

www/src/components/task/XNoTasksFound.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Header, Icon, Segment } from "semantic-ui-react";
+
+const XNoTasksFound = () => (
+  <Segment placeholder>
+    <Header as="h2" icon>
+      <Icon name="search" />
+      No Tasks Found
+      <Header.Subheader>
+        When new tasks are created, they'll be displayed here.
+      </Header.Subheader>
+    </Header>
+  </Segment>
+);
+
+export default XNoTasksFound;

www/src/components/task/index.ts

@@ -1,7 +1,10 @@
-export { default as XTaskCard, XTaskCardDisplayType } from './XTaskCard';
-export { default as XTaskContent } from './XTaskContent';
-export { default as XTaskError } from './XTaskError';
-export { default as XTaskOutput } from './XTaskOutput';
-export { default as XTaskStatus } from './XTaskStatus';
-export { default as XTaskSummary, XTaskSummaryDisplayType } from './XTaskSummary';
-
+export { default as XNoTasksFound } from "./XNoTasksFound";
+export { default as XTaskCard, XTaskCardDisplayType } from "./XTaskCard";
+export { default as XTaskContent } from "./XTaskContent";
+export { default as XTaskError } from "./XTaskError";
+export { default as XTaskOutput } from "./XTaskOutput";
+export { default as XTaskStatus } from "./XTaskStatus";
+export {
+  default as XTaskSummary,
+  XTaskSummaryDisplayType
+} from "./XTaskSummary";