[HOLD] Staging -> Master

.eslintignore

@@ -1 +1,2 @@
 prisma/generated/
+__playground__/

.eslintrc.json

@@ -1,34 +1,39 @@
 {
-  "extends": ["esnext", "plugin:react/recommended", "prettier"],
-  "plugins": ["react-hooks", "babel"],
-  "settings": {
-    "react": {
-      "version": "16.9.0"
-    }
-  },
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true,
-      "modules": true
-    }
-  },
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true
-  },
+  "extends": ["kentcdodds", "kentcdodds/react", "kentcdodds/jsx-a11y"],
   "rules": {
     "react/prop-types": 0,
-    "no-use-before-define": ["error", { "variables": false }],
-    "no-console": "error",
-    "import/no-commonjs": 0,
+    "no-use-before-define": 0,
     "react/react-in-jsx-scope": 0,
-    "react/no-unescaped-entities": 0,
-    "import/no-namespace": 0,
-    "import/no-nodejs-modules": 0
+    "react-hooks/exhaustive-deps": 0,
+    "consistent-return": 0
   },
   "globals": {
     "cssTheme": "readonly"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier",
+        "prettier/@typescript-eslint"
+      ],
+      "rules": {
+        "@typescript-eslint/ban-ts-ignore": 0,
+        "@typescript-eslint/no-explicit-any": 0
+      },
+      "settings": {
+        "import/resolver": {
+          "typescript": {
+            "alwaysTryTypes": true,
+            "directory": "tsconfig.json"
+          }
+        }
+      }
+    }
+  ]
 }

.gitignore

@@ -56,6 +56,13 @@ typings/
 
 # dotenv environment variables file
 .env
+*.env
+
+
+# Config folder
+.config
 
 # next.js build output
 .next
+
+__playground__/

.prettierrc

@@ -1,5 +1,17 @@
 {
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "always",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
   "semi": false,
-  "singleQuote": false,
-  "trailingComma": "es5"
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
 }

README.md

@@ -1 +1 @@
-# Snapeat
+# SnapEat

app.json

@@ -0,0 +1,10 @@
+{
+  "name": "snapeat",
+  "description": "",
+  "scripts": {},
+  "buildpacks": [
+    {
+      "url": "heroku/nodejs"
+    }
+  ]
+}

apps/AuthenticatedApp.js

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react'
+import AuthenticatedAppProviders from '../context/AuthenicatedAppProviders'
+import { useAuth } from '../context/authContext'
+
+import views from '../views'
+
+import { CHANGE_VIEW, HOME, ONBOARDING } from '../utils/constants'
+
+import { useRouteState, useRouteDispatch } from '../context/routeContext'
+
+const AuthenticatedApp = () => {
+  const { currentView } = useRouteState()
+  const routeDispatch = useRouteDispatch()
+
+  const { snapeatUser } = useAuth()
+
+  useEffect(() => {
+    routeDispatch({
+      type: CHANGE_VIEW,
+      view: snapeatUser ? HOME : ONBOARDING,
+    })
+
+    return () => ({})
+  }, [])
+
+  const CurrentView = views[currentView]
+
+  return (
+    <AuthenticatedAppProviders>
+      <CurrentView />
+    </AuthenticatedAppProviders>
+  )
+}
+
+export default AuthenticatedApp

apps/UnauthenticatedApp.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import views from '../views'
+
+import { useRouteStateUnauth } from '../context/unauthRouteContext'
+
+const UnauthenticatedApp = () => {
+  const { currentView } = useRouteStateUnauth()
+
+  const CurrentView = views[currentView]
+
+  return <CurrentView />
+}
+
+export default UnauthenticatedApp

components/BugButton.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+import bugIcon from '../public/icons/bug_icon.svg'
+
+const BugButton = () => {
+  return (
+    <a
+      href="https://airtable.com/shrA8ckDkLTVqLoab"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Icon src={bugIcon} alt="Report a bug" />
+    </a>
+  )
+}
+
+const Icon = styled.img.attrs({
+  className: 'absolute w-10',
+})`
+  top: 2%;
+  right: 20%;
+`
+
+export default BugButton

