- Registration screens stubbing and partial buildouts

app/api/helpers.js

@@ -0,0 +1,86 @@
+import { API_URL } from '../constants/constants.js';
+
+export const constructUrl = (path, params, host = API_URL) => {
+  if (!(/^\//g).test(path)) {
+    throw new Error(`Invalid path! Expecting a valid relative path (path needs to start with /)(${path})`);
+  }
+
+  let url = path;
+
+  if (host) {
+    url = `${host}${url}`;
+  }
+
+  if (params) {
+    url = `${url}?${params}`;
+  }
+
+  return url;
+};
+
+/**
+ * Formats data for a POST request.
+ *
+ * @param {Object} body - data to be passed to the POST endpoint
+ * @param {Boolean} isTraditional - similar to jQuery's option `traditional` for $.ajax(),
+ *                  this serializes data in a way that helps support legacy endpoints
+ */
+export const formatPostData = (body) => {
+  const postData = new FormData();
+  Object.keys(body).forEach(key => postData.append(key, body[key]));
+  return postData;
+};
+
+const parseQueryParamsString = (queryParams) => {
+  if (typeof queryParams !== 'string') {
+    return null;
+  }
+
+  return queryParams;
+};
+
+const parseQueryParamsObject = (queryParams) => {
+  if (typeof queryParams !== 'object' && Array.isArray(queryParams)) {
+    return null;
+  }
+
+  return Object
+    .keys(queryParams)
+    .map((key) => {
+      const value = queryParams[key];
+      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+    })
+    .join('&');
+};
+
+const parseQueryParamsArray = (queryParams) => {
+  if (!Array.isArray(queryParams)) {
+    return null;
+  }
+
+  return queryParams
+    .map((param) => {
+      const [key, value] = param.split('=');
+      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+    })
+    .join('&');
+};
+
+export const parseQueryParams = queryParams => (
+  parseQueryParamsString(queryParams) ||
+  parseQueryParamsObject(queryParams) ||
+  parseQueryParamsArray(queryParams) ||
+  ''
+);
+
+export const request = (url, options) => {
+  try {
+    return fetch(url, options).catch((err) => console.error(err));
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+export const unwrapJson = (response) => response.json();
+
+export const validateResponse = (response) => response;

app/api/index.js

@@ -1,4 +1,15 @@
-const apiUrl = 'http://localhost:3001';
+import {
+  constructUrl,
+  formatPostData,
+  parseQueryParams,
+  request,
+  unwrapJson,
+  validateResponse,
+} from './helpers.js';
+
+import { API_URL } from '../constants/constants.js';
+
+const DefaultRequestOptions = {};
 
 const endpoints = {
   // Events and Items
@@ -35,5 +46,47 @@ export const getEndpointUrl = (endpoint) => {
     throw new Error('Invalid API endpoint specified');
   }
 
-  return `${apiUrl}${endpoints[endpoint]}`; //`${cacheBuster()}`;
+  return `${API_URL}${endpoints[endpoint]}`; //`${cacheBuster()}`;
+};
+
+export const requestGet = (path, queryParams = [], requestOptions = {}) => {
+  const params = parseQueryParams(queryParams);
+
+  if (params === null) {
+    throw new Error('Invalid queryParams');
+  }
+
+  return request(constructUrl(path, params), {
+      ...DefaultRequestOptions,
+      ...requestOptions
+    })
+    .then(validateResponse)
+    .then(unwrapJson);
+};
+
+export const requestPost = (options) => {
+  const {
+    path,
+    body = {},
+    queryParams = [],
+    requestOptions = {},
+    isFormattedPostData = false
+  } = options;
+
+  const params = parseQueryParams(queryParams || []);
+
+  if (params === null) {
+    throw new Error('invalid queryParams');
+  }
+
+  // Additional formatting happens in `formatPostData()`
+  // like handling what jQuery calls `traditional` form data
+  return request(constructUrl(path, params), {
+      ...DefaultRequestOptions,
+      ...requestOptions,
+      method: 'POST',
+      body: isFormattedPostData ? body : formatPostData(body)
+    })
+    .then(validateResponse)
+    .then(unwrapJson);
 };

app/api/items.js

@@ -0,0 +1,7 @@
+import { getEndpointUrl, requestGet } from './index.js';
+
+export const fetchItems = (eventId, auth) => {
+  const path = String(API_ENDPOINTS.GET_ITEMS).replace(/:event_id$/, eventId);
+  const opts = { Authorization: auth ? `Bearer ${auth}` : null };
+  return requestGet(path, null, opts);
+};