├── .env
├── .gitignore
├── src
    ├── styled
    │   ├── Flex.tsx
    │   ├── ProductGrid.tsx
    │   ├── AccountSidebar.tsx
    │   ├── ProductDetails.tsx
    │   ├── Input.tsx
    │   ├── AuthFormLayout.tsx
    │   ├── AppLayout.tsx
    │   ├── LoadingIndicator.tsx
    │   ├── Field.tsx
    │   ├── Button.tsx
    │   ├── Form.tsx
    │   └── AppHeader.tsx
    ├── react-app-env.d.ts
    ├── types
    │   ├── Omit.ts
    │   ├── User.ts
    │   └── RoutingContext.ts
    ├── routes
    │   ├── account
    │   │   └── details.tsx
    │   ├── logout.tsx
    │   ├── index.tsx
    │   ├── landing
    │   │   └── index.tsx
    │   ├── requestPasswordReset.tsx
    │   ├── updatePassword.tsx
    │   ├── login.tsx
    │   └── register.tsx
    ├── hooks
    │   ├── useDidChange.tsx
    │   └── useLastValue.tsx
    ├── config.ts
    ├── index.test.tsx
    ├── Firebase.tsx
    ├── index.tsx
    ├── GlobalStyle.tsx
    ├── controls
    │   ├── Gravatar.tsx
    │   ├── AuthLink.tsx
    │   ├── Form.tsx
    │   └── Responds.tsx
    ├── App.tsx
    ├── media
    │   └── logo.svg
    ├── utils
    │   └── theme.tsx
    └── serviceWorker.js
├── README.md
├── tsconfig.json
├── package.json
└── public
    └── index.html


/.env:
--------------------------------------------------------------------------------
1 | SKIP_PREFLIGHT_CHECK=true


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | build
2 | node_modules
3 | .env.local


--------------------------------------------------------------------------------
/src/styled/Flex.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'


--------------------------------------------------------------------------------
/src/styled/ProductGrid.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'


--------------------------------------------------------------------------------
/src/styled/AccountSidebar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'


--------------------------------------------------------------------------------
/src/styled/ProductDetails.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/src/types/Omit.ts:
--------------------------------------------------------------------------------
1 | export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>


--------------------------------------------------------------------------------
/src/types/User.ts:
--------------------------------------------------------------------------------
1 | export interface User {
2 |   email: string,
3 |   displayName: string
4 | }


--------------------------------------------------------------------------------
/src/routes/account/details.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { route } from 'navi'
 3 | 
 4 | export default route({
 5 |   view: (
 6 |     <div>
 7 |       <h1>Account Details</h1>
 8 |       <p>TODO</p>
 9 |     </div>
10 |   )
11 | })


--------------------------------------------------------------------------------
/src/hooks/useDidChange.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef } from 'react'
 2 | 
 3 | export default function useDidChange(value: any): boolean {
 4 |   let ref = useRef()
 5 |   let hasChanged = ref.current !== value
 6 |   useEffect(() => {
 7 |     ref.current = value
 8 |   })
 9 |   return hasChanged
10 | }


--------------------------------------------------------------------------------
/src/routes/logout.tsx:
--------------------------------------------------------------------------------
1 | import { map, redirect } from 'navi'
2 | import { RoutingContext } from '../types/RoutingContext'
3 | 
4 | const logoutRoute = map(async (request, context: RoutingContext) => {
5 |   await context.firebase.auth.signOut()
6 |   return redirect('/login')
7 | })
8 | 
9 | export default logoutRoute


--------------------------------------------------------------------------------
/src/types/RoutingContext.ts:
--------------------------------------------------------------------------------
 1 | import Firebase from '../Firebase'
 2 | import { User } from './User'
 3 | 
 4 | export interface RoutingContext {
 5 |   currentUser:
 6 |     | User
 7 |     | null // anonymous
 8 |     | undefined // app has just loaded, and we don't know the auth state,
 9 |   firebase: Firebase
10 |   reloadUser: () => void,
11 | }


--------------------------------------------------------------------------------
/src/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | import { lazy, mount } from 'navi'
 2 | 
 3 | const routes = mount({
 4 |   '/': lazy(() => import('./landing')),
 5 |   '/login': lazy(() => import('./login')),
 6 |   '/register': lazy(() => import('./register')),
 7 |   '/logout': lazy(() => import('./logout')),
 8 | 
 9 |   '/account': lazy(() => import('./account/details')),
10 | })
11 | 
12 | export default routes


--------------------------------------------------------------------------------
/src/config.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   firebase: {
 3 |     apiKey: process.env.REACT_APP_API_KEY,
 4 |     authDomain: process.env.REACT_APP_AUTH_DOMAIN,
 5 |     databaseURL: process.env.REACT_APP_DATABASE_URL,
 6 |     projectId: process.env.REACT_APP_PROJECT_ID,
 7 |     storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
 8 |     messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
 9 |   }
10 | };
11 | 


--------------------------------------------------------------------------------
/src/hooks/useLastValue.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef } from 'react'
 2 | 
 3 | export default function useLastValue<T>(value: T): T {
 4 |   let ref = useRef([] as any[])
 5 |   let hasChanged = ref.current[1] !== value
 6 |   useEffect(() => {
 7 |     if (hasChanged) {
 8 |       ref.current[0] = ref.current[1]
 9 |       ref.current[1] = value
10 |     }
11 |   })
12 |   return hasChanged ? ref.current[1] : ref.current[0]
13 | }


--------------------------------------------------------------------------------
/src/index.test.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Suspense } from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { Router } from 'react-navi';
 4 | import routes from './routes';
 5 | 
 6 | it('renders without crashing', () => {
 7 |   const div = document.createElement('div');
 8 |   ReactDOM.render(
 9 |     <Suspense fallback={null}>
10 |       <Router routes={routes} />
11 |     </Suspense>,
12 |     div
13 |   );
14 |   ReactDOM.unmountComponentAtNode(div);
15 | });
16 | 


--------------------------------------------------------------------------------
/src/Firebase.tsx:
--------------------------------------------------------------------------------
 1 | import firebase from "firebase/app";
 2 | import "firebase/auth";
 3 | import "firebase/database";
 4 | import "firebase/functions";
 5 | import config from "./config";
 6 | 
 7 | class Firebase {
 8 |   auth: firebase.auth.Auth
 9 |   db: firebase.database.Database
10 | 
11 |   constructor() {
12 |     let app = firebase.initializeApp(config.firebase);
13 | 
14 |     this.auth = app.auth();
15 |     this.db = app.database();
16 |   }
17 | }
18 | 
19 | export default Firebase


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | /// <reference types="styled-components/cssprop" />
 2 | 
 3 | import React from "react"
 4 | import ReactDOM from "react-dom"
 5 | import App from "./App"
 6 | import * as serviceWorker from "./serviceWorker"
 7 | 
 8 | ReactDOM.render(
 9 |   <App />,
10 |   document.getElementById('root')
11 | )
12 | 
13 | // If you want your app to work offline and load faster, you can change
14 | // unregister() to register() below. Note this comes with some pitfalls.
15 | // Learn more about service workers: http://bit.ly/CRA-PWA
16 | serviceWorker.unregister();


