Initial commit

.gitignore

@@ -0,0 +1,17 @@
+.DS_Store
+.env
+.env.test
+.eslintcache
+.idea
+.build
+build
+coverage
+es
+lib
+lerna-debug.log
+node_modules
+npm-debug.log
+package-lock.json
+packages/local-*
+yarn-error.log
+yerna.log

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 8base
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,22 @@
+# 8base App Example
+
+## Server Setup
+
+* Sign up 8base account;
+* Install 8base `yarn global add 8base`;
+* Login to the 8base `8base login`;
+* Go to the server directory `cd server`;
+* Install dependencies `yarn`;
+* Deploy custom functions `8base deploy`;
+* Import schema and data via `8base import -f="./EXPORT.JSON"`;
+
+## Client Setup
+
+* Go to the client directory `cd client`;
+* Install dependencies `yarn`;
+* Create .env file `cp .env.example .env`;
+* Get 8base API endpoint for your account;
+* Enter value from the step 2 to the `REACT_APP_8BASE_API_ENDPOINT` variable;
+* Start app via `yarn start`;
+* Login to the app with your 8base credentials;
+* Explore it.

client/.env.example

@@ -0,0 +1,4 @@
+NODE_PATH=src/
+REACT_APP_8BASE_API_ENDPOINT=https://api.8base.com/
+REACT_APP_AUTH_CLIENT_ID=qGHZVu5CxY5klivm28OPLjopvsYp0baD
+REACT_APP_AUTH_DOMAIN=auth.8base.com

client/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "parser": "babel-eslint",
+  "plugins": [
+    "prettier"
+  ],
+  "extends": [
+    "plugin:prettier/recommended",
+    "react-app"
+  ],
+  "rules": {
+    "prettier/prettier": "error",
+    "no-console": ["warn"],
+    "no-trailing-spaces": "warn",
+    "quote-props": ["error", "as-needed"]
+  }
+}

client/.prettierrc

@@ -0,0 +1,3 @@
+printWidth: 120
+singleQuote: true
+trailingComma: 'es5'

client/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "8base-app-example-client",
+  "version": "1.0.0",
+  "dependencies": {
+    "@8base/app-provider": "^0.4.24",
+    "@8base/auth": "^0.4.24",
+    "@8base/boost": "^0.8.11",
+    "@8base/file-input": "^0.4.24",
+    "@8base/forms": "^0.4.24",
+    "apollo-client": "^2.4.5",
+    "emotion": "^9.2.12",
+    "final-form": "^4.10.0",
+    "final-form-arrays": "^1.1.0",
+    "graphql": "^0.13.2",
+    "graphql-tag": "^2.9.2",
+    "luxon": "^1.5.0",
+    "prop-types": "^15.6.2",
+    "ramda": "^0.25.0",
+    "react": "^16.6.0",
+    "react-apollo": "^2.2.4",
+    "react-dom": "^16.6.0",
+    "react-emotion": "^9.2.12",
+    "react-final-form": "^3.6.7",
+    "react-final-form-arrays": "^1.1.0",
+    "react-router-dom": "^4.4.0-alpha.6",
+    "react-scripts": "1.1.5",
+    "react-toastify": "^4.4.0",
+    "recompose": "^0.27.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "eslint": "eslint src/**/*.js"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "babel-eslint": "^9.0.0",
+    "eslint": "^5.8.0",
+    "eslint-config-prettier": "^3.1.0",
+    "eslint-config-react-app": "^3.0.5",
+    "eslint-plugin-flowtype": "^2.2.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-prettier": "^3.0.0",
+    "eslint-plugin-react": "^7.11.1",
+    "prettier": "^1.14.3"
+  }
+}

client/public/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">
+    <title>8base App Example</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

client/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "8base App Example",
+  "name": "8base App Example",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

