Editting readme for example and linting example.

examples/nextjs-api-sales/README.md

@@ -1,8 +1,24 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+### Budibase API Next.js example
+
+This is an example of how Budibase can be used as a backend for a Postgres database for a Next.js sales app. You will 
+need to follow the walk-through that has been published on the Budibase blog to set up your Budibase app for this example.
+
+## Pre-requisites
+
+To use this example you will need [Docker](https://www.docker.com/), [Docker Compose](https://docs.docker.com/compose/) and [Node.js](https://nodejs.org/en/) installed.
 
 ## Getting Started
 
-First, run the development server:
+The first step is to set up the database - you can do this by going to the `db/` directory and running the command:
+
+```bash
+docker-compose up
+```
+
+The next step is to follow the example walk-through and set up a Budibase app as it describes. Once you've done
+this you can configure the settings in `next.config.js`, specifically the `apiKey`, `host` and `appName`.
+
+Finally, you can start the dev server with the following command:
 
 ```bash
 npm run dev
@@ -10,10 +26,12 @@ npm run dev
 yarn dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Accessing the app
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+Open [http://localhost:3001](http://localhost:3001) with your browser to see the sales app.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+Look in the API routes (`pages/api/sales.ts` and `pages/api/salespeople.ts`) to see how this is integrated with Budibase.
+There is also a utility file where some core functions and types have been defined, in `utilities/index.ts`.
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+## Attribution
+This example was set up using [Next.js](https://nextjs.org/) and bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

examples/nextjs-api-sales/components/notifications.ts

@@ -9,7 +9,7 @@ const notifications = {
       title: title,
       dismiss: {
         duration: 10000,
-      }
+      },
     })
   },
   success: (message: string, title: string) => {
@@ -20,9 +20,9 @@ const notifications = {
       title: title,
       dismiss: {
         duration: 3000,
-      }
+      },
     })
-  }
+  },
 }
 
 export default notifications

examples/nextjs-api-sales/next.config.js

@@ -3,13 +3,14 @@ const { join } = require("path")
 const nextConfig = {
   reactStrictMode: true,
   sassOptions: {
-    includePaths: [join(__dirname, "styles")]
+    includePaths: [join(__dirname, "styles")],
   },
   serverRuntimeConfig: {
-    apiKey: "",
+    apiKey:
+      "bf4d86af933b5ac0af0fdbe4bf7d89ff-f929752a1eeaafb00f4b5e3325097d51a44fe4b39f22ed857923409cc75414b379323a25ebfb4916",
     appName: "sales",
-    host: "http://localhost:10000"
-  }
+    host: "http://localhost:10000",
+  },
 }
 
 module.exports = nextConfig

examples/nextjs-api-sales/pages/api/sales.ts

@@ -15,7 +15,7 @@ async function getSales(req: any) {
       },
       paginate: true,
       bookmark: parseInt(page),
-    }
+    },
   })
 }
 

examples/nextjs-api-sales/pages/api/salespeople.ts

@@ -11,7 +11,7 @@ async function getSalespeople() {
         order: "ascending",
         column: "person_id",
       },
-    }
+    },
   })
 }
 

examples/nextjs-api-sales/utilities/index.ts

@@ -9,18 +9,23 @@ const host = serverRuntimeConfig["host"]
 let APP: App | null = null
 let TABLES: { [key: string]: Table } = {}
 
-export async function makeCall(method: string, url: string, opts?: { body?: any, appId?: string }): Promise<any> {
+export async function makeCall(
+  method: string,
+  url: string,
+  opts?: { body?: any; appId?: string }
+): Promise<any> {
   const fetchOpts: any = {
     method,
     headers: {
       "x-budibase-api-key": apiKey,
-    }
+    },
   }
   if (opts?.appId) {
     fetchOpts.headers["x-budibase-app-id"] = opts.appId
   }
   if (opts?.body) {
-    fetchOpts.body = typeof opts.body !== "string" ? JSON.stringify(opts.body) : opts.body
+    fetchOpts.body =
+      typeof opts.body !== "string" ? JSON.stringify(opts.body) : opts.body
     fetchOpts.headers["Content-Type"] = "application/json"
   }
   const finalUrl = `${host}/api/public/v1/${url}`
@@ -41,17 +46,22 @@ export async function getApp(): Promise<App> {
   const apps: AppSearch = await makeCall("post", "applications/search", {
     body: {
       name: appName,
-    }
+    },
   })
   const app = apps.data.find((app: App) => app.name === appName)
   if (!app) {
-    throw new Error("Could not find app, please make sure app name in config is correct.")
+    throw new Error(
+      "Could not find app, please make sure app name in config is correct."
+    )
   }
   APP = app
   return app
 }
 
-export async function findTable(appId: string, tableName: string): Promise<Table> {
+export async function findTable(
+  appId: string,
+  tableName: string
+): Promise<Table> {
   if (TABLES[tableName]) {
     return TABLES[tableName]
   }
@@ -63,7 +73,9 @@ export async function findTable(appId: string, tableName: string): Promise<Table
   })
   const table = tables.data.find((table: Table) => table.name === tableName)
   if (!table) {
-    throw new Error("Could not find table, please make sure your app is configured with the Postgres datasource correctly.")
+    throw new Error(
+      "Could not find table, please make sure your app is configured with the Postgres datasource correctly."
+    )
   }
   TABLES[tableName] = table
   return table

package.json

@@ -39,7 +39,7 @@
     "lint:prettier": "prettier --check \"packages/**/*.{js,ts,svelte}\"",
     "lint": "yarn run lint:eslint && yarn run lint:prettier",
     "lint:fix:eslint": "eslint --fix packages",
-    "lint:fix:prettier": "prettier --write \"packages/**/*.{js,ts,svelte}\"",
+    "lint:fix:prettier": "prettier --write \"packages/**/*.{js,ts,svelte}\" && prettier --write \"examples/**/*.{js,ts,svelte}\"",
     "lint:fix:ts": "lerna run lint:fix",
     "lint:fix": "yarn run lint:fix:ts && yarn run lint:fix:prettier && yarn run lint:fix:eslint",
     "test:e2e": "lerna run cy:test --stream",