--------------------------------------------------------------------------------
/src/routes/landing/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { route } from 'navi'
 3 | import { RoutingContext } from '../../types/RoutingContext'
 4 | 
 5 | export default route((request, context: RoutingContext) => {
 6 |   if (context.currentUser === undefined) {
 7 |     return { view: <div /> }
 8 |   }
 9 | 
10 |   return {
11 |     view: (
12 |       <div>
13 |         <h1>Welcome, {context.currentUser ? context.currentUser.displayName : "Anonymous"}!</h1>
14 |         <p>This app is UNDER CONSTRUCTION.</p>
15 |       </div>
16 |     )
17 |   }
18 | })


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Firebase / TypeScript / styled-components / Authenticated Routes / create-react-app / Navi / React / Oh my...
 2 | 
 3 | You'll need to create a `.env.local` file with your firebase settings:
 4 | 
 5 | ```text
 6 | REACT_APP_API_KEY=
 7 | REACT_APP_AUTH_DOMAIN=
 8 | REACT_APP_DATABASE_URL=
 9 | REACT_APP_PROJECT_ID=
10 | REACT_APP_STORAGE_BUCKET=
11 | REACT_APP_MESSAGING_SENDER_ID=
12 | ```
13 | 
14 | Then:
15 | 
16 | ```bash
17 | # Install dependencies
18 | npm install
19 | 
20 | # Start the dev server
21 | npm start
22 | 
23 | # Have fun!
24 | echo "🎉🎉🎉"
25 | ```


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "forceConsistentCasingInFileNames": true,
14 |     "module": "esnext",
15 |     "moduleResolution": "node",
16 |     "resolveJsonModule": true,
17 |     "isolatedModules": true,
18 |     "noEmit": true,
19 |     "jsx": "preserve",
20 |     "strict": true
21 |   },
22 |   "include": [
23 |     "src"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/src/GlobalStyle.tsx:
--------------------------------------------------------------------------------
 1 | import { createGlobalStyle } from 'styled-components/macro'
 2 | import { base, colors } from './utils/theme'
 3 | 
 4 | const GlobalStyle = createGlobalStyle`
 5 |   @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900|Inconsolata:400,700');
 6 | 
 7 |   * {
 8 |     box-sizing: border-box;
 9 |   }
10 | 
11 |   html {
12 |     font-family: Lato, sans-serif;
13 |     font-size: ${base};
14 |   }
15 | 
16 |   body {
17 |     color: ${colors.text};
18 |     margin: 0;
19 |     padding: 0;
20 |     font-size: 1rem;
21 |     line-height: 1.5rem;
22 |   }
23 | `
24 | 
25 | export default GlobalStyle


--------------------------------------------------------------------------------
/src/styled/Input.tsx:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | import { fontSizes, radius, colors, radiuses, boxShadows, durations } from '../utils/theme';
 3 | 
 4 | const Input = styled.input`
 5 |   appearance: none;
 6 |   display: block;
 7 |   width: 100%;
 8 |   font-family: inherit;
 9 |   margin: 0;
10 |   padding: 0.75rem;
11 |   font-size: ${fontSizes.bodySmall1};
12 |   border-radius: ${radiuses.large};
13 |   border: 1px solid ${colors.white};
14 |   background-color: ${colors.lighterGray};
15 |   box-shadow: ${boxShadows[2]} inset;
16 |   transition: border ${durations.short} linear;
17 |   color: ${colors.lightBlack};
18 | 
19 |   &::placeholder{
20 |     color: ${colors.borderGray};
21 |   }
22 |   &:focus{
23 |     outline: none !important;
24 |     border-color: ${colors.red};
25 |   }
26 |   
27 |   ::-ms-clear {
28 |     display: none;
29 |   }
30 | `
31 | 
32 | export default Input


--------------------------------------------------------------------------------
/src/controls/Gravatar.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import md5 from 'blueimp-md5'
 3 | import { Omit } from '../types/Omit'
 4 | 
 5 | interface GravatarOptions {
 6 |   email: string
 7 |   size: string | number
 8 |   defaultURL?: string
 9 | }
10 | 
11 | function getGravatarURL({
12 |   email,
13 |   size,
14 |   defaultURL = 'identicon',
15 | }: GravatarOptions) {
16 |   let hash = md5(email.toLowerCase().trim())
17 |   return `https://www.gravatar.com/avatar/${hash}.jpg?s=${size}&d=${encodeURIComponent(
18 |     defaultURL,
19 |   )}`
20 | }
21 | 
22 | export interface GravatarProps
23 |   extends GravatarOptions,
24 |     Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {}
25 | 
26 | export default function Gravatar({
27 |   email,
28 |   size,
29 |   defaultURL,
30 |   ...imgProps
31 | }: GravatarProps) {
32 |   return <img src={getGravatarURL({ email, size, defaultURL })} {...imgProps} />
33 | }
34 | 


--------------------------------------------------------------------------------
/src/styled/AuthFormLayout.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { css } from 'styled-components/macro'
 3 | import { colors, boxShadows } from '../utils/theme'
 4 | 
 5 | interface AuthFormLayoutProps {
 6 |   children: React.ReactNode
 7 |   heading: string
 8 | }
 9 | 
10 | const AuthFormLayout = (props: AuthFormLayoutProps) =>
11 |   <>
12 |     <div css={css`
13 |       background-color: ${colors.primary};
14 |       position: fixed;
15 |       top: 0;
16 |       left: 0;
17 |       bottom: 0;
18 |       right: 0;
19 |       z-index: -1;
20 |     `} />
21 |     <div css={css`
22 |       background-color: ${colors.white};
23 |       border-radius: 2rem;
24 |       box-shadow: ${boxShadows[0]};
25 |       padding: 2rem;
26 |       margin: 0 auto;
27 |       max-width: 420px;
28 |       position: relative;
29 |     `}>
30 |       <h1>{props.heading}</h1>
31 |       {props.children}
32 |     </div>
33 |   </>
34 | 
35 | export default AuthFormLayout


--------------------------------------------------------------------------------
/src/controls/AuthLink.tsx:
--------------------------------------------------------------------------------
 1 | import { createURLDescriptor } from 'navi'
 2 | import React from 'react'
 3 | import { Link, useCurrentRoute } from 'react-navi'
 4 | import { Omit } from '../types/Omit'
 5 | 
 6 | export interface AuthLinkProps extends Omit<Link.Props, 'href'> {
 7 |   href?: string
 8 | }
 9 | 
10 | export type AuthLinkRendererProps = Link.RendererProps
11 | 
12 | /**
13 |  * A link that passes through any auth-related URL parameters.
14 |  * 
15 |  * Defaults to pointing to the "login" screen unless the user is currently
16 |  * viewing the "login" screen, in which case it points to the "register"
17 |  * screen.
18 |  */
19 | function AuthLink(props: AuthLinkProps) {
20 |   let currentRoute = useCurrentRoute()
21 |   let url = createURLDescriptor(props.href || '/login')
22 | 
23 |   Object.assign(url.query, currentRoute.url.query)
24 | 
25 |   return (
26 |     <Link {...props} href={url} />
27 |   )
28 | }
29 | 
30 | export default AuthLink


--------------------------------------------------------------------------------
/src/styled/AppLayout.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components/macro'
 3 | import AppHeader from './AppHeader'
 4 | import LoadingIndicator from './LoadingIndicator'
 5 | import { NotFoundBoundary } from 'react-navi';
 6 | import { User } from '../types/User';
 7 | 
 8 | const Main = styled.main`
 9 |   margin: 3rem 1.5rem;
10 | `
11 | 
12 | interface LayoutProps {
13 |   children: React.ReactNode
14 |   isLoading?: boolean
15 |   user?: User | null
16 | }
17 | 
18 | function Layout({ children, isLoading, user }: LayoutProps) {
19 |   return (
20 |     <>
21 |       <LoadingIndicator active={isLoading} />
22 |       <AppHeader user={user} />
23 |       <Main>
24 |         <NotFoundBoundary render={() => <NotFound />}>
25 |           {children}
26 |         </NotFoundBoundary>
27 |       </Main>
28 |     </>
29 |   )
30 | }
31 | 
32 | function NotFound() {
33 |   return (
34 |     <h1>This page is not available right now, but your call is important to us, so please leave a message.</h1>
35 |   )
36 | }
37 | 
38 | export default Layout


--------------------------------------------------------------------------------
/src/styled/LoadingIndicator.tsx:
--------------------------------------------------------------------------------
 1 | import styled, { keyframes } from 'styled-components/macro'
 2 | 
 3 | const animation = keyframes`
 4 |   0% {
 5 |     background-position: 0 0;
 6 |   }
 7 |   100% {
 8 |     background-position: -35px -35px;
 9 |   }
10 | `
11 | 
12 | const LoadingIndicator = styled.div<{ active?: boolean }>`
13 |   position: fixed;
14 |   height: 4px;
15 |   top: 0;
16 |   left: 0;
17 |   right: 0;
18 |   background-color: #1cde78;
19 |   background-image: linear-gradient(-45deg, rgba(255,255,255,0.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25) 75%, transparent 75%, transparent);
20 |   background-size: 35px 35px;
21 |   z-index: 1000;
22 |   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
23 |   transform: translateY(-4px);
24 |   transition: transform ease-in 300ms, opacity ease-in 300ms;
25 |   transition-delay: 0;
26 |   animation: ${animation} 2s cubic-bezier(.4,.45,.6,.55) infinite;
27 |   opacity: 0;
28 | 
29 |   ${({ active }) => !active ? '' : `
30 |     transition-delay: 100ms;
31 |     transform: translateY(0);
32 |     opacity: 1;
33 |   `}
34 | `
35 | 
36 | export default LoadingIndicator
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "basic",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@types/blueimp-md5": "^2.7.0",
 7 |     "@types/lodash-es": "^4.17.3",
 8 |     "@types/node": "^11.10.5",
 9 |     "@types/ramda": "^0.25.51",
10 |     "@types/react": "^16.8.7",
11 |     "@types/react-dom": "^16.8.2",
12 |     "@types/styled-components": "^4.1.11",
13 |     "blueimp-md5": "^2.10.0",
14 |     "final-form": "4.11.1",
15 |     "firebase": "^5.8.4",
16 |     "navi": "0.12.0-alpha.0",
17 |     "navi-scripts": "0.12.0-alpha.0",
18 |     "polished": "^3.0.3",
19 |     "ramda": "^0.26.1",
20 |     "react": "^16.8.4",
21 |     "react-dom": "^16.8.4",
22 |     "react-final-form": "4.0.2",
23 |     "react-navi": "0.12.0-alpha.1",
24 |     "react-scripts": "2.1.8",
25 |     "styled-components": "^4.1.3",
26 |     "typescript": "^3.2.1"
27 |   },
28 |   "scripts": {
29 |     "start": "react-scripts start",
30 |     "build": "react-scripts build",
31 |     "test": "react-scripts test",
32 |     "eject": "react-scripts eject"
33 |   },
34 |   "eslintConfig": {
35 |     "extends": "react-app"
36 |   },
37 |   "browserslist": [
38 |     ">0.2%",
39 |     "not dead",
40 |     "not ie <= 11",
41 |     "not op_mini all"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/src/routes/requestPasswordReset.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { map, redirect, route } from 'navi'
 3 | import Form from '../styled/Form'
 4 | import { RoutingContext } from '../types/RoutingContext'
 5 | 
 6 | export default map(async (request, context: RoutingContext) => {
 7 |   if (context.currentUser) {
 8 |     return redirect('/')
 9 |   }
10 | 
11 |   if (request.method === 'post') {
12 |     let { email, password } = request.body
13 |     try {
14 |       await context.firebase.auth.signInWithEmailAndPassword(email, password);
15 |       return redirect('/')
16 |     }
17 |     catch (error) {
18 |       return route({
19 |         error,
20 |         view: <Login />
21 |       })
22 |     }
23 |   }
24 | 
25 |   return route({
26 |     view: <Login />
27 |   })
28 | })
29 | 
30 | function Login() {
31 |   return (
32 |     <Form method='post'>
33 |       <h1>Need a new Password?</h1>
34 |       <Form.Errors />
35 |       <Form.Field
36 |         label='Your email'
37 |         name='email'
38 |         validate={value =>
39 |           value === '' ? 'Please enter your email.' : undefined
40 |         }
41 |       />
42 |       <Form.SubmitButton>
43 |         Request a new Password
44 |       </Form.SubmitButton>
45 |     </Form>
46 |   )
47 | }


--------------------------------------------------------------------------------
/src/styled/Field.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { css } from 'styled-components/macro'
 3 | import { fontSizes, colors } from '../utils/theme'
 4 | 
 5 | export interface FieldProps {
 6 |   children: React.ReactNode
 7 |   description?: string
 8 |   label: string
 9 |   error?: string
10 | }
11 | 
12 | const Field = (props: FieldProps) => (
13 |   <label
14 |     css={css`
15 |       display: block;
16 |       width: 100%;
17 |       margin: 0 0 1rem;
18 |     `}>
19 |     <span css={css`
20 |       display: block;
21 |       font-size: ${fontSizes.bodySmall2};
22 |       padding-left: 0.75rem;
23 |       letter-spacing: 0.2px;
24 |       font-weight: bold;
25 |     `}>{props.label}</span>
26 |     {props.children}
27 |     {props.error &&
28 |       <p css={css`
29 |         color: ${colors.red};
30 |         font-size: ${fontSizes.bodySmall1};
31 |         padding-left: 0.75rem;
32 |       `}>
33 |         {props.error || null}
34 |       </p>
35 |     }
36 |     {props.description && !props.error &&
37 |       <p css={css`
38 |         color: ${colors.darkGray};
39 |         font-size: ${fontSizes.bodySmall1};
40 |         padding-left: 0.75rem;
41 |       `}>
42 |         {props.error || null}
43 |       </p>
44 |     }
45 |   </label>
46 | )
47 | 
48 | export default Field
49 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       Notice the use of %PUBLIC_URL% in the tags above.
 9 |       It will be replaced with the URL of the `public` folder during the build.
10 |       Only files inside the `public` folder can be referenced from the HTML.
11 | 
12 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13 |       work correctly both with client-side routing and a non-root public URL.
14 |       Learn how to configure a non-root public URL by running `npm run build`.
15 |     -->
16 |     <title>React App</title>
17 |   </head>
18 |   <body>
19 |     <noscript>
20 |       You need to enable JavaScript to run this app.
21 |     </noscript>
22 |     <div id="root"></div>
23 |     <!--
24 |       This HTML file is a template.
25 |       If you open it directly in the browser, you will see an empty page.
26 | 
27 |       You can add webfonts, meta tags, or analytics to this file.
28 |       The build step will place the bundled scripts into the <body> tag.
29 | 
30 |       To begin the development, run `npm start` or `yarn start`.
31 |       To create a production bundle, use `npm run build` or `yarn build`.
32 |     -->
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/src/routes/updatePassword.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { map, redirect, route } from 'navi'
 3 | import Form from '../styled/Form'
 4 | import { RoutingContext } from '../types/RoutingContext'
 5 | 
 6 | export default map(async (request, context: RoutingContext) => {
 7 |   if (request.method === 'post') {
 8 |     let { password } = request.body
 9 |     try {
10 |       await context.firebase.auth.currentUser!.updatePassword(password);
11 |       return redirect('/')
12 |     }
13 |     catch (error) {
14 |       return route({
15 |         error,
16 |         view: <UpdatePassword />
17 |       })
18 |     }
19 |   }
20 | 
21 |   return route({
22 |     view: <UpdatePassword />
23 |   })
24 | })
25 | 
26 | function UpdatePassword() {
27 |   return (
28 |     <Form method='post'>
29 |       <h1>Need a new Password?</h1>
30 |       <Form.Errors />
31 |       <Form.Field
32 |         label='New password'
33 |         name='password'
34 |         type='password'
35 |         validate={value =>
36 |           value === '' ? 'Please enter a password.' : undefined
37 |         }
38 |       />
39 |       <Form.Field
40 |         label='And again'
41 |         name='passwordConfirmation'
42 |         type='password'
43 |         validate={(value, allValues: any) =>
44 |           value !== allValues.password ? 'This should match your password.' : undefined
45 |         }
46 |       />
47 |       <Form.SubmitButton>
48 |         Request a new Password
49 |       </Form.SubmitButton>
50 |     </Form>
51 |   )
52 | }
53 | 
54 | 


--------------------------------------------------------------------------------
/src/routes/login.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { map, redirect, route } from 'navi'
 3 | import Form from '../styled/Form'
 4 | import { RoutingContext } from '../types/RoutingContext'
 5 | import AuthFormLayout from '../styled/AuthFormLayout'
 6 | import { colors } from '../utils/theme'
 7 | 
 8 | export default map(async (request, context: RoutingContext) => {
 9 |   if (context.currentUser) {
10 |     return redirect('/')
11 |   }
12 | 
13 |   if (request.method === 'post') {
14 |     let { email, password } = request.body
15 |     try {
16 |       await context.firebase.auth.signInWithEmailAndPassword(email, password);
17 |       return redirect('/')
18 |     }
19 |     catch (error) {
20 |       return route({
21 |         error,
22 |         view: <Login />
23 |       })
24 |     }
25 |   }
26 | 
27 |   return route({
28 |     view: <Login />
29 |   })
30 | })
31 | 
32 | function Login() {
33 |   return (
34 |     <AuthFormLayout heading='Login'>
35 |       <Form method='post'>
36 |         <Form.Errors />
37 |         <Form.Field
38 |           label='Email'
39 |           name='email'
40 |           validate={value =>
41 |             value === '' ? 'Please enter your email.' : undefined
42 |           }
43 |         />
44 |         <Form.Field
45 |           label='Password'
46 |           name='password'
47 |           type='password'
48 |           validate={value =>
49 |             value === '' ? 'Please enter your password.' : undefined
50 |           }
51 |         />
52 |         <Form.SubmitButton bgcolor={colors.red}>
53 |           Login
54 |         </Form.SubmitButton>
55 |       </Form>
56 |     </AuthFormLayout>
57 |   )
58 | }


--------------------------------------------------------------------------------
/src/styled/Button.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { css, keyframes } from 'styled-components/macro'
 3 | import { colors, fontSizes } from '../utils/theme'
 4 | import { lighten } from 'polished';
 5 | 
 6 | export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 7 |   active?: boolean
 8 |   busy?: boolean
 9 | 
10 |   bgcolor?: string
11 |   color?: string
12 | }
13 | 
14 | const boxShadow = `0 4px 16px -4px rgba(146, 146, 186, 0.5)`;
15 | 
16 | const animation = keyframes`
17 |   0% {
18 |     box-shadow: 0px 0px 16px 8px rgba(255, 255, 255,0.32) inset, ${boxShadow};
19 |   }
20 |   50% {
21 |     box-shadow: 0px 0px 16px 8px rgba(255, 255, 255,0.12) inset, ${boxShadow};
22 |   }
23 |   100% {
24 |     box-shadow: 0px 0px 16px 8px rgba(255, 255, 255,0) inset, ${boxShadow};
25 |   }
26 | `
27 | 
28 | const Button = ({ bgcolor, color, busy, children, ...buttonProps }: ButtonProps) => {
29 |   if (!bgcolor) {
30 |     color = colors.darkerGray
31 |     bgcolor = colors.lightGray
32 |   }
33 |   else if (!color) {
34 |     color = colors.white
35 |   }
36 | 
37 |   return (
38 |     <button {...buttonProps} css={css`
39 |       display: inline-block;
40 |       position: relative;
41 |       cursor: pointer;
42 |       font-size: ${fontSizes.bodyLarge1};
43 |       line-height: 1.5rem;
44 |       font-weight: 500;
45 |       font-family: inherit;
46 |       color: ${color};
47 |       height: 3.5rem;
48 |       border: 1px solid ${bgcolor};
49 |       border-radius: 2rem;
50 |       text-decoration: none;
51 |       padding: 0.9rem 1.5rem 1.1rem 1.5rem;
52 |       background: linear-gradient(${lighten(0.2, bgcolor)}, ${bgcolor});
53 |       box-shadow: ${boxShadow};
54 |       transition: box-shadow 120ms ease-out, transform 120ms ease-out;
55 |       text-decoration: none !important;
56 |       white-space: nowrap;
57 | 
58 |       ${busy && css`
59 |         animation: ${animation} 1s infinite;
60 |       `}
61 |     `}>
62 |       {children}
63 |     </button>
64 |   )
65 | }
66 | 
67 | export default Button
68 | 