client/src/Application.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
+import { EightBaseAppProvider } from '@8base/app-provider';
+import { EightBaseBoostProvider, AsyncContent } from '@8base/boost';
+import { ToastContainer, toast } from 'react-toastify';
+
+import { ProtectedRoute } from 'shared/components';
+import { TOAST_SUCCESS_MESSAGE } from 'shared/constants';
+
+import { MainPlate, ContentPlate, Nav } from './components';
+import { Auth } from './routes/auth';
+import { Brokers } from './routes/brokers';
+import { Customers } from './routes/customers';
+import { Properties } from './routes/properties';
+import { Listings } from './routes/listings';
+
+const {
+  REACT_APP_8BASE_API_ENDPOINT,
+  REACT_APP_AUTH_DOMAIN,
+  REACT_APP_AUTH_CLIENT_ID,
+} = process.env;
+
+class Application extends React.PureComponent {
+  renderContent = ({ loading }) => (
+    <AsyncContent loading={loading} stretch>
+      <Switch>
+        <Route path="/auth" component={ Auth } />
+        <Route>
+          <MainPlate>
+            <Nav.Plate color="BLUE">
+              <Nav.Item icon="Group" to="/brokers" label="Brokers" />
+              <Nav.Item icon="Customers" to="/customers" label="Customers" />
+              <Nav.Item icon="House" to="/properties" label="Properties" />
+              <Nav.Item icon="Contract" to="/listings" label="Listings" />
+            </Nav.Plate>
+            <ContentPlate>
+              <Switch>
+                <ProtectedRoute exact path="/brokers" component={ Brokers } />
+                <ProtectedRoute exact path="/customers" component={ Customers } />
+                <ProtectedRoute exact path="/properties" component={ Properties } />
+                <ProtectedRoute exact path="/listings" component={ Listings } />
+                <Redirect to="/brokers" />
+              </Switch>
+            </ContentPlate>
+          </MainPlate>
+        </Route>
+      </Switch>
+    </AsyncContent>
+  );
+
+  onRequestSuccess = ({ operation }) => {
+    const message = operation.getContext()[TOAST_SUCCESS_MESSAGE];
+
+    if (message) {
+      toast.success(message);
+    }
+  };
+
+  render() {
+    return (
+      <BrowserRouter>
+        <EightBaseBoostProvider>
+          <EightBaseAppProvider
+            uri={ REACT_APP_8BASE_API_ENDPOINT }
+            authDomain={ REACT_APP_AUTH_DOMAIN }
+            authClientId={ REACT_APP_AUTH_CLIENT_ID }
+            authRedirectUri={ `${window.location.origin}/auth/callback` }
+            onRequestSuccess={ this.onRequestSuccess }
+          >
+            { this.renderContent }
+          </EightBaseAppProvider>
+          <ToastContainer position={ toast.POSITION.BOTTOM_LEFT } />
+        </EightBaseBoostProvider>
+      </BrowserRouter>
+    );
+  }
+}
+
+
+export { Application };

client/src/components/Breadcrumbs.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'react-emotion';
+import { matchPath } from 'react-router';
+import { withRouter, Link as RouterLink } from 'react-router-dom';
+import { Grid, Breadcrumbs as BoostBreadcrumbs, Link } from '@8base/boost';
+
+const BREADCRUMBS_ROUTES = [
+  {
+    path: '/brokers',
+    component: () => 'Brokers',
+    matchOptions: { exact: true },
+  },
+  {
+    path: '/customers',
+    component: () => 'Customers',
+    matchOptions: { exact: true },
+  },
+  {
+    path: '/properties',
+    component: () => 'Properties',
+    matchOptions: { exact: true },
+  },
+  {
+    path: '/listings',
+    component: () => 'Listings',
+    matchOptions: { exact: true },
+  },
+];
+
+const HeaderTag = styled(Grid.Box)({
+  paddingLeft: '2rem',
+});
+
+const BreadcrumbsItem = props => <Link tagName={RouterLink} color="DARK_GRAY1" size="lg" {...props} />;
+
+let Breadcrumbs = ({ location }) => (
+  <HeaderTag area="breadcrumbs" justifyContent="center">
+    <BoostBreadcrumbs
+      pathname={location.pathname}
+      routes={BREADCRUMBS_ROUTES}
+      matchPath={matchPath}
+      itemTagName={BreadcrumbsItem}
+    />
+  </HeaderTag>
+);
+
+Breadcrumbs = withRouter(Breadcrumbs);
+
+export { Breadcrumbs };

client/src/components/ContentPlate.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'react-emotion';
+import { Grid } from '@8base/boost';
+
+const ContentPlateTag = styled(Grid.Box)({
+  padding: '0 2rem 2rem 2rem',
+  minHeight: 0,
+});
+
+const ContentPlate = ({ children }) => <ContentPlateTag area="content">{children}</ContentPlateTag>;
+
+export { ContentPlate };

client/src/components/Header.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'react-emotion';
+import { Grid } from '@8base/boost';
+
+import { UserDropdown } from './UserDropdown.js';
+import logo from 'images/8base-logo-red-black.svg';
+
+const HeaderTag = styled(Grid.Layout)({
+  height: '6rem',
+  padding: '0 2rem',
+  backgroundColor: '#fff',
+  borderBottom: '1px solid #D0D7DD',
+});
+
+const HeaderLogoTag = styled('img')({
+  height: '3rem',
+});
+
+const Header = () => (
+  <Grid.Box area="header">
+    <HeaderTag columns="1fr auto" gap="lg">
+      <Grid.Box justifyContent="center">
+        <Link to="/">
+          <HeaderLogoTag src={logo} alt="8base logo" />
+        </Link>
+      </Grid.Box>
+      <Grid.Box justifyContent="center">
+        <UserDropdown />
+      </Grid.Box>
+    </HeaderTag>
+  </Grid.Box>
+);
+
+export { Header };