feat: Desk booking + Vercel deployment

.env.example

@@ -1,3 +1,5 @@
-REACT_APP_BACKEND_URL=
-REACT_APP_ARCHILOGIC_API_URL=https://api.archilogic.com
+ARCHILOGIC_API_URL=https://api.archilogic.com
+ARCHILOGIC_SECRET_KEY=
+
+REACT_APP_ARCHILOGIC_API_URL=$ARCHILOGIC_API_URL
 REACT_APP_PUBLISHABLE_TOKEN=

.gitignore

@@ -23,3 +23,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vercel

README.md

@@ -1,24 +1,31 @@
-# Archilogic Room Booking App Example
+# Archilogic Desk & Room Booking App Example
 
 This is a simple prototype of a room booking app for managing room booking in a given space.
 
-Check out a [Demo](https://archilogic-room-booking.herokuapp.com)
+It features a client-side application (built with [React.js](https://create-react-app.dev/)) and a serverless backend (powered by [Vercel](https://vercel.com/)) communicating with Archilogic's [Space API](https://developers.archilogic.com/space-api/v2/introduction.html)
 
-## Setup local server
 
-Navigate to the server folder and run:
+## Set Environment Variables
 
-    yarn install
+To run the app we'll need to set some environment variables first.  
+
+- The backend needs a 'secret token' to negotiate a temporary token: [secret token documentation](https://developers.archilogic.com/space-api/v2/introduction.html#secret-access-token)
+- The client needs a 'publishable token' for readonly access of Space API resources: [publishable token documentation](https://developers.archilogic.com/space-api/v2/introduction.html#publishable-access-token)
+
+
+You can generate both tokens on the API keys page:[https://developers.archilogic.com/api-keys.html](https://developers.archilogic.com/api-keys.html).
 
-The server needs a secret token to negotiate a temporary token.
+![](token.png)
 
-https://developers.archilogic.com/space-api/v2/introduction.html#secret-access-token
 
-Create a new secret token and add it to the ARCHILOGIC_SECRET_KEY environment variable.
+- Create a new `.env` file by copying the example 
+```bash
+cp .env.example .env
+```
 
-then run:
+- Set your new 'secret token' to the ARCHILOGIC_SECRET_KEY environment variable.
+- Set your new 'publishable token' as the REACT_APP_PUBLISHABLE_TOKEN environment variable
 
-    node server.js
 
 ## Install and Run
 
@@ -28,29 +35,14 @@ In the project directory, you can run:
 
 This command will install all the dependencies needed for the project to run locally.
 
-To run the app we'll need to set some environment variables first.  
-You'll need an API key [https://developers.archilogic.com/api-keys.html](https://developers.archilogic.com/api-keys.html).
-
-![](token.png)
-
-Once you have these keys, please create a .env file (you can copy it from .env.example) and fill in the values for
-
-    cp .env.example .env
-
-
-Update .env variables:
-
-    REACT_APP_PUBLISHABLE_TOKEN=YOUR_TOKEN
-    REACT_APP_ARCHILOGIC_API_URL=https://api.archilogic.com
-
 To run the application, execute:
 
-    npm start
+    npm run vercel
 
 The project loads a default scene but you can change it to a different one by specifing `?sceneId=THIS_IS_ANOTHER_SCENE_ID` in the browser url.
 
 ```html
-http://localhost:3001/?sceneId=0246512e-973c-4e52-a1f2-5f0008e9ee9c
+http://localhost:3000/?sceneId=0246512e-973c-4e52-a1f2-5f0008e9ee9c
 ```
 
 ## The App
@@ -73,10 +65,7 @@ Index file `public\index.html`:
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Book rooms using Archilogic Floor Plan Engine"
-    />
+    <meta name="description" content="Book rooms using Archilogic Floor Plan Engine" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
     <script src="https://code.archilogic.com/fpe-preview/v2.0.x/fpe.js?key=%REACT_APP_ARCHILOGIC_PUBLISHABLE_API_KEY%"></script>
@@ -90,13 +79,13 @@ In file `src\components\Floorplan\FloorPlan.tsx` when the sceneId value is avail
 
 ```javascript
 useEffect(() => {
-  const container = document.getElementById("floorplan");
-  const fp = new FloorPlanEngine(container, floorPlanStartupSettings);
+  const container = document.getElementById('floorplan')
+  const fp = new FloorPlanEngine(container, floorPlanStartupSettings)
   fp.loadScene(props.sceneId).then(() => {
-    props.setSpaces(fp.state.computed.spaces);
-    onSpacesLoaded(fp.state.computed.spaces);
-  });
-}, [props.sceneId]);
+    props.setSpaces(fp.state.computed.spaces)
+    onSpacesLoaded(fp.state.computed.spaces)
+  })
+}, [props.sceneId])
 ```
 
 ### API storage
@@ -106,25 +95,24 @@ All the bookings are managed in a collection on the client side, and when there
 In order to keep business logic clean we decoupled it into a reducer: `src\reducers\bookings.ts`
 
 ```javascript
-export const saveBooking =
-  (newBooking: Booking, bookings: Booking[]) => (dispatch: any) => {
-    dispatch(startSaveBooking());
-    let newBookingsList = bookings;
-    newBookingsList.push(newBooking);
-
-    axios
-      .put(
-        `/v2/space/${newBooking.spaceId}/custom-field/properties.customFields.bookings`,
-        { bookings: newBookingsList }
-      )
-      .then((response: any) => {
-        dispatch(endSaveBooking(newBookingsList));
-      });
-  };
+export const saveBooking = (newBooking: Booking, bookings: Booking[]) => (dispatch: any) => {
+  dispatch(startSaveBooking())
+  let newBookingsList = bookings
+  newBookingsList.push(newBooking)
+
+  axios
+    .put(`/v2/space/${newBooking.spaceId}/custom-field/properties.customFields.bookings`, {
+      bookings: newBookingsList
+    })
+    .then((response: any) => {
+      dispatch(endSaveBooking(newBookingsList))
+    })
+}
 ```
 
 ### Other Libraries Used In This Project
 
+[Vercel](https://vercel.com/) - Creates a serverless endpoint for our backend as well as a static site deployment to serve the app
 [Axios](https://github.com/axios/axios) - Promise based HTTP client for the browser and node.js.  
 [Ant Design](https://ant.design/) - A UI Design language and React UI library.  
 [Typescript](https://www.typescriptlang.org/) - Optional static type-checking along with the latest ECMAScript features.  

api/temp-token.ts

@@ -0,0 +1,27 @@
+import fetch from 'node-fetch'
+
+export default function handler(request, response) {
+  const body = JSON.stringify({
+    scopes: [
+      { resource: 'floor', action: 'readPrivate' },
+      { resource: 'floor', action: 'queryPublic' },
+      { resource: 'customFields', action: 'readPrivate' },
+      { resource: 'customFields', action: 'readPublic' },
+      { resource: 'customFields', action: 'write' }
+    ],
+    durationSeconds: 3600
+  })
+
+  fetch(`${process.env.ARCHILOGIC_API_URL}/v2/temporary-access-token/create`, {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `AL-Secret-Token ${process.env.ARCHILOGIC_SECRET_KEY}`
+    },
+    body: body,
+    method: 'POST'
+  })
+    .then(res => res.json())
+    .then(json => {
+      response.send(json)
+    })
+}