--------------------------------------------------------------------------------
/src/routes/register.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { map, redirect, route } from 'navi'
 3 | import Form from '../styled/Form'
 4 | import { RoutingContext } from '../types/RoutingContext'
 5 | import AuthFormLayout from '../styled/AuthFormLayout'
 6 | import { colors } from '../utils/theme';
 7 | 
 8 | export default map(async (request, context: RoutingContext) => {
 9 |   if (context.currentUser) {
10 |     return redirect('/')
11 |   }
12 | 
13 |   if (request.method === 'post') {
14 |     let { email, name, password } = request.body
15 |     try {
16 |       let auth = await context.firebase.auth.createUserWithEmailAndPassword(email, password);
17 |       await auth.user!.updateProfile({
18 |         displayName: name,
19 |       })
20 | 
21 |       // Updating the profile does not cause Firebase to emit any events, so
22 |       // we'll need to manually reload the user.
23 |       await context.reloadUser()
24 | 
25 |       return redirect('/?welcome')
26 |     }
27 |     catch (error) {
28 |       console.log(error, 'error')
29 |       return route({
30 |         error,
31 |         view: <Register />
32 |       })
33 |     }
34 |   }
35 | 
36 |   return route({
37 |     view: <Register />
38 |   })
39 | })
40 | 
41 | function Register() {
42 |   return (
43 |     <AuthFormLayout heading='Sign Up'>
44 |       <Form method='post'>
45 |         <Form.Errors />
46 |         <Form.Field
47 |           label='Name'
48 |           name='name'
49 |           validate={value =>
50 |             value === '' ? 'Please enter your name.' : undefined
51 |           }
52 |         />
53 |         <Form.Field
54 |           label='Email'
55 |           name='email'
56 |           validate={value =>
57 |             value === '' ? 'Please enter your email.' : undefined
58 |           }
59 |         />
60 |         <Form.Field
61 |           label='Password'
62 |           name='password'
63 |           type='password'
64 |           validate={value =>
65 |             value === '' ? 'Please enter your password.' : undefined
66 |           }
67 |         />
68 |         <Form.SubmitButton bgcolor={colors.red}>
69 |           Sign Up
70 |         </Form.SubmitButton>
71 |       </Form>
72 |     </AuthFormLayout>
73 |   )
74 | }


