arch: move web folder into api & move api to top level

frontend/src/shared/utils/accessToken.ts

@@ -0,0 +1,17 @@
+let accessToken = '';
+
+export function setAccessToken(newToken: string) {
+  accessToken = newToken;
+}
+export function getAccessToken() {
+  return accessToken;
+}
+
+export async function getNewToken() {
+  return fetch('http://localhost:3333/auth/refresh_token', {
+    method: 'POST',
+    credentials: 'include',
+  }).then(x => {
+    return x.json();
+  });
+}

frontend/src/shared/utils/boundingRect.ts

@@ -0,0 +1,20 @@
+export const convertDivElementRefToBounds = ($ref: React.RefObject<HTMLDivElement>) => {
+  if ($ref && $ref.current) {
+    const bounds = $ref.current.getBoundingClientRect();
+    return {
+      size: {
+        width: bounds.width,
+        height: bounds.height,
+      },
+      position: {
+        left: bounds.left,
+        right: bounds.right,
+        top: bounds.top,
+        bottom: bounds.bottom,
+      },
+    };
+  }
+  return null;
+};
+
+export default convertDivElementRefToBounds;

frontend/src/shared/utils/cache.ts

@@ -0,0 +1,33 @@
+import { DataProxy } from '@apollo/client';
+import { DocumentNode } from 'graphql';
+
+type UpdateCacheFn<T> = (cache: T) => T;
+
+export function updateApolloCache<T>(
+  client: DataProxy,
+  document: DocumentNode,
+  update: UpdateCacheFn<T>,
+  variables?: object,
+) {
+  let queryArgs: DataProxy.Query<any>;
+  if (variables) {
+    queryArgs = {
+      query: document,
+      variables,
+    };
+  } else {
+    queryArgs = {
+      query: document,
+    };
+  }
+  const cache: T | null = client.readQuery(queryArgs);
+  if (cache) {
+    const newCache = update(cache);
+    client.writeQuery({
+      ...queryArgs,
+      data: newCache,
+    });
+  }
+}
+
+export default updateApolloCache;

frontend/src/shared/utils/draggables.ts

@@ -0,0 +1,66 @@
+import { DraggableLocation } from 'react-beautiful-dnd';
+
+export const moveItemWithinArray = (arr: Array<DraggableElement>, item: DraggableElement, newIndex: number) => {
+  const arrClone = [...arr];
+  const oldIndex = arrClone.findIndex(i => i.id === item.id);
+  arrClone.splice(newIndex, 0, arrClone.splice(oldIndex, 1)[0]);
+  return arrClone;
+};
+
+export const insertItemIntoArray = (arr: Array<DraggableElement>, item: DraggableElement, index: number) => {
+  const arrClone = [...arr];
+  arrClone.splice(index, 0, item);
+  return arrClone;
+};
+
+export const updateArrayItemById = (arr: Array<DraggableElement>, itemId: string, fields: any) => {
+  const arrClone = [...arr];
+  const item = arrClone.find(({ id }) => id === itemId);
+  if (item) {
+    const itemIndex = arrClone.indexOf(item);
+    arrClone.splice(itemIndex, 1, { ...item, ...fields });
+  }
+  return arrClone;
+};
+
+export const getNewDraggablePosition = (afterDropDraggables: Array<DraggableElement>, draggableIndex: number) => {
+  const prevDraggable = afterDropDraggables[draggableIndex - 1];
+  const nextDraggable = afterDropDraggables[draggableIndex + 1];
+  if (!prevDraggable && !nextDraggable) {
+    return 65535;
+  }
+  if (!prevDraggable) {
+    return nextDraggable.position / 2.0;
+  }
+  if (!nextDraggable) {
+    return prevDraggable.position * 2.0;
+  }
+  const newPos = (prevDraggable.position + nextDraggable.position) / 2.0;
+  return newPos;
+};
+
+export const getSortedDraggables = (draggables: Array<DraggableElement>) => {
+  return draggables.sort((a: any, b: any) => a.position - b.position);
+};
+
+export const isPositionChanged = (source: DraggableLocation, destination: DraggableLocation) => {
+  if (!destination) return false;
+  const isSameList = destination.droppableId === source.droppableId;
+  const isSamePosition = destination.index === source.index;
+  return !isSameList || !isSamePosition;
+};
+
+export const getAfterDropDraggableList = (
+  beforeDropDraggables: Array<DraggableElement>,
+  droppedDraggable: DraggableElement,
+  isList: boolean,
+  isSameList: boolean,
+  destination: DraggableLocation,
+) => {
+  if (isList) {
+    return moveItemWithinArray(beforeDropDraggables, droppedDraggable, destination.index);
+  }
+  return isSameList
+    ? moveItemWithinArray(beforeDropDraggables, droppedDraggable, destination.index)
+    : insertItemIntoArray(beforeDropDraggables, droppedDraggable, destination.index);
+};

