initial commit

web/src/App/BaseStyles.ts

@@ -0,0 +1,110 @@
+import { createGlobalStyle } from 'styled-components';
+
+import { color, font, mixin } from 'shared/utils/styles';
+
+export default createGlobalStyle`
+  html, body, #root {
+    height: 100%;
+    min-height: 100%;
+    min-width: 768px;
+  }
+
+  body {
+    color: ${color.textDarkest};
+    -webkit-tap-highlight-color: transparent;
+    line-height: 1.2;
+    ${font.size(16)}
+    ${font.regular}
+  }
+
+  #root {
+    display: flex;
+    flex-direction: column;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    ${font.regular}
+  }
+
+  *, *:after, *:before, input[type="search"] {
+    box-sizing: border-box;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  ul, li, ol, dd, h1, h2, h3, h4, h5, h6, p {
+    padding: 0;
+    margin: 0;
+  }
+
+  h1, h2, h3, h4, h5, h6, strong {
+    ${font.bold}
+  }
+
+  button {
+    background: none;
+    border: none;
+  }
+
+  /* Workaround for IE11 focus highlighting for select elements */
+  select::-ms-value {
+    background: none;
+    color: #42413d;
+  }
+
+  [role="button"], button, input, select, textarea {
+    outline: none;
+    &:focus {
+      outline: none;
+    }
+    &:disabled {
+      opacity: 1;
+    }
+  }
+  [role="button"], button, input, textarea {
+    appearance: none;
+  }
+  select:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 #000;
+  }
+  select::-ms-expand {
+    display: none;
+  }
+  select option {
+    color: ${color.textDarkest};
+  }
+
+  p {
+    line-height: 1.4285;
+    a {
+      ${mixin.link()}
+    }
+  }
+
+  textarea {
+    line-height: 1.4285;
+  }
+
+  body, select {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  html {
+    touch-action: manipulation;
+  }
+
+  ${mixin.placeholderColor(color.textLight)}
+`;

web/src/App/Navbar.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Home, Stack } from 'shared/icons';
+import Navbar, { ActionButton, ButtonContainer, PrimaryLogo } from 'shared/components/Navbar';
+import { Link } from 'react-router-dom';
+
+const GlobalNavbar = () => {
+  return (
+    <Navbar>
+      <PrimaryLogo />
+      <ButtonContainer>
+        <Link to="/">
+          <ActionButton name="Home">
+            <Home size={28} color="#c2c6dc" />
+          </ActionButton>
+        </Link>
+        <Link to="/projects">
+          <ActionButton name="Projects">
+            <Stack size={28} color="#c2c6dc" />
+          </ActionButton>
+        </Link>
+      </ButtonContainer>
+    </Navbar>
+  );
+};
+
+export default GlobalNavbar;

web/src/App/NormalizeStyles.ts

@@ -0,0 +1,152 @@
+import { createGlobalStyle } from 'styled-components';
+
+/** DO NOT ALTER THIS FILE. It is a copy of https://necolas.github.io/normalize.css/ */
+
+export default createGlobalStyle`
+  html {
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+  }
+  body {
+    margin: 0;
+  }
+  main {
+    display: block;
+  }
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+  }
+  pre {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+  a {
+    background-color: transparent;
+  }
+  abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    text-decoration: underline dotted;
+  }
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  img {
+    border-style: none;
+  }
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+  }
+  button,
+  input {
+    overflow: visible;
+  }
+  button,
+  select {
+    text-transform: none;
+  }
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  legend {
+    box-sizing: border-box;
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    padding: 0;
+    white-space: normal;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  textarea {
+    overflow: auto;
+  }
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box;
+    padding: 0;
+  }
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+  details {
+    display: block;
+  }
+  summary {
+    display: list-item;
+  }
+  template {
+    display: none;
+  }
+  [hidden] {
+    display: none;
+  }
+`;

web/src/App/Routes.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Router, Switch, Route } from 'react-router-dom';
+import * as H from 'history';
+
+import Projects from 'Projects';
+import Project from 'Projects/Project';
+import Login from 'Auth';
+
+type RoutesProps = {
+  history: H.History;
+};
+
+const Routes = ({ history }: RoutesProps) => (
+  <Router history={history}>
+    <Switch>
+      <Route exact path="/projects" component={Projects} />
+      <Route exact path="/projects/:projectId" component={Project} />
+      <Route exact path="/login" component={Login} />
+    </Switch>
+  </Router>
+);
+
+export default Routes;

web/src/App/TopNavbar.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import TopNavbar from 'shared/components/TopNavbar';
+import DropdownMenu from 'shared/components/DropdownMenu';
+
+const GlobalTopNavbar: React.FC = () => {
+  const [menu, setMenu] = useState({
+    top: 0,
+    left: 0,
+    isOpen: false,
+  });
+  const onProfileClick = (bottom: number, right: number) => {
+    setMenu({
+      isOpen: !menu.isOpen,
+      left: right,
+      top: bottom,
+    });
+  };
+  return (
+    <>
+      <TopNavbar onNotificationClick={() => console.log('beep')} onProfileClick={onProfileClick} />
+      {menu.isOpen && <DropdownMenu left={menu.left} top={menu.top} />}
+    </>
+  );
+};
+
+export default GlobalTopNavbar;

web/src/App/index.tsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { createBrowserHistory } from 'history';
+import { setAccessToken } from 'shared/utils/accessToken';
+import NormalizeStyles from './NormalizeStyles';
+import BaseStyles from './BaseStyles';
+import Routes from './Routes';
+
+const history = createBrowserHistory();
+
+const App = () => {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('http://localhost:3333/auth/refresh_token', {
+      method: 'POST',
+      credentials: 'include',
+    }).then(async x => {
+      const { status } = x;
+      if (status === 400) {
+        history.replace('/login');
+      } else {
+        const response: RefreshTokenResponse = await x.json();
+        const { accessToken } = response;
+        setAccessToken(accessToken);
+      }
+      // }
+      setLoading(false);
+    });
+  }, []);
+
+  if (loading) {
+    return <div>loading...</div>;
+  }
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <Routes history={history} />
+    </>
+  );
+};
+
+export default App;