--------------------------------------------------------------------------------
/src/styled/Form.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components/macro'
 3 | import { FieldProps as FormControlFieldProps } from 'react-final-form'
 4 | import FormControl, {
 5 |   FormProps as FormControlProps,
 6 |   FormSubmitButtonProps as FormControlSubmitButtonProps
 7 | } from '../controls/Form'
 8 | import Button, { ButtonProps } from './Button'
 9 | import Field, { FieldProps } from './Field'
10 | import Input from './Input'
11 | import { Omit } from '../types/Omit'
12 | 
13 | 
14 | const StyledForm = styled(FormControl)`
15 | 
16 | `
17 | 
18 | 
19 | interface StyledFormErrorsProps {
20 |   active: boolean
21 | }
22 | 
23 | const StyledFormErrors = styled.div<StyledFormErrorsProps>`
24 | 
25 | `
26 | 
27 | 
28 | function Form<Schema extends object>(props: FormControlProps<Schema>) {
29 |   return (
30 |     <StyledForm {...props as any} />
31 |   )
32 | }
33 | 
34 | function FormErrors({ defaultMessage = '' }) {
35 |   return (
36 |     <FormControl.Errors
37 |       defaultMessage={defaultMessage}
38 |       render={error => 
39 |         <StyledFormErrors active={typeof error === 'string'}>
40 |           {error}
41 |         </StyledFormErrors>
42 |       }
43 |     />
44 |   )
45 | }
46 | 
47 | interface FormFieldProps extends FormControlFieldProps, Omit<FieldProps, 'children'> {
48 |   type?: string
49 | }
50 | 
51 | function FormField({ label, type, ...props }: FormFieldProps) {
52 |   return (
53 |     <FormControl.Field {...props} render={({ input, meta }) =>
54 |       <Field label={label}>
55 |         <Input type={type} {...input} />
56 |       </Field>
57 |     } />
58 |   )
59 | }
60 | 
61 | 
62 | interface FormSubmitButtonProps extends Omit<FormControlSubmitButtonProps, 'render'>, ButtonProps {}
63 | 
64 | function FormSubmitButton({ children='Save', ...submitButtonProps }: FormSubmitButtonProps) {
65 |   return (
66 |     <FormControl.SubmitButton {...submitButtonProps} render={({ button, submitting }) =>
67 |       <Button {...button} busy={submitting}>
68 |         {children}
69 |       </Button>
70 |     } />
71 |   )
72 | }
73 | 
74 | 
75 | export default Object.assign(Form, {
76 |   Errors: FormErrors,
77 |   Field: FormField,
78 |   SubmitButton: FormSubmitButton,
79 | })
80 | 
81 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Suspense, useState, useEffect, useMemo } from 'react'
 2 | import { withView, compose } from 'navi'
 3 | import { Router, View } from 'react-navi'
 4 | import firebase from 'firebase/app'
 5 | import Firebase from './Firebase'
 6 | import GlobalStyle from './GlobalStyle'
 7 | import routes from './routes'
 8 | import Layout from './styled/AppLayout'
 9 | import { RoutingContext } from './types/RoutingContext'
10 | 
11 | const routesWithLayout = compose(
12 |   // Instead of rendering the latest `currentUser`, we render its value at the
13 |   // time that the route was generated. Given that changing the user rebuilds
14 |   // the route, it will always be up-to-date -- and doing it this way helps
15 |   // avoid flashes of content when navigating between auth actions.
16 |   withView((request, context: RoutingContext) =>
17 |     <Layout user={context.currentUser}>
18 |       <Suspense fallback={null}>
19 |         <View />
20 |       </Suspense>
21 |     </Layout>
22 |   ),
23 |   routes
24 | )
25 | 
26 | function App() {
27 |   let [firebase] = useState(() => new Firebase())
28 |   let [currentUser, setCurrentUser] = useState<firebase.User | null | undefined>(undefined)
29 |   useEffect(() => firebase.auth.onAuthStateChanged(user => {
30 |     // Skip the initial change after registration where displayName is null.
31 |     if (!user || user.displayName) {
32 |       setCurrentUser(user)
33 |     }
34 |   }), [])
35 |   let { displayName, email } = currentUser || { displayName: currentUser, email: currentUser }
36 | 
37 |   // We need to pass in a new object when the values update, or Navi won't
38 |   // notice the change and re-render.
39 |   let user = useMemo(() => (
40 |     (displayName && email) ? { displayName, email } : (currentUser as any)
41 |   ), [displayName, email])
42 | 
43 |   console.log(user)
44 | 
45 |   let context: RoutingContext = {
46 |     currentUser: user,
47 |     firebase,
48 | 
49 |     // Firebase doesn't emit events when the user's profile changes, so this
50 |     // can be used to manually refresh the user.
51 |     reloadUser: () => firebase.auth.currentUser!.reload().then(() => {
52 |       setCurrentUser(firebase.auth.currentUser)
53 |     })
54 |   }
55 | 
56 |   return (
57 |     <Router routes={routesWithLayout as any} context={context}>
58 |       <GlobalStyle />
59 |       <View />
60 |     </Router>
61 |   )
62 | }
63 | 
64 | export default App