frontend/src/shared/utils/styles.ts

@@ -0,0 +1,107 @@
+import { css } from 'styled-components';
+import Color from 'color';
+
+export const color = {
+  primary: '#0052cc', // Blue
+  success: '#0B875B', // green
+  danger: '#E13C3C', // red
+  warning: '#F89C1C', // orange
+  secondary: '#F4F5F7', // light grey
+
+  textDarkest: '#172b4d',
+  textDark: '#42526E',
+  textMedium: '#5E6C84',
+  textLight: '#8993a4',
+  textLink: '#0052cc',
+
+  backgroundDarkPrimary: '#0747A6',
+  backgroundMedium: '#dfe1e6',
+  backgroundLight: '#ebecf0',
+  backgroundLightest: '#F4F5F7',
+  backgroundLightPrimary: '#D2E5FE',
+  backgroundLightSuccess: '#E4FCEF',
+
+  borderLightest: '#dfe1e6',
+  borderLight: '#C1C7D0',
+  borderInputFocus: '#4c9aff',
+};
+
+export const font = {
+  regular: 'font-family: "Droid Sans"; font-weight: normal;',
+  size: (size: number) => `font-size: ${size}px;`,
+  bold: 'font-family: "Droid Sans"; font-weight: normal;',
+  medium: 'font-family: "Droid Sans"; font-weight: normal;',
+};
+
+export const mixin = {
+  darken: (colorValue: string, amount: number) =>
+    Color(colorValue)
+      .darken(amount)
+      .string(),
+  lighten: (colorValue: string, amount: number) =>
+    Color(colorValue)
+      .lighten(amount)
+      .string(),
+  rgba: (colorValue: string, opacity: number) =>
+    Color(colorValue)
+      .alpha(opacity)
+      .string(),
+  boxShadowCard: css`
+    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 2px 0px;
+  `,
+  boxShadowMedium: css`
+    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
+  `,
+  boxShadowDropdown: css`
+    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.31) 0px 0px 1px;
+  `,
+  truncateText: css`
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `,
+  clickable: css`
+    cursor: pointer;
+    user-select: none;
+  `,
+  hardwareAccelerate: css`
+    transform: translateZ(0);
+  `,
+  cover: css`
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  `,
+  link: (colorValue = color.textLink) => css`
+    cursor: pointer;
+    color: ${colorValue};
+    ${font.medium}
+    &:hover, &:visited, &:active {
+      color: ${colorValue};
+    }
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
+
+  placeholderColor: (colorValue: string) => css`
+    ::-webkit-input-placeholder {
+      color: ${colorValue} !important;
+      opacity: 1 !important;
+    }
+    :-moz-placeholder {
+      color: ${colorValue} !important;
+      opacity: 1 !important;
+    }
+    ::-moz-placeholder {
+      color: ${colorValue} !important;
+      opacity: 1 !important;
+    }
+    :-ms-input-placeholder {
+      color: ${colorValue} !important;
+      opacity: 1 !important;
+    }
+  `,
+};