components/Header.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components'
+import { useRouteDispatch } from '../context/routeContext'
+import { CHANGE_VIEW, MENU } from '../utils/constants'
+import snapeatLogo from '../public/logos/logo2.svg'
+import menuIcon from '../public/icons/menu.svg'
+import menuBG from '../public/backgrounds/menu_bg.svg'
+
+const MenuContainer = styled.div.attrs({
+  className: 'w-screen px-6 pt-5d5',
+})`
+  display: grid;
+  grid-template-columns: 1fr 12.5%;
+  grid-template-rows: 40% 1fr;
+  align-items: center;
+  background: url(${menuBG}) left top/cover no-repeat;
+`
+
+const SnapeatLogo = styled.img.attrs({
+  className: 'w-auto sm:w-25',
+})`
+  margin-left: calc((100vw - 48px - 80px) / 2);
+
+  @media ${cssTheme('media.sm')} {
+    margin-left: calc((100vw - 48px - 100px) / 2);
+  }
+`
+
+const HeaderWithLogo = () => {
+  const routeDispatch = useRouteDispatch()
+  return (
+    <MenuContainer>
+      <SnapeatLogo alt="logo" src={snapeatLogo} />
+      <div
+        onClick={() => routeDispatch({ type: CHANGE_VIEW, view: MENU })}
+        onKeyPress={() => routeDispatch({ type: CHANGE_VIEW, view: MENU })}
+      >
+        <img alt="menu" src={menuIcon} />
+      </div>
+    </MenuContainer>
+  )
+}
+
+export { HeaderWithLogo }

components/Input.js

@@ -0,0 +1,85 @@
+import styled from 'styled-components'
+import * as R from 'ramda'
+import { Field, ErrorMessage } from 'formik'
+
+import dropdown from '../public/icons/dropdown.svg'
+
+const TextInput = styled(Field).attrs(({ placeholder, name, ...attrs }) => ({
+  className: 'bg-lightgray w-full border-b-2 border-navy',
+  type: 'text',
+  name,
+  placeholder,
+  ...attrs,
+}))``
+
+const SelectInput = ({ options, placeholder, name, ...attrs }) => {
+  const emptyOption = (
+    <option value="" key="empty-option" disabled>
+      {placeholder}
+    </option>
+  )
+
+  const optionComponents = R.pipe(
+    R.map(({ label, value }) => (
+      <option key={`${name}-${value}`} label={label} value={value}>
+        {label}
+      </option>
+    )),
+    R.prepend(emptyOption),
+  )(options)
+
+  return <Select {...{ name, ...attrs }}>{optionComponents}</Select>
+}
+
+const Select = styled.select.attrs(({ className, ...attrs }) => {
+  return {
+    className: `border-b-2 border-navy block w-full
+      bg-transparent text-center ${className}`,
+    ...attrs,
+  }
+})`
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: url(${dropdown});
+  background-repeat: no-repeat, repeat;
+  background-position: right 0 top 50%, 0 0;
+`
+
+const RadioLabel = styled.label.attrs({
+  className: 'ml-2d5',
+})``
+
+const Radio = styled(Field).attrs(({ name, ...attrs }) => ({
+  type: 'radio',
+  id: name,
+  name,
+  ...attrs,
+}))``
+
+const RadioInput = ({ name, children, id, ...attrs }) => (
+  <div className="mb-2d5">
+    <Radio name={name} id={id} {...attrs} />
+    <RadioLabel htmlFor={id}>{children}</RadioLabel>
+  </div>
+)
+
+const ErrorContainer = styled.div.attrs({
+  className: 'text-red',
+})``
+
+const Error = ({ name, className }) => (
+  <ErrorMessage
+    name={name}
+    render={msg => <ErrorContainer className={className}>{msg}</ErrorContainer>}
+  />
+)
+
+const Input = ({ Component, ...attrs }) => (
+  <div>
+    <Component {...attrs} />
+    <Error name={attrs.name} />
+  </div>
+)
+
+export { Input, TextInput, RadioInput, SelectInput, Error }