--------------------------------------------------------------------------------
/src/media/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="198px" height="223px" viewBox="0 0 198 223" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>Group 12</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs>
 7 |         <polygon id="path-1" points="0 0.927529412 230.926333 0.927529412 230.926333 235.998729 0 235.998729"></polygon>
 8 |     </defs>
 9 |     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
10 |         <g id="Group-12" transform="translate(-16.000000, -7.000000)">
11 |             <g id="Group-3">
12 |                 <mask id="mask-2" fill="white">
13 |                     <use xlink:href="#path-1"></use>
14 |                 </mask>
15 |                 <g id="Clip-2"></g>
16 |             </g>
17 |             <path d="M41.6097904,105.009996 C55.3844624,93.4235739 64.6970064,77.4037007 67.9051555,59.7584398 C68.2425203,57.9053712 68.6308082,56.1281961 69,54.3193988 C44.6524398,49.4622087 25.9255059,52.124809 19.4073617,63.3380877 C12.9528712,74.4438505 19.8211111,91.6716967 35.8936835,110 C37.7651038,108.330341 39.6365241,106.667006 41.6097904,105.009996" id="Fill-4" fill="#ffffff"></path>
18 |             <path d="M163.088593,59.7584398 C166.297079,77.4037007 175.610601,93.4235739 189.386719,105.009996 C191.360192,106.667006 193.238175,108.336665 195.103426,110 C211.184051,91.6716967 218.046646,74.450175 211.591478,63.3380877 C205.079016,52.124809 186.34375,49.4622087 162,54.3193988 C162.362864,56.1281961 162.751193,57.9053712 163.088593,59.7584398" id="Fill-6" fill="#ffffff"></path>
19 |             <path d="M141.215962,188.511158 C124.284423,182.496281 105.715577,182.496281 88.7840385,188.511158 C86.4930769,189.321095 84.2465385,190.055688 82,190.784003 C89.92,214.755613 101.761923,230 115,230 C128.238077,230 140.08,214.755613 148,190.784003 C145.753462,190.055688 143.506923,189.321095 141.215962,188.511158" id="Fill-8" fill="#ffffff"></path>
20 |             <path d="M117.099283,146.065734 C103.290012,146.065734 92.0953635,134.845629 92.0953635,121.012796 C92.0953635,107.179964 103.290012,95.9598591 117.099283,95.9598591 C130.9149,95.9598591 142.109548,107.179964 142.109548,121.012796 C142.109548,134.845629 130.9149,146.065734 117.099283,146.065734 M186.742179,118.730633 C185.523714,117.52916 184.273518,116.327687 182.985245,115.126214 C167.583084,100.733966 156.851707,82.1079559 152.111116,61.5557746 C151.711307,59.8393846 151.298806,58.1484226 150.867266,56.4956026 C143.11859,26.6431302 129.943936,7 114.9987,7 C100.053464,7 86.885156,26.6431302 79.1301333,56.4956026 C78.6985936,58.1484226 78.2860924,59.8393846 77.8926297,61.5557746 C73.1520389,82.1079559 62.4143152,100.733966 47.018501,115.126214 C45.7238818,116.327687 44.4736858,117.52916 43.2615669,118.730633 C21.3291951,140.382576 10.9341647,161.62767 18.4036096,174.59595 C25.8730545,187.557873 49.4427388,189.166194 79.1301333,180.965664 C80.773792,180.50796 82.4428353,180.024828 84.124571,179.509911 C104.267322,173.343621 125.730077,173.343621 145.879175,179.509911 C147.56091,180.024828 149.223607,180.50796 150.867266,180.965664 C180.554661,189.166194 204.124345,187.557873 211.59379,174.59595 C219.069581,161.62767 208.668204,140.382576 186.742179,118.730633" id="Fill-10" fill="#ffffff"></path>
21 |         </g>
22 |     </g>
23 | </svg>


--------------------------------------------------------------------------------
/src/utils/theme.tsx:
--------------------------------------------------------------------------------
  1 | import { css } from 'styled-components/macro'
  2 | import {
  3 |   desaturate,
  4 |   lighten,
  5 | } from 'polished'
  6 | 
  7 | const createMediaQuery = (minWidth: number) =>
  8 |   (...args: any[]) =>
  9 |     css`
 10 |       @media screen and (min-width: ${minWidth}rem) {
 11 |         ${css.apply(null, args as any)}
 12 |       }
 13 |     `
 14 | 
 15 | export const base = '16px'
 16 | 
 17 | export const breakpoints = {
 18 |   mediumPlus: 720,
 19 |   largePlus: 1104,
 20 | }
 21 | export const media = {
 22 |   mediumPlus: createMediaQuery(breakpoints.mediumPlus),
 23 |   largePlus: createMediaQuery(breakpoints.largePlus),
 24 | }
 25 | 
 26 | export const fontFamily = `Lato,'Helvetica Neue',Helvetica,Arial,sans-serif`
 27 | 
 28 | const rem = (x: number) => x+'rem'
 29 | 
 30 | export const fontSizes = {
 31 |   bodySmall2: rem(3/4),
 32 |   bodySmall1: rem(7/8),
 33 |   body: rem(1),
 34 |   bodyLarge1: rem(5/4),
 35 | 
 36 |   displaySmall1: rem(3/2),
 37 |   display: rem(2),
 38 |   displayLarge1: rem(5/2),
 39 |   displayLarge2: rem(7/2),
 40 |   displayLarge3: rem(9/2)
 41 | }
 42 | 
 43 | export const fontWeights = {
 44 |   standard: 500,
 45 |   bold: 700,
 46 | }
 47 | export const lineHeights = {
 48 |   body: 1.5,
 49 |   display: 1.25,
 50 | }
 51 | 
 52 | const baseBodyTextStyle = {
 53 |   fontWeight: fontWeights.standard,
 54 |   lineHeight: lineHeights.body
 55 | }
 56 | const baseDisplayTextStyle = {
 57 |   fontWeight: fontWeights.bold,
 58 |   lineHeight: lineHeights.display
 59 | }
 60 | 
 61 | export const textStyles = {
 62 |   bodySmall2: {
 63 |     fontSize: fontSizes.bodySmall2,
 64 |     ...baseBodyTextStyle
 65 |   },
 66 |   bodySmall1: {
 67 |     fontSize: fontSizes.bodySmall1,
 68 |     ...baseBodyTextStyle
 69 |   },
 70 |   body: {
 71 |     fontSize: fontSizes.body,
 72 |     ...baseBodyTextStyle
 73 |   },
 74 |   bodyLarge1: {
 75 |     fontSize: fontSizes.bodyLarge1,
 76 |     ...baseBodyTextStyle
 77 |   },
 78 | 
 79 |   displaySmall1: {
 80 |     fontSize: fontSizes.displaySmall1,
 81 |     ...baseDisplayTextStyle
 82 |   },
 83 |   display: {
 84 |     fontSize: fontSizes.display,
 85 |     ...baseDisplayTextStyle
 86 |   },
 87 |   displayLarge1: {
 88 |     fontSize: fontSizes.displayLarge1,
 89 |     ...baseDisplayTextStyle
 90 |   },
 91 |   displayLarge2: {
 92 |     fontSize: fontSizes.displayLarge2,
 93 |     ...baseDisplayTextStyle
 94 |   },
 95 | }
 96 | 
 97 | const white = '#fff'
 98 | const black = '#0f0035'
 99 | const lightBlack = '#342656'
100 | const text = '#0f0035'
101 | const borderGray = '#dae1f2'
102 | const primary = 'aquamarine'
103 | const lightPrimary = desaturate(0.15, lighten(0.15, primary))
104 | const red = '#dd3c6f'
105 | const lightRed = '#f54391'
106 | const green = '#12c8ba'
107 | const lightGreen = desaturate(0.15, lighten(0.2, green))
108 | const lighterGray = '#f0f4fc'
109 | const lightGray = '#dae1f2'
110 | const gray = '#a9a9c9'
111 | const darkGray = '#8a8ab5'
112 | const darkerGray = '#7272a3'
113 | 
114 | export const colors = {
115 |   white,
116 |   black,
117 |   lightBlack,
118 |   text,
119 |   borderGray,
120 |   primary,
121 |   lightPrimary,
122 |   red,
123 |   lightRed,
124 |   green,
125 |   lightGreen,
126 |   lighterGray,
127 |   lightGray,
128 |   gray,
129 |   darkGray,
130 |   darkerGray,
131 | }
132 | 
133 | export const radius = '3px'
134 | export const radiuses = {
135 |   standard: '2px',
136 |   large: '6px',
137 | }
138 | 
139 | export const boxShadows = [
140 |   `0 0 2px 0 rgba(0,0,0,.04),0 1px 4px 0 rgba(0,0,0,.08)`,
141 |   `0 0 2px 0 rgba(0,0,0,.04),0 2px 8px 0 rgba(0,0,0,.08)`,
142 |   `0 0 2px 0 rgba(0,0,0,.04),0 4px 16px 0 rgba(0,0,0,.08)`,
143 |   `0 0 2px 0 rgba(0,0,0,.04),0 8px 32px 0 rgba(0,0,0,.08)`
144 | ]
145 | 
146 | export const timingFunctions = {
147 |   easeInOut: `cubic-bezier(0.770, 0.000, 0.175, 1.000)`,
148 |   easeOut: `cubic-bezier(0.165, 0.840, 0.440, 1.000)`,
149 |   easeIn: `cubic-bezier(0.895, 0.030, 0.685, 0.220)`
150 | }
151 | 
152 | export const durations = {
153 |   short: `120ms`,
154 |   medium: `280ms`,
155 |   long: `600ms`,
156 | }


--------------------------------------------------------------------------------
/src/styled/AppHeader.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { Link, useCurrentRoute } from 'react-navi'
  3 | import { css } from 'styled-components/macro'
  4 | import AuthLink, { AuthLinkProps } from '../controls/AuthLink'
  5 | import Gravatar from '../controls/Gravatar'
  6 | import Responds from '../controls/Responds'
  7 | import { colors, durations, timingFunctions, media, fontSizes, boxShadows, radius } from '../utils/theme'
  8 | import { User } from '../types/User'
  9 | 
 10 | interface AppHeaderProps {
 11 |   user?: User | null
 12 | }
 13 | 
 14 | const height = 3
 15 | const verticalPadding = 1/2
 16 | const contentHeight = height - verticalPadding*2
 17 | 
 18 | const NavLink = (props: Link.Props) =>
 19 |   <Link
 20 |     {...props}
 21 |     activeStyle={{
 22 |       color: colors.primary,
 23 |     }}
 24 |     css={css`
 25 |       display: inline-block;
 26 |       color: ${colors.gray};
 27 |       font-weight: bold;
 28 |       line-height: 2rem;
 29 |       margin-right: 2rem;
 30 |       text-decoration: none;
 31 |       transition: color ${durations.short} ${timingFunctions.easeOut};
 32 |     `}
 33 |   />
 34 | 
 35 | const StyledAuthLink = (props: AuthLinkProps) => {
 36 |   let { url } = useCurrentRoute()
 37 |   let isViewingLogin = url.pathname.startsWith('/login')
 38 |   let href = isViewingLogin ? '/register' : '/login'
 39 |   let color = isViewingLogin ? colors.green : colors.lightGray
 40 |   return (
 41 |     <AuthLink
 42 |       {...props}
 43 |       href={href}
 44 |       css={css`
 45 |         border: 1px solid ${color};
 46 |         border-radius: ${contentHeight/2}rem;
 47 |         color: ${color};
 48 |         display: inline-block;
 49 |         font-size: ${fontSizes.bodySmall1};
 50 |         font-weight: bold;
 51 |         line-height: calc(${contentHeight}rem - 2px);
 52 |         text-decoration: none;
 53 |         height: ${height - verticalPadding*2}rem;
 54 |         padding: 0 1rem;
 55 |       `}>
 56 |       {isViewingLogin ? 'Sign Up' : 'Login'} 
 57 |     </AuthLink>
 58 |   )
 59 | }
 60 | 
 61 | const Identity = React.forwardRef(({ user, tabIndex }: { user: User, tabIndex?: number }, ref: React.Ref<any>) => {
 62 |   let { displayName, email } = user
 63 | 
 64 |   return (
 65 |     <div ref={ref} tabIndex={0} css={css`
 66 |       cursor: pointer;
 67 |       color: ${colors.lightGray};
 68 |       text-align: right;
 69 | 
 70 |       :hover {
 71 |         color: ${colors.lighterGray};
 72 |       }
 73 |     `}>
 74 |       {displayName}
 75 |       <Gravatar
 76 |         email={email!}
 77 |         size={32}
 78 |         alt={`Avatar for ${email}`} 
 79 |         css={css`
 80 |           border-radius: 9999px;
 81 |           margin-left: 1rem;
 82 |           vertical-align: middle;
 83 |         `}
 84 |       />
 85 |     </div>
 86 |   )
 87 | })
 88 | 
 89 | const IdentityMenu = React.forwardRef(({ visible }: { visible: boolean }, ref: React.Ref<any>) => {
 90 |   return (
 91 |     <div
 92 |       ref={ref}
 93 |       css={css`
 94 |         background-color: ${colors.lightBlack};
 95 |         border-bottom-left-radius: ${radius};
 96 |         border-bottom-right-radius: ${radius};
 97 |         box-shadow: ${boxShadows[1]};
 98 |         display: ${visible ? 'block' : 'none'};
 99 |         line-height: ${height}rem;
100 |         top: 0.5rem;
101 |         position: relative;
102 | 
103 |         > a {
104 |           color: ${colors.lightGray};
105 |           display: block;
106 |           text-decoration: none;
107 |           padding: 0 1rem;
108 |         }
109 |       `}>
110 |       <Link href="/account">Account Details</Link>
111 |       <Link href="/logout">Logout</Link>
112 |     </div>
113 |   )
114 | })
115 | 
116 | function UserControls({ user }: { user?: User | null }) {
117 |   if (user === undefined) {
118 |     // Wait until we know what the user's state is before showing anything
119 |     return null
120 |   }
121 |   
122 |   return (
123 |     <Responds>
124 |       <div css={css`
125 |         position: relative;
126 |       `}>
127 |         {user ? (
128 |           <Responds.To focus>
129 |             <Identity user={user} />
130 |           </Responds.To>
131 |         ) : (
132 |           <StyledAuthLink />
133 |         )}
134 |         <Responds.With>
135 |           {({ active }) => <IdentityMenu visible={active} />}
136 |         </Responds.With>
137 |       </div>
138 |     </Responds>
139 |   )
140 | }
141 | 
142 | 
143 | 
144 | function AppHeader({ user }: AppHeaderProps) {
145 |   return (
146 |     <header css={css`
147 |       background-color: ${colors.black};
148 |       box-shadow: ${boxShadows[1]};
149 |       display: flex;
150 |       height: ${height}rem;
151 |       justify-content: space-between;
152 |       padding: ${verticalPadding}rem 1rem;
153 |       position: relative;
154 | 
155 |       ${media.mediumPlus`
156 |         padding-left: 2rem;
157 |         padding-right: 2rem;
158 |       `}
159 |     `}>
160 |       <nav>
161 |         <Link href="/">
162 |           <img
163 |             src={require('../media/logo.svg')}
164 |             alt="Frontend Armory Logo"
165 |             css={css`
166 |               margin: 0;
167 |               margin-right: 2rem;
168 |               height: ${contentHeight}rem;
169 |               width: ${contentHeight}rem;
170 |               float: left;
171 |               vertical-align: middle;
172 |             `}
173 |           />
174 |         </Link>
175 |         <NavLink href="/404">
176 |           404
177 |         </NavLink>
178 |       </nav>
179 |       <UserControls user={user} />
180 |     </header>
181 |   )
182 | }
183 | 
184 | export default AppHeader
185 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read http://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit http://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/src/controls/Form.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useRef, useCallback } from 'react'
  2 | import { useAction } from 'react-navi'
  3 | import { FORM_ERROR, FormApi, FormState } from 'final-form'
  4 | import {
  5 |   Form as FinalForm,
  6 |   FormProps as FinalFormProps,
  7 |   FormSpy,
  8 |   Field
  9 | } from 'react-final-form'
 10 | import { Omit } from '../types/Omit'
 11 | 
 12 | 
 13 | export type FormErrors<Schema extends object> = Partial<Record<keyof Schema, string>>
 14 | 
 15 | 
 16 | export interface FormProps<Schema extends object> extends Omit<FinalFormProps, 'children' | 'onSubmit' | 'validate'> {
 17 |   action?: string
 18 |   children: React.ReactNode
 19 |   className?: string
 20 |   component?: string | React.ElementType<any>
 21 |   initialValues?: Schema
 22 |   method?: string
 23 |   style?: React.CSSProperties
 24 |   submitError?: string | FormErrors<Schema>
 25 |   onSubmit?: (
 26 |     value: Schema,
 27 |     form: FormApi,
 28 |   ) => undefined | FormErrors<Schema> | Promise<undefined | FormErrors<Schema>>,
 29 |   validate?: (value: Schema) => undefined | FormErrors<Schema> | Promise<undefined | FormErrors<Schema>>
 30 | }
 31 | 
 32 | export function Form<Schema extends object>({
 33 |   action,
 34 |   children,
 35 |   className,
 36 |   component: Component = 'form',
 37 |   method,
 38 |   style,
 39 |   submitError,
 40 |   onSubmit,
 41 |   validate,
 42 |   ...props
 43 | }: FormProps<Schema>) {
 44 |   // Keep props in a ref, so that latest errors are accessible from the
 45 |   // submit and validate callbacks.
 46 |   let propsRef = useRef({
 47 |     submitError,
 48 |     onSubmit,
 49 |     validate,
 50 |   })
 51 |   propsRef.current = {
 52 |     submitError,
 53 |     onSubmit,
 54 |     validate,
 55 |   }
 56 | 
 57 |   let submit = useAction(method || 'post', action)
 58 | 
 59 |   let onSubmitFinalForm = useCallback(async (value, form) => {
 60 |     let props = propsRef.current
 61 | 
 62 |     if (props.onSubmit) {
 63 |       let errors = await props.onSubmit(value, form)
 64 |       if (errors) {
 65 |         return errors
 66 |       }
 67 |     }
 68 | 
 69 |     if (method) {
 70 |       let route = await submit(value)
 71 |       if (route.type === 'error') {
 72 |         let error = route.error
 73 |         if (error instanceof Error) {
 74 |           error = error.message
 75 |         }
 76 |         return typeof error === 'string' ? { [FORM_ERROR]: error } : error
 77 |       }
 78 |     }
 79 |   }, [method, submit])
 80 | 
 81 |   let validateFinalForm = useCallback(async (values: Schema) => {
 82 |     let props = propsRef.current
 83 |     let validateErrors = await (props.validate && props.validate(values))
 84 |     let submitErrors = props.submitError
 85 |     return combineErrors(validateErrors, submitErrors)
 86 |   }, [])
 87 | 
 88 |   return (
 89 |     <FinalForm
 90 |       {...props}
 91 |       onSubmit={onSubmitFinalForm}
 92 |       subscription={{}}
 93 |       validate={validateFinalForm as any}>
 94 |       {({ handleSubmit }) =>
 95 |         React.createElement(Component, {
 96 |           action,
 97 |           children,
 98 |           className,
 99 |           method,
100 |           onSubmit: handleSubmit,
101 |           style,
102 |         })
103 |       }
104 |     </FinalForm>
105 |   )
106 | }
107 | 
108 | 
109 | export interface FormErrorsProps {
110 |   /**
111 |    * When there has been an error submitting the form, the `message` property
112 |    * will have a string value.
113 |    */
114 |   render: (message?: string) => React.ReactElement<any>,
115 |   
116 |   /**
117 |    * Allows you to set the default error message that is shown when the form
118 |    * couldn't be submitted, and there's no submit error message.
119 |    */
120 |   defaultMessage?: string
121 | }
122 | 
123 | export function FormErrors(props: FormErrorsProps) {
124 |   let {
125 |     defaultMessage = "Your data couldn't be saved.",
126 |     render,
127 |   } = props
128 | 
129 |   return (
130 |     <FormSpy render={state => {
131 |       let error =
132 |         state.submitFailed ? (state.submitError || defaultMessage) : undefined
133 |       
134 |       return render(error)
135 |     }} />
136 |   )
137 | }
138 | 
139 | 
140 | function defaultFormSubmitButtonRender(props: FormSubmitRenderProps) {
141 |   return <button {...props.button} />
142 | }
143 | 
144 | export interface FormSubmitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
145 |   children?: React.ReactNode,
146 |   render: (props: FormSubmitRenderProps) => React.ReactElement<any>,
147 | }
148 | 
149 | export interface FormSubmitRenderProps extends FormState {
150 |   button: React.ButtonHTMLAttributes<HTMLButtonElement>
151 | }
152 | 
153 | export function FormSubmitButton({ render=defaultFormSubmitButtonRender, children='Save', ...props }: FormSubmitButtonProps) {
154 |   return (
155 |     <FormSpy render={state =>
156 |       render({
157 |         ...state,
158 |         button: {
159 |           disabled: state.submitting,
160 |           children,
161 |           ...props,
162 |           type: 'submit',
163 |         }
164 |       })
165 |     } />
166 |   )
167 | }
168 | 
169 | 
170 | function combineErrors<Schema extends object>(...errors: (undefined | string | FormErrors<Schema>)[]): undefined | FormErrors<Schema> {
171 |   if (errors.length === 0) {
172 |     return
173 |   }
174 | 
175 |   let result = {}
176 |   let hasErrors = false
177 |   do {
178 |     let error = errors.shift()
179 |     if (typeof error === 'string') {
180 |       error = { [FORM_ERROR]: error } as any
181 |     }
182 |     if (error) {
183 |       hasErrors = true
184 |       Object.assign(result, error)
185 |     }
186 |   } while (errors.length)
187 | 
188 |   return hasErrors ? result : undefined
189 | }
190 | 
191 | 
192 | export { Field, FormSpy }
193 | 
194 | 
195 | export default Object.assign(Form, {
196 |   Spy: FormSpy,
197 |   Field,
198 |   SubmitButton: FormSubmitButton,
199 |   Errors: FormErrors,
200 | })


--------------------------------------------------------------------------------
/src/controls/Responds.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
  2 | 
  3 | export interface RespondsContext {
  4 |   active: boolean
  5 |   focused: boolean
  6 |   hovering: boolean
  7 | 
  8 |   focus(triggerWithDelayOut?: number | undefined): () => void;
  9 |   hover(triggerWithDelayOut?: number | undefined): () => void;
 10 |   registerTrigger(): () => void,
 11 | }
 12 | 
 13 | export interface RespondsProps {
 14 |   children?: React.ReactNode
 15 | }
 16 | 
 17 | export interface RespondsToProps {
 18 |   children?: React.ReactElement<any, any>
 19 |   hover?: boolean
 20 |   focus?: boolean
 21 |   delay?: number
 22 |   delayIn?: number
 23 |   delayOut?: number
 24 | }
 25 | 
 26 | export interface RespondsWithProps {
 27 |   children?: React.ReactElement<any, any> | RespondsWithRenderer | null
 28 |   render?: RespondsWithRenderer
 29 | }
 30 | 
 31 | export interface RespondsWithRendererProps {
 32 |   active: boolean
 33 |   focused: boolean
 34 |   hovering: boolean
 35 | }
 36 | 
 37 | export type RespondsWithRenderer = (props: RespondsWithRendererProps) => React.ReactElement<any, any> | null
 38 | 
 39 | export const RespondsContext = React.createContext<RespondsContext>({
 40 |   active: false,
 41 |   focused: false,
 42 |   hovering: false,
 43 |   
 44 |   focus: () => () => {},
 45 |   hover: () => () => {},
 46 |   registerTrigger: () => () => {},
 47 | })
 48 | 
 49 | export const Responds: React.FC<RespondsProps> = ({ children }) => {
 50 |   let [focusCount, incrementFocusCount] = useFocusCounter()
 51 |   let [hoverCount, incrementHoverCount] = useFocusCounter()
 52 |   let [triggerCount, incrementTriggerCount] = useFocusCounter()
 53 | 
 54 |   let context: RespondsContext = useMemo(() => ({
 55 |     active: triggerCount > 0 && (focusCount > 0 || hoverCount > 0),
 56 |     focused: triggerCount > 0 && focusCount > 0,
 57 |     hovering: triggerCount > 0 && hoverCount > 0,
 58 | 
 59 |     focus: incrementFocusCount,
 60 |     hover: incrementHoverCount,
 61 |     registerTrigger: () => incrementTriggerCount(0),
 62 |   }), [focusCount, hoverCount, triggerCount, incrementFocusCount, incrementHoverCount, incrementTriggerCount])
 63 | 
 64 |   return (
 65 |     <RespondsContext.Provider value={context}>
 66 |       {children}
 67 |     </RespondsContext.Provider>
 68 |   )
 69 | }
 70 | 
 71 | export const RespondsTo: React.FC<RespondsToProps> = (props: RespondsToProps) => {
 72 |   let delay = props.delay || 10
 73 |   let { 
 74 |     children,
 75 |     hover,
 76 |     focus,
 77 |     delayIn = delay,
 78 |     delayOut = delay,
 79 |   } = props
 80 |   let ref = useRef<HTMLElement | undefined>()
 81 |   let context = useContext(RespondsContext)
 82 | 
 83 |   useEffect(context.registerTrigger, [])
 84 |   
 85 |   useTriggers(
 86 |     ref,
 87 |     context,
 88 |     !!hover,
 89 |     !!focus,
 90 |     delayIn,
 91 |     delayOut
 92 |   )
 93 | 
 94 |   let cloneProps = !focus ? undefined : {
 95 |     tabIndex: children!.props.tabIndex || -1,
 96 |   }
 97 | 
 98 |   return cloneWithRef(children!, ref, cloneProps)
 99 | }
100 | 
101 | export const RespondsWith: React.FC<RespondsWithProps> = ({ children, render }) => {
102 |   let context = useContext(RespondsContext)
103 |   let ref = useRef()
104 | 
105 |   let { hovering, focused, active } = context
106 | 
107 |   useTriggers(
108 |     ref,
109 |     context,
110 |     !!hovering,
111 |     !!focused
112 |   )
113 | 
114 |   if (React.isValidElement(children)) {
115 |     render = ({ active }) => active ? children : null
116 |   }
117 |   else if (children) {
118 |     render = children as any
119 |   }
120 | 
121 |   return cloneWithRef(render!({ active, focused, hovering }), ref)
122 | }
123 | 
124 | export default Object.assign(Responds, {
125 |   To: RespondsTo,
126 |   With: RespondsWith,
127 | })
128 | 
129 | function useFocusCounter() {
130 |   let [count, setCount] = useState(0)
131 |   let countRef = useRef(count)
132 |   let lastDecrementDelayRef = useRef(0)
133 | 
134 |   // The decrement occurs within a `setTimeout()`, but the current count can
135 |   // change before the setTimeout occurs, so we need a ref to access it.
136 |   countRef.current = count
137 | 
138 |   let timeouts: Set<number> = new Set()
139 |   useEffect(() => {
140 |     return () => {
141 |       timeouts.forEach(timeout => window.clearTimeout(timeout))
142 |     }
143 |   })
144 | 
145 |   let increment = useCallback((triggerAndSetDecrementDelay?: number): (() => void) => {
146 |     if (triggerAndSetDecrementDelay !== undefined || countRef.current > 0) {
147 |       setCount(countRef.current + 1)
148 |       if (triggerAndSetDecrementDelay !== undefined) {
149 |         lastDecrementDelayRef.current = triggerAndSetDecrementDelay
150 |       }
151 |       else {
152 |         triggerAndSetDecrementDelay = lastDecrementDelayRef.current
153 |       }
154 |       return () => {
155 |         let timeout = window.setTimeout(() => {
156 |           setCount(Math.max(countRef.current - 1, 0))
157 |           timeouts.delete(timeout)
158 |         }, triggerAndSetDecrementDelay)
159 | 
160 |         timeouts.add(timeout)
161 |       }
162 |     }
163 |     return () => {}
164 |   }, [])
165 | 
166 |   return [count, increment] as [number, (triggerWithDelayOut?: number | undefined) => () => void]
167 | }
168 | 
169 | function useTriggers(
170 |   ref: React.MutableRefObject<HTMLElement | undefined>,
171 |   context: RespondsContext,
172 |   hover: boolean,
173 |   focus: boolean,
174 |   delayIn?: number,
175 |   delayOut?: number
176 | ) {
177 |   let stateRef = useRef<{
178 |     focusTimeout?: number,
179 |     hoverTimeout?: number,
180 |     focusOut?: () => void,
181 |     hoverOut?: () => void,
182 |     focus?: boolean,
183 |     hover?: boolean,
184 |   }>({})
185 | 
186 |   stateRef.current.focus = focus
187 |   stateRef.current.hover = hover
188 | 
189 |   useEffect(() => {
190 |     let node = ref.current!
191 | 
192 |     let handleFocusIn = () => {
193 |       stateRef.current.focusTimeout = setTimeout(() => {
194 |         stateRef.current.focusTimeout = undefined
195 |         if (stateRef.current.focusOut) {
196 |           stateRef.current.focusOut()
197 |         }
198 |         stateRef.current.focusOut = context.focus(delayOut)
199 |       }, delayIn)
200 |     }
201 |     let handleFocusOut = () => {
202 |       if (stateRef.current.focusTimeout !== undefined) {
203 |         clearTimeout(stateRef.current.focusTimeout)
204 |       }
205 |       else if (stateRef.current.focusOut) {
206 |         stateRef.current.focusOut()
207 |         stateRef.current.focusOut = undefined
208 |       }
209 |     }
210 | 
211 |     let handleMouseEnter = () => {
212 |       stateRef.current.hoverTimeout = setTimeout(() => {
213 |         stateRef.current.hoverTimeout = undefined
214 |         stateRef.current.hoverOut = context.hover(delayOut)
215 |       }, delayIn)
216 |     }
217 |     let handleMouseLeave = () => {
218 |       if (stateRef.current.hoverTimeout !== undefined) {
219 |         clearTimeout(stateRef.current.hoverTimeout)
220 |       }
221 |       else if (stateRef.current.hoverOut) {
222 |         stateRef.current.hoverOut()
223 |         stateRef.current.hoverOut = undefined
224 |       }
225 |     }
226 | 
227 |     if (focus) {
228 |       node.addEventListener('focusin', handleFocusIn, false)
229 |       node.addEventListener('focusout', handleFocusOut, false)
230 |     }
231 |     if (hover) {
232 |       node.addEventListener('mouseenter', handleMouseEnter, false)
233 |       node.addEventListener('mouseleave', handleMouseLeave, false)
234 |     }
235 | 
236 |     return () => {
237 |       if (stateRef.current.focusTimeout) {
238 |         clearTimeout(stateRef.current.focusTimeout)
239 |       }
240 |       if (!stateRef.current.focus && stateRef.current.focusOut) {
241 |         stateRef.current.focusOut()
242 |       }
243 |       if (stateRef.current.hoverTimeout) {
244 |         clearTimeout(stateRef.current.hoverTimeout)
245 |       }
246 |       if (!stateRef.current.hover && stateRef.current.hoverOut) {
247 |         stateRef.current.hoverOut()
248 |       }
249 |       if (focus) {
250 |         node.removeEventListener('focusin', handleFocusIn, false)
251 |         node.removeEventListener('focusout', handleFocusOut, false)
252 |       }
253 |       if (hover) {
254 |         node.removeEventListener('mouseenter', handleMouseEnter, false)
255 |         node.removeEventListener('mouseleave', handleMouseLeave, false)
256 |       }
257 |     }
258 |   }, [hover, focus, delayIn, delayOut])
259 | }
260 | 
261 | // Based on the `cloneWithRef` from react-dnd
262 | // Copyright (c) 2015 Dan Abramov, MIT License
263 | // https://github.com/react-dnd/react-dnd/blob/fcbe0e0252422efeb187b2471d0075c808b80fe1/packages/react-dnd/src/utils/cloneWithRef.ts
264 | function cloneWithRef(
265 | 	element: any,
266 |   newRef: any,
267 |   props?: any,
268 | ): React.ReactElement<any> {
269 |   const previousRef = element.ref
270 | 	
271 | 	if (!previousRef) {
272 | 		// When there is no ref on the element, use the new ref directly
273 | 		return React.cloneElement(element, {
274 |       ...props,
275 |       ref: newRef,
276 | 		})
277 |   }
278 | 
279 | 	return React.cloneElement(element, {
280 |     ...props,
281 | 		ref: (node: any) => {
282 |       if (typeof newRef === 'function') {
283 | 			  newRef(node)
284 |       }
285 |       else {
286 |         newRef.current = node
287 |       }
288 | 			if (typeof previousRef === 'function') {
289 | 				previousRef(node)
290 |       }
291 |       else if (previousRef) {
292 |         previousRef.current = node
293 |       }
294 | 		},
295 | 	})
296 | }


--------------------------------------------------